D.2 Usability guidelines for websites and products of statistical organisations DIGICOM project – Work package 1 'User analysis' Eurostat Framework Service Contract SC187 Author: Jannelien Verjans, Arne Jansen & Karin Hansson Version: 7 Date: 27/03/2020 History: Version Date Comment 1 09/11/2018 Version 1 2 31/01/2019 Improved with feedback from Eurostat & National Statistical Institutes 3 5/03/2019 Improved with feedback from Eurostat 4 15/11/2019 Improved with feedback from Eurostat 5 09/12/2019 Improved with feedback from Eurostat 6 21/01/2020 Improved with feedback from Eurostat 7 27/03/2020 Final Version Foreword to the Usability guidelines for websites and products of statistical organisations Background These Usability guidelines for websites and products of statistical organisations aim to provide best practices and recommendations for the design of websites and other online tools that are used for the dissemination of official statistics. They are an outcome of the DIGICOM project, an ESS Vision 2020 project initiated to modernise the dissemination and communication of official statistics in the European Statistical System (ESS). The guidelines are based on the outcomes of user research and usability tests of websites and online tools developed by Eurostat and six ESS national statistical institutes: Bulgarian national statistical institute, Croatian Bureau of Statistics, INSEE France, INE Spain, INE Portugal and Statistics Poland. Between 2016 and 2019, over 100 current and potential users of European and national statistics have participated in field studies and usability tests as part of Work package 1 ‘User analysis’ of the DIGICOM project. These guidelines cover the most common issues that emerged from observing and interviewing users, as well as design recommendations of usability experts to ensure a seamless user experience. DIGICOM Work package 1 The aim of Work package 1 ‘User analysis’ of the DIGICOM project has been to gain a better understanding of users of European statistics – who they are, why and how they use official statistics, what needs they have, and what challenges they face when using official statistics. This insight has been gathered by employing different methods of user research – an in-depth user analysis, a user profiling exercise based on field studies, and a series of usability tests carried out on online dissemination products developed by Eurostat and the national statistical institutes involved – with the ultimate goal of better meeting the needs of existing users and attracting new users. Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019 1 Other outcomes of Work package 1 ‘User analysis’ of the DIGICOM project include: in-depth user analysis report, report on the user profiling exercise, personas of users of European statistics, individual usability test reports, learnings on potential users of European statistics, guidelines on user analytics, user research and user personas, report on the validation of personas of users of European statistics at the Hungarian national statistical institute, social media guidelines. How to use these guidelines The purpose of these guidelines is to help you create websites and products your users will love. The guidelines offer a broad overview of good practices for usability and user experience, tailored to the needs of statistical organisations. They can be used ● to learn more about best practices ● as a practical guide and checklist ● to improve existing web pages and products ● when designing new web pages and products. These guidelines must be viewed in their broader context The guidelines in themselves will not guarantee absolute success for your websites and products. Another set of guidelines on user research will explain how important it is to first get the right design, before getting the design right. This means you first have to make sure you are conceptualising and designing products that tailor users’ needs and wishes, instead of creating something that they might never use. Once you are confident that your products match users’ needs, these guidelines and best practices can be used as a checklist when filling in the details. Yet, it is still crucial to regularly check with your users whether you are getting the design right. Usability testing and other evaluation methods are indispensable parts of web development and maintenance. How to do this is also described in the guidelines on user research. However, following the tips and good practices provided in this set of guidelines will allow you to move faster by avoiding many usability issues from the outset, leaving more room to focus on (other) matters that are important to the users. Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019 2 Looking beyond usability This document will kick off with definitions for ‘usability’ and the broader concept of ‘user experience’. Once we are on the same page, we will discuss good practices for layout, structure and navigation, common design components, use of language and accessibility. Finally, we will look beyond usability and discuss ways of ensuring that your websites and products are not only easy to use on a functional level, but are also enjoyable to use so users will come back to you instead of turning to alternatives. Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019 3 Table of contents Foreword to the Usability guidelines for websites and products of statistical organisations 1 Background 1 DIGICOM Work package 1 1 How to use these guidelines 2 These guidelines must be viewed in their broader context 2 Looking beyond usability 3 Table of contents 4 1. What is usability and user experience? 11 2. Layout 13 2.1. Use of screen real estate and white space 13 2.1.1. What is screen real estate? 13 2.1.2. Clarifying relationships between elements 13 2.1.3. Attracting attention 14 2.1.4. Create visual hierarchy 15 2.2. Use of colour 15 2.2.1. Use colour for visual feedback - indicating the state of an element 17 2.2.2. Make sure you have sufficient colour contrast 19 2.3. Typography and readability 20 2.3.1. Keep the number of fonts used at a minimum 20 2.3.2. Try to use standard fonts 20 2.3.3. Limit line and paragraph length 21 2.3.4. Choose a typeface that works well in various sizes 22 2.3.5. Avoid text with all the letters capitalized 22 2.3.6. Do not cut down on line spacing 23 Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019 4 2.3.7. Chunk text into sections 23 2.3.8. Use descriptive subheadings 24 2.4. Images 24 2.4.1. Use visuals to break up text and improve comprehension 24 2.4.2. Give users the chance to increase the size of the visuals 25 2.4.3. Data visualization - best practices 25 2.4.3.1. Use the full axis 25 2.4.3.2. Use multiple charts when necessary 26 2.4.3.3. Emphasize what is important 27 2.4.3.3.1. Keep legends simple 27 2.4.3.4. Check if your chart passes the squint test 29 2.4.3.5. Test your graph 29 2.4.3.6. What should you avoid? 29 2.5. Icons and labels 31 2.5.1. Recognition rather than recall 31 2.5.2. Universally recognised icons are rare 32 2.5.3. Give all icons a text label 32 2.5.3.1. For what purposes can icons be used? 33 2.5.4. Visibility of labels 33 2.5.5. Tips for designing icons 34 2.6. Affordances 34 2.6.1. Implicit (hidden) affordances 35 2.6.2. Watch out for breaking the pattern 35 3. Structure and navigation 36 3.1. Cross-links between sections 36 3.2. Hyperlinks for more (internal/external) information 37 Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019 5 3.2.1. Common mistakes 38 3.3. Navigation menu 39 3.3.1. What to pay attention to when designing a navigation menu 39 3.3.1.1. Make it visible 39 3.3.1.2. Communicate the current location 39 3.3.1.3. Coordinate menus with users’ understanding 40 3.3.1.4. Make menus easy to manipulate 40 3.4. Breadcrumbs 41 3.4.1. What are breadcrumbs? 41 3.4.2. When to use breadcrumbs 41 3.4.3. How to create breadcrumbs 41 4. Search and use of filters 43 4.1. Search option 43 4.1.1. When to include a search option on your website? 43 4.1.2. Where should you place your search field? 43 4.1.3. Design of a search field 44 4.1.4. The use of auto-suggest 44 4.1.5. Interaction with the search field 45 4.1.6. Visualizing the search results 46 4.1.7. Search vs. filter 46 4.2. Use of filters 47 4.2.1. Interaction with filters 47 4.2.2. Downsides of interactive filtering 47 5. Design components (best practices) 49 5.1. Buttons 49 5.1.1. Make buttons look like buttons 49 Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019 6 5.1.1.1. Shape 49 5.1.1.2. Be consistent 50 5.1.1.3. Shadows and highlights 50 5.1.1.4. Visually highlight the most important buttons 51 5.1.2. Primary and secondary buttons 51 5.1.3. Visualization of hyperlinks 53 5.2. Headers 54 5.2.1. What is a header? 54 5.2.2.