15-Minute Fix: A Step-by-Step Guide to Designing Beautiful Dashboards

Transcription

1 15-Minute Fix: A Step-by-Step Guide to Designing Beautiful Dashboards

2 With a dashboard, every unnecessary piece of information results in time wasted trying to filter out what s important. Stephen Few, educator, innovator & thought leader in the BI industry Quoted from his book, Information Dashboard Design

3 Table of Contents 15-Minute Fix: A Step-by-Step Guide to Designing Beautiful Dashboards 3 What Makes a Great Dashboard 16 Before & After Dashboard Examples 31 Your Checklist For Creating Beautiful Dashboards 32 Create Your Own Dashboard 33 About Logi Analytics

4 What Makes a Great Dashboard? A good dashboard is relevant, snackable, and tells a story. It s your mission to present relevant, snackable, and meaningful content to the user and then get out the way. A recent survey conducted by Logi Analytics found that 80% of dashboard consumers wanted a quick and clean snapshot of the data to view quickly. w h at makes a great dashboard 3

5 The Tendency to Overdesign It s important to note that bad dashboard design often results from overdesign: Cramming too much information onto one screen and expecting the user to work to figure out what s interesting and relevant on their own Using visualizations that might look fancy on a dashboard but really aren t the most appropriate for conveying the data you want to show Getting carried away with fonts and colors such that the user is distracted by formatting instead of focusing on the content t h e tendency to over design 4

6 Dashboard Design Levers So how can you create a great dashboard without overdoing it? Meet the four levers of dashboard design: Fonts Layout Content Color By manipulating each of these levers, you ll affect how users interact with your dashboards to understand information and take action. We ll review best practices for working with these design levers over the next several pages. d a s h b o a r d design levers 5

7 Fonts 28 point / 18 point / 12 point 20 point / 16 point / 12 point Asian Food is extremely spicy Asian Food is extremely spicy A general rule of thumb if you re not sure where to start is to stick with 1 font type and 3 sizes of that font type. Your goal is to create visual hierarchy with all the content displayed in your dashboard. You can emphasize font copy by either bolding or by adding an accent color. If you re unsure, it s best to only use color or weight as the main point of emphasis. f o n t s 6

8 Fonts Before Notice the blue color used for the chart headers? It pops too much and the color is too saturated compared to the rest of the design. The title in the upper left corner is a different font from the rest of the app, and it s in italics which is normally reserved for publication titles. After The same font type is used across all headers, which makes the dashboard look cleaner. f o n t s 7

9 Layout Related data should be grouped next to each other in the dashboard. Use size as a way to help organize the way the data is laid out, especially if you want to emphasize key information. And remember only show the data you want to show! In this dashboard, we re most interested in showing which quadrant (of Repairs by Location) - NW, SE, NE, SW, Null is experiencing the most bike repairs. To emphasize this, a large pie chart was created. The other charts here help support the data, and since we want to compare them, bar charts were created for both. l ay o u t 8

10 Layout Before The pie chart s right edge doesn t line up with the bottom charts. It s distracting to the eye. After The pie chart has been widened to the right so that the symmetry is uniform which is much cleaner. l ay o u t 9

11 Layout Before The data on the top chart is a poor representation of comparison when viewing both charts together. After Same data seen here, but using the same chart for both makes it a lot easier to compare. l ay o u t 10

12 Content Simplify content so that you reduce visual elements to only the most critical. Data should be current. Make all content relevant to your target audience, and remove everything else, meaning if you re designing a dashboard for a sales team, don t include visualizations on marketing campaign channels. c o n t e n t 11

13 Content Before This chart displays days that we re not particularly interested in for telling this story. After Unselecting these days and keeping the ones we are interested in marked expands the view, making it a better visual for my current needs. c o n t e n t 12

14 Color Generally, you want to keep it simple. Don t overdo design with color. Most of the time it s best to add just a few touches of color. Consider your color blind users. There are many forms of color blindness and probably more prevalent than statistics show. Tip: Reserve some colors for common attributes (see below) z 13

15 Color Before Normally with folks who aren t color blind, a visual difference like a different title background color displays a distinction between the two. However, for a colorblind user, the bottom right chart, which carries the same visual difference, is no longer noticeable. c o lo r 14

16 Color After By tweaking with the lightness of the background shades, you can now see more noticeable differences. You can test screenshots of your work for color blindness at color blindness simulator here. c o lo r 15

17 Before & After Dashboard Examples Some more examples of how to best utilize all of the foundational techniques to turn dashboards from drab to fab. Your 15 Minute Fixes See how we updated the following dashboard examples in just a few steps. 16

18 Your 15 Minute Fixes Before Before This dashboard works pretty well overall as it reads like a book and doesn t overwhelm the user with too many charts and data. However, the charts are crowded together which can be resolved with some quick and simple styling fixes. y o u r 15 m i n u t e fixes 17

19 Your 15 Minute Fixes After The header was shortened by 4 pixels, so now you can see spacing and separation between each individual chart. We removed the drop shadow which is a trend that has become outdated in UI/UX use. On the 3rd chart, ad impressions originally was a value at the bottom but we moved it to the top and colored it orange to remain consistent with the other values displayed. y o u r 15 m i n u t e fixes 18

20 Your 15 Minute Fixes After Then, we made the background darker and removed all the borders and drop shadows which makes the visual elements as minimal as possible. y o u r 15 m i n u t e fixes 19

21 Your 15 Minute Fixes Before This dashboard has elements that are visually overcrowding. The logo at the top is taking up valuable real estate for no apparent reason, and the variety of font styles used is jarring on the eyes. The blue lines on the edges are distracting and they don t serve any purpose. There s no distinction in color between the foreground and background which again, is distracting. y o u r 15 m i n u t e fixes 20

22 Your 15 Minute Fixes After We reduced spacing in the header to remove extraneous clutter and reduced the number of styles of fonts to make the dashboard look more streamlined. We also removed numerous borders/lines and replaced them instead with a darker background which made it look less busy. And lastly, we rounded the corners on all the charts to help separate them without a border or another line. y o u r 15 m i n u t e fixes 21

23 Your 30 Minute Fix Now that we ve taken 15 minutes to show you how to quickly update a few dashboards, let s spend some time digging even deeper into one particular dashboard example and make it go from whoa to wow! 22

24 Your 30 Minute Fix Before This dashboard is all kinds of wrong. First, there are too many clashing colors. The chart labels are hard to read, and real estate is used ineffectively. The font in the text is also utilizing two different styles. Frankly, you don t know where to look first. Let s see how much we can do without changing too much of the original feel. Stylistically, there are many ways to simplify this design. y o u r 30 m i n u t e fix 23

25 Your 30 Minute Fix After We moved the header down to save space so there s more room for content. The replacement of the white background color also separates the header from the main content of the dashboard. We also changed the links in the header to blue and made the font style consistent, including the chart titles. y o u r 30 m i n u t e fix 24

26 Your 30 Minute Fix After Then we pushed the main content of the dashboard up to save space. We added weather icons to visually distinguish the weather for that day and region in order to make the story the data is trying to tell easier to understand. Also re-arranged the components of the dashboard so there s more symmetry and uniformity so that users can more easily scan content. y o u r 30 m i n u t e fix 25

27 Your 30 Minute Fix After Removed colors from some of the charts because it really didn t emphasize anything of importance. Used color accents to group related charts (i.e. weather metrics are blue, transit metrics are orange, etc.) y o u r 30 m i n u t e fix 26

28 Your 30 Minute Fix After Ok, now it s time to break apart and regroup the related charts with one another because they re still all over the place. Weather/Environmental Traveling/Transit News/Social y o u r 30 m i n u t e fix 27

29 Your 30 Minute Fix After Regrouped content into the three categories. And removed the borders from the charts. y o u r 30 m i n u t e fix 28

30 Your 30 Minute Fix After Let s reuse the gradient in the chart backgrounds and add some color. Now, the data is easier to scan and digest. Fonts create hierarchy of content, and grouping charts makes tasks easier to look at. It s also a lot easier to view on mobile devices. y o u r 30 m i n u t e fix 29

31 Your 30 Minute Fix Before After y o u r 30 m i n u t e fix 30

32 Your Checklist for Creating Beautiful Dashboards Fonts Layout Content Color Keep it consistent and stay with one font, and 3 sizes Be mindful of layout and consider the type of chart and/or charts used to show related data and think about how they are shown together Make content relevant and show only important content to your target audience, don t add fluff Don t overdo it and use sparingly and deliberate - remember function over form. Remember your mission. Present relevant, snackable and meaningful content to the user and then get out of the way! c h e c k l i s t 31

33 Are you ready to create your own dashboard? Let us help. bring your data to life with a free trial of logi info today! 32

34 About Logi Analytics Logi Analytics is the leader in selfservice analytics, delivering tools designed to meet the needs of users, and product managers. At Logi, we are re-imagining how software can empower individuals, and the organizations and products that serve them, with analytics that can be embedded directly into the business applications people use every day. From interactive dashboards to ad hoc queries and visual analysis, Logi enables users to explore and discover insights and make datadriven decisions. More than 1,600 customers worldwide rely on Logi Analytics. The company is headquartered in McLean, Virginia, with offices in the UK and Europe. Logi Analytics is a privately held, venture-backed firm. For more information, visit LogiAnalytics.com. Contact us at salesteam@logianalytics.com or