Data Visualization and Report Usability Guidelines for Developers

This blog post is a short introduction to data visualization and reports usability design.

What is UX/ UI/ Usability?

First, to understand the subject better, a few important key concepts are shortly explained below:

• User Interface is a “shared boundary for the exchange of information between human and computer,” and it is a big part of the User Experience.
• User Experience covers all aspects of a user's interaction with a product, from how easily they can interact with features to how they feel when doing so. In addition to Interface design, other components affecting User Experience can be, for example, Brand design, Interaction design, Information design, and Service design.
• Usability is a quality attribute that assesses how easy it is to use a certain product or service. In this case, we are trying to make our data and insights as easy to interpret (usable) as possible by designing the User Experience and User Interface well.

Why does Usability Matter in Data Visualization?

Good usability means users can accomplish their tasks quickly, with minimal stress and errors, and ultimately feel satisfied in their interaction with a product. When the goal is to make decisions based on visualized business data, the answers to the desired questions should be easy to find, and it is especially important that the results are interpreted correctly.

Aesthetically pleasing and easy-to-use tools make the overall experience nicer, reduce erroneous interpretations, and increase trust in data, promoting a data-driven culture in decision-making. In addition, saving time with good tools is just generally pretty cool.

Tips and Guidelines for Developers

Below are a few guidelines and tips that are easy for everyone to incorporate into their own work without much study or effort but which clearly improve the usability of data dashboards. These guidelines were originally written by Jakob Nielsen in his book “Ten usability heuristics” (2005), and only some of them are presented in this post; as with modern tools such as Power BI, many of the original considerations become self-evident and taken care of.

1. Visibility of System Status

The first usability guideline is the visibility of system status, and the main point of the rule is that the design should always keep the user informed about what is going on. Communicating the current status allows users to feel in control of the system and take appropriate actions to reach their goals. A common rule of thumb is that the user should always be able to tell what is going on with the view after looking at it for 10 seconds, or else the view might be too complex.

In dashboard design, this rule can be applied by always having:

- Headline on the report page
- Clear titles on visuals
- Easy to see if buttons or slicers are selected
- Easy to see if something is a button or selectable element

Below is a dashboard example with made-up data to show these points in action:

2. Consistency and Standards

The next heuristic is consistency and standards, where the main point is to keep the user’s life simple by having as much consistency as possible in the design. The goal is that users don’t have to think too much when they are trying to find information, and they don’t have to re-learn everything when they switch reports or report pages.

Consistency can be divided into internal and external consistency, where internal consistency can be achieved, for example, by having a similar layout between pages, using colors to standardize elements, and using the same definitions for the same things. On the other hand, external consistency can mean industry standards, web standards, and familiar icons and elements, which should be acknowledged in the design because people spend most of their time on other applications. Below is a dashboard example with made-up data to show these points in action:

3. Flexibility and Efficiency

The next guideline is flexibility and efficiency of use, which is very important, especially when thinking about SaaS products or other products where we do not always know the user very well and have lots of different users. The main point is to recognize that we have users of different levels, and the product should satisfy all of them simultaneously. The balancing between not confusing the normal users with too much information while still keeping the so-called power users happy can be surprisingly hard. The best way to approach this problem is to keep the main layout as simple as possible but add different shortcuts, accelerators, customization, etc., for the power users. The goal is to make the application efficient for everyone and flexible for power users.

Below is a dashboard example with made-up data to show these points in action:

4. Aesthetic and Minimalistic Design

Finally, last but definitely not least, we have an aesthetic and minimalistic design. The main point is that the simpler we can achieve the same goal, the better. We at BI Book want to promote clarity. That is exactly our job as front-end analysts to take complex real-world concepts or complex financial data and present it with good visualization so that it is clear and simple to understand.

To achieve this, the interface should never contain irrelevant or rarely needed information because every extra unit of information competes with the relevant information and diminishes its relative visibility. When designing a data visualization or dashboard, the purpose of that page should always be clear. By only focusing on the essentials while also thinking about scale, visual hierarchy, balance, and contrast of the elements to communicate importance and rank, purposeful and beautiful designs can make a big difference, and your data can really come to life.

Below is a dashboard makeover example to show these points in action:

‍