Big Data in the Age of small Screens – The Basics of Usability and Data Density in operational Applications

While working as a Front-End developer and UX Designer, the challenge of creating efficient and goal-oriented user interfaces in a data rich context arises quite frequently.

How to display large amounts of data has always been a question for designers, but in the age of smartphones it has gained in importance as size constraints got to be omnipresent.

Operational vs informational

As the topic of user interfaces with a high level of data density is quite broad, I will focus on operational applications in this article. As opposed to informational interfaces which mostly face issues with data density in the context of corporate landing pages, product pages, infographics and dashboards and are solely used to convey information to a user in a way that is easy to understand, compare and absorb, operational interfaces allow a user to interact with the displayed data which allows them to achieve specific goals in their workflows.

When working with large datasets in applications, the need for tables in layouts often presents itself as they are very easily scannable for the users and manage to convey large amounts of information at the same time.

But tables can also be very frustrating to work with from the perspective of a UX designer, as horizontal space constraints have a huge impact on the ability to display all the necessary data in a way that it is still assignable to the correct datapoint for the user, scannable (in the context of the rows as well as in the context of the whole table) and comparable.

In this article I will try to shed some light on how data rich layouts in the context of operational applications can be implemented.

Who has to work with the UI

How operational user interfaces can be handled depends largely on who has to use them in the end. The higher the user sophistication (meaning the more often your users interact with the same views and the more training they get on how to interact with the application), the higher the data density and complexity can be as this can increase productivity in many data driven workflows.

UI trends vs functionality and efficiency / function over form

While many UX best practices apply to operational, data dense applications as well, some do not. Most common UX paradigms in web are meant to be used in an informational context as the majority of websites are mainly informational. Modern use of whitespace is a good example here. While generous whitespace and chunking of information usually helps with absorption while scanning content, this does not necessarily apply to operational interfaces where the users might work in the bounds of very clearly defined processes and workflows, they are familiar with. In a case like this, data density has to increase at the cost of aesthetic design (as it is commonly seen in web design at this time) to increase the productivity of the user.

Preparing the displayed data

This does not mean that you should cram all the information available in the backend into one large spreadsheet style table in the front end. Here are some tips on how to reduce the displayed data.

Decouple backend data from front end

Think of ways to group cells together. Even if a data element is stored in its own cell in the backend, it might be possible and even advantageous to group it with similar relevant information in the same cell in the front end. Common examples for this are compound names, addresses and even an email address as subtext in the same cell as the name.

Elimination of redundancy

In large datasets it happens quite often, that the same data is displayed multiple times in different ways and depending on workflows it might make sense, but often this redundancy can be removed without losing efficiency or comprehensibility. You can even go further and look for inter cell dependencies. If a cells value is not used in a specific workflow and is fully dependent on values of other cells, it does not always have to be shown in the front end.

Progressive disclosure

Another important point to keep in mind when designing for data rich applications is progressive disclosure. Which means to progressively provide data and functionality to the user as needed for specific tasks and workflows. Usually this means that a user starts with high level data which provides context and overviews and dives deeper into detail views specific to tasks they want to accomplish.

To accomplish this in a way that can increase the productivity of your users, not only do you have to know their workflows and use cases, but you also have to know exactly what kind of data they use, how the data points are important in their work and what the end goal of working with said data is.

In this way, the absorption of data by the user can be optimized without reducing efficiency, as the amount of visible data is adapted to specific workflows.

Vertical vs layered data density

When talking about progressive disclosure, two ways to accomplish this come to mind: vertical and layered. In vertical progressive disclosure, the data density increases the further the user scrolls on the vertical axis. This is more often used in informational contexts like product detail pages as a workflow for operational applications would have to be incredibly well defined for it to be efficient in this way.

Operational applications more often make use of layered progressive disclosure, which means changing views in one way or another depending on actions that need to be taken. Most commonly nowadays with the use of modals.

Displaying tables on mobile screens

If grouping of cells, elimination of redundancy and progressive disclosure are still not enough to reduce the data you have to display enough so it fits on all screen sizes, here are some ways to adjust data in tabular form, all with their own advantages and disadvantages.

Horizontal Scrolling

This approach takes the least effort design wise, as tables do not have to be adjusted to make it work and it is possible, no matter the amount and type of data. However, multidirectional scrolling makes fast scanning of information very hard and is confusing to users.

If it cannot be avoided, make sure to always show a column that helps identify a row easily.

Responsive Tables

Nowadays a very common solution are responsive tables, where rows in the dataset are rearranged to card like elements.

This is good solution when single data points have to be analysed without the need for context from the whole dataset. Horizontal size constraints can be circumvented by extending the datapoint vertically. But very often the whole point of a table is the ease with which datapoints can be compared to each other and to the whole of the dataset.

In the context of operational user interfaces, this strategy has the added disadvantage of making batch operations nearly impossible to use in an intuitive manner as datapoints will use a lot of the vertical space available on screen.

Abbreviation and usage of icons

The topic of abbreviations and usage of icons might be a bit controversial as both of those might not be very clear to untrained users. So as mentioned before, keep your users in mind. If you design an application for users who are very familiar with the data displayed, they will understand different representations of labels and values without much help. If your application is aimed to help untrained, casual users who are not familiar with the data displayed, an excessive amount of abbreviations and the use of icons which are not commonly used might not be a wise idea.

What to take from this article

There is no one correct way to solve the challenge of data rich user interfaces, but in my experience, the key points to keep in mind while designing are the following:

• Keep the user in mind. Get to know their workflows and the intricacies of the data they work with. It’s the only sure way to know where data can be omitted and how progressive disclosure of data makes sense in their day to day business.

• Do not get bogged down by common UI best practices, as they are often meant to help casual users absorb lots of data fast without the need to operate on the data or compare datapoints.

• Functionality over form. In the end, when talking about operational user interfaces, efficiency of the user is the most important. You do not have to make a perfect visual first impression. Applications like this will not be a company’s landing page where you lose your customer in the first few seconds if they do not like the visual design of the page. They usually have no choice but to use your application in their workflows, so we owe it to them to focus on making their task as easy as possible, even if the aesthetic design suffers.

So, my most important tips are to talk to the people who use the interface, work with production data whenever possible instead of placeholders and to get to know the data, its dependencies and complexities. In my opinion, those are the only ways to provide efficient solutions to your customers.