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.
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.
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.
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.
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.
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.