Dean Blackborough.com

As I’ve mentioned in previous blog posts, I spend a large part of my time working on B2B Apps for my clients, the sort of Apps that manage a large amount of data. UI (User interface) and UX (User experience) for B2B Apps is tough, especially when you are primarily a developer.

The Problem

I recently needed to build a small subsystem for a client and the brief was effectively a single row on a spreadsheet with at least twenty-two columns of data. I know, helpful right?!

The brief was fine, I knew exactly what functionality the client needed, the issue was creating an easy-to-use UI that had great UX. My solution couldn’t just be a duplication of the spreadsheet on the web.

The Solution

There were a couple of obvious improvements I could make immediately. If data is duplicated among the rows, I can create a hierarchy. This reduced the “width” of the data; however, I was still left with seventeen columns of data.

I split the data a little more and managed to break it down in such a way so that the largest repeatable section was eleven columns wide, this was workable. Due to the nature of the problem, these eleven columns need to be configurable together.

Initial Feedback

I got an example page working and although there was a lot of data, I could read it. I sent it to the client to review and they were happy although they found it a little tough to parse. This is a common UI problem, especially with B2B Apps that have a lot of data. As developers, we are close to the data and can easily parse it, but we need to think about the users.

Improvements

I took a step back and thought hmm, why is it difficult to read? There was visual separation between the data, but it wasn’t clear enough, I needed some colour and spacing. I alternated the colour of headings, ensuring consistency with heading types, added quite a bit more spacing and then boom, everything looked great. The client was happy

Now the UX

With the UI sorted I needed to work on the UX. The preview I showed the client was just for viewing the resulting data, we still needed all the management views and forms. For this I took the UI the client was happy with and added the relevant action controls, copy, edit, delete etc. Additionally, management pages only show a subset of the data, data that is specific to the action in question.

Still learning

As mentioned, most of the Apps I created are B2B. These Apps need to look pleasing, but the UX is far more important. I struggle with both, especially the UI. After twenty-five years creating Websites and Apps I’m still learning new tricks. One thing that I continue to overlook is spacing. You really do need to ensure there is enough spacing between sections of data, it is amazing how much difference a little space makes.

The blog post is part of a continuing series talking about a complex B2B App I created for a client. You may be interested in the previous blog post where I talk about needing to integrate with Business Central using OAuth2.

So, the update, how is it going?

I’ve now used Tailwind in anger. I’m far enough into building the new App to provide an update on how things are going.

For someone who has used Bootstrap forever, there is a little to learn. You get nothing for free with Tailwind and what I mean by that is that you need to define everything, that is the point.

In Bootstrap you are using defined components, buttons, cards, everything has a pleasant default. When you copy the example for a card, it will have some nice padding, margins and fit with everything else. With Tailwind you need to define everything which is both a blessing and curse. Which it is depends on how you create your HTML and whether you have a vision of what you want.

I purchased a TailwindUI subscription which has been incredibly useful in helping me get started. If you are a solo developer and not that great at design, I recommend purchasing a subscription, you won’t regret it.

Components

I’m a huge fan of components, I’ve been creating reusable view components since the days of Zend Framework 1. If there is a chance I’m going to duplicate some HTML and it makes sense, boom, I create a component.

This approach works well with Tailwind. Yes, you need to define many more styles on an element, however, if it is all behind a reusable component that you define once, who cares?

If you tend to develop with the same framework, in my case Laravel, these days, the more components you create, the more components you will have for the next project. In the last four years I’ve created a substantial library of Bootstrap and Tailwind view components.

All Good?

I’m not done with the new App yet so my opinion of Tailwind may change but so far, yes, I’m very much enjoying it.

My biggest issue is having to context switch between Bootstrap and Tailwind. I have several personal and client projects which I support daily. Occasionally I run into an issue where I’m trying to use the wrong styles and wondering why it doesn’t work.

I might write another blogpost when I’m closer to release. At that point I should have hit more hurdles so should be able to provide a more detailed update on Tailwind.