Ten key elements for effective dashboard design
Dashboards have become the de facto face of performance management applications and are increasingly used in business intelligence (BI). But for every dashboard that effectively displays pertinent business information, there’s another that is simply a set of pretty graphics that are not used for any business decision.
Effective design will differentiate the winners from the losers.
There are 10 key elements to designing effective dashboard applications:
1. Involve businesspeople in dashboard design
The businesspeople in the enterprise are your dashboard “customers.” As with any product or service, you have to offer them something they need and will use. Many BI or corporate performance management (CPM) projects fail because the businesspeople do not use the dashboards — they go back to their spreadsheets. In order to encourage dashboard usability, you need to start with the basics: what they have now, what they would need to shift to a new system, and what they ultimately want.
Business involvement is not limited to gathering business requirements and setting priorities. They should also participate in the development, testing, deployment and training phases of your project. Businesspeople need to be involved in the entire dashboard lifecycle to really produce what the business side needs.
2. Use an iterative dashboard design approach
It’s a common lament of developers: “I built what the business asked for, but now that they’ve seen it, they say that it’s not what they need!” They fell into the trap of thinking that the businesspeople knew what they wanted before development began and that requirements do not change. This is the risk of using the traditional project development process that many IT groups follow. This approach works when business needs are well defined and static, but that is often not the case with CPM.
Dashboard development calls for an iterative design approach that involves getting the requirements, prototyping the design (with data), getting business feedback, refining the design and then doing it all over again. The business evolves, and your dashboard needs to evolve, too.
3. Focus on the data in the dashboard
Developing a great-looking dashboard that doesn’t have the data which the business is looking for is worthless. IT’s prototype with the vendor demo might have looked great, but the excitement wears off when there’s no substance behind it. While the dashboard is being developed, make sure someone is focused on getting data to populate it.
4. Include relevant key performance indicators
After getting the data, the next requirement that trips up the usefulness of dashboards is defining relevant or consistent key performance indicators (KPIs). There are two common pitfalls that organizations encounter in this area. First, many organizations get the level of detail needed to define the KPIs and then fail to validate those metrics with executives. The people reporting to that executive may have varying opinions on how to define KPIs, but it is the business decision-maker, i.e., the executive, who really determines how to measure performance. Second, some organizations fail to gather KPI definitions from across the enterprise, so business groups end up debating the numbers. If a dashboard is to be relevant, it needs to be consistent across an enterprise. “A single version of the truth” applies to the data and the KPIs presented in a dashboard.
5. Remember that one size does not fit all
Businesspeople in an enterprise have diverse information needs. Different groups, business processes and management levels need different data, KPIs and analytics from a dashboard. Dashboard designers need to take input and involve businesspeople from many groups to truly meet enterprise demand. Too often, only a few businesspeople are involved in dashboard design and feedback. In some instances, only business power users are consulted. The quickest way to get businesspeople to go back to their spreadsheets instead of using your dashboard is to leave out data relevant for them.
News portals, such as Google News and MSN, recognize that one size does not fit all, so they allow their users to customize what they see. You need to follow this and enable data diversity.
Dashboard tip: Different users have different needs
Click to enlarge
Image reprinted with permission from BITadvisors, Inc.
6. Use design principles from news organizations
Newspapers and news portals such as CNN and The New York Times follow basic principles in designing their front pages. First, they use a constant template for where they place information, so that every time people look at the paper or website, they know where to find things. Similarly, businesspeople should be able to use any of your dashboards and easily find what they need. Second, graphics and pictures are used to support telling the story and to grab your attention. In the same way, graphs on a dashboard need to grab a businessperson’s attention and visually depict the data in a clear, meaningful way.
7. Keep data in the dashboards current
A businessperson can use a dashboard only if the data is current. This does not necessarily mean that the data has to be real-time, but it cannot be out-of-date for whatever action the business is trying to take. Daily, weekly or monthly data may be what is needed, but the dashboard must always feature the current iteration of that data.
8. Allow drill-down capabilities within dashboards
Just as you go from the front page to deeper pages within a news site, a business user often has to drill into the details beyond the data to determine what business action is called for. A report or graph displaying a trend is nice, but what is useful is drilling into the detail to see what is causing the trend and in what area the business user needs to take action.
9. Include actionable information
Performance management applications require a business to monitor, measure and act upon data. The dashboard is only a means to an end; it is the action that produces the results that business is looking for. When designing dashboards and talking to the business users about what they want, you should also ask how the dashboard helps in analyzing information and making decisions. If the dashboard does not help users take action, then it needs to be changed until it does.
Dashboard designers can get caught up in designing reports for the business to view rather than act upon. Too often, dozens or hundreds of reports are produced just because they have always been created, but no one is acting on data in them. A dashboard created without the context of a businessperson doing something with the information is not a dashboard worth developing.
10. Don’t include too much
Everyone (except the person who created it) hates the PowerPoint presentation or website that is littered with stuff, has bright colors and has the latest “flashy” gadget. Contrast that visual with the simplicity of the Google homepage. Enough said.
Using dashboards is the most effective method of presenting information to the business to enable performance management and foster effective analytics. Just as paint on a canvas does not make a beautiful painting, simply using dashboard software does not produce an effective tool for business. Incorporating these 10 principles will help you build effective dashboards for your organization.
About the author
Rick Sherman has more than 20 years of business intelligence and data warehousing experience, having worked on dozens of implementations as a director/practice leader at PricewaterhouseCoopers and while managing his own firm. He is the founder of Athena IT Solutions, a Boston-based consulting firm providing DW and BI consulting, training and vendor services. Rick blogs on performance management, DW and BI at The Data Doghouse. You can reach him at email@example.com or (617) 835-0546.
In addition to teaching at industry conferences, Sherman offers on-site DW & BI training, which can be customized and teaches public courses in the Boston area. He also teaches data warehousing at Northeastern University’s graduate school of engineering.
Don’t miss the other installments in this dashboard guide
How to get started with dashboards
10 key elements for effective dashboard designs
Executive dashboards and data visualization trends and future outlook
Working with dashboard editors for streamlining and increased user adoption
Real-life examples of effective dashboard design
How to create effective dashboards and scorecards
Some good pitches that need to be notice making a web:
- Users don`t read. Use as little writing as possible.
- Users don`t scroll. Don`t make your pages scroll.
The underlying principle here: “Understand the nature of your site`s users, business, and content, and you can create a successful design.”
It`s very important to know the nature of the content – is it important information on the last page? Are my users have a fast or slow connections? And from my business point of view – Do I need more advertising impressions?
- Font size “1” should never been used. No one can read it.
- There should be a maximum of 7 links on each page; more than that and we lose the user. It`s just too many choices.
- users won`t click on items they believe are advertisements. Banner ads work only if they appear on the right side o the page.
- Three goals of a site have to be identified to determine the direction and voice for the site.
The process of answering these questions is called requirements gathering, and NO SITE SHOULD BE BUILD WITHOUT IT!
- What are the business goals? Customer loyalty? Investor excitement? Avoiding going over budget?
- What are the engineering goals? easy to maintain? Extensible? Avoiding having to rebuild the current infrastructure?
- What are the sales goals? More banner space? Customized pages for co-branding opportunities?
- What are the marketing goals? Reinforced branding? Gather customer feedback?
- What are the users goals? I want to learn? Find? Buy? Say HI! to a friend? Get my work done quickly?
WHERE YOU ARE?
Logos remind people whose site they are on; headers, breadcrumbs, a navigation bar that shows where you are , and color-coded sections are all proven ways to orient a user within the site.
In a good navigation design, links looks clickable.
Display a message letting folks to know what`s going on. Animation is key to this – movement gives sense of activity.
Did you call the HELP section “Information support” on the home page? it had better NOT be called “Help” in the interior pages, or confusion ensues.
Preventing. Use clear, brief, conventional language in your constructions and dialogs.
Protecting. Save user-entered information. Nothing is more frustrating than write long e-mail and then loose it.
Informing. If an error occurs, tell users exactly what`s happened, use a nonjudgmental tone and try to help them recover.
Styling and advising how to make useful NAVIGATION:
Top Horizontal Bar Navigation
Top horizontal bar navigation is one of the two most popular kinds of site navigation menu design patterns out there. It’s used most frequently as the primary site navigation menu, and is most commonly located either directly above or directly below the site header of all web pages in a site.
Common Characteristics of Top Horizontal Bar Navigation
- Navigation items are text links, button-shaped, or tabbed-shaped
- Horizontal navigation is often placed directly adjacent to the site’s logo
- It is often located above the fold
Vertical Bar/Sidebar Navigation
Vertical navigation is one of the most versatile patterns out there, able to accommodate a long list of links.
It can be used alongside sub-navigation menus, or on its own. It’s easily used for primary site navigation that contains a lot of links. Vertical bar/sidebar navigation can be integrated into almost any kind of multi-column design layout.
Common Characteristics of Vertical Bar/Sidebar Navigation
- Text links for navigation items are very common (with and without icons)
- Tabs are rarely used (except for the stacked tabs navigation pattern)
- Vertical navigation menus usually have plenty of links
Tabs navigation can be styled virtually any way you want, from realistic, textured tabs that look straight out of a notebook to glossy, rounded tabs and simple, squared-edge tabs. They’re seen on virtually every kind of site, and can be incorporated into almost any visual style.
Tabs have one distinct advantage over other types of navigation: they have a positive psychological effect on visitors. People associate tabs with navigation, because people are used to seeing tabs in notebooks or binders, and associate it with turning to a new section. This real-world metaphor makes tabs navigation intuitive.
Common Characteristics of Tabs Navigation
- Generally resemble and function like real-world tabs (as seen in filing systems with folders, notebooks, binders, etc.)
- Usually horizontally-oriented but occasionally vertical (stacked tabs)
Breadcrumbs, which get their name from the Hansel and Gretel fairy tale of leaving breadcrumbs along the journey so they could find their way back home, show you where you are on a website. They are a form of secondary navigation, helping support the site’s primary navigation system.
Breadcrumbs are useful in sites with multiple levels of web page hierarchy. They help orient visitors as to where they are relative to the entire site. If a visitor wants to go back a level, they can just click on the appropriate breadcrumb navigation item.
Common Characteristics of Breadcrumb Navigation
- Usually formatted as a horizontal list of text links, often with left-pointing arrows between them to denote hierarchy
- Never used for primary navigation
Tags are commonly used on blogs and news sites. They’re often organized into a tag cloud, which may arrange the navigation items alphabetically (often with different-sized links to indicate how much content is filed under a particular tag), or in order of popularity.
Tags are excellent secondary navigation and are rarely seen as primary navigation. They can aid in findability and site exploration. Tag clouds usually appear on either a sidebar or footer.
Common Characteristics of Tags Navigation
- Tags are a common feature content-centered sites (blogs and news sites)
- Only text links
- Links are often of varying sizes when arranged in a tag cloud to denote popularity
- Often included in a post’s meta information
Common Characteristics of Search Navigation
- Search bars are usually located in the header or near the top of a sidebar
- Search bars are often repeated on auxiliary sections of a page layout, such as the footer
When to Use Search Navigation
For sites with tons of pages and complex information architecture, you certainly need to include a search feature. Without it, users are likely to get frustrated having to wade through links and multiple levels of navigation to get to the specific information they want.
Fly-Out Menu and Drop-Down Menu Navigation
Fly-out menus (used with vertical bar/sidebar navigation) and drop-down menus (typically used on top horizontal bar navigation) are great for robust navigation systems. They keep the overall look of your site uncluttered, but also make deeper sections easily accessible.
They’re generally used in conjunction with horizontal, vertical navigation, or tabs as part of the site’s primary navigation system.
Common Characteristics Fly-Out Menu and Drop-Down Menu Navigation
- Used for multi-level information architecture
- Links displayed in the menus are child items of the primary item
- Menus are most often activated by mouse hover, but sometimes also mouse click
Faceted/guided navigation (also called faceted search or guided search) is most commonly seen on e-commerce sites. Basically, guided navigation presents you with additional filters of content attributes. Say you’re browsing for a new LCD monitor, the guided navigation options might list things like size, price, brand, and so on. Based on these content attributes, you are able to navigate to items that match your criteria.
Guided navigation is invaluable on large e-commerce sites with a huge and varied inventory. Straight search options often make it difficult for a user to find what they want, and increase the likelihood that they might miss a product. For example, they might search for a product in “taupe” when you’ve got it marked as “tan” or “beige”, even though it’s exactly what they were looking for.
Common Characteristics of Faceted/Guided Navigation
- Mostly seen on e-commerce sites
- Usually let users filter multiple times for different characteristics
- Almost always uses text links, broken down by category or in drop-down menus
- Often paired with breadcrumb navigation
Footer navigation is mostly used as secondary navigation, and may contain links that don’t fit within the main navigation, or include a simplified site map of links.
Visitors who can’t find what they’re looking for in the primary navigation menu often look at footer navigation afterwards.
Common Characteristics of Footer Navigation
- Footer navigation is often used as a catch-all for navigation items that don’t fit elsewhere
- Usually uses text links, occasionally with icons
- Often used for links to pages that aren’t mission-critical
General Menu Usability
This article gives a great overview of some common-sense (but often underused) guidelines for menu design. Learn what the experts say about menu placement, use of visual information, and more.
Read More »
Many well-intentioned websites use drop-down menus that expand when the user hovers over them. This article explains why this tends to cause frustration and confusion.
Read More »
Drop-down menus get a lot of criticism for hindering usability, but sometimes they’re the best option. These tips will show you how to use drop-down menus for good, not evil.
Read More »
“Sticky” or fixed navigation menus can make a huge difference in a website’s usability. This post shows the pros and cons of switching to a sticky menu, along with some surprising statistics.
Read More »
More and more websites are using the “hamburger” (the ubiquitous three-line symbol for a menu) to save space on the screen, but hiding the navigation options isn’t always the best idea — especially for a desktop site.
Read More »
Large drop-down menus can easily fall into the trap of giving the user too many options or presenting the options in a confusing way. This article shows you what not to do if you’re using a drop-down menu.
Read More »
This post discusses navigation from a UX designer’s perspective and shows some creative alternatives to the traditional drop-down menu.
Read More »
Not sure of the best location for your nav bar? Learn about scanning, visibility, and priority to decide which option is best for your site.
Read More »
Browse through this collection of best practices, resources, and examples to get inspired to create a highly usable menu.
Read More »
Take a look at the results from these real-life nav menu A/B tests. You might be surprised at what a difference a small change in copy or functionality can make.
Read More »
Mobile Menu Usability
With mobile web traffic continuing to rise, creating a usable mobile experience is more important than ever. This article gives some basic guidelines on building menus for the small screen.
Read More »
Responsive design is a popular way to make a website work on multiple devices, but creating an effective menu within your responsive site can be a big challenge. Here are some ideas for building a responsive menu that works.
Read More »
For e-commerce sites, a bad mobile experience equals a loss of sales. From one-click checkout to the 44×44 rule for links and buttons, this is a list of things retailers can do right now to make their mobile navigation more usable.
Read More »
This article shows how to make good use of the limited space on a mobile screen without confusing users. It also includes some user-friendly alternatives to the “hamburger” navigation symbol.
Read More »
What does mobile menu usability have to do with quantum physics? And is it better to use an icon or a word to label the menu? Find out in this post.
Read More »
There’s more to mobile design than layout and speed. This article takes a deep dive into improving navigation — code included!
Read More »