The Art of Dashboard Design Seven Fundamentals to Master

Transcription

1 The Art of Dashboard Design Seven Fundamentals to Master

2 Table of Contents Introduction 2 Seven Fundamentals of Design 3 Design Resources 7 Key Takeaways 8 About Logi Analytics 9

3 Introduction BAD DESIGN IS SMOKE WHILE GOOD DESIGN IS A MIRROR. DESIGNER & ARCHITECT, JUAN CARLOS FERNANDEZ STUDIO Why is Designing for Dashboards So Important? A dashboard serves as a visual display of the most important information needed to achieve an objective. This information is consolidated and arranged on a single screen so information can be viewed at a glance. Because dashboards are heavily dependent on visuals, it s important to recognize the weight it bears on the human brain. Emphasizing your message with a visual has been proven to increase retention rates from 1 in 5 people to 4 in 5 people. 400% It s simple. Well designed dashboards help make information more palatable, and easier to use - key components for helping to increase customer adoption and enhance the user experience. This ebook, will help you apply the most fundamental design concepts to your visuals to help them become more effective to the human eye. 4 2

4 1. Color Choosing the right colors is the first mistake most people make. Colors tend to have different meanings depending on the context. Good use of colors starts with leveraging contrast because it makes the message clear. You start by choosing two colors that go together very well like complimentary colors Using the color wheel (a popular resource for designers), if you choose one color, expect its complimentary color to be the one directly opposite Seven Fundamentals of Design Be cognizant of the colors you choose and the associations they incite. Take for example red and green. When we look at those colors, we are already making a comparison in some way by linking red with bad and green with good. Another association could be green means go, and red means stop. Let s also look at red and blue. You could associate red with hot, and blue with cold. Don t be afraid to incorporate black and white colors into your dashboards. Many times, utilizing these colors work extremely well together,especially in situations where you need to accentuate certain dashboard design elements and you are tired of using the same color palette. DID YOU KNOW? The color of your text also matters as well. As a basic tenant of user experience, you don t want it to have green on top of red because it looks jarring and strains the human eye. 3

5 Aa Aa Serif fonts however work better for text blocks these can be articles, blog entries, book text, etc. Serif helps your eye make out the letters a bit more. Plus, it takes up less space and is more legible. 2. Fonts 80 90% of the fonts used today either belong to serif or sans-serif. What s the difference between the two? Serif fonts have the tail at the end of each letter and that s because it s easier for the human eye to read. Pick up any book in your library and look at the text 9 times out of 10 it will be set in a serif font. Serif sit amet, consectetur adipiscing elit. Praesent eget libero nunc. Duis dignissim lorem nec metus ultricies porttitor. Nulla finibus volutpat ultricies. Mauris eget neque felis. Sed luctus metus erat, ac lacinia neque porta sed. Praesent tincidunt fermentum diam, vitae dignissim eros feugiat vitae. Sans-serif sit amet, consectetur adipiscing elit. Praesent eget libero nunc. Duis dignissim lorem nec metus ultricies porttitor. Nulla finibus volutpat ultricies. Mauris eget neque felis. Sed luctus metus erat, ac lacinia neque porta sed. Praesent tincidunt fermentum diam, vitae dignissim eros feugiat vitae. Sans-serif does not have the tail. That s the main difference. The most widely known example of this is Helvetica. Both fonts have their uses. Sans-serif works best for headlines. Every road sign is typically set in Helvetica and since Sans-serif fonts are designed for very short blocks of text, readers pay close attention to them. If everything s bold, nothing is bold Mixing regular and bold for visual interest DID YOU KNOW? Contrast also plays a key role here, not only in color but in fonts as well. If you bold the entire text for a sentence, nothing stands out its use is meant to highlight certain words. Adding a little bit of visual interest to that helps. 4

6 3. Typography It s important to point out that fonts and typography are two different concepts. Fonts is how you set your text. Typography is how those fonts look when you are done. So it accounts for both the color of the font as well as the color of the background. So how do colors and fonts best go together? If you have text sitting on a background, you need to think about what the background color is going to be. Color adds another dimension to your text (I.e. you wouldn t have dark text on a dark background). sit amet, consectetur adipiscing elit. Praesent eget sit amet, consectetur adipiscing elit. Praesent eget sit amet, consectetur adipiscing elit. Praesent eget sit amet, consectetur adipiscing elit. Praesent eget 5

7 4. Shapes Shapes are not as common as the earlier fundamentals of design but worth considering. Shapes are important specifically for data visualizations because just like how the human brain is comparing colors, it also compares shapes. 6. Images & Iconography Imagery and iconography comes up most of the time with data visualizations and photography interestingly enough. These particular icons (FYI Font Awesome) associate with the user actions of close, delete, eject and hide. These four actions from a user perspective are similar but having an icon can help people discern which specific action they should take. You may associate particular patterns like the one on the left for for something being on sale. If it was a circle, you would maybe associate it with Google plus. Bear in mind even out of context, your brain is constantly making those associations. Sizes Sizes Sizes 5. Sizes This fundamental comes up more frequently with shapes and fonts especially fonts used in headlines. Naturally, the human eye will go towards what is biggest. You wouldn t want your article and headline to be the same size, you d want the headline to be bigger than the article itself. 7. Interactivity This is a design element that designers work with all the time. Interactivity can mean a lot of things and it adds another significant dimension to the overall design. Interactivity could mean changing the color or size when someone hovers over it or performs a user action. It can mean having an image or text grow, change color, or change speed for instance do you want a gauge needle to respond slow or fast when clicked on? 6

8 Design Resources If you are interesting in honing your design skills, the following free resources are available to help you enhance your data visualizations without actually having to purchase graphic design software. Color Brewer Color Brewer is an online tool designed to help you select color schemes for visuals and other graphics. It contains pre-selected and/or pre-tested color sets that you can leverage. The sets have also been tested for color blindness and for contrast. Adobe Kuler Color Wheel Using the Adobe color wheel, you can create your own color schemes or browse thousands of other color combinations from the Adobe community. If you are stuck with choosing colors, you can use sample colors from an image usually done through Adobe Photoshop or Adobe Illustrator but it doesn t mean you need to rely solely on them. Google Fonts TIP We would recommend using a maximum number of six colors in visualizations. Any more and it becomes very difficult for users to see differences. Way back in web design, designers were restricted to only Arial and Georgia fonts for typography. Google Fonts, previously called Google Web Fonts is an interactive directory of free hosted app programming interfaces for web fonts. You can customize weights, styles, etc. then integrate the font s right into your CSS. 7

9 Key Takeaways + Good design has a valuable return on investment as businesses without deep skills in data comprehension will ultimately be replaced by those that do + Focusing on colors and fonts can go a long way in making your dashboard visuals more compelling + You don t necessarily need expensive software to step-up your design game before after 8

10 About Logi Analytics Logi Analytics is the leader in self-service analytics, delivering tools designed to meet the needs of users, IT 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 data-driven decisions. More than 1,600 customers worldwide rely on Logi. The company is headquartered in McLean, Virginia, with offices in the U.K. and Europe. Logi Analytics is a privately held, venture-backed firm. For more information, visit LogiAnalytics.com. Contact us: salesteam@logianalytics.com READY TO CREATE YOUR OWN DASHBOARD? TRY IT FREE WITH YOUR OWN DATA. 109