Visual Standards in Dashboard Design

by | Jul 6, 2017 | General BI

Reading Time: 10 minutes

People often confuse design with style. But this is misguided. They do not mean the same thing. Design principles do not change. Yet style is changing constantly.

Tweet: Visual standards in dashboard design

In this article, I am going to take a look at visual standards in dashboard design. We’ll examine how you can use design principles to determine the best dashboard – both in style and in functionality – for your users.

Style preferences

Here are 3 shoe styles: conservative, functional and flashy.

The choice of style is a personal one. Do you want something that’s classic? Something that is a little edgy? Or something flashy? Your audience may prefer one style over another. Their preference may differ from what you prefer.

When it comes to deciding on a style for your dashboards, my advice is to have a conversation about it early in your process. Ask questions about style in your survey of stakeholders. Get agreement about the direction of your style BEFORE you begin any work.

Get the agreement in writing. Say, “These are the style parameters that we will work within.” And then list the font names, color codes, style descriptions like “conservative” and layout components that are agreed upon and have everyone sign the document like a contract.

If you do not use this method, disagreements about style can eat up a lot of valuable time. If disagreements arise, go back to the agreed upon style document and point out that you have adhered to the agreed upon style.

Now let’s take a look at some key considerations about dashboard design. These considerations will hold true for all dashboards, regardless of the intended audience or industry.

What should go on your dashboard?

Let’s start with the most important consideration. It’s one I have already mentioned – your audience. Use what you know about your audience and their needs to start to build a very useful dashboard.

The entire process flows like the shape of a funnel.

You’re going to start with lots of information and hone all of it down to only what is needed.

Once you’ve surveyed your users and gathered all the content you’ll need, you need to make some decisions about layout.

Here’s some content that might go on a sales manager’s dashboard.

If everything has equal importance to the end user, the dashboard might look like this.

But when we know that “Sales by Product” is the most important thing to the audience, we make it larger and display it in the upper left-hand corner of the page.

Essentially, you are contrasting size and position to differentiate the “Sales by Product” portlet from other portlets on the page. The highest contrast on a page will receive the most attention.

Other forms of contrast you could use instead of size and position are: shape, hue, saturation and value. To contrast shape – you might have the most important item displayed within a circle instead of a rectangle. For hue contrast – if your portlets exude a gray feeling, use a colorful background behind the most important item. You’re probably starting to get the picture. So, you could contrast saturation or value too. Saturation is the intensity of the hue. Value refers to lightness and darkness of a hue.

Visual chunking

You might wonder just how many portlets you should display on a dashboard. It depends on your audience. Airplane pilots have hours and hours of training and need to know the information displayed on their dashboard to get their jobs done.

Are your analysts used to looking at this many pieces of data all at once? Is this amount of data even needed for them to do their jobs?

When there is a lot of data to communicate, one wonders if the audience will be able to effectively USE all of it.

Just like the riddle: “How do you eat an elephant?” … “One bite at a time.” … data displayed on a dashboard can only be consumed one piece at a time. The data must be processed by the end user to turn than data into meaningful information. Good dashboard design makes it easier for the audience to see and process the data they are seeing.

So how much data SHOULD you display on a dashboard? You might want to try using “Miller’s Law”. Miller’s Law states that humans can only process between 5 and 9 pieces of data in short-term memory. In other words, 7 plus or minus 2 is the ideal amount of “stuff” to display. When there are more than 9 pieces of data, use “chunking” to facilitate use of the data in short term memory.

Here’s an example of visual chunking.

Photo serves as an example of "visual chunking".

And this is another example of chunking.

How do you go about chunking portlets on a dashboard?

You might want to think about it like an exercise in fashion.

Just as Glamour magazine advises women NOT to combine too many conflicting patterns and shapes in one outfit … I advise not to combine too many different sizes and shapes on one dashboard. If you have a lot of similar shapes, chunk them together.

A refrigerator can be a sort of dashboard.

In an emergency, one might leave a note on the fridge. But if the surface is cluttered and too busy, that important note will never be noticed.

It’s the same with dashboards. If a dashboard is too busy, an important alert may not be noticed. Don’t clutter your dashboards.

You’ve got to act like a filter. You’ve got to filter the information about your users and come up with a solution that’s right for them.

What is the minimum amount of data needed for the user to get their job done? If you have a power user that number might be 42! So chunk the 42 items into 5 to 9 smaller areas.

Other user considerations

When you survey your users, you may also want to find out if they have any physiological limitations that would be important to know as you design the dashboard. For instance, some people have trouble distinguishing levels of gray in low light settings. For these people, muted colors are nearly impossible to tell apart.

You should also survey users about their technical backgrounds.

As you act like a filter, you’ll be keeping the needs of the user at the forefront of your key considerations. You can then start your first dashboard. Get feedback. Revise. And repeat until you have the audience’s ideal dashboard.

It’s all about leveraging the fundamentals of design to lead the audience to see what is most important to see.

Simplified User Interface

Let’s look at how Diver’s user interface design has changed. Our Auto Parts Demo showcases the look and feel available with version 6.4 of Diver and DivePort.

Although there is nothing “wrong” with these styles, we wanted our version 7.0 of Diver to have a fresh look and feel.

Here is the look of one of our latest products, DiveTab.

With DiveTab, we wanted to provide a simple and consistent user experience for our customers. The iconic user interface element of DiveTab is the menu page that you see here on the right. The menu has large banners on top and buttons with big icons. You can click on one of the buttons to view reports or presentations on the full screen. DiveTab is super easy to use.

Because the look and feel of DiveTab was so popular, we decided to bring the DiveTab design principles into DivePort.

You can see the result of integrating these design principles in the new look and feel of our healthcare demo. Two major user interface changes have been implemented in this demo: the Simplified User Interface (SUI) and the Skyline skin.

The Simplified User Interface brings the same navigation system from DiveTab to DivePort. These two changes made the DivePort display look cleaner — even though there are many things on a single page. This resulted ultimately in an application that is easier to use.

Self-service dashboards

So, as you can see, dashboard design is easier with the Simplified User Interface. Now, Dimensional Insight has gone one step further to make dashboard creation easier for everyone — not just administrators – with self-service dashboard functionality. The self-service functionality is part of the 7.0 platform. It is NOT available in 7.0 solution. And for clients that add Measure Factory to 7.0 platform, you gain increased automation functionality.

But what IS self service dashboard functionality?

To help illustrate this functionality I’d like to have you contact us for a short demonstration. I can think of no better way for you to understand the full features and benefits of this exciting new development. To request a demo, simply write to us at [email protected] and ask for a demonstration of the self-service dashboard functionality. One of our industry experts will get back to you to schedule a personal demonstration at a time that is best for you.

Resources

Let’s review some resources that you can use on your own.

Survey Monkey

When you have a lot of users to survey about their dashboard preferences, it may be useful to use a tool like Survey Monkey. It is easy to use and free to get started.

Sample questions

There are many questions you’ll need to ask your user. Here are a few to help you start thinking about what to ask.

Blog articles

I’ve written several blog articles that focus on certain aspects of dashboard design. Here’s a list:

And if you go to none of the other resources referenced in this article, you should at least sign up for our blog, which you can do in the right-hand sidebar on this page.

By doing so, you’ll be notified of my future articles, as well as the valuable articles written by other staff here at Dimensional Insight.

For Diver users who want to learn more

Here’s some additional information just for Diver users. You can find information about how to adjust the colors and fonts in a portlet for version 6.4 in the user manual on our customer website. Just go to our home page and click on “Sign in” in the upper right-hand corner of the screen. This takes you to the sign in page where you can click the link to sign in to either the customer site or partner site. You WILL need a password to log in to these sites. If you do not have a password, contact support at [email protected]. On the Customer or Partner site home page, click the link for “Downloads”. On the Downloads page, there is a “Manual” column on the far-right hand side of the page. This is where you will find the 6.4 manual.

Online help for 7.0 is bundled with the software. The DivePort section of 7.0 online help is currently under development and coming soon. In the meantime, 7.0 users should refer to the 6.4 manual that you can access through 7.0’s Workbench.

If you would like EVEN more help, you can sign up for our class on Dashboard Design through our Training department. It is excellent!

The best way to sign up is to contact support at the email address shown here.

Rose Curtis

You may also like