Transcription

A Guide to Creating DashboardsPeople Love to UsePart 3: Information DesignAugust 2009 2009 Juice, Inc. All rights reserved.

A Guide to Creating Dashboards People Love to UseDashboard Design MattersDashboards have become a standard business tool over the last decade. Dozens ofdashboard building solutions have sprung up to meet the demand. Yet in the flurry oftechnology and enthusiasm, little attention has been paid to how to design focused,thoughtful, and user-friendly dashboards. Our three-part guide will show you the conceptsand give you the best practices to create a high-impact dashboard that people love to use.Traditional dashboard design focuses almost exclusively on defining the right successmetrics, then piecing together a bunch of charts and gauges on a single page. Thesetechniques yield dashboards with a hodgepodge appearance and confusing information.Traditional dashboard designtechniques result in confused solutionsThis guide will help you design moreintuitive and effective dashboardsIn the early days of the world wide web, it was good enough to simply have the rightinformation on the web page. The current industry-standard dashboards are no moreambitious. However, modern web design has moved on to seek a union of utility, usabilityand beauty. We must find a similar union when displaying data in business.This document approaches dashboard design in a holistic way, beginning with generalgoals and evolving to specific data presentation. Part 1: Foundation helped you identifyyour target audience, understand what type of dashboard you want to create and why it isvaluable to your organization. It concluded with guidance regarding how to focus yourJuice Analytics creates dashboards that business people love to use. Check out some of our work atwww.juiceanalytics.com/solutions/case studies/. Contact us at [email protected] 20092 2009 Juice, Inc. All rights reserved.

A Guide to Creating Dashboards People Love to Usemessage on the information and metrics that matter. Part 2: Structure helped you start ondesigning your dashboard, including what form it should take, how to design for audienceunderstanding, and what navigation, interactions, and capabilities will make yourdashboard useful and engaging. Finally, Part 3: Information Design dives into the details ofinterface and information design. You will learn how to lay out your dashboard and bestpractices for charting and data presentation.Clear presentation of informationThe third part of our dashboard design guide provides practical tips for putting informationon the page in a way that communicates effectively to your audience.We stand on the shoulders of giants in the area of information design, includingvisualization guru Edward Tufte, visual business intelligence critic and teacher StephenFew, and numerous leaders in the field of web design. This paper is our attempt tosynthesize some of the most important best practices while adding a few extra wrinkles.Information presentation is a balancing act—How do you convey a lot of informationwithout making it feel overwhelming? How do you capture attention without distractingyour audience? How do you make information feel simple yet profound?As we’ve done throughout this series, we will tackle the problem from the outside in. Firstwe share best practices for designing a clear, aesthetically-pleasing page. Next weconcentrate on the charts, table and visualizations that communicate the information.Here’s what you can look forward to:Section 1: Interface design1. Organize the dashboard page like a web design expert2. Choose the appropriate use of color to enhance your dashboard3. Make the right typography decisions to ensure attractive, readable textSection 2: Information display1. Pick the chart type that best fits your data2. Style charts to be attractive and effective3. Learn about advanced visualization and features for your dashboardJuice Analytics creates dashboards that business people love to use. Check out some of our work atwww.juiceanalytics.com/solutions/case studies/. Contact us at [email protected] 20093 2009 Juice, Inc. All rights reserved.

A Guide to Creating Dashboards People Love to UseSection 1: Interface designSimplicity is a primary goal of many well-designed websites—limiting visual clutter tohelp users easily navigate and understand the content. Dashboards share the same goal. Itis no surprise then that we can learn a lot from the rules and tools of web design to helpguide our thinking on creating dashboard interfaces. We can learn about:Organizing the page. Where should you place the most important content? How do youlay out charts and text to enable visual rhythm? How can white space help your audienceabsorb information?Color. What meaning does color bring to the dashboard? How do you pick theappropriate color palette and scheme for your situation?Typography. Why does it matter what fonts are used? How do you consistently use fonts toenhance the interface?Organizing the pageThe little things in a dashboard can make a big difference—like where you place the keymetrics, where you place charts, and how much information you try to fit into a page.Dashboards like the award-winning International Bank Dashboard (below) succeed atinformation design. However, its page layout leaves something to be desired. The data iscompressed to fit the page and readers can’t easily determine what is the most criticalinformation.Juice Analytics creates dashboards that business people love to use. Check out some of our work atwww.juiceanalytics.com/solutions/case studies/. Contact us at [email protected] 20094 2009 Juice, Inc. All rights reserved.

A Guide to Creating Dashboards People Love to Dashboards01.htmlA few things to keep in mind when laying out your dashboard:Pay attention to attentionYou’ll want to position the most importantinformation where people look first. But how toknow where someone will look on the page?Fortunately, studies show that people tend to scan apage in a similar manner. Imagine the image to theright is overlaid on your dashboard page. Theresearch indicates that users look first for informationon the top and left. Users also focus their attentiondown the left side. The center gets a fair bit ofattention as well. But the bottom and right may notbe noticed by your user at all.Juice Analytics creates dashboards that business people love to use. Check out some of our work atwww.juiceanalytics.com/solutions/case studies/. Contact us at [email protected] 20095 2009 Juice, Inc. All rights reserved.

A Guide to Creating Dashboards People Love to UseGridsMany web designers use something called a grid system—a series of columns and“gutters” of certain widths—to ensure that key lines in their designs align. This approachbrings a coherence and order to the page that puts users at ease.We can overlay a grid on a well-designed site like the New York Times to see how thissystem gets applied in practice.Not everything fits into one column, but it is obvious that this site has a pre-defined gridand sticks faithfully to it. The result is a clean, effective page layout. Here are tworeference articles to learn more about grid layouts: www.subtraction.com/pics/0703/grids are good.pdf -grid-based-approach/Juice Analytics creates dashboards that business people love to use. Check out some of our work atwww.juiceanalytics.com/solutions/case studies/. Contact us at [email protected] 20096 2009 Juice, Inc. All rights reserved.

A Guide to Creating Dashboards People Love to UseWhite spaceWe don't just see objects themselves; we also see the space that is not there. White spacein interface design is very important and too often overlooked. Maximizing dashboard realestate must also mean creating places for the eye to "rest" so that the non-white space hasmore impact. When we don't have sufficient spacing, everything runs together and wecan't see what is most important.White space can be used to delineatesections or help users see groupings ofcontent in a dashboard. Using white spacemay mean sacrificing one extra chart ormetric, but it can make a huge difference inuser comprehension.ColorMore often than not, dashboards get lit up with color like an over-dressed Christmas tree.The color is applied indiscriminately and adds little to the meaning of the dashboard.Appropriate use of color requires restraint. In our dashboard designs, we typically start byusing only grey, then we gradually add color where it conveys useful information.Color brings meaningColor can draw your eye to what is important and tie together similar things. For example,if we increase color brightness, it will attract attention and make a point seem moreimportant. Similarly, use of the same color hue can be used to connect things that arerelated.At a more subtle level, the color scheme we choose can evoke an emotion or feelingabout the dashboard. Colors can be broken into high-level dichotomies such as“earthtones” versus “unnatural” colors. We perceive earthtones as calming (Edward TufteJuice Analytics creates dashboards that business people love to use. Check out some of our work atwww.juiceanalytics.com/solutions/case studies/. Contact us at [email protected] 20097 2009 Juice, Inc. All rights reserved.

A Guide to Creating Dashboards People Love to Usehas said that these are the kinds of colors you want to use if you just want to use color verygently on your page). In contrast, unnatural colors jump out at your audience, makingthem ideal for showing an alert.Color to display dataWhen you are using color in your graphs to represent data, there are three types of colorschemes to consider: Sequential when you are ordering values from low to high. Divergent when the values are ordered and there is a critical mid-point (e.g. anaverage or zero). Categorical when data falls into distinct groups (e.g. countries) and thereforerequires contrast between adjacent colors.Juice Analytics creates dashboards that business people love to use. Check out some of our work atwww.juiceanalytics.com/solutions/case studies/. Contact us at [email protected] 20098 2009 Juice, Inc. All rights reserved.

A Guide to Creating Dashboards People Love to UseTypographyTypography is an obsession for some; it can include everything from choosing a typeface(i.e. font) to picking the right point size, kerning, tracking, and leading. In the meantime,you’ve got a dashboard to make. We conclude this section with a unique framework formaking decisions that ensure quality typography in your dashboard.Fonts are like wineIn the world of wine, we have reds and whites. The world of fonts is similarly bisected intoserif and sans-serif fonts. Serif is the name for the little decorative feet that come off theend of serif letters. Sans is french for “without” so sans-serif fonts don’t have the feet. Seriffonts are like red wines. Sans-serifs are like whites.Juice Analytics creates dashboards that business people love to use. Check out some of our work atwww.juiceanalytics.com/solutions/case studies/. Contact us at [email protected] 20099 2009 Juice, Inc. All rights reserved.

A Guide to Creating Dashboards People Love to UseAmong serif fonts, Georgia,Times New Roman, andPalatino are generally available.Think of these as the Merlot,Cabernet Sauvignon and PinotNoir of fonts. Georgia is alovely font that works well onthe screen, at different sizes andin bold and italics. It’s oureditor’s choice. Palatino can bequite elegant, while Times NewRoman is workmanlike.On the sans-serif side, somecommon fonts are Arial, Helvetica, Trebuchet, Verdana, and Tahoma. Trebuchet is a sassyfont. Verdana and Tahoma are cousins; Tahoma is a just a horizontally compressedVerdana. Helvetica had a movie made about it, so that gives you an indication itspopularity.How we readAccording to research at Cambridge University.well, you can read the details p 2Juice Analytics creates dashboards that business people love to use. Check out some of our work atwww.juiceanalytics.com/solutions/case studies/. Contact us at [email protected] 200910 2009 Juice, Inc. All rights reserved.

A Guide to Creating Dashboards People Love to UseIt’s amazing how quickly we can read this paragraph, given that very few letters are in theright shape. We recognize words through a combination of letter recognition and wordshape recognition. The words in this paragraph all have the right starting and ending lettersand they have approximately the correct word shape. This leads to an interestingconclusion: with capital letters, we do not have a distinctive word shape. All caps is lesslegible than regular text and generally should be avoided.Fortunately there are lots of other ways to emphasize text. Look at the following texttreatment:“If we don’t get out of the woods soon, we’ll be eaten by a bear,” whispered Timmy.“If we don’t get out of the woods soon, we’ll be eaten by a bear,” whispered Timmy.What is the effect when you bold or italicize text? Italics add a sense of emphasis andurgency. Italics can also look classy. Bold text, in contrast, is urgent and loud. When boldtext is part of a sentence, you’ll tend to look at it first. Here are your options for textemphasis:Juice Analytics creates dashboards that business people love to use. Check out some of our work atwww.juiceanalytics.com/solutions/case studies/. Contact us at [email protected] 200911 2009 Juice, Inc. All rights reserved.

A Guide to Creating Dashboards People Love to UseA simple font frameworkWith that background, we’d like to offer a simple framework for effective use of fonts inyour dashboard. With just few simple decisions, you can ensure that the text on thedashboard will both look good and communicate effectively. The majority of text on thepage falls into four categories: Body text is clean, readable content Headers separate and name major sections of your work Notes describe additional things the reader should be aware of. These should fadeinto the background unless we call attention to them. Emphasis text is what we want our reader to pay particular attention to.The following table describes an approach for deciding how to display each of these texttypes. The yellow highlights indicate where you need to make decisions.Juice Analytics creates dashboards that business people love to use. Check out some of our work atwww.juiceanalytics.com/solutions/case studies/. Contact us at [email protected] 200912 2009 Juice, Inc. All rights reserved.

A Guide to Creating Dashboards People Love to UseJuice’s Simple Font FrameworkYou need to make three basic decisions:1. Choose size and font of the body text2. Decide if the header is going to flip to serif or sans-serif—and whether it is going tohave any style3. Decide what to do about emphasis—color or (bold or italic)A few things things don't fit neatly into one of the four text categories listed above, such astable headers and graph titles. We tend to use a combination of styles to handle theseexceptions. Stick to this framework and we guarantee your dashboard will look better.Juice Analytics creates dashboards that business people love to use. Check out some of our work atwww.juiceanalytics.com/solutions/case studies/. Contact us at [email protected] 200913 2009 Juice, Inc. All rights reserved.

A Guide to Creating Dashboards People Love to UseSection 2: Information displayYour dashboard needs to tell a story with data. To do so, you’ll need to create charts andtables that highlight the right information and are easy to read. Your audience is probablydistracted and doesn’t love looking at data (as much as you do), but with the right choicesabout information display you can still reach them.This section starts by addressing the age-old question: What is the right chart to show mydata? Next we provide tips and tricks for better chart and table design. Finally, we havecompiled a set of best-in-class resources and hints for advanced data visualizationtechniques.Choosing the right chartWe are often asked “what is the right chart for my data?” Unfortunately there is no secretdecoder ring to point at data and see what kind of chart would work best. While we waiton that invention, let’s use an understanding of data types and chart types to uncover someof the mystery.Types of dataThere are two major types of data: categorical (i.e. dimensions) and quantitative (i.e.measures or metrics). If you were analyzing a zoo, categorical data would be the differentspecies, gender, and grouping by furry, feathery, or scaly. Quantitative data would includethe number of animals, animal weight, number of teeth, etc. The following table describesthe different data types:Juice Analytics creates dashboards that business people love to use. Check out some of our work atwww.juiceanalytics.com/solutions/case studies/. Contact us at [email protected] 200914 2009 Juice, Inc. All rights reserved.

A Guide to Creating Dashboards People Love to UseData types gives us the first piece of the puzzle for choosing the right chart. Let’s add acouple additional pieces: Use charts that maximize user comprehension. There are things that people canjudge very accurately—the length of a line and position in 2D space. Then there arethings that people can judge only semi-accurately—width, area, color intensity,radial distance. You want to use charts that support quick comprehension of values(e.g. line, bar) and avoid charts that are hard to interpret (i.e. pie, 3D scatterplots). Don’t lie with data. A couple simple rules for accurate representation of data: 1)lines connect things that are related; 2) the length of bars is directly proportional tothe values behind graphed (if a number is 2x bigger, the bar should be 2x bigger).The same goes for the proportionality of areas.Juice Analytics creates dashboards that business people love to use. Check out some of our work atwww.juiceanalytics.com/solutions/case studies/. Contact us at [email protected] 200915 2009 Juice, Inc. All rights reserved.

A Guide to Creating Dashboards People Love to UseChoosing the right chart typeNow we can combine these rules and our understanding of data types to show how tochoose the right chart for your data. In the following table, the rows are your quantitativedata type and the columns are your categorical (or quantitative) data type.For another perspective on this problem, see Andrew Abela’s “Chart Suggestions” 09/choosing a good.html).Juice Analytics creates dashboards that business people love to use. Check out some of our work atwww.juiceanalytics.com/solutions/case studies/. Contact us at [email protected] 200916 2009 Juice, Inc. All rights reserved.

A Guide to Creating Dashboards People Love to UseFundamentals of chart and table designOut of the box, most charting programs break the rules for good chart design. We’ve usedexamples from one of the chief offenders, Microsoft Excel, to show how you can get toclean, readable charts.1. Reduce chart-junk and increase data-to-ink ratio. These are the first twocommandments of Edward Tufte. Reduce chart junk by removing elements that aredecorative or ornamental. Three dimensional chart effects, for example, add nothing ofvalue to your chart. Increase data-to-ink ratio by making every pixel tell a story about yourdata.Juice Analytics creates dashboards that business people love to use. Check out some of our work atwww.juiceanalytics.com/solutions/case studies/. Contact us at [email protected] 200917 2009 Juice, Inc. All rights reserved.

A Guide to Creating Dashboards People Love to Use2. Maximize contrast. Maximize the contrast between your data and the background. Thestandard Excel default chart, for example, makes it more difficult than necessary todistinguish the line from the background. A white background and de-emphasizedgridlines can help.Juice Analytics creates dashboards that business people love to use. Check out some of our work atwww.juiceanalytics.com/solutions/case studies/. Contact us at [email protected] 200918 2009 Juice, Inc. All rights reserved.

A Guide to Creating Dashboards People Love to Use3. Readable labels. Whenever possible, avoid rotated labels; they are hard for people toread and distract from focusing on the numbers.4. Don’t repeat yourself; repetition is bad. It’s not necessary to have both a legend and atitle for single series graphs. Likewise, the title of a chart may suffice to explain what thereader is looking at.A useful alternative to a legend is to label the individual data series directly.Juice Analytics creates dashboards that business people love to use. Check out some of our work atwww.juiceanalytics.com/solutions/case studies/. Contact us at [email protected] 200919 2009 Juice, Inc. All rights reserved.

A Guide to Creating Dashboards People Love to Use5. Avoid smoothing and 3D. Avoid adding a smoothing feature to your line; it gives theimpression of data points that are not there. Similarly, glossy 3D effects are a visual thatwas impressive in 1999 but contributes no value to your chart.6. Careful use of gradients. Use flat colors or a bare minimum gradient. Ensure that thebar endpoint is visible. When the gradient fades toward the endpoint, it reduces the abilityto clearly see the length of the bar.7. Sort for comprehension. Add structure and clarity to the chart by sorting by a metric ofinterest.Juice Analytics creates dashboards that business people love to use. Check out some of our work atwww.juiceanalytics.com/solutions/case studies/. Contact us at [email protected] 200920 2009 Juice, Inc. All rights reserved.

A Guide to Creating Dashboards People Love to Use8. Use color variants. If you are displaying multicolumn or stacked charts, use variants ona hue or grey to show different data series.Also, don’t vary the colors by point. This creates a lot of unnecessary visual noise andmakes similar colors seem related. In addition, bright colors get more perceived emphasis.Juice Analytics creates dashboards that business people love to use. Check out some of our work atwww.juiceanalytics.com/solutions/case studies/. Contact us at [email protected] 200921 2009 Juice, Inc. All rights reserved.

A Guide to Creating Dashboards People Love to UseTablesWhile graphs allow us to see the shape of data, tables allow us to perform precise lookupsand comparison between small numbers of values. Here are a few addition design tips toconsider when creating tables: Remove gridlines Use lines or whitespace to separate areas that are conceptually different Display the smallest amount of numbers that you can to support the needs of thetable Use consistent column and row spacing to create horizontal and vertical rhythmTable design: before and afterJuice Analytics creates dashboards that business people love to use. Check out some of our work atwww.juiceanalytics.com/solutions/case studies/. Contact us at [email protected] 200922 2009 Juice, Inc. All rights reserved.

A Guide to Creating Dashboards People Love to UseResources for advanced dashboard featuresThere is so much more we could cover in the area of information visualization, but yourprinter is short on paper. With the remaining page, we have compiled some of the bestresources and best practices for more advanced visualizations and dashboard features.TypeSparklinesWhat is it?Small word-sizedgraphicsTwo tipsSparklines can be embedded intables to help spot trends andvalues in the dataAvoid trying to display too muchinformation in each tiny graphicTreemapsVisualization ofhierarchical dataHeatmaps or point/bubble overlay on amapSparklines: Theory and Practicefrom Edward Tufte’s fetch-msg?msg id 0001ORUse measures that add-up for boxsize (e.g. sales); use rates orpercentages for box color (e.g.10 Lessons in Treemap eemap-design/change in sales)Treemaps for space-constrainedvisualization of hierarchies by BenShneidermanThe data layers need to have ahierarchical structure (e.g.continents- countries- cities)GeographicmapsWhere to find out morewww.cs.umd.edu/hcil/treemaphistory/Include only as much detail in themap itself as is useful for theaudience (e.g. road-level detailIntroduction to Geographic DataVisualizationmay be distracting)visual business intelligence/geographical data visualization.pdfBefore using a map, make surelocation is critical to the usersunderstanding; sometimes asimple chart or table can be just ashboardindicators displayedwhen a measureAvoid “over alerting”—too manyflashing lights will quickly numb theusersexceeds a thresholdA Dashboard Alerts alerts-checklist/Create actionable alerts wherethere is a clear next stepJuice Analytics creates dashboards that business people love to use. Check out some of our work atwww.juiceanalytics.com/solutions/case studies/. Contact us at [email protected] 200923 2009 Juice, Inc. All rights reserved.

A Guide to Creating Dashboards People Love to UseTypeFiltersWhat is it?User configurationto set the scope ofthe values in theTwo tipsUse small visualizations in filters toshow the size or frequency of theselectable dimensiondashboardWhere to find out moreScented Widgets: ImprovingNavigation Cues with EmbeddedVisualizations (Univ. of CA,Berkeley)Display the filter selections in thetitle of the dashboard so a printedcopy accurately describes the datavis.berkeley.edu/papers/scented widgets/5 Features of Effective s-effective-filters/Happy Dashboarding!Part 3 of our guide has been about giving you practical advice for laying out yourdashboard and presenting the information in charts and tables. In this paper we’veaddressed these topics: How to organize the dashboard page for a clean, stylish layout Choosing and using colors to your advantage A simple font framework for attractive text Picking the right chart for your data Designing easy to understand charts Tips for advanced visualizations and functionalityThis is the final part in our guide to dashboard design. We hope you’ve found it useful.Please send us feedback so we can continue to refine our best practices for buildingdashboards people love to use.Juice Analytics creates dashboards that business people love to use. Check out some of our work atwww.juiceanalytics.com/solutions/case studies/. Contact us at [email protected] 200924 2009 Juice, Inc. All rights reserved.

Dashboards have become a standard business tool over the last decade. Dozens of dashboard building solutions have sprung up to meet the demand. Yet in the flurry of . visual business intelligence critic and teacher Stephen Few, and numerous leader