Dashboard design

Dashboards are screens that contain both a) the tools needed for the user to take certain actions, and b) the information needed in order to gain insight and knowledge.

While we tend to think that dashboards are exclusively visualizations of analytics or data, they’re actually just intuitive home screens for multifunctional applications.

For example, consider the Facebook home screen. From here, users can see analytical data on the Pages they manage; which of their Groups have new notifications; how many invitees have RSVP’d to an Event they manage; and so on. Users that want a daily update can also use this screen, and, if needed, take action. This overview of information offers links to tools and information as needed, and is far better than forcing users to click around.

What is dashboard design?

Designing dashboards is about conveying the right information without inducing cognitive overload. We have to first decipher what data is essential—then decide the right way to design it for our users.

The fundamentals of dashboard design

To start, we need to define what type of dashboard we’re designing: operational or analytical. This will directly define our design approach, and help us decide what types of navigations and data visualizations we’ll need to include.

While they can be a mixture of both operational and analytical, dashboards usually focus on one, which helps to accurately frame the user’s core needs and hone in on the right mindset moving forward.

Operational dashboards

Operational dashboards help users do things.

An interesting example of this is a stock trading app. Though it’s designed to help users interpret information, it also has a large number of operational functions: opening a trade, closing a trade, setting stop losses, etc. Since opening and closing a trade is all about timing, users need to be able to complete these actions quickly. This makes an operational dashboard with all the tools in plain sight far more effective than a platform that requires multiple interactions.

Analytical dashboards

Analytical dashboards help users interpret information.

A solid example of this is Google Analytics, used by designers, marketers, social media managers, and the like to analyze user traffic statistics, behavior, and demographic reports across websites and social media channels. These are represented by various data visualizations that make the reports easy to interpret.

What makes dashboard design so uniquely complex?

Dashboard design can be very different to other types of design due to the amount of data that needs to be displayed, and the number of ways that we can display it.

Prioritization

What makes Google Analytics work so well is that the key categories are divided up into even smaller dashboards: audience (who), behavior (what), acquisition (where). Each dashboard offers an informative overview of their respective category, and helps teams answer the big “why?” questions. An even more condensed overview is displayed on the GA home screen.

Additionally, reports tend to prioritize the top statistics. If needed, users can tap “View more” to see the rest of the report, but Google Analytics knows that the majority of the time, users only want to see an overview in the main dashboard(s).

Takeaway: Prioritize what users really want to see.

Customization

Dashboards are accessed several times a day, often for the intent of observing the same data visualizations. If you’ve ever used a good dashboard, you were likely able to customize it (because having too much information to digest isn’t helpful for anyone).

Takeaway: Offer users customization for better usability.

Usability

When we do need to truncate information for better readability, there are some things to keep in mind. For example, when filtering information, an autocomplete search bar is far more intuitive than a select box. What’s even more intuitive (when the situation allows) is the use of simple buttons. From a usability and accessibility standpoint, complex UI elements make it trickier for users to sort and filter information.

Takeaway: Enable users to work faster, not harder.

Data visualizations

Data visualizations apply specifically to analytical dashboards, and help organize and communicate meaning. To helps users reap the proper insights, we need to think carefully about the type of data visualization to use.

• Pie charts: comparative
• Bar charts: comparative, but with more variables
• Graphs: for measuring trends over time
• Tables: for sorting various variables

Takeaway: Communicate data in the most meaningful way for users.

Readability

Readability in this context refers specifically to the UX copy. Where there may be numerous on-screen data visualizations at one time, users will locate what they’re looking for using consistent communication styles. For example, if various table footers contain an inconsistent combination of “View more,” “See more information,” and “Click here for more audience reports,” users will quickly become annoyed and confused.

Takeaway: Use concise, consistent copy for faster user comprehension.

How to design a dashboard

With so much information to display, it takes a fair number of iterations to find the right balance of content.

Using wireframes with the user’s needs in mind, designers can iterate disposable ideas that are easy to throw away if they’re not hitting the mark. Wireframing also helps us fine-tune negative space (for better readability), and reduce overall cognitive load by focusing on information architecture, site structure, and usability. Take a look at the best wireframe tools here.

Designing modular, grid-based layouts

A common approach to wireframing dashboards is to use a modular grid. This results in a number of benefits that specifically relate to dashboard design.

• It can be customized via drag-and-drop.
• It adds the right amount of separation between each data visualization.
• It allows for more consistency in terms of user interface design.
• They can be stacked, making them naturally responsive.

Seamlessly collaborate, create, and iterate

When designing dashboards, a collaborative whiteboard tool like InVision Freehand is essential. With so many features and/or information to design, a tool that facilitates speed and iteration is key to finding the right balance of information architecture and usability.