Professional Dashboard Design — What to Look For When Displaying Data

You can thank the darling of the digital world, its newest “trend”, being “data-driven”. Tack on that prefix to any headline and you’ve got yourself something as clickable as celeb gossip.

In fact, the growing need to share data-driven findings quickly or to mine data as a justification and guide for decisions has directly affected the rise in the global visualization market.

According to the Orbis Research Report, data visualization tools are poised to grow to $8 billion by 2023.

If you look at the evolution of dashboards, however, you’ll understand why this figure is not only warranted, it’s actually exciting because it signals that ever-greater innovations in dashboard design are coming our way.

This is what dashboards used to look like:

Now ask yourself: Which would you rather be using? Which of these would actually be of use in the long-term, without producing brain-overwhelm or optic-nerve-exhaustion?

Remember that design is all about empathy — so, before declaring a wireframe or a sketch project “done!” and ready to go, ask yourself:

How does my user feel? What are they expecting? Have these expectations been met? In fact, have they been anticipated at all?

The fundamental challenge of dashboard design is not merely a visual or aesthetic one.

Rather, it is a matter of choice. How do designers decide what information is required on a screen?

They must figure out how the dashboard can be:

• Displayed clearly, without distraction
• Presented or visualized in a way that can be quickly understood and examined for “snapshot” decision-making

Anytime you’re lost or caught up in the irrelevant minutiae (“Green button? Oval button? Include a shopping card logo?”) of dashboard design, here is a rundown of what truly matters.

While you’re busy managing projects, the effective dashboard design is managing your ability to manage those projects.

How? By showing you all the most relevant, actionable, and useful information right away.

The key is to represent this information in a simple and beautiful manner.

It needs to be readable so that users can understand, analyze and either learn more or make a decision based on what is being presented.

Simplicity, clarity and customizability

In order to be of use, and yet provide a great experience, dashboards must incorporate simplicity, clarity and elements of customizability.  FuseLab Creative is one of the best dashboard design studios in DC.

Trello’s dashboard riffs on the “Kanban Method” of productivity. The “cards” design not only mimics the ethos of that mode of organization, it allows users to customize and tile their view of their tasks.

As an example of a trifecta of these principles, Facebook’s Ads Manager dashboard display is also an example of this trifecta of principle.

Its dashboard is a high-level view of information on previous and current campaigns right as the user logs in.

You’ll notice there are several opportunities presented for a customizable view, from the sub-menu tucked away on the right-hand side of the screen, to the columns that can be sorted by “performance”, as well as the filters that can be applied and the tabbed designs that are views for each hierarchical part of a campaign.

You can see how dashboard design, then, is an intersection between use and experience. In this intersection, there are a couple of things you’ll need to ensure:

• Information needs to be communicated quickly, at a glance
• Information needs to be displayed clearly, using the available space without bombarding it
• Elements of the page should be customizable (through personalized skins, drag-and-drop or click-and-grab objects that are movable around the dashboard)

To go above and beyond, truly successful dashboard design incorporates some learning into its user interaction/experience.

This means a dashboard’s configuration might look a certain way at the beginning — a “standard” view. Then the software, over time, gains a sense of the user’s decisions, “learning” its user’s preference, and makes optimized suggestions.

How about that for a truly usable and delightful experience?

And what about functionality? Dashboard design is as much a student of functionality as it is a demonstration of use and experience. In fact, seamless functionality is at the heart of this use and experience.

In order to be classified as a “great” (i.e. effective and beautiful) dashboard, the functionality should include:

• The most essential information right away

• Multiple views, with clear initial data and the option to extend views through tabs, minimized views, drop-down menus and more
• Additional opportunities for the user to learn more (so information, too, has a clear hierarchy of use and needs)
• Filters that help the user decide what to show, what to display and what to hide

Think about a landing page or a sales page. As a user, you know that to find the most relevant information, you’ll have to keep scrolling down. The story unfolds as you do.

Now, think of your experience on a website. Each page, while connected to each other by the general brand, business or topic, has its own function. So, to get around you’ll want to click around.

Dashboards require a blend of storytelling (through data) and the functionality of a set of web pages. Every function is connected, making the dashboard, and its collection of functions and options and tools, an experience that relies on multiple elements.

Since each element is connected, the dashboard system design anticipates a sense of continuity between the pages and functions.

To keep the options from spiraling out of control, designers will use icons and symbols that are universally understood. Familiar patterns like tabs, menus, tags, and labels allow users to form a clear expectation.

In essence, you’re creating a fully-formed workspace with little add-on bits and pieces that users can click to and away from when they’re done.

Facebook’s Ads Manager here combines the expected “command” of “View Charts” to then trigger an extended and secondary menu that uses animation to open up. Like a seamless and dynamic object, it smoothly glides over. Users can use the “>” carrot at the top to “minimize” or hide that part of the workspace back down.

Let’s take a look at Airstory’s dashboard design, which allowed users to not only extend the usability of the SaaS through providing templates, it also found a way to monetize that extensibility.

Here is Airstory’s “templates” section, set in its dashboards. Clean, uncluttered and beautifully, if sparsely, designed:

All the expectations of the user are fulfilled. There are familiar elements that a user has seen before, which means Airstory did not have to educate them or build in a long learning curve.

The hierarchy of the file folders, the search menu, the “x” detailing to indicate that terms can be deleted, the “chat box” on the right-hand side corner — these are all part of familiar patterns.

Next, Airstory introduces a simple button that says, “Get More Templates”.

This leads directly to the “Airstory Market”, where users can purchase features/templates that would extend their use of Airstory. It’s simply a template that feels like the quick and painless purchase of an e-book or digital download.

Moral of the story: Airstory is smart enough to capitalize on behavior that has occurred before, not only familiar visual elements or patterns.

Users can tell instantly if a dashboard design has been well planned and professionally designed. Functionality is less important here than just good, clean design.

Organized and uncluttered environments are not only a joy to work in, they’re also easier to comprehend and parse.

Read also our post on the healthcare dashboard UI design best practices.