Display your results more effectively: Tips from a UX Designer

Megaputer Intelligence
6 min readApr 28, 2021
Photo by Tirza van Dijk on Unsplash

Helping data analysts create effective dashboards is a key task for User Experience (UX) designers. Incorporating multiple components into a unified report involves more than just a general knowledge of the user interface (UI) and UX. Even for seasoned UX designers, a great amount of effort is spent on distilling large amounts of complex information into a simple, clear storytelling report. As PolyAnalyst software UX designers, we work hard to incorporate web reporting features that enable users to create meaningful and interactive dashboards.

Recently, we received feedback from our users asking us for some tips on how to beautify their reports and make them more effective. In response, we decided to share a few tips on creating better dashboards and web reports, including some of the DO’s and DON’Ts for building them.

Tip 1: Start with a clear purpose & story

Think of the dashboard as a display to summarize key information for your audience. In a single glance, they can analyze trends and glean the types of insights that drive effective decision making. To achieve this goal, one should determine the most significant or high-level insights (blue: top segment) and display them more prominently in the dashboard.

Additionally, “Important Details” (brown: middle segment) and the “Background Info” (beige: bottom segment) are also important pieces of the story to include within the dashboard. These segments are easily ignored by data analysts; but, we would not recommend eliminating or reducing these segments. An incomplete story is an inaccurate one and may discredit the overall integrity of the final report.

Tip 2: Employ a clean layout

Information cannot be placed just anywhere on the dashboard, nor can sections of the display be sized simply to fit the available space. Items that relate to one another should usually be positioned close to one another.- Stephen Few, author of Information Dashboard Design

Dashboard content must be organized in a way that reflects the nature of the information being displayed. It not only needs to create efficiency for the audience, but it should also provide a manageable foundation for the report itself. Building modules is one method that can help you to create a basic structure and skeleton for your design, so that you can achieve an organized data display with effective alignment and consistency. We recommend keeping these DO’s and DON’Ts in mind when assessing your dashboard layout.

Plan ahead

Don’t approach your dashboard design without a plan, or you might get a dashboard like this.

Before designing the report dashboard, preparation and planning for all the visual components will reduce time wasted on trial and error. That means one should decide on what information should take priority ahead of time. And even then, the flow could be compromised when trying to cram too much information into one dashboard.

We recommend sketching a basic structure or “skeleton” for the design with some possible modules layouts (shown below). Once the basic structure is determined, identify what kind of visual components to include in the dashboard. This process will help you judge how effectively the key information is displayed and test the drawn-out framework. When everything looks good on paper or in theory, now it’s time to evaluate effectiveness.

Making a sketch of your planned design will result in a better layout

Pay attention to how your audience naturally reads information

The six principles of pattern recognition in the Gestalt School of Psychology https://hub.packtpub.com/dashboard-design-best-practices/

When making decisions on what information should go where, DO consider the way users naturally read and interpret information. The key design principles for many modern UX designers were proposed in the 1900s, when the Gestalt School of Psychology began studying human perception through a series of experiments. Pictured above is a summary of the six principles these studies uncovered.

Using these concepts as a guide, one can create dashboards with better structure and layout. This will help highlight information so the audience can quickly discern the information. For example, make sure to position key information from left to right on the dashboard, which is how most users naturally read and comprehend information.

Once the first row has been established, move down to the next row. Dependencies between the components in different rows will add enrichment to the dashboard and also an element of continuity. In this example, it is important to use a clean structure and an organized layout that guides the audience through the dashboard intuitively. Adopting this type of continuous flow helps the audience recognize the relationship between different groups of information more easily.

Tip 3: Reduce visual complexity

Don’t overload your dashboard with too many components. It occupies a lot of visual space and ends up distracting your audiences from obtaining key information at a glance. Do choose your key components wisely. Try to use no more than 5–7 different data components to create a view.

Try to reduce complexity by decreasing the number of components, appearance, colors, navigation, and the text length to simplify complex visuals on the dashboard. Additionally, don’t add too many irrelevant accessory elements to the dashboard. Remove formatting elements that add visual noise. If something feels unnecessary, it probably is and it’s not recommended to keep it in the display. Simplifying the visual aspect of the component makes it more powerful than an element that is over-embellished.

Tip 4: Utilize a clean typography

Don’t use expressive, flowery fonts or upper case for body text. These fonts can end up being distracting to the audience and decrease readability.

Do use a Serif or Sans Serif typeface. Some examples of Serif fonts include Times New Roman, Rockwell, Georgia, and Baskerville. Helvetica, Arial, Futura, and Franklin Gothic are some examples of Sans Serif fonts. Some designers utilize Sans Serif fonts for digital publications and Serif for print, but either option would give your dashboard a clean look that’s easy to read. Also, consider sentence case rather than upper case for the typography treatment. Using upper case or all caps is difficult to read and should only be used in special circumstances to refer to highlighted words or phrases of importance. Typography treatment is very similar to how one would type a business memo. All caps can denote anger or a lack of typing etiquette, and the same rule applies for dashboards and reporting.

D. Pay attention to text alignment

Text alignment plays a big role in readability, especially in data tables. Certain types of alignments are more effective for numbers while others are better for making comparisons between different rows.

Conclusion

We hope these design tips are useful when creating your next dashboard or report. Before you start the design concept, remember to always clarify what type of data and how much information the audience needs or wants to see. And be sure to carefully consider which information is truly the “Most Newsworthy”, and which information is just “background information” that adds little value. Also, once the dashboard is created, be sure to go back and ask the following:

  • Is the dashboard organized with a prioritized layout?
  • Are the visualization components displaying the proper level of detail?
  • Is there anything I can do to reduce the size of components or rearrange them to add clarity?

Most importantly, when it comes to design, practice is key. The more dashboards you create with these tips in mind, the easier the next design project will become.

Originally published at https://www.megaputer.com on April 28, 2021.

--

--

Megaputer Intelligence

A data and text analysis firm that specializes in natural language processing