D.2 Usability Guidelines for Websites and Products of Statistical Organisations

Home , Hyperlink, Navigation bar, Search box, Throbber, Tooltip

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

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

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

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

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

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

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. What does a header include? 54

5.2.3. What is the importance of a header? 55

5.2.4. Visual hierarchy of a header 55

5.3. Accordions 55

5.3.1. What is an accordion? 55

5.3.2. Things to keep in mind when using accordions 56

5.3.3. When should you use an accordion? 57

5.4. Carousels 58

5.4.1. What is a carousel? 58

5.4.2. Greatest benefits of carousels 58

5.4.3. Biggest drawbacks of carousels 58

5.4.4. Tips for designing carousels 59

5.5. Tabs 60

5.5.1. What are in-page tabs? 60

5.5.2. How to make good use of in-page tabs 60

5.6. Drop-down menus 61

5.6.1. What is a drop-down menu? 61

5.6.2. When should you (not) use a drop-down menu 61

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

5.6.3. What to pay attention to when using a drop-down menu 63

5.7. Tooltips 64

5.7.1. What are tooltips? 64

5.7.2. When to use a tooltip 65

5.7.3. When to avoid using tooltips 66

5.8. Help and documentation 67

5.9. In-page scrolling 69

6. Plain language 70

6.1. Write for your audience 70

6.1.1. What is plain language? 70

6.1.2. Plan your text 70

6.1.3. Not sure who your audience is? 71

6.1.4. What do your readers need and want to know? 71

6.2. How to write 71

6.2.1. Review and revise: checklist 72

6.2.2. Use of short descriptions and providing context 73

6.3. Inclusive communication 74

6.3.1. What is inclusive communication? 74

6.3.1.1. Language 74

6.3.1.2. Pictures and illustrations 75

6.3.2. Make calls to action (buttons) and links descriptive 76

6.3.3. More online resources 77

7. Web accessibility 78

7.1. What is web accessibility? 78

7.2. General guidelines for accessibility 78

7.3. Contrast and use of colour 79

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

7.3.1. Avoid colouring text in red or green 79

7.3.2. Do not only rely on colour to convey a message 79

8. Beyond functionality 81

8.1. User support 81

8.2. Providing feedback to users 81

8.2.1. What is an error message? 82

8.2.2. Error message guidelines 82

8.3. Collecting feedback from users 82

8.3.1. Why should you collect feedback? 82

8.3.2. When should you collect feedback? 83

8.3.3. What to pay attention to when using a feedback form 83

8.4. Sharing on social media 84

8.4.1. Sharing information on social media 84

8.4.2. Make your users follow you on social media 85

8.4.3. Add labels to social media icons 85

8.5. Layers of functionality - catering to light and advanced users, and everything in

between 86

8.5.1. What are layers of functionality? 86

8.5.2. Personalisation and automation 87

8.5.2.1. Personalisation: create an account and save datasets 87

8.5.2.2. Automation 88

9. Designing for a mobile screen 89

9.1. General guidelines for User Experience on mobile devices 89

9.1.1. Make your website responsive 89

9.1.2. Simplify the user interface 90

9.1.3. Pay attention to specific gestures 90

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

9.1.3.1. Do’s and don’ts for mobile gestures 90

9.1.4. Consider how users hold their mobile devices 91

9.1.5. Use large fonts 91

9.1.6. Buttons and links 92

9.1.7. Make navigation self-evident 93

9.2. Visualizing data on a mobile device 95

9.2.1. Simplify user interface and data 96

9.2.2. Use the potentials of mobile devices 96

9.2.3. Design for mobile gestures 97

9.2.4. Pay attention to screen dynamics 97

9.2.5. What to avoid? 98

10. Conclusion 99

11. References 100

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

Disclaimer

Due to restrictions related to the copyright of images and screenshots, all figures used as an example to support the guidelines, are included in this report as links.

All links were added in March 2020. As sites change overtime, the examples might be subject to these changes.

1. What is usability and user experience?

The terms ‘usability’ and ‘user experience’ are inherently intertwined, but, although they sometimes get mixed up, they do not mean the same thing. According to the ISO definition (Mifsud,

2011), usability deals with the “effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments” (ISO 9241-11). User experience, on the other hand, is about “all aspects of the user’s experience when interacting with the product, service, environment or facility” (ISO 9241-210).

The term ‘usability’ is mainly used to assess how easy user interfaces (and physical objects) are to use (Nielsen, 2012). Attributes that play a role here are (Nielsen, 2012):

● Learnability: How easy is it for users to learn how to use a design?

● Efficiency: How quickly can users perform tasks using the design?

● Memorability: Can users remember how a system works or do they have to relearn how

to use it after not using it for a while?

● Errors: Is the number of errors users can make kept to the minimum and if they do make

errors, can they easily recover from them?

● Satisfaction: Are users satisfied rather than frustrated when using the design?

Although this is a mistake too many companies still make today, doing usability design in itself is not sufficient to come up with good solutions. Other qualities of a solution also need to be assessed, such as its ‘utility’. Utility refers to the level at which a solution does what users need it to do (Nielsen, 2012). You could view usability and utility as two sides of the same coin. Jakob

Nielsen (2012) puts it as follows:

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

“Usability and utility are equally important and together determine whether something is useful:

It matters little that something is easy if it is not what you want. It is also no good if the system

can hypothetically do what you want, but you cannot make it happen because the user interface

is too difficult.”

This is where the guidelines on user research for statistical organisations come in, because usability and utility both have their role in the Human-Centred Design process. In this process it is vital to first get the right design - i.e. by researching what users need and want (utility) - and only then to get the design right - i.e. by applying usability design and conducting user tests.

There are, however, many more quality aspects of solutions (websites, user interfaces or products) that play a role in how users experience them. This is why cognitive psychologist and designer Don

Norman introduced the term ‘user experience’ in 1993 to allow for a more holistic assessment of a user’s interaction with interfaces, services and products (Nielsen, 2017). When looking at the broader concept of user experience non-instrumental attributes such as aesthetics, fun, the context of use and users’ past experiences with similar websites or products become important too (Mahlke & Thüring, 2007).

When designing (or improving) a website or tool we have to design for and test the usability but it takes more than that to create a great user experience. We have to follow a broader approach and also consider utility, aesthetics and fun. Otherwise we risk creating designs that are very easy to use but that nobody wants to use.

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

2. Layout

When we think about the layout of our designs, we might instantly think of the aesthetics that influence the user experience, but there are also usability aspects to consider. The aspects of layout that are described below have a direct influence on the usability of our websites and products.

2.1. Use of screen real estate and white space

2.1.1. What is screen real estate?

Screen real estate is the amount of space on a display that is available to show an interface (website or application) to the user. The correct use of this screen real estate is one of the most challenging design tasks, but one of the most important ones as well.

You do not want to overcrowd the screen with information, features and tools - confusing the users and making it hard or impossible for them to perform their tasks. Yet, you also want to make efficient use of the screen real estate and minimize the need for scrolling and avoid hiding important items ‘below the fold’ - the fold is where the user needs to start scrolling to see more content - or tucking them away in a menu.

We have to keep in mind the following guidelines regarding screen real estate when we are designing our screens.

2.1.2. Clarifying relationships between elements

Whitespace or empty space between elements in an interface improves the aesthetic quality of the design by creating some breathing room. On a more functional level, however, whitespace can also be used to make relationships between elements more clear. The whitespace or empty space between elements acts as a visual cue, indicating which elements belong together thematically.

Elements that are positioned close to each other, with hardly any whitespace between them, appear as one unit, see figure 1 for example (Cao, Zieba & Ellis, 2015). Therefore, when you want

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

to indicate relationships between certain elements on your web page, input fields and their labels for example, place them in close proximity as seen in the right design in figure 1.

Figure 1: Information is communicated far more clearly when labels are placed closer to the fields they relate to, and whitespace is used to help us distinguish the logical groups.

Link to Figure 1: https://miro.medium.com/max/6138/1*XhzxeTnAuWoaeJmlPBP0bw.jpeg

Source: User Experience Collective, https://User Experiencedesign.cc/design-better-forms-96fadca0f49c

2.1.3. Attracting attention

Whitespace can also be used to improve understanding of your interfaces: by reducing clutter and removing distractions, you force users to focus on what is immediately available. The lack of other elements will only make existing elements stand out more. This way you can guide your users in making choices and navigating through your website (Cao, Zieba & Ellis, 2015).

Figure 2: Mailchimp - because of using this much whitespace there is a clear focus on the ‘Sign Up Free’ button which will guide the user immediately towards the right ‘action’.

Link to figure 2: https://cdn.zapier.com/storage/photos/ef6ae7cec4302182dd993efbeb3aee84.png

Source: Mailchimp, https://cdn.zapier.com/storage/photos/ef6ae7cec4302182dd993efbeb3aee84.png

Figure 3: When looking at the homepage of Statistics Sweden, there is a clear focus on 2 actions at first sight: ‘find statistics’ and ‘search’. Both buttons are clearly visible because a sufficient amount of whitespace is foreseen and no other distracting elements are added. This really guides the user to the two most important actions to take on the website.

Link to figure 3: https://www.scb.se/en/

Source: Statistics Sweden, https://www.scb.se/en/

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

2.1.4. Create visual hierarchy

Use whitespace also to support the overall hierarchy of your website. Whitespace can be used to create symmetry or asymmetry in your design. Depending on your specific goal, both ways of designing can help you create the correct hierarchy (Babich, 2018):

● Symmetry: creates memory and harmony - ideal when you want users to have an

easygoing feeling and you do not want anything to stand out specifically.

● Asymmetry: draws the attention of the user - ideally used in situations when you want to

draw attention to one particular element on a page. Asymmetry makes things stand out by

being out of order.

2.2. Use of colour

When used correctly, colour is one of the single most important aspects of website or interface design. Ideally we should limit ourselves to two or three colours to ensure a balanced design and to not overwhelm users with too many impulses. The most common colour palettes can be categorised as follows (Scott, 2017):

● Monochromatic: using different variations (or hues) from a single colour.

● Analogous: using neighbouring colours on the colour wheel.

● Complementary: using two opposing, and thus very contrasting, colours on the colour

wheel.

● Split-complementary: using two colours that are on the opposite of a third colour on the

colour wheel.

● Triadic: using three colours which are evenly spread around the colour wheel, thus forming

a triangle

● Tetradic: using four colours which are evenly spread around the colour wheel, thus forming

a rectangle

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

Figure 4: Example of the different categories of colour palettes that can be used

Link to figure 4: https://www.tictocdigital.co.uk/assets/000/000/156/Colour-

Harmonies_detail.jpg?1504629210

Source: Scott, 2017, https://www.tictocdigital.co.uk/latest/46-the-importance-of-colour-in-web-design

There are not many strict guidelines on the use of colour, but no matter how creative you wish to be, you should never break these three rules:

● If the central focus of the page is text, use a lot of whitespace and a neutral contrast

between the font colour and the background. The classic usage of black text on a white

background is a safe choice but any other dark colour on an off-white background also

works fine (Farley, 2011).

● Apply the 60-30-10 rule, borrowed from interior design, to balance your colour scheme.

Use your primary colour - usually a more mute background colour - for 60% of your design.

Use a colour complementary to the primary one for about 30%. The strongest colour you

use - for call to action buttons that need to attract attention for example - should not

occupy more than 10% (Zieliński, 2017).

● If the central focus of the page is an image, a graph or any other graphic element, use

muted colours for the background. They should not distract the user (Farley, 2011).

Because colours provoke emotional responses, they can help make the user experience more memorable. On a more functional level, colour - as part of a well-designed user-interface - also helps visitors navigate their way through the website. Colour also helps with showing the hierarchy of different elements, by putting more focus on important information and calls to action (Scott,

2017).

In the following part of this chapter we will focus on specific guidelines for the use of colour to improve the navigation, to create hierarchy and improve the findability of elements on the website.

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

2.2.1. Use colour for visual feedback - indicating the

state of an element

When designing a button, it is not only about how it initially looks, but also how it looks while a user interacts with that button. The way a button initially looks is important to make it stand out so it draws attention to the action that it allows users to take. The button should change looks when users are interacting with it to indicate to users that the system is (not) responsive to their actions.

Moreover, well-designed buttons have multiple states to provide visual feedback to users in every step of the interaction. Colour is one of the most powerful ways to indicate the state of a certain button with, others are the use of shadow and different font types.

Figure 5: Example of how different states are visualized by using different gradients of the same colour.

Link to figure 5: https://material.io/design/interaction/states.html#disabled

Source: Material Design, https://material.io/design/interaction/states.html#disabled

Figure 6: Example of how activating a button will fill the button with colour, clearly indicating the button is responding to the action taken by the user.

First state: the button is clickable - second state: the user receives feedback that his ‘click’ was successful.

Link to Figure 6: https://storage.googleapis.com/spec-host/mio-staging%2Fmio- design%2F1584058305895%2Fassets%2F0B9msDEx00QXmbTNDOGRtU1B3eHc%2Fdisabled-

01.png

Source: Material Design, https://material.io/design/interaction/states.html#disabled

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

Figure 7: Example of how different states are visualized by using different gradients of the same colour.

Even though the differences are rather subtle, they clearly communicate to the user that the button is clickable. When hovering over the button the blue colour changes to a purple variation, after actively clicking a rectangle appears and the button changes to a lighter hue of purple.

Source: U-Sentric, example created by U-Sentric

Revaluation Revaluation Revaluation

Figure 8: Example of how different states are visualized by using different gradients of the same colour.

Whenever a user hovers over a button, it is immediately clear that the button is clickable as it changes from white to yellow and an inner shadow is included to mimic the 3D effect of a physical button.

Whenever you actively click on the button, a subtle, but still clear light blue rectangle appears around the button indicating the third state.

Source: U-Sentric, example created by U-Sentric

To find a ‘real-life’ example visit: INSEE France, https://insee.fr/fr/accueil

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

2.2.2. Make sure you have sufficient colour contrast

Do not use colours that are very similar for text and background. The more contrast between the background and the text, the easier users will be able to scan and read the text. Note that the smaller the text, the bigger the contrast ratio between background and text colour should be

(Clarke, 2012). To check if your contrast ratio is sufficient, you can use the following tool: https://webaim.org/resources/contrastchecker/

Lorem Ipsum

Figure 9: Example of insufficient colour contrast between text and background

These lines of text in combination with their backgrounds do not meet the colour contrast ratio recommendations and are difficult to read.

Source: U-Sentric, example created by U-Sentric

Lorem Ipsum

Figure 10: Example of a good colour contrast ratio between text and background

These lines of text in combination with their backgrounds meet the colour contrast ratio recommendations and are easy to read.

Source: U-Sentric, example created by U-Sentric

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

Once you have made your colour choice, it is absolutely necessary to test it with real users on different devices. You can first do this test yourself or with colleagues. If you have problems with reading your copy, you can be sure that your users will have exactly the same problem.

More about the use of colour in text can be found in the section on accessibility (7.3).

2.3. Typography and readability

You can be creative with typography and make text look beautiful but make sure it stays readable and understandable to the user. To do so you can take the following rules into account when designing.

2.3.1. Keep the number of fonts used at a minimum

Limit the use of different fonts on your website to 3. Using more than 3 fonts will make your website look chaotic rather than well-structured and professional. You can either stick to one font family (e.g. Arial) or use two or three font families as long as they are complementary to each other.

When done well, using a few font families will support your website’s hierarchy and structure

(Babich, 2017).

Oh help when you use too many fonts see how they for attention Figure 11: Example of how using too many fonts will decrease the readability of your website.

Source: U-Sentric, example created by U-Sentric

2.3.2. Try to use standard fonts

Using a standard font will help users to read faster and will decrease the effort needed. Because these fonts are often used, users are already ‘used’ to these standard fonts which will increase the

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

ease of reading. Many standard fonts are installed with your operating system by default and are therefore also referred to as ‘system fonts’, e.g. Arial, Calibri, Helvetica, Trebuchet, etc. (Babich,

2017).

Only when your website really demands a custom font, because it is part of your branding for example, you can consider deviating from the previous rule of using standard fonts (Babich, 2017).

2.3.3. Limit line and paragraph length

Even with a good font and the right amount of contrast text can be difficult to read. It is also important to consider the amount of characters per horizontal line of text. It is exhausting to read text if the line is either too long or too short. In the former case it is difficult for our eyes to keep focussing on the line, while in the latter our eyes constantly have to jump to the next line. Between

45 to 72 characters per line ensures a good reading rhythm (Babich, 2017).

For a good on screen reading rhythm it is also recommended to limit the paragraph length to 6 to

8 lines. It is sometimes a good idea to break down text into lists but avoid long lists and use bullet points or numbers to increase readability (Babich, 2017).

Figure 12: Example of the different text lengths

Ideal body text length - when having 40 to 60 characters per sentence it is more pleasant and convenient for users to read on your website.

Link to figure 12: https://pulse.heartbeat.ua/design-tips/typography/

Source: Pulse heartbeat, https://pulse.heartbeat.ua/design-tips/typography/

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

2.3.4. Choose a typeface that works well in various sizes

Your website or interface is bound to have text in different sizes. It is important to choose a font

(family) that remains readable in different formats and with different font sizes. Keep in mind that

different users will have different screen sizes and resolutions for the devices through which they

view your websites and tools. This means that text that looks well on one device might not be

readable on another (Babich, 2017).

Figure 13: Example of how a font works in different sizes and variations

Link to figure 13:

https://camo.githubusercontent.com/24327301c33e66ba8a5c6399e4574d10f3601041/68747470

733a2f2f6d6174657269616c2d64657369676e2e73746f726167652e676f6f676c65617069732e636

f6d2f696d616765732f7374796c652d7479706f677261706879315f6c617267655f6d6470692e706e

Source: Roboto typeface by Google, https://gist.github.com/passsy/9ab560b8877b316a14ea

2.3.5. Avoid text with all the letters capitalized

All caps text should be avoided since it is more difficult to scan and read than lower-case text. Only

consider using all caps text for exceptions such as logo’s or acronyms (Babich, 2017).

WRITING FULL PARAGRAPHS IN CAPS IS BAD. THIS BECOMES EVEN HARDER TO READ WHEN IT IS WRITTEN IN BOLD.

Figure 14: Example of how using capitals and bold capitals influences the reading experience.

Source: U-Sentric, example created by U-Sentric

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

2.3.6. Do not cut down on line spacing

Make sure to use enough ‘line spacing’, or white space between lines of text in a paragraph. For similar reasons as with too short or too long horizontal lines of text, too little or too much line spacing becomes exhausting for the reader. For good readability the rule of thumb is to add 30% of whitespace on top of the character height for the total line height (Babich, 2017).

Figure 15: Example comparing the readability of text related to line height.

Left image: Almost overlapping text. By decreasing the line-height the readability decreases and the reading experience is impacted in a negative way.

Right image: Increasing the line-height aids with readability and the reading experience for users.

Source: U-Sentric , example created by U-Sentric

2.3.7. Chunk text into sections

Users typically scan text on a website rather than actively reading it from start to finish. Only if something draws their attention will users switch from scanning to active reading. By dividing your text into sections and subsections you make it easier for users to scan the text and to remember the main points in a text (Pernice, 2017).

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

2.3.8. Use descriptive subheadings

Using descriptive subheadings tells your users what to expect from each (sub)section and makes it easier to scan the text and avoids missing out on important or interesting information. Make sure that (sub)headings summarize the content in the (sub)sections well and keep them to the point (Kucheriavy).

Tip: A good way of testing how descriptive your headings are is by showing only those headings and subheadings to users and asking them what they think each section is about (Kucheriavy).

2.4. Images

Images are an important part of your website. They can help to break up the text so it becomes more readable but also help with understanding the text. Although it might seem you cannot do anything wrong with images, you should carefully select your images and take into account the following guidelines.

2.4.1. Use visuals to break up text and improve

comprehension

When visuals relevant to the content and of good quality are used, they can help users to extract information more quickly and with less effort. Use visuals to (Kucheriavy):

● Create breaks in big blocks of text where users can rest their eyes while scanning the text,

● Communicate important points in a way that will be easier to remember,

● Support your main message,

● Help users understand complex chunks of text: use relevant examples, images, graphs to

help users better understand the text.

● Replace text because visuals can convey a message much faster than the words you would

need to describe it.

Tip: Make sure your visuals do not look like ads because users will ignore them.

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

2.4.2. Give users the chance to increase the size of the

visuals

Visuals should not get in the way of users when reading or scanning a page. Therefore, it is recommended not to use visuals that are too big or overwhelming because this is the point where the text will become harder to read. A good common practice is to give users the chance to increase the size of the picture whenever they are interested in seeing more details. But make sure the enlargement is adequate. When users click on a picture to enlarge it, it should at least be twice as big, preferably more (Nielsen, 2010).

If you are not able to increase the size of the image in such a way it becomes readable, or users are able to see the right amount of detail, the image should be removed from the page. When users are not able to actually ‘read’ the image, they will get frustrated.

2.4.3. Data visualization - best practices

2.4.3.1. Use the full axis

To help users to easily and correctly interpret a graph, it is better to set the start of the y-axis to zero. If the y-axis starts from another value, then we are inclined to reach incorrect conclusions since our visual perception is affected by the position of the bars (Zoss, 2014).

Figure 16: An example of a comparison of a y-axis that only starts at 34 and the same results in a graph of which the y-axis does start at zero. The example on the left provides a completely different view on the results and stimulates users to draw inaccurate conclusions.

Link to figure 16: https://guides.library.duke.edu/datavis/topten (First image)

Source: Duke University Libraries, https://guides.library.duke.edu/datavis/topten

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

2.4.3.2. Use multiple charts when necessary

Using multiple charts should be considered when two bars of the graph are much taller than the other bars. This will enable users to see the full scale and the zoomed-in view, which will help them to see both the details as the general overview of the data (Peltier, 2011).

Figure 17: Example of a full scale and a zoomed-in view of the results. By combining both options, users get an idea of the correlation between all countries, but they are also able to have a more detailed look at the smaller bars included in the chart.

Link to image 17: https://peltiertech.com/images/2011-11/Ydualpanelfade.png

Source: Peltier tech blog, https://peltiertech.com/broken-y-axis-in-excel-chart/

In any case, do not break up your axis scale. This will result in losing the correlation between the large and the small values and will give your users the wrong idea about the results if they miss the fact that the axis has a break (Peltier, 2011).

Figure 18: Example of the same chart with a broken axis. Using this technique is only confusing users and providing them with a distorted image of the results. https://peltiertech.com/images/2011-11/Ybroken.png

Link to image 18: https://peltiertech.com/images/2011-11/Ybroken.png

Source: Peltier tech blog, https://peltiertech.com/broken-y-axis-in-excel-chart/

It is also important to always present the y-axis and properly label it, preferably with the unit of measure included, so users can make no mistake in interpreting it. Please note that even if there is no y-axis, users will still interpret horizontally placed items on a chart as if there is one.

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

Figure 19: Example of a bubble chart that has no y-axis. When testing a similar bubble chart with users we have observed many users get confused because they intuitively think that countries that are vertically placed higher than others are also ranked higher. Even though there is no y-axis users think that, for example, Belgium has a higher employment rate than Romania while the opposite is true here.

Link to figure 19: https://ec.europa.eu/eurostat/cache/BubbleChart/

Source: Eurostat, https://ec.europa.eu/eurostat/cache/BubbleChart/

2.4.3.3. Emphasize what is important

If possible, try to emphasize one story or subject. It is recommended to put visual emphasis on the lines based on their importance. It is crucial to include the lines of secondary importance in the data visualisation, since this helps users understand the context (Aisch, 2012).

Figure 20: Comparison of the same charts, using different colours. Depending on what the message is you would like to convey, you can consider highlighting only 1 line in your chart to show the most important information.

Link to figure 20: https://www.vis4.net/blog/images/old/screenshot-2012-06-20-um-13.32.38.png

Source: Gregor Aisch, https://www.vis4.net/blog/2012/06/doing-the-line-charts-right/

2.4.3.3.1. Keep legends simple

Try to make your graphs as sober as possible: if you do not absolutely require different colours or a separate legend to indicate what is going on in your chart, try to avoid it. You can, for example, put your labels next to the lines (when looking at line graphs). This way you can stick to a more modest colour palette while users can still easily identify individual lines. Moreover, it means users do not have to move back and forth between the chart and the legend (Aisch, 2012).

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

Figure 21: Example of labels that have been added in a line chart. Whenever possible you can add the labels in your chart, avoiding a separate legend for your graphs. Keep in mind that it must remain readable and clear, however. It would no longer work well when your chart has double the amount of lines.

Link to figure 21: https://www.vis4.net/blog/images/old/labeling.png

Source: Gregor Aisch, https://www.vis4.net/blog/2012/06/doing-the-line-charts-right/

When working with a bar chart that has long labels, it might become difficult for your users to read the chart. They will have to tilt their head and really make an effort to correctly read the chart. In this case, it could be a solution to rotate the bars. It provides users with the same type of comparison, but it will be a lot easier to read (Nussbaumer, 2012).

Figure 22 & 23: Visualization of the same data in a horizontal and vertical bar chart. Always compare both options and see which one conveys your message best.

Link to figure 22: https://images.squarespace- cdn.com/content/55b6a6dce4b089e11621d3ed/1438044525141-

3DIYMP8QGVI68ONCE3K6/image-asset.jpeg?content-type=image%2Fjpeg

Link to figure 23: https://images.squarespace- cdn.com/content/v1/55b6a6dce4b089e11621d3ed/1438044532856-

9L52S0NGN5CMJEZS2IBO/ke17ZwdGBToddI8pDm48kFmCMzIF61sy-_3Wu4-8dZpZw- zPPgdn4jUwVcJE1ZvWEtT5uBSRWt4vQZAgTJucoTqqXjS3CfNDSuuf31e0tVESdLv39CIJ2HoiVXWY7JO duRaxLB9M5dTwscNo0qJqm-bZJt7hPbN7nzW2cG2Yt70/image-asset.jpeg?format=1000w

Source: Storytelling with data, http://www.storytellingwithdata.com/blog/2012/10/my-penchant-for-horizontal-bar-graphs

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

2.4.3.4. Check if your chart passes the squint test

The squint test will help you determine if your graph is exactly conveying the message you want.

When you - or better yet, someone other than you if you have created the graph - squint while looking at your graph, up to the point that you are no longer able to read the text, is your graph still clear? If the right elements draw the attention, if the right colour pops out and there is a clear organization in your graph, it has succeeded the squint test (Duke University Libraries).

Also testing the other way around is very important. If you have to squint your eyes or lean in towards the screen to be able to read your graph, something is up with your design. Users should be able to read and interpret the graph without squinting or leaning in towards the screen.

2.4.3.5. Test your graph

While designing a graph, you get very familiar with the data, which makes it hard to see the graph from an outsider's perspective. To make sure you are not only designing just for yourself, show your graph to others to see if they are able to read/interpret it and to see if it conveys the right message.

2.4.3.6. What should you avoid?

Here are a few things you should avoid when creating graphs and charts (Zoss, 2014):

● Avoid using 3D or ‘blow apart’ effects, because they make it hard for readers to

understand the graphic, compare displayed information and make sense of different

areas.

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

Figure 24: Example of a 3D chart

Link to figure 24: https://thumbor.forbes.com/thumbor/469x0/https%3A%2F%2Fblogs- images.forbes.com%2Fnaomirobbins%2Ffiles%2F2012%2F06%2F3Dbar.jpg

Source: Forbes, https://www.forbes.com/sites/naomirobbins/2012/06/07/trellis-plot-alternative-to- three-dimensional-bar-charts/

Figure 25: Example of a blow out chart

Link to figure 25: https://i0.wp.com/flowingdata.com/wp-content/uploads/2012/04/exploding- pie-charts-ftw.png?w=558&ssl=1

Source: Flowingdata, https://flowingdata.com/2012/04/25/world-happiness-report-makes- statisticians-unhappy/

● Do not use more than six colours in a data visualisation. Using too many colours not only

overwhelms the users, but also causes the distinguishing function of colours to be lost.

You can tell how well your colours can be distinguished by printing your graph in

greyscale.

● Do not use too many elements or data in the chart. Make sure there is a distinct focus

and purpose. Visualise data in a simple manner.

Figure 26: Example of a chart with too much information

Link to figure 26: https://junkcharts.typepad.com/.a/6a00d8341e992c53ef017ee6ec98d3970d-pi

Source: Junk Charts, https://junkcharts.typepad.com/junk_charts/2013/01/ruining-the-cake-with- too-much-icing.html

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

2.5. Icons and labels

Icons are often used in websites and interfaces to depict actions, steps in a process, or navigation options. Typical examples are icons for actions like saving, printing, downloading, sharing, etc.

Icons should be used to better communicate the underlying object, action, or idea. If their meaning is not clear, icons are little more than eye candy. If icons hinder users to complete their tasks, they only serve as visual clutter that will frustrate the users (Harley, 2014).

2.5.1. Recognition rather than recall

Icons are a nice way of conveying brand personality by matching their colour and style to your brand style, yet, icons must be meaningful on their own in a graphical user interface. A user’s understanding of an icon is based on previous experience. Due to the absence of standard icons for most cases, it is necessary to always add text labels to communicate the meaning and reduce ambiguity. This way users can recognise the actions more easily on return visits instead of having to rely on their memory to recall what actions were hidden behind each icon (Harley, 2014).

Figure 27: Example of the use of icons for creating a brand personality

Icons are used to convey brand personality and to emphasize the information at hand. However to avoid ambiguity all icons are accompanied by a text label. This way the information is catching the user’s eye, but also clearly stating what type of information the user can expect behind each icon.

Link to figure 27: https://statbel.fgov.be/en (see icons on top of the page: population, inflation, bankruptcies, baby’s, weddings)

Source: StatBel, https://statbel.fgov.be/en

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

2.5.2. Universally recognised icons are rare

There are only a couple of icons that are seen as standards because they are more or less universally recognised: the symbol of a house for the homepage, a magnifying glass for search, a printer for print, etc. Beyond these examples, however, most icons continue to be much more ambiguous because their meaning is less obvious and because they are given different meanings across various interfaces. This absence of a standard hurts the adoption of an icon over time, as users cannot rely on it having the same functionality every time it is encountered (Harley, 2014).

What is even worse is that sometimes, very similar icons are used for very different things within the same website. It is crucial to be consistent in the use of icons and not to allocate different meaning to very similar looking icons.

2.5.3. Give all icons a text label

If you are using a more universal icon, it is better to also include a label, especially if you have changed the icon to match the style of your website or interface (Harley, 2014). Even if users do not need the label to recognise the icon, it will keep your design more consistent.

Figure 29: Example of a standard icon accompanied by a label Even though they make use of the standard icon ‘magnifying glass’, they still added a label indicating what is expected of the user. This avoids ambiguity and helps the users to correctly perform their action. Source: U-Sentric, u-sentric.com

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

2.5.3.1. For what purposes can icons be used?

Icons can be used for many different purposes, given they are recognisable and meaningful. In what follows we list four purposes you might have for using icons (Harley, 2014):

● Speed up the process: Icons can help users with recognising different actions, especially

in the case of (more or less) universal icons, thus speeding up the process of navigating

through the screen or taking the right action.

● Overcome language barriers: Even though most icons are not universal, they can still

help non-native users better understand the structure of the website or interface or more

quickly find their way to language settings if available. Be aware that due to cultural

differences icons can sometimes be more confusing than clarifying.

● Enhance the appeal of the design: If icons are visually pleasing and match the style of

the website or interface they can further enhance how users experience the aesthetics of

the design.

● Create one ecosystem: When the same icons and style are used consistently throughout

different parts of the website and tools, they support users in experiencing all of these

sections and tools as part of one family.

2.5.4. Visibility of labels

Always show the labels together with the icons, not only when a user takes action (e.g. hovering or clicking on an icon). Relying on users to take action first means they have to take an unnecessary extra step and means they might have to rely on recall rather than recognition. This is especially important for icons used for navigation where lengthening the interaction time will frustrate users

(Harley, 2014).

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

2.5.5. Tips for designing icons

Once you have decided to include icons in the interface you will have to do your homework first.

This means looking at what icons are commonly used by direct competitors and other platforms your users are likely to know and use. If in this research you come across icons that are used and seemingly understood across the different platforms it is safe and even a good idea to use them too (Harley, 2014).

If you design (new) icons, the following tips can help make them recognisable (Harley, 2014):

● Icons should not be detailed drawings. Instead you should keep it simple and use as little

details as possible in the design. A schematic representation of the real life object is

preferred over a very realistic one. Icons have to be able to communicate their meaning in

a glimpse and even when they are depicted very small.

● If you think you can do with an icon on any given page or screen, you should be able to

come up with an appropriate icon immediately. If it takes you long to think of an icon it is

probably not a good idea to use one for this particular situation anyway.

● Check with users if they are able to recognise icons before using them by asking what they

think the icons mean (obviously not showing the labels in this case).

2.6. Affordances

In the physical world objects can be picked up, moved, held, etc. The characteristics - visual as well as other sensory characteristics - of these objects intuitively tell us how we can manipulate or use them. In the case of push buttons, for example, it is intuitively clear from their physical appearance that in order to use them we need to push them. This phenomenon is called an ‘affordance’

(Usability First). In digital interfaces buttons can have a similar affordance, but it is the role of the designer to mindfully create the affordance. This is often done by adding a drop shadow or an inner shadow around the edges of a button mimicking physical buttons sticking out from the surface.

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

2.6.1. Implicit (hidden) affordances

In the previous example the affordance is explicit. Although from a usability point of view explicit affordances are always better, you could decide to keep some affordances implicit for graphic design reasons (e.g. if your website or interface uses a flat design). Implicit affordances are hidden at first sight and will only become obvious once a user hovers over a button or other interactive element. It is recommended to only follow this tactic for secondary actions or navigation elements and to thoroughly test if users can figure out that the elements are clickable when they do need them (Tubik Studio, 2018). For an implicit affordance changing colour on hover - as described in section 2.2.1 on the use of colour for visual feedback - can be used.

2.6.2. Watch out for breaking the pattern

When it comes to affordances there is one thing you should avoid: do not make elements on your website or interface appear as if they are clickable when in fact they are not. We often come across the example of underlined text on websites that is not clickable. Users have learned to recognise underlined text as hyperlinks and will be confused if it turns out not to be clickable (Tubik Studio,

2018).

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

3. Structure and navigation

3.1. Cross-links between sections

Cross-linking is a way of linking back and forth between different sections of a website. This is especially helpful when those sections present a different view on the same topic, and you do not want to clutter one page by trying to add all content for a single topic to it (Kaushal, 2013). The websites of Eurostat and NSIs are in fact very good use cases for cross-links.

From the user research with the Eurostat website and specific products it is clear that, although users often have a preference for a specific form of data or set of tools (i.e., raw data vs. publications and visualisations), most of them are also interested in checking out the other forms.

Cross-links for data on a certain topic between different dissemination and extraction tools should do just that: Allow users who are mainly interested in data visualisations to also directly access the dataset(s) with raw data that were used to create the visualisations (e.g., Figure 32). The other way around, users who mainly look for datasets should also be able to directly access data visualisations that were created using those datasets. In this example, links are only made between two products, but Eurostat and NSIs typically have more sections on their website that deal with statistics on the same topic (see also Figure 34-35 for an example from OECD). Figure 32 schematically shows how cross-links would work between 3 of Eurostat’s products.

Figure 32: Schematic presentation of how cross-links would work between 3 of Eurostat’s products:

Complete database (raw data), Publications and Statistics illustrated (an example of data visualisation).

Source (icons used): Eurostat

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

Figure 33: Example of the use of cross-links (only in one direction: visualisation → raw data)

Cross-links were already used on Eurostat’s website to refer users to another view on the same topic.

Technically speaking, however, we cannot call the ‘Access to dataset’ link a cross-link yet, because users are only referred in one direction and not in the other. In this case, users can easily go from an interactive chart to the dataset that was used to create it. To have real cross-links, similar links should exist under the dataset to refer users to publications and visualisations that were created using this dataset.

Link tot figure 33: https://ec.europa.eu/eurostat/cache/digpub/sdgs/index.html?country=EU28&goal=SDG7&ind=2& chart=bar

Source: Eurostat, https://ec.europa.eu/eurostat/cache/digpub/sdgs/

Figure 34 & 35: Example of the use of cross-links in two directions; OECD allows its users to visit relevant publications that are related to the raw data and the other way around

Link to figure 34: https://data.oecd.org/oda/distribution-of-net-oda.htm (section: related publications)

Link to figure 35: https://www.oecd-ilibrary.org/development/geographical-distribution-of- financial-flows-to-developing-countries_20743149 (related databases)

Source: OECD, https://data.oecd.org/oda/distribution-of-net-oda.htm

3.2. Hyperlinks for more (internal/external) information

Hyperlinking in websites is a way of linking from one page or section to another. They are often used to provide more background information for what is being discussed without cluttering the page by trying to put all the available information on this one page. For example, when you are talking about a certain topic within page A on your website, but it is not the time nor the place to further explain this topic within this page it becomes interesting to create a hyperlink to page B, so users are able to find additional information about this topic there if they are interested.

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

Make sure your hyperlinks are an added value for users who want to learn more. Also do not exaggerate with the amount of links on one page because that would make it harder for users to scan the page.

Hyperlinks redirect users to other pages or sections which can be both internal or external.

External links are trickier because you have no control over how up to date these outside pages will remain. If you do use external hyperlinks, make sure they look and/or behave differently from internal links. We know from testing that users get frustrated when they leave the website by clicking on a link while they were expecting to stay on the same website.

Figure 36: Example of the use of hyperlinks

Hyperlinks are used on Eurostat’s website to refer users to additional information about certain topics.

This makes it easy for users who want to know more about this topic, without overwhelming them with a lot of detailed information.

Link to figure 36: https://ec.europa.eu/eurostat/statistics- explained/index.php/Archive:Healthcare_provision_statistics

Source: Eurostat, Statistics explained, https://ec.europa.eu/eurostat/statistics- explained/index.php/Archive:Healthcare_provision_statistics

3.2.1. Common mistakes

One of the most common errors people make when creating hyperlinks is to literally only use the words "click here" or “here” in the link. The result would look like this, for example: "To find out more about Keyword X, click here". However, "Click here", is meaningless by itself. Since users will scan the page for what stands out, including hyperlinks, they are likely to not read the rest of the sentence and ignore this information. Instead it is better to use phrases like, "Find out more about

Keyword X", and make the entire phrase clickable or at least the part that needs to stand out and that tells users what they can expect when they click on the hyperlink.

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

3.3. Navigation menu

Navigation menus come in different forms but you will find them in almost every website or interface. The main navigation menu is usually shown on top of each page and has a distinct design to help users quickly understand the structure of a website and navigate easily to other sections of the website from any given page (Whitenton, 2015).

3.3.1. What to pay attention to when designing a

navigation menu

3.3.1.1. Make it visible

The best practices and tips mentioned earlier about the use of colour, typography, icons and affordances are applicable to good navigation menu design as well. What follows are some extra tips that apply specifically to navigation menus (Whitenton, 2015):

● Menu items are shortcuts to specific sections that users need to be able to access quickly.

In mobile apps the menu is often hidden behind the so-called hamburger icon - a stack of

three horizontal lines - or kebab icon - three dots vertically stacked. However, on larger

screens menus should always be shown and immediately accessible.

● Place menus where users expect (from previous experiences) to find menus. This means

navigation menus go on the top of the page or in the left rail.

● Make sure that the navigation menu stands out from surrounding visual elements such as

banners and images that are also trying to get the user’s attention. The previously

mentioned tips on the use of whitespace can be useful for that.

3.3.1.2. Communicate the current location

Tell users ‘where’ the page they are currently on is located within the menu options. Users rely on visual cues from menus (and other navigation elements such as breadcrumbs, see below) to keep an overview over the website. A good way to do this is by changing the (background) colour of the selected or active menu item (see section 2.2.1 on the use of colour for visual feedback).

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

3.3.1.3. Coordinate menus with users’ understanding

The labels used for menu items are almost as important as the previously discussed visual characteristics of a navigation menu. The labels have to be clear and to the point so users can easily scan them and quickly understand what to expect behind each item. If labels are comprised of internal jargon (or a brand name) users might ignore them because the outcome of clicking on them is uncertain. If you must use a brand name for a menu item, make sure to also add a short description (Whitenton, 2015).

Tip: The main navigation menu is directly linked to and is the front-end translation of the underlying information architecture of your website. Check the section on creating and testing the information architecture with users in the guidelines on user research for statistical organisations.

3.3.1.4. Make menus easy to manipulate

Besides the visual characteristics of navigation menus and the labels used, it is also important to make sure that users can easily interact with the menus. This starts with making sure the clickable area for each menu item is big enough and not too close to other items in order to avoid mistakes.

For extensive websites, such as Eurostat’s website, it is also important to make sure users can dig deeper in the navigation (or website) hierarchy from within the menu - i.e. that they can select a page 2 or 3 levels deep straight from the menu on the homepage, for example (Whitenton, 2015).

For longer pages that require a lot of scrolling down to reach the bottom, you can also consider using ‘sticky menus’ or menus that stick on the page while the content below can be scrolled

(Whitenton, 2015). Especially when a page has a specific sub navigation, it is a good idea to make this navigation sticky.

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

3.4. Breadcrumbs

3.4.1. What are breadcrumbs?

Breadcrumbs are a navigation tool that typically sits right above the content on a webpage. As the metaphor suggests, it allows users to easily trace their way back in the website’s hierarchy by seeing where they are now and where they came from (see Figure 33 for an example). The breadcrumbs should show every step the user took in the website’s hierarchy with the page name written out, starting with the homepage. Each of these steps must be clickable so users can confidently explore the website knowing that they will easily find their way back by clicking somewhere in the breadcrumbs (Smith, 2017).

3.4.2. When to use breadcrumbs

Breadcrumbs are useful once your users can dig two or more levels deep into the website.

However, your website’s sitemap has to look like a (decision) tree with main categories split into sections and further split into subsections, etc. in which related content is grouped (Smith, 2017).

The breadcrumbs are not a replacement of the navigation menu. Users will still need the main navigation menu to make choices moving deeper into the structure. For the same reason it does not make much sense to place breadcrumbs on the homepage (Smith, 2017).

3.4.3. How to create breadcrumbs

What follows are some tips on how to create breadcrumbs (Smith, 2017):

● Create a text path for each page in the structure starting from the homepage and ending

with the current page,

● Use the labels that are used for the titles of the sections and pages, but make sure they

are meaningful,

● Add a separating character (e.g. “>”, “>>”, “—”, “|”) between each label,

● Make each label clickable, except for the one of the current page,

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

● Make the label of the current page visually different from the other labels so the use of the

breadcrumbs becomes intuitively clear.

Figure 37: Example of the correct use of breadcrumbs

Via these breadcrumbs, you can clearly see what path the user followed and which page is currently active (indicated in blue vs. grey). The first 3 items are clickable, allowing the user to easily navigate between the different levels of the architecture.

Link to figure 37: https://statbel.fgov.be/en/themes/consumer-prices/consumer-price-index

(see breadcrumbs on top of page – below logo of STATBEL)

Source: StatBel, https://statbel.fgov.be/en/themes/consumer-prices/consumer-price-index

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

4. Search and use of filters

4.1. Search option

The search feature is one of the most popular ways for users to interact with a website or application. Users are inclined to use this function because they are able to enter their needs and/or what they are looking for, and in return get an immediate answer with relevant information.

In this sense, a well-built search function is like having a conversation making it very intuitive and simple to use (Kucheriavy, 2017).

4.1.1. When to include a search option on your website?

Include search functionality on large websites to make them easier to navigate. Small websites

(under 12 pages) do not need search and in most cases, you are even better off without it. Include a search function (Kucheriavy, 2017):

● If the website has at least two levels of navigation.

● If you have any kind of database on your website, to allow searching inside the database.

● If you add new content regularly, like on a blog, news or events sections, and users might

want to retrieve older posts.

● Some people (being spoiled by Google) prefer searching over navigating so when in doubt,

include search capabilities. However, since users are spoiled with powerful search engines

such as Google, users expect the same experience with built in search features of websites

and will get frustrated if the search feature does not live up to those expectations.

4.1.2. Where should you place your search field?

Use established patterns for search. Do not get “creative” with search design - this can confuse website users. Place your search field in the top right corner - this is a pattern that is already well established in web design. Always put the search box on every page of the website and in the same spot (Raluca, 2014).

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

4.1.3. Design of a search field

When looking for search on websites, users typically look for a little box to type in.

The search field should always look like a text box on a desktop (Suwal, 2018). Accompany the search box with a simple magnifying glass icon for ease of recognition. Do not use any other icon, since the magnifying glass is what users know and expect. Search fields should also be wide enough so users can - in most cases - see their entire search query.

Put the label "Search" inside of the search box, in a lighter tint of grey to make it look like an instruction, but make sure it clears when users start typing in the box.

Figure 38: Example of a search field with clear instructions on what to do.

Link to figure 38: https://ec.europa.eu/eurostat/home? (see search bar – upper right corner)

Source: Eurostat, https://ec.europa.eu/eurostat/home?

4.1.4. The use of auto-suggest

Auto-suggest can help users to find the right keywords or to finish their search more efficiently.

Yet, keep in mind not to overload users. Do not show more than the 10 most relevant results in auto-suggest, preferably even closer to 5. In order to provide a good auto-suggest feature you should log search queries and analyse the most relevant search results to improve findability

(Raluca, 2014).

To further guide users, highlight matching keywords or criteria in the search auto-suggest.

Providing access to the pages recently visited and searches performed in the near past can help users resume tasks that they left incomplete and that may be hard to recall. Search engines such as Google and Bing help users retrace their searches by providing past histories, using cookies

(Raluca, 2014).

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

Figure 39: Example of autosuggest

Using auto-suggest will help the user to more easily find the results he/she is looking for.

Link to figure 39: https://ec.europa.eu/eurostat/home? (Use the search bar to see the auto- suggest example)

Source: Eurostat, https://ec.europa.eu/eurostat/home?

Figure 40: Example of autosuggest

Using auto-suggest will help the user to more easily find the results he/she is looking for.

Link to figure 40: https://www.cbs.nl/en-gb (Use the search bar to see the auto-suggest example

Source: Statistics Netherlands (CBS), https://www.cbs.nl/en-gb

4.1.5. Interaction with the search field

Make sure to follow the established interactions users have come to expect from search fields:

● Make sure hitting Enter after typing in the search field triggers the search.

● Hitting the escape button (Esc) should close the search auto-suggest.

● Allow users to navigate the results using the up and down arrows, followed by the enter

key to select one.

● If the search is not instant (it takes more than a second to process) always give feedback

to users by showing a progress indicator to make sure they know their query was

successful. Return results (even if partial) as soon as possible.

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

4.1.6. Visualizing the search results

The following are best practices on how to visualise the search results in a user-friendly way as users have come to expect from well-established search engines:

● Always show the user’s query in the search box while presenting the results and make it

possible and easy to modify the query so users can improve their search based on the

results they get.

● Always sort search results by relevance to enable users to find the most relevant results as

quickly as possible. Where applicable, offer to sort by other criteria (e.g., date, rating, etc.).

● Show the number of search results found. Users should have an indication of the success

of their search query.

● If no matching results were found: provide users with practical and concrete feedback if

possible. E.g., ‘no results were found’ and add a suggestion of other keywords, other pages

to look for, etc. Avoid dead ends as they will frustrate users.

● Design the proper page layout for your search results: Put details in lists and pictures in

grids. If applicable, consider allowing users to switch between list view and grid view.

4.1.7. Search vs. filter

Do not confuse search with filters: search typically takes you to a separate results page; filters refresh the content of the page you are on. The next section will discuss the use of filters.

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

4.2. Use of filters

Filters allow users to refine or filter search results to help them find relevant results and reduce the number of matching results or to efficiently make a selection by drilling down on the content offered. Filters work by eliminating items that do not satisfy specific criteria by suggesting categories and attributes users might want (but might not otherwise think of on their own). Filters have become standard for refining large sets of results (Sherwin, 2016). They are very useful for websites of statistical organisations with large databases.

4.2.1. Interaction with filters

There are different ways to filter your results:

- Interactive filtering: The search results update automatically as soon as a filter option

has been chosen. Users get immediate feedback about the results that are left after they

have narrowed down the scope.

- Batch filtering: Users are able to select multiple filter options. After choosing all the filters

they want to activate, the results will update. It is recommended to include a clearly visible

‘Apply filters’ button above the filters to allow users to manually start the filtering process.

When having to choose between interactive and batch filtering, keep the performance of your website in mind. If you expect queries to be instantaneous (results are shown in less than 1 second): use interactive filtering. If your website is likely to be slower (even if only occasionally) batch filtering can save some time for the users and, more importantly, avoid frustration (Sherwin,

2016).

4.2.2. Downsides of interactive filtering

While using interactive filtering, users keep seeing updated filtered results and this can cause them to be visually distracted. This problem occurs even if they interact with the filters quickly without scrolling down on the results page. In this case, to prevent visual interruption, it is a good idea to display the results dimmed and add a progress indicator to convey that the results are being refreshed (Sherwin, 2016).

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

Figure 41: Example of feedback during interactive filtering

When users filter their results and an interactive filtering system is in place, feedback should be provided whenever the site is not able to show results within 1 second. This can be done by e.g., making the results less vivid in colour.

Link to figure 41: , https://www.net-a- porter.com/be/en/d/Shop/Clothing/Dresses?pn=1&npp=60&image_view=product&navlevel3=Midi (Use the filter at the left-hand side to see the example of interactive filtering)

Source: Net-a-porter, https://www.net-a- porter.com/be/en/d/Shop/Clothing/Dresses?pn=1&npp=60&image_view=product&navlevel3=Midi

Figure 42: Example of feedback during interactive filtering

Link to figure 42: https://insee.fr/fr/recherche/recherche-statistiques?q=inflation (Use the filter at the left-hand side to see the example)

Source: INSEE France, https://insee.fr/fr/recherche/recherche-statistiques?q=inflation

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

5. Design components (best practices)

5.1. Buttons

5.1.1. Make buttons look like buttons

Buttons are a common element in web and application design. While they may seem like a very simple User Interface element, they need to be created thoughtfully. Buttons are crucial when it comes to performing different tasks on a website. Make sure you use the right design, shape and colour to easily communicate to users that this part of the website is clickable and actions can be performed. Well-designed buttons also help to guide users towards the most likely actions and, as such, help improve users’ experience with your website.

5.1.1.1. Shape

Make buttons rectangular with or without rounded corners because users are very familiar with buttons having this shape.

You can, of course, be more creative and use other shapes (circles, triangles, or even custom shapes), but keep in mind that unique ideas can prove to be a bit riskier. You need to ensure that people can easily identify each varying shape as a button.

Figure 43: Example of a ‘creative shape’ with a clear indication of it being a button

The Floating Action Button (FAB), which represents the primary action in an Android application, is shaped like a circled icon - because of the drop shadow that is being used, it is clear to users that this circle is clickable.

Link to figure 43: https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-

46f01eedd629/96bebd8c-9bc4-4898-a6ca-2628276fbcf4/floating-action-button-preview-opt.png

Source: Smashing magazine, https://www.smashingmagazine.com/2016/11/a-quick-guide-for- designing-better-buttons/

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

5.1.1.2. Be consistent

Regardless of the button’s form, maintaining consistency throughout the user interface is key for the user to easily perceive all buttons correctly as buttons. It is known that during scanning the web page or application users remember certain visual details and associate them with a functional element. Therefore, being consistent will not only contribute to the aesthetics of your website, but also to its ease of use (Babich, 2016).

The picture below demonstrates how including three different forms of buttons might cause confusion to the user. In such situations, creativity and experimentation in design can work against usability and create negative user experiences.

Figure 44: Consistent vs. inconsistent design of buttons

Link to figure 44: https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-

46f01eedd629/040ebc8f-3960-4452-a478-786a72d8a2d9/consistent-large-opt.png

Source: Smashing magazine, https://www.smashingmagazine.com/2016/11/a-quick-guide-for- designing-better-buttons/

5.1.1.3. Shadows and highlights

Drop shadows - as mentioned earlier when discussing the concept of affordances - are very useful for helping users to distinguish elements as buttons. By applying drop shadows you can also convey the message that the user interface element can be clicked or tapped on. “If a button casts a subtle shadow, users tend to understand that the element is interactive” (Babich, 2016).

Figure 45: Example of the use of drop shadow indicating specific elements on a website are clickable.

Link to figure 45: https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-

46f01eedd629/b1e848cc-3878-4558-8c62-e2782c31782b/button-casts-a-subtle-shadow-preview- opt.png

Source: Smashing magazine, https://www.smashingmagazine.com/2016/11/a-quick-guide-for- designing-better-buttons/

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

5.1.1.4. Visually highlight the most important buttons

While users are navigating through the interface of your website they will need guidance. The design of the layout and elements help them to locate themselves and to understand which actions are possible and important. For this reason it is key to visually emphasize the core actions and primary buttons. Without this emphasis, it is likely that users will get lost and this can cause a frustrating user experience. When designing the buttons using colours and contrast will help users to focus on the actions. In addition, placing buttons in locations that make them stand out in the layout will make sure that users notice them (Babich, 2016).

Make sure to also follow the logical user flow when placing buttons. Place a submit button to allow users to submit a form right below the last input field and not, for example on top of the page

(Babich, 2016).

Figure 46: Example of a visually highlighted button

In the example the ‘Working at INSEE” button draws the attention due to white space and colour use.

Link to figure 46: https://insee.fr/en/accueil (see the ‘quick access’ at the right-hand side)

Source: INSEE France, https://insee.fr/en/accueil

Figure 47: Example of a call-to-action button

Link to figure 47: https://blog.hubspot.com/hs-fs/hubfs/netflix- cta.png?width=1338&height=822&name=netflix-cta.png

Source: Hubspot, https://blog.hubspot.com/marketing/call-to-action-examples

5.1.2. Primary and secondary buttons

In your website there will be dialogue boxes where users have to make a choice between two actions, such as ‘submit’ or ‘cancel '. In these cases the visual design of the buttons should be used in such a way that you create a visual hierarchy between the two actions and direct users towards the primary action that you want them to choose for a smooth user flow (Babich, 2016):

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

● The primary buttons, e.g. ‘Send’, should be visually more dominant.

● The secondary buttons, (e.g., options like ‘Cancel’ or ‘Go Back’,) should have less visual

weight compared to the primary buttons. This will help users avoid accidentally choosing

‘Cancel’ when they wanted to choose ‘Submit’, and consequently having to fill in a form

from scratch. In order to decrease the visual weight of the secondary button, it is possible

to either keep this button in the same form and make the colour visually less dominant, or

to change the form of the secondary button into a text or hyperlink.

● Please note that if a button action, such as ‘Remove’, is irreversible, then the primary button

can be defined as for instance ‘Cancel’ and ‘Remove’ should become the secondary button

to avoid mistakes with big consequences.

Figure 48: Example of a visual distinction between a primary and a secondary button by changing colour accent. Note that in this example the ‘Secure Empty Trash’ action is irreversible, even though it is the primary action. However, users getting to this dialogue box have already taken a (deliberate) action to empty the trash after having moved files or folders to the trash, making it less likely that users will click on this button by accident.

Link to figure 48: http://babich.biz/content/images/2016/05/1-z80R8r4lgznwNzuAXG9OgQ.png

Source: Nick Babich, http://babich.biz/primary-secondary-action-buttons/

Figure 49: Example of a visual distinction between a primary and a secondary button by changing button form.

Example figure 49: h http://babich.biz/content/images/2016/05/1-E-

YEvRbOvP3xFTJgHm38UA.jpeg

Source: Nick Babich, http://babich.biz/primary-secondary-action-buttons/

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

5.1.3. Visualization of hyperlinks

When designing links make sure to use different states of this link. Just as when designing a button, there should be a clear indication of when something is clickable as well as clicked:

- Make sure that users are able to figure out which specific parts of the website are clickable.

Most commonly a blue colour is used to indicate this part of the text is clickable.

- Underline hyperlinks and/or make them bold when users hover over them, to indicate this

part of the text is clickable.

- Make the pointer change from an arrow to a hand.

- Make sure all hyperlinks on your website are designed consistently, both in how they look

and in how users can interact with them.

Figure 50: Example of the first state and second (hover over) state in a text.

First state: by using a different (preferably blue) colour, there is a first indication that the text is clickable.

Second state: there is clear feedback that this part is clickable when the users hovers over it.

Source: U-Sentric, example created by U-Sentric

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

5.2. Headers

5.2.1. What is a header?

The ‘header’ is commonly used to refer to the top section in web page layout. We are going to discuss this section further, because it is obviously one of the first things users notice as they land on a web page before exploring it further. Headers strongly contribute to giving a first impression of your website. The content included here is scanned very quickly by users to build this first impression. For this reason you need to be careful in choosing the elements you include in the header.

5.2.2. What does a header include?

Headers can include a variety of meaningful layout elements, for example:

● Visual Elements: Brand identity elements such as a logo or brand name, brand tagline or

slogan, corporate identity colours, photographs of your products, services, etc. However,

be sure to keep it simple.

● Written content: Copy, though brief, setting the theme of the product or service presented.

Note that in many cases, this message will be conveyed by the tagline or slogan of a

company or organisation.

● Navigational links to (first level) categories of the website’s content.

● A search bar.

● Language toggle for switching the language preference in multilingual websites.

Pay attention to selecting only the most relevant elements and providing only key functionality in the header. Prevent any element that would cause complexity or crowd the header. Analyse the most important user tasks before deciding on which elements to include.

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

5.2.3. What is the importance of a header?

The main reason why headers are important is that they have a great influence on how users judge your website and make a decision to explore it further or not. Based on eye-tracking models which show how users interact with a web page in the first seconds of their visit, it is clear that when people visit the website, they scan the page to find a hook which would catch their attention and convince them to spend some more time on the website (Yalanska, 2017).

5.2.4. Visual hierarchy of a header

Creating a visual hierarchy in the header is important, because as users are glancing to the upper part of the web page their eyes need to catch the most relevant content to perceive what the page has to offer. By creating hierarchy in the header and making the elements clear and easy to read, you can keep the visitors longer on your web page. In order to create visual hierarchy pay attention to the relationship between different elements and make sure there is a significant contrast in size, colour, layout between elements that helps particular items to stand out in the header. The element that you want the most attention to go to is the navigation because this tells users what they can expect from your website and it is what users will need to further explore it.

5.3. Accordions

5.3.1. What is an accordion?

If you have too much content to be shown at once, you can make use of an ‘accordion menu’ to progressively present content to users. “An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with each header” (Loranger, 2014). The purpose of an accordion menu is to manage an abundance of content by only presenting part of the options at a time and allowing users to dynamically switch between sections to reveal more options.

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

Figure 51: Example of an accordion.

Link to figure 51: https://jqueryui.com/accordion/

Source: jqueryui.com

Accordions are useful especially for content-rich pages. The main advantage of using accordions are:

● Providing an outline of the page content by segmenting information to different

compartments which helps users to understand the structure of the available information

while keeping the overview.

● Preventing unnecessary scrolling and enabling users to reach content quicker.

● Making users feel less overwhelmed since a big amount of information that is part of the

overall content will be hidden at any time. Please note that this also means that expanding

one section should collapse the other section that was previously expanded.

● Creating space for other content in the page layout.

● Especially for mobile devices allowing to use screen size more efficiently.

5.3.2. Things to keep in mind when using accordions

Due to the advantages listed above, accordions may seem to be a golden solution to make content- rich pages shorter. However this is not always the case. There are additional points to consider when making the decision whether to include accordions on your page or not:

● The first and most important disadvantage of accordions is that users need to read

through the labels of the accordion sections before clicking to expand one. This increases

the mental workload for users. This also means that providing clear and meaningful labels

for those sections becomes all the more important.

● Secondly, within the accordion, there might be core information that users want to see

right away as they open the web page. Creating an extra step for users to get there is not

the best idea as it will frustrate - especially frequently - returning users.

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

In this sense, it is important to evaluate which content is necessary to be displayed and which content can be hidden under an accordion.

5.3.3. When should you use an accordion?

To help you decide whether or not to use accordions on your website it is best to consider the trade offs between hiding some vs. showing all content, increasing vs. decreasing scroll behaviour, and arranging the amount of visible information:

● Accordions will not be useful if users need to read through all the information available in

order to find answers to their key questions. In this case hiding content under an accordion

would frustrate them.

Figure 52: Example of when NOT to use an accordion.

There is not enough content here to warrant an accordion. Exposing all of the content at once might make the page slightly longer, but doing so would reveal helpful information that otherwise people will miss.

Link to figure 52: https://s3.amazonaws.com/media.nngroup.com/media/editor/2014/04/28/nycares.PNG

Source: Nielsen, Norman group, https://www.nngroup.com/articles/accordions-complex-content/

● Accordions would be useful if you have many topics that you want to include on your page

and some of these topics are advanced level. Accordions can help users to explore the

content further only if they need more information. By hiding the secondary topics you can

prioritise the key topics that you expect users to read.

● For mobile use, accordions make it possible to group available information to prevent

content to be scattered. This will make it easier for users to form a picture of the available

content and to navigate towards the content they want to engage with.

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

5.4. Carousels

5.4.1. What is a carousel?

A carousel is a term that refers to a navigation tool on a website or in an app which contains multiple pieces of content and allows sliding or clicking left or right to reveal more content.

Carousels can be a powerful tool to present, e.g. the most recent content directly to the users while also allowing them to easily discover more (or older) content. As there is a lot of uncertainty about the use of carousels, however, we will list the pros and cons.

5.4.2. Greatest benefits of carousels

Carousels have two clear benefits (Pernice, 2014):

● They allow you to show more content in the same space, taking up limited screen real

estate.

● They can be made to slide through the content offer automatically, making your website

more dynamic and increasing the chances of users discovering more content on your

website.

5.4.3. Biggest drawbacks of carousels

However, there are also downsides to using carousels. Users typically scroll down on the homepage of a website soon after arriving. This means they might scroll down before discovering more content in the carousel, especially if the content shown when they enter the website is not relevant to them. If users only see one or a few items in the carousel they may get an incomplete impression of what your website has to offer (Pernice, 2014).

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

5.4.4. Tips for designing carousels

Please consider carefully if a carousel is the best way of presenting content on your webpage. If your website can use a carousel, the following tips can help guarantee a successful implementation

(Pernice, 2014):

● Limit the number of frames available in the carousel, or the times users can click through

a carousel to get back to the front. Each frame can also contain multiple pieces of content.

As a rule of thumb you should stick to 3 to 5 frames, each holding up to 3 pieces of content.

If you do exceed this number, users will have difficulty remembering what was in the first

frames when they get to the end of the carousel, which means they will have a hard time

making a choice.

● It is common practice to use dots below a carousel representing the number of frames.

This will help users recognise this part of the webpage as a carousel. Moreover, by showing

which dot is active, users do not only know how many frames are available but also where

they are within the carousel, i.e. will they discover more new content when sliding the

carousel to the left or to the right?

● Make sure the icons, images or links used to depict the available content are meaningful

and easy to understand.

● Make sure that the buttons (not necessary in mobile design) which allow users to navigate

through the carousel are shown inside the carousel - but avoid placing them on top of busy

background images - or very close to it - and make sure that they are not hidden below the

fold.

● Also make sure that those buttons are big enough to recognise and click.

Figure 53: Example of a carousel that already complies to some of the design requirements.

Only 3 items are included in the carousel and there is a clear indication that multiple items can be found by clicking the arrows at the right and left-hand side (arrows are easy to recognize and the size is large enough to click). However, there is no indication of the number of items available and the navigation button on the left is difficult to distinguish from the image below.

Link to figure 53: https://ec.europa.eu/eurostat/home? (See news releases)

Source: Eurostat, News releases homepage, https://ec.europa.eu/eurostat/home?

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

5.5. Tabs

5.5.1. What are in-page tabs?

In-page tabs are also referred to as tabs but should not be confused with the tabs used by web browsers nowadays that allow users to open multiple web pages in the same browser window. In- page tabs, like carousels, are a way to present a substantial amount of content using only limited screen real estate. The big difference is that carousels are a navigation tool allowing users to click through to different pages with content. In-page tabs on the other hand allow users to toggle between two or more views on a single content page or area (Nielsen, 2016).

As such they are a good way to present a lot of information on a page without overwhelming users with a long page that requires a lot of scrolling (Grace, 2018). In-page tabs work particularly well for allowing users to switch between different views on the same content, e.g. for explaining different subsets of a larger dataset.

5.5.2. How to make good use of in-page tabs

Despite the fact that in-page tabs seem fairly straightforward we have encountered many mistakes. The following pointers will help you to avoid those mistakes (Nielsen, 2016):

● Tabs should not be used as navigation but only to let users jump to different related views

on the same content.

● Make sure users can easily understand the labels used for each tab and know what content

to expect behind them.

● Tab labels should not require a lot of reading and interpreting, so keep them short

(preferably one or a few words). If tab labels turn out complex, in-page tabs are probably

not the best way to present your content.

● Make sure the content from different tabs can be looked at separately. If users have to

switch from tab to tab because they want to compare content it is better to show all of this

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

content on one screen. If users have to switch from tab to tab to be able to compare, this

takes more effort and increases cognitive load as users have to rely on their memory.

● Make sure all tabs are always clearly visible, also the ones that are in the background

because not selected, to avoid users not discovering them.

● Highlight the tab that is selected by using a different background colour and/or using bold

text for the label. It is also common practice to make the selected tab and the content it

reveals seem as though they are physically in front of the other tabs, using the metaphor

of index cards or tabs on folders in a file cabinet.

● Do not use more than one row of tabs because this ruins the metaphor by making it much

harder for users to see which tab is selected.

● Always put the tabs on top of the content panel where users expect them and not, for

example on the side.

5.6. Drop-down menus

5.6.1. What is a drop-down menu?

A drop-down menu is a list of items that appears when clicking on a button. The goal of a drop- down button is to allow users to choose one of the options from the list.

5.6.2. When should you (not) use a drop-down menu

Especially in the context of statistical institutes with a huge amount of content to offer, drop-down menus can be a powerful tool. However, drop-down menus are not always the right choice. The following points of attention will help you make that choice (Li, 2017):

● Drop-down menus only work well if they contain a good number of options. When there

are too many or too few options in the drop-down list, this way of selecting becomes a

burden to users, rather than being helpful. With only a few options drop-down menus

introduce an unnecessary extra step and could be replaced by radio buttons. When there

are too many options in the list, users have to scroll inside the menu and scanning for the

best option will take a lot of time. As a rule of thumb, you should try to keep the number

of options between 5 and 15.

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

○ We do see a common exception to this rule, especially in websites of statistical

organisations that want to allow users to select a country or date range to narrow

down the scope of a dataset. Because countries and years are not so difficult to

navigate, having more options in the drop-down list is acceptable. However, make

sure to put labels for countries in alphabetical order and years in chronological

order, without any gaps.

○ Consider if typing in an input field would not be faster than making a selection,

though. It is much faster for users to simply type, for example, the name of their

country or their date of birth, than to select those options from a list. To allow free-

form text input for the selection from a restricted set of options data validation has

to take place in the backend. Preferably multiple ways of typing the same option

are recognised by the data validation, allowing users to search for a country using

either full label or country code, for example.

○ It is also good practice to combine a drop-down menu and a free-from text input

field. In this case users can, for example, open a drop-down menu with countries

and start typing a country name. The list should then dynamically update to

present only the options that match the text input. However, you should in this

case make it very clear that users can type in the input field to speed up the process

because otherwise most users will not even consider this possibility.

● Do not use so called ‘interaction menus’. Sometimes websites use drop-down menus that

are linked to each other, meaning the selection a user makes in one drop-down list changes

what users can select in another drop-down menu. This is very confusing as users have no

overview of the options and how they are linked and have to rely heavily on their memory

when trying to drill down to a relevant selection.

Figure 54: Example of how NOT to use drop-down menus

Tinyprints complicated the purchasing process by using a drop-down to change the number of mugs the user wants to buy. Typing the quantity would be much faster than selecting one from a drop-down.

Link to figure 54: https://media.nngroup.com/media/editor/2017/06/05/picture8.png

Source: Nielsen Normal group, https://www.nngroup.com/articles/drop-down-menus/

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

5.6.3. What to pay attention to when using a drop-down

What follows are a few pointers for designing drop-down menus well (Li, 2017):

● It is not a good idea to leave out otherwise available options in a drop-down list because

they cannot be selected in a particular situation. Instead it is better to grey out those

options and, preferably, show a tooltip on hover over those options explaining why they

are not available.

Figure 55: Example of unavailable options in a drop-down that are greyed-out

Gradient and Tolerance options are greyed out to indicate that they cannot be selected when the No Fill option is chosen.

Link to figure 55: https://media.nngroup.com/media/editor/2017/06/05/picture6.png

Source: Nielsen Norman Group, https://www.nngroup.com/articles/drop-down-menus/

● Keep the menu label visible when the drop-down list is clicked open. Those labels remind

users of the context in which they have to make a choice. If the menu label is still visible

users do not have to recall what it said.

Do not:

Figure 56: How NOT to use a drop-down menu - label is hidden when the drop-down is activated

Square’s website hides the label, Select Business Type when the drop-down is open. Users need to recall the label in order to understand the context of the options or close it again first if they are confused.

Link to figure 56: https://media.nngroup.com/media/editor/2017/06/05/picture10.png

Source: Nielsen Norman Group, https://www.nngroup.com/articles/drop-down-menus/

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

Do:

Figure 60: Still showing the label of the drop-down menu after the menu is activated.

Make sure the label of the main menu remains available so users are reminded of the context in which they have to view the options.

Link to figure 60: https://ec.europa.eu/eurostat/home (Menu: Data)

Source: Eurostat, homepage, https://ec.europa.eu/eurostat/home

● Support keyboard input to navigate within a drop-down menu. Drop-down menus should

support the use of the keyboard on top of mouse input: users should be able to use the

arrow keys and enter to navigate towards and select an option as well as type the first

letter(s) of an option to jump to that option.

5.7. Tooltips

5.7.1. What are tooltips?

Tooltips are a function built into all web browsers but also used in application design to help users to better understand a part of the interface that might not be entirely clear on its own. They pop up as a small overlay containing help text when users hover over such an interface element. A big advantage of tooltips is that they provide extra information to users when they need it but help keep the page uncluttered when they are not needed. Tooltips can also cause frustration if they are not perceived as being helpful. The key is to find a good balance and not create tooltips that are either redundant or vital to understand how an interface element works (Babich, 2016).

Tooltips are displayed automatically when users hover the cursor over an element on the page and disappear again when the cursor moves away or after a set time has passed. Please keep in mind that tooltips can only be discovered by chance the first time users interact with a page since there are no visual clues to point at these hidden tips.

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

Figure 61: Example of good practice regarding tooltips

Link to figure 58: https://codemyui.com/social-media-icon-hover-tooltip/

Source: Codemyui

5.7.2. When to use a tooltip

The following tips will help you use tooltips in a good way (Babich, 2016):

● Tooltips can be used to progressively disclose help information for buttons or other

interface elements, without always having the text visible. “However, the text must be

supplemental, that is, not essential to the primary tasks.” Keep in mind that not all users

are very familiar with the use of tooltips, so make sure to present essential information

directly on the page. Also for tech savvy users, putting essential information in a tooltip,

would require extra effort from them to be able to use the interface well.

Figure 59: Example of when to use a tooltip

Only a little bit of information is available. By adding this tooltip, users also know when the growth was

0,3%, namely in the 4th quarter of 2018. This extra piece of information is interesting, but not crucial for users to understand which indicators can be selected.

Link to figure 59: https://www.insee.fr/en/accueil (Hover over the icons to see the tooltip)

Source: INSEE France, homepage, https://www.insee.fr/en/accueil

● Tooltips work well for features that are not heavily used or for features that behave slightly

different depending on the context.

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

Figure 60: Example of when to use a tooltip

The ZIP icon is not a common icon for most users. Therefore a tooltip is provided with an additional explanation of what will happen when clicking on this icon.

Link to figure 60: https://ec.europa.eu/eurostat/data/database (Hover over the icons used in the navigation tree to see the tooltip)

Source: Eurostat, Database, https://ec.europa.eu/eurostat/data/database

5.7.3. When to avoid using tooltips

Tooltips are not always a good idea. “Perhaps the most important rule to follow is to never use tips as a substitute for good design. If a button or other object requires users to keep checking a tip to understand it, the design is bad” (Babich, 2016). The following list presents more situations in which you should not use tooltips (Babich, 2016):

● When users need the content of the tooltip. Users cannot, for example, copy the text in a

tooltip since it disappears as soon as they move the cursor away

● When the interface element that has a tooltip belongs to a primary task and would require

hovering over it first and read the tooltip to be able to advance.

● When users visit your website or tool on a mobile device because tooltips do not work well

with touchscreens.

● When you would need a large block of text in the tooltip which would be very hard to read.

Figure 61: Example of concise and helpful information

The information in the tooltip is short and to the point, but succeeds to convey the purpose of the icon.

Link to figure 61: https://ec.europa.eu/eurostat/data/database (Hover over the icons used in the navigation tree to see the tooltip)

Source: Eurostat, Database, https://ec.europa.eu/eurostat/data/database

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

Figure 62 & 63: Example of how a tip message should NOT be placed and how it should be placed

Make sure tooltips are placed very close to but do not cover the interface element the user is trying to interact with.

Source: Example create by U-Sentric

5.8. Help and documentation

Even though it is better if a website or tool can be used without any documentation, it is sometimes necessary to provide some extra guidance to users. Documentation should be focussed on the help a user might need on a specific page and should be easy to scan and searchable. Keep the help information as short as possible and list the concrete steps users should follow (Gautam,

2018).

All documentation can be gathered on a separate page, as long as other pages have direct links to the relevant sections of this page. Help buttons leading to the documentation page are recommended to be placed close to those elements on a page that might require extra help

(Gautam, 2018).

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

Figure 67: Example of a help section that is easily accessible without standing in the way of the users’ actions. The help button is placed next to the action (Add card) that might require extra guidance and leads directly to that section in a separate help window that explains this action.

Link to figure 64: https://support.apple.com/library/content/dam/edam/applecare/images/en_US/applepay/macos

-mojave-macbook-pro-system-preferences-wallet-apple-pay-setup.jpg

Source: Apple Support, https://support.apple.com/nl-nl/HT204506

If the help message is short it can also be placed in a tooltip.

Figure 65: Example of help in the form of a tooltip. In case users would struggle to close a tab in a browser window that would not be critical since closing the window will also close all tabs in this window.

Source: Safari tabs, Apple

For more complex interactions it is a good idea to work with instructional overlays. These transparent overlays can be placed on top of the webpage or tool with help text that explains to first-time users how to use specific features. The overlay can be shown by default for visitors and/or be activated by the user by clicking on a help button.

Figure 66: Example of help in the form of an instructional overlay, in this case for a mobile app, explaining how swiping a list item will reveal extra functionality.

Link to figure 66: https://s3.amazonaws.com/media.nngroup.com/media/editor/2014/02/06/Morningstar- hintOverlay.png

Source: Nielsen Norman Group, https://www.nngroup.com/articles/mobile-instructional-overlay/

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

5.9. In-page scrolling

For most users scrolling down a page to see what it has to offer has become a habit. Keep in mind that sometimes the page design can lead users to falsely believe there is nothing to scroll for. We often see this happening in user tests: If there is a clear content block on the top of a page that is completely visible on users’ screens, with a lot of whitespace surrounding it and no hint to what is hiding below the fold, users do not scroll.

Apart from making sure users do not miss out on important elements below the fold, it is also a good idea to avoid in-page scrolling. In-page scrolling exists where content blocks on a page have their own scroll bar. This causes a lot of confusion as users will often accidentally scroll on a content block when they were expecting to scroll the entire page or the other way around

(Fessenden, 2018). In-page scrolling has become rare in web design for this reason, but pay attention to other in-page interactions that involve scrolling, e.g. zooming in and out on a map, as they cause similar problems.

Below is an example of a web page with in-page scrolling. In user tests it was observed how some users unknowingly had the cursor on the ‘Central Statistics Office’ content block, for example, when trying to scroll back to the top of the page. Instead of doing that, users scroll inside this content block only, and get confused. A way to avoid this problem is to replace the in-page scrollbars with, for example, ‘see more’ buttons that expand the content blocks to display more information.

Figure 70: Example of in-page scrolling which resulted in ‘scroll hijacking’ as the issue is sometimes called. Users were interrupted in their flow when trying to scroll down or up on the entire page, because they were activating the in-page scroll without noticing.

Link to figure 67: https://losd-data.staging.derilinx.com/

Source: Statistics Bulgaria, LOSD, https://losd-data.staging.derilinx.com/

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

6. Plain language

6.1. Write for your audience

Using plain language means to write clearly and to tailor your writing to your target audience. The single most important factors that determine the success of your text are your understanding of your readers’ prior knowledge and level of motivation.

1. How much do your readers already know about the topic of the text? The less prior

knowledge they have, the more you need to help them to understand your text.

2. How motivated are they? The lower their motivation, the lesser the effort they are

willing to make to read your text, which means you have to make the text easy to

read – and look easy to read too.

Keep these two factors in mind when you plan and write your text, for example when you choose the content, words and tone.

6.1.1. What is plain language?

One definition of plain language is: “A communication is in plain language if its wording, structure, and design are so clear that the intended audience can easily find what they need, understand what they find, and use that information.”

(Source: International Plain Language Federation)

This definition focuses on the fact that people come to your site for a purpose: to find statistics, complete a survey, find the answer to a question they have googled, which led them to your site.

6.1.2. Plan your text

Before you start writing, think about the target audience of your text. What is their goal with reading the text? What do they already know about the topic? In some cases, it is also important to consider the intended readers’ attitude towards the content of the text. For example, having to

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

complete a survey can be a very unwelcome message for business. A clear text in a friendly, helpful tone can convince the recipients to read the text and complete the task.

6.1.3. Not sure who your audience is?

If you do not know much about who your audience is, think of them as people who are interested in your subject, but have no detailed knowledge about the topic. Use your writing and format of writing as a way to guide users through your content and tools.

6.1.4. What do your readers need and want to know?

Consider what content you need. What are the questions your readers may have? Plan your text so readers can easily find the answers, for example, by including descriptive headings and subheadings. The questions may be, for example:

● “What’s new in this release? What has changed since the last release of these statistics?”

when reading about the latest release of some statistics

● “How do I contact them?” when looking for help

● “What do I need to do?” when completing a survey.

6.2. How to write

● Write clearly and tailor your text to the intended readers

○ Only include the relevant information – do not try to cram in too much information.

○ Begin with the most important information – from your readers’ perspective.

○ Stick to one main idea or statement per sentence, with no more than one or two

supporting clauses.

○ Cut out unnecessary words; it makes important facts more memorable.

○ Avoid jargon as much as possible. If you have to use technical terms, include an

explanation unless you are certain your readers understand the terms.

● Use a simple, uncluttered layout

Usability guidelines for websites and products of statistical organisations - © U-Sentric | 09/12/2019

○ Use bulleted lists, or numbered lists for instructions.

○ Write short paragraphs with descriptive subheadings.

● Write in a friendly tone, address your audience directly with ‘you’

6.2.1. Review and revise: checklist

Before you publish, use this checklist to evaluate your text. If your answer is ‘no’ to any of the questions, you need to revise before publishing.

● Is the text structured logically, starting with the most important information?

● Does the text include enough information, not more than necessary and only relevant

information?

● Have you explained technical terms that your readers may be unfamiliar with?

● Have you used bulleted lists, short paragraphs and descriptive subheadings?

● Is the text grammatically correct? Have you checked that all the words are spelt correctly?

● Have you asked a colleague to read your text?

Examples

Example 1:

● Subheadings in the form of questions

● Directly addressing you

Figure 68: Example of subheadings in the form of a question, that addresses you as the visitor directly

Link to figure 68: (https://www.nisra.gov.uk/statistics/selected-survey/household-survey- central-survey-unit-csu)

Source: Statistics Northern Ireland

Example 2:

● Bulleted list

● Statistical term explained

Figure 69: Example of bulleted lists and statistical term explained

Link to figure 69: https://beta.abs.gov.au/Criminal-courts.html

Source: Unknown

Example 3 (https://www.cbs.nl/en-gb/news/2019/02/consumer-prices-1-7-percent-up-in-2018) &

Example 4 (https://www.stats.govt.nz/news/dairy-cattle-numbers-dip-again):

● Informative heading in the form of a statement

Figure 70: Informative heading in the form of a statement - The most important information first

Link to figure 70: https://www.cbs.nl/en-gb/news/2019/02/consumer-prices-1-7-percent-up-

in-2018

Source: SBC - Statistics Netherlands

● The most important information first

Figure 71: Informative heading in the form of a statement - The most important information first

Link to figure 71: https://www.stats.govt.nz/news/dairy-cattle-numbers-dip-again

Source: Statistics New Zealand

6.2.2. Use of short descriptions and providing context

Think about what your readers want to know. You do not need to tell them everything. Use your opening paragraphs to:

● Summarise succinctly what you are writing about ● Tell readers what information they will find ● Put your explanation into context.

6.3. Inclusive communication

Statistical authorities have very wide audiences, from experts to the general public. Inclusive and comprehensible communication is the premise of serving their needs. When your readers both understand and feel included you have succeeded in creating a good base for them to complete the tasks they came to your site for.

6.3.1. What is inclusive communication?

According to Collins Dictionary, inclusive language means “language that avoids the use of certain expressions or words that might be considered to exclude particular groups of people, esp. gender-specific words, such as "man", "mankind", and masculine pronouns, the use of which might be considered to exclude women”.

Here are some tips and examples of how you can use language and pictures to communicate an inclusive way.

6.3.1.1. Language

Pronouns describing people whose sex is unknown or unimportant.

Use one of the following ways:

● Use “they”.

● Rewrite as plural: “If employees want to take time off, they should first contact …”.

● Repeat: “If an employee wants to take time off, the employee should first contact …”.

● Write without using a pronoun: “An employee who wants to take time off should first

contact …”.

Avoid

● “He” is used when the sex is unknown or unimportant.

● “He” or “she” is used when the sex is unknown or unimportant – which excludes those who

identify as neither man nor woman.

Professional titles

Use gender-neutral designation universally, for example

● The chair (or chairperson),

● The police officer, or

● The spokesperson.

Avoid male-gender coded designation used universally, for example

● Chairman,

● Policeman, or

● Spokesman.

6.3.1.2. Pictures and illustrations

Use

● Women and men who, due to their sex, are a minority in their business, sport or hobby

● Themes that broaden gender stereotypes on women and men (e.g., a man taking care of

children)

● People of different ethnic backgrounds

● People with different skin colour

● Various types of family constellations

● Varying body types and degrees of disability

● People of different ages

● Environments and attributes associated with different socio-economic groups

● Modern images that feel contemporary in their expression

Avoid

● Smiling women and angry/serious-looking men

● Passive women and active men

● Objectified/sexualised/purely decorative pictures of women, with a focus on their

appearance rather than on who they are

● Women photographed from above and men photographed from below

● Women depicted in nature or at home and men depicted at the office

● Sitting women and standing men

● Relationship-oriented women and goal-oriented men

● Homogenous choice of images in which all people portrayed represent the same cultural

and/or socio-economic group

● All those portrayed have the same ethnicity

● Selection of pictures in which everyone is the same age and has the same body type

● Details in the picture that are irrelevant yet attract attention

● Frequent use of pictures of a core family but no single people or same-sex couples

● Old pictures in which the people/details/environments are perceived as outdated

6.3.2. Make calls to action (buttons) and links

descriptive

Use of plain language is not only important in bigger blocks of text, but also when it comes to labels of interface elements. Users avoid interface elements without a clear meaning. Each button or link in your user interface should have a meaningful label. This means that the label has to explain to the user what clicking on the button or link will do. When they know what to expect users will feel more comfortable exploring the website or tool. Vague labels like ‘Submit,’ might not provide enough information about the action: What will happen upon clicking submit?

Use action verbs to indicate the function of the button. In the example below the label makes it very clear to users that when they fill in their personal information and click the button at the bottom of the form, an Amazon account will be created in their name. The label is clear and has a specific meaning that is relevant to the task it belongs to. This helps to assure users that they are taking the right actions (Babich, 2016).

Figure 72: Example of a label that clearly states what will happen when users click the button

Link to figure 72: https://i.ytimg.com/vi/nVA5d9-jXeg/maxresdefault.jpg

Source: Amazon

6.3.3. More online resources

● Plain language association international has two useful webpages about plain language:

○ What is plain language? – definition of plain language and a brief guide to what it

means in practice – ○ https://plainlanguagenetwork.org/plain-language/what-is-

plain-language/

○ Plain language around the world – links to national plain language resources

around the world – https://plainlanguagenetwork.org/plain-language/plain-

language-around-the-world/

● How to write clearly – a guide to plain language, published by the EU in all 24 EU languages.

It is aimed at employees at the European Commission but it works very well as a practical

guide for anyone interested in writing clearly.

● The US government has a number of guidelines and checklists on their plain language site:

https://plainlanguage.gov/

7. Web accessibility

7.1. What is web accessibility?

Design for web accessibility is the practice that ensures there are no barriers for people with disabilities - including hearing, movement, sight and cognitive impairments - to access and benefit from websites. A website is inclusive if it offers the same rich experience for anyone who is accessing it (Lawton Henry & McGee, 2018).

7.2. General guidelines for accessibility

To allow all users to access your website and interact with it, you have to work on the levels of perception, operation and understanding and cover the following good practices (Lawton Henry &

McGee, 2018):

Perception

● Provide text alternatives or ‘alt text’ for non-text elements such as images or data

visualisations. Alt text is hidden in the code of your website and will not be seen by most

users, but it can be read by dedicated browsers and hardware. Even if you are explaining

an image or graph elsewhere on the page, it is still important to provide alt-text because

otherwise visually impaired users will not know what this element is they are missing out

on.

● Provide captions for videos.

● Create content that can be presented by assistive technologies, while maintaining its

meaning.

Operation

● Make sure all users get enough time to read the content when designing dynamic

elements.

● Help users navigate on the website and make it easy to find content.

● Make it easy to use alternative input devices (other than a keyboard).

Understanding

● Make sure all text is readable and understandable for a broad audience.

● Make content appear and operate in predictable ways.

● Help users avoid and correct mistakes.

These are guidelines provided in the WCAG 2.1 initiative. More details can be found at: https://www.w3.org/WAI/standards-guidelines/wcag/

7.3. Contrast and use of colour

7.3.1. Avoid colouring text in red or green

Colour blindness is a common condition, especially amongst men (up to 8% of men and 0,5% of women are colour blind). Therefore it is recommended to not only use colour when users need to distinguish important information. Especially avoid using only red and green for distinctions because red and green colour blindness is the most common colour blindness (Munro, 2019).

Figure 73: Example of how to include people who are colour blind

Colour, patterns and numbers are used together to include people with colour blindness.

Link to figure 73: https://usabilla.com/blog/wp-content/uploads/2015/11/graphs_normal-large- opt.png

Source: Usabilla https://usabilla.com/blog/how-to-design-for-color-blindness/

7.3.2. Do not only rely on colour to convey a message

Consider an ‘Enable colour-blind friendly mode’ feature, as in the example below, to make elements of charts, graphs and maps distinguishable by patterns or textures rather than only colour.

Figure 74: Example of Trello´s colour blind friendly mode

Link to figure 74: https://66.media.tumblr.com/tumblr_m9mq0fcw4R1qea4hso1_640.jpg

Source: Trello, https://wearecolorblind.com/examples/trello-colorblind-friendly-mode/

Test graphs and charts with tools simulating colour blindness. For websites, for example, you can use http://enably.com/chrometric/. For images, COBLIS simulator is a good option which you can find at http://www.colblindor.com/coblis-colour-blindness-simulator/.

8. Beyond functionality

These guidelines focus on usability as an important aspect of user experience. In this chapter, however, we go beyond the usability of functional elements and discuss best practices for including user support, providing feedback to users, collecting feedback from users, sharing on social media and designing for users with different levels of needs and skills.

8.1. User support

When users visit your website, they should have the possibility to ask questions and get support whenever necessary. There are different ways of providing support:

● Live chat: immediate support and help. This is especially useful for tasks that users need

to perform fast.

● Help section: Users can search help articles for immediate self-service.

● Support request: Users can submit a support request using a contact form.

● Talk: Users can find a phone number they can call or request a call-back.

● Instructional overlay: Users can click on a help button to reveal an overlay that explains

the steps a user can take to complete a specific task.

Whenever you provide support for your users, make sure it is relevant based on the context the user is in (i.e. what task the user was performing or what tool she was using before requesting support).

8.2. Providing feedback to users

When it comes to designing your website and tools to provide a good user experience, it is of course important to make it as user friendly as possible and keep the chances of mistakes and errors to an absolute minimum. However, in case errors do occur, you should provide users with meaningful feedback.

8.2.1. What is an error message?

An error message is a (text) message displayed on a web page indicating that an incorrect instruction has been given - e.g. invalid input in a form’s input field - or that there is an error resulting from a fault in your website or interaction - e.g. an item that temporarily cannot be loaded from the database.

8.2.2. Error message guidelines

When error messages are needed, make sure they are clearly noticeable by placing them within the user’s flow. Error messages should state what the problem is in plain language and provide suggestions to fix the problem. A good error message should include (Nielsen, 2001):

● Human-readable language, instead of abstract error codes or abbreviations. This means

avoiding messages like, "404 Not Found", the standard error message returned by the

server when a specific web page cannot be found. Make custom error messages and make

sure users are able to understand from the message what went wrong.

● Polite phrasing and not blame users by implying that they did something wrong. This

means avoiding descriptions such as "illegal command".

● Precise descriptions of the problem to allow the technical team to look into it, but without

using jargon such as "syntax error".

● Constructive advice to help users to overcome the problem. If your database is

temporarily unavailable, for example, also advise users on how long they should wait

before they try again.

8.3. Collecting feedback from users

8.3.1. Why should you collect feedback?

If you have dissatisfied users it is good for you to know what they are dissatisfied about so you can do your best to fix the situation. For your users it is important they know they can provide feedback

and that you as an organisation encourage them to do so and will actively listen to the feedback

(Santora, 2019).

8.3.2. When should you collect feedback?

Although collecting feedback is always useful it is especially important right after a new launch or an update of your websites or tools. The feedback will help you to better analyse user activities and bugs or errors they encounter (Santora, 2019).

There are different ways to gather feedback - which are explained more thoroughly in the guidelines on user research - but these are the three main ways (Santora, 2019):

● Analytics of website use, which should be a continuous effort. Analytics will help to

monitor your website and to determine when and on what parts of the website we should

do additional research.

● Survey tools to collect feedback on specific questions you might have, like “which of these

designs do users prefer?”

● Dedicated feedback forms or specific forms included on a specific page or tool to gather

feedback on this page or tool. Feedback forms on your website should be short and have

a clear focus. They are often hidden behind a ‘floating button’ that sticks to the lower right

corner of the screen when they focus on the entire page.

8.3.3. What to pay attention to when using a feedback

form

Feedback forms should be kept simple and allow for a very smooth user experience. The following tips will help you achieve this (Bolton, 2015):

● Keep the design clean by using enough whitespace and keeping the steps users have to

take to a minimum. If a feedback form looks like it might be time-consuming or difficult to

fill in, users are less likely to provide feedback

● Make sure users have enough space to write their feedback message. Although by default

text input fields can be resized by the user, most users do not know this or otherwise will

not be happy to have to take this extra step before they can start writing.

● Make sure all form fields are clearly labelled.

● It is not a good idea to make form fields in a feedback form compulsory because this will

decrease the chances of users going through with submitting the feedback.

● Make sure your feedback form is responsive and will scale to any screen size.

Figure 75: Example of a feedback form. Provide users with a sufficient amount of white space to leave their message.

Link to figure 75: https://d26a57ydsghvgx.cloudfront.net/content/blog/1_In%20text%20images/feedback%20form

%20white%20space.png

Source: Zendesk, https://www.zendesk.com/blog/customer-feedback-forms/

8.4. Sharing on social media

8.4.1. Sharing information on social media

If you want to motivate your users to share your content on social media, and as such help you promote your offer, you should keep the following rules in mind:

● Make the sharing action specific: make sure users know what will happen when they

click on the ‘share’ button. Will they share a quote, a page, a link, a chart, …? When users

want to share an interactive chart, graph or map, make sure they know exactly what frame

will be shown in the social media post: Is it the visualisations’ default state or the one the

user has created by interacting with the visualisation? Users typically want to share exactly

what they are seeing on the screen, but if this is technically difficult to realise, you should

warn users to avoid disappointing them.

● Make sharing easy: do not make users copy and paste text or urls in their own posts, but

predefine posts for them with your content. Use a descriptive title, a summary, a quote

that is highlighted in an article, etc. and combine that with an attractive visual.

● Make it relevant: do not just include the ‘share this page’ button on every page of your

website. Thoroughly consider what types of pages or elements your users might want to

share and think carefully before putting a share button on a page. Clearly state in your

label or explanation why it might be relevant or interesting to share this page.

Figure 76: Including relevant and easy to share messages on your page.

If you want to promote sharing pages of your website and support users during this process, it is helpful if you predefine a message and add a button clearly indicating that users just have to ‘click’ and the message will be shared.

Link to figure 76: https://ec.europa.eu/eurostat/statistics- explained/index.php/Balance_of_payment_statistics (See tweets on top of page)

Source: Eurostat, Statistics explained, https://ec.europa.eu/eurostat/statistics- explained/index.php/Balance_of_payment_statistics

8.4.2. Make your users follow you on social media

Do not simply put a “Follow us on Facebook” button on your website but give users a good reason to follow you (Boag, 2012). You can make the action more appealing by saying, for example, ‘Follow us on Facebook to stay up to date on the latest publications of European statistics.’

8.4.3. Add labels to social media icons

Even though social media icons are well known by most users, it is still important to add a label.

Depending on the context of your page and the actions users are able to take, it can easily become confusing whether a user will be sharing something or liking something. A label will help users understand exactly what will happen if they click on a social media share button.

Figure 77: Example of adding a descriptive label to a social media icon.

To make sure the label is not unambiguous, or users do not get the wrong expectations, it is important to add a label to each icon. This will avoid users having to think about what will happen when they select the icon.

Link to figure 77: https://ec.europa.eu/eurostat/statistics- explained/index.php/Balance_of_payment_statistics (see tweet on top of page)

Source: Eurostat, Statistics explained, https://ec.europa.eu/eurostat/statistics- explained/index.php/Balance_of_payment_statistics

8.5. Layers of functionality - catering to light and advanced

users, and everything in between

8.5.1. What are layers of functionality?

If you are designing or redesigning a web page or tool that is (likely to be) popular with a broad range of users - from light users to advanced users - consider ways of catering to the needs of those different types of users. Even though a data extraction tool, such as Eurostat's Data Explorer, for example, is aimed at advanced users, keep in mind that the tool is also consulted by light users.

This means that any such tool, at first sight, should look straightforward and simple, putting the basic features a light user wants and needs in the foreground - user research is needed here, to understand what light users (would) use the advanced tool for. This way light users will not be scared to explore the tool and find out what it can do for them. At the same time, this tool should obviously cater to all the needs of the advanced users it is mainly for. This means it should also include the more advanced features for them.

A way to do this could be to hide more advanced features in a panel that is closed by default so it does not stand in the way of light users. However, this is tricky since it introduces extra clicks

(and/or scrolling) for the advanced users, for whom the tool was designed in the first place.

Especially for frequent tasks, advanced users should not have to go through extra clicks. A possible way to overcome this would be to combine these layers of functionality with a form of

personalisation, as described in the next section. In that case advanced users could indicate their preference, i.e. what feature set do they want and need, and have this preference remembered so their feature set is waiting for them each time they come back to the tool.

Figure 78: Example of a layered interface that can be personalised according to the user’s wishes.

Adobe Photoshop is a very powerful but also very complex application with a lot of features. By default, the ‘Essentials’ workspace is activated showing only the most essential tool boxes on the right and a specific set of tools on the left. Users with specific goals or habits can switch to another workspace - e.g. photographers can switch to the ‘Photography’ workspace - which will be remembered next time the application is launched by the user. More advanced users can also manually toggle specific toolboxes on or off (currently only the checked ones are displayed.

Link to figure 78: https://blog.breathingcolor.com/wp-content/uploads/2016/05/BC-workspaces- photoshop-2-e1465832649665.jpg

Source: Adobe Photoshop

8.5.2. Personalisation and automation

Statistical websites attract a broad spectrum of users to their website. The previous guidelines will benefit all users. But some of the users have more specific needs. To be able to cater to the needs of advanced users we provide some tips that could be used to make their experience even better.

8.5.2.1. Personalisation: create an account and save datasets

Allow (advanced) users to save datasets or data dissemination (i.e., reports and data visualisations). Users who frequently need the same datasets will benefit from having an account in which they can save relevant data.

Figure 79: Example of personalisation: the ability to save ‘reports’

World Bank allows signed in users to save charts, maps, tables and metadata in personal folders for later reference.

Source: World Bank, https://data.worldbank.org/ (My reports)

8.5.2.2. Automation

Experienced users often come to a website with a specific goal in mind. This goal should be reachable as easily as possible. Therefore, providing options to users to automate certain actions will improve the experience they have with the website. An example of this is providing downloadable Excel files that automatically update when the corresponding datasets on the website are updated.

9. Designing for a mobile screen

More and more people are accessing different types of websites through a mobile device. Users are getting more and more demanding in that sense and expect each website to be mobile friendly.

Because of this trend, it is important - also for statistical websites - to cater to the needs of all types of visitors whether they visit the website on their computer or via their smartphone or tablet. Most of the guidelines listed above are applicable and should be applied for designing for the mobile screen as well, but there are a few specific guidelines that need to be taken into account on top of the general guidelines.

In the first part of this section, we will first tackle general guidelines for how to design for the mobile screen and what you should pay attention to. In the second part, we will focus on how to visualize statistics on a mobile screen.

9.1. General guidelines for User Experience on mobile

devices

9.1.1. Make your website responsive

Responsive web design is an approach of dynamically adjusting the website to the user's behaviour and environment based on screen size, platform and orientation. Mobile phones come in different shapes and sizes. These differences should be considered while designing the mobile UI. Even on the smallest screens, your website should remain responsive.

Figure 80: An illustration of how various elements on a web page adapt to the screen sizes of different devices such as the display of a desktop computer, tablet, and smartphone.

Link to figure 80: https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Complete.png/380px-

Complete.png

Source: Wikiwand, https://www.wikiwand.com/en/Responsive_web_design

9.1.2. Simplify the user interface

In a mobile user interface the screen size is limited and every element you add to the screen makes it more complicated for the user to understand the information. Simplicity is one of the core principles of good design. From Dieter Rams to Bauhaus scholars this principle has been emphasized many times through design history, because for a good user experience, function should be clear to users (Domingo, 2019). This can be achieved through keeping your product simple and making sure every element in your design serves a purpose.

In order to simplify your screens make sure the content is valuable to the user, the actions are relevant for the user flow and there is a limited amount of function per screen. Overloading the page with more content, buttons, actions would distract the user's attention and cause usability problems.

9.1.3. Pay attention to specific gestures

One of the key elements of mobile interaction design is gestures. Tapping on buttons is only one gesture for users to engage and so this user interface pattern is not the only aspect that you should focus on. Some commonly used gestures are pinch zoom, tap and hold, slide and scroll. In order to optimise your design for mobile devices you need to observe how users are interacting with different elements and which gestures they use for performing different actions (Fireart Website,

2019).

Gestures do not function the same way in different platforms. So, when you are designing screens you should keep in mind that gestures might function in different ways for Android and Apple.

9.1.3.1. Do’s and don’ts for mobile gestures

What follows are two rules regarding the use of mobile gestures you should take into account when designing for mobile (Fireart Website, 2019):

● Do not use custom gestures as a primary way of interacting with your responsive website.

Instead, use standard gestures for shortcuts. People are familiar with the standard

gestures, so no extra effort is needed to discover or remember them. The worst thing you

can do is use standard gestures for an action that is not the standard. Because users are

familiar with these gestures from other experiences they will continuously make mistakes

and get very frustrated.

● It is absolutely normal to use gestures as a supporting mechanism for existing navigation

(e.g. navigation shortcuts), but it is better to avoid using gestures as a primary method of

interaction with your responsive website (i.e., completely replacing the main navigation via

a menu). Unless your mobile experience is a game, people rarely appreciate being forced

to learn new ways of interacting to get very common things done.

9.1.4. Consider how users hold their mobile devices

When you are designing for mobile experience, always keep in mind the hand position of users.

Although there is no standard way for users to hold smartphones, it is common behaviour that users would hold their phones with one hand and use their thumbs to interact with the screen.

This brings a constraint to your design in terms of what areas are easily accessible to users and what areas are not. It is fundamental to consider the areas within thumb reach when placing action buttons on the screen.

9.1.5. Use large fonts

If you have configured your designs properly to your screen size, font sizes will be automatically scaled according to the user’s device, but there are some additional recommendations for fonts on top of that.

For primary text it is recommended to use a body font size of at least 16 pixels. For secondary text

(e.g. captions) 13 or 14 pixel is an acceptable size. Using a font size of 16 pixels increases legibility

and allows users to read the body text at a natural distance from their devices. There is also a technical reason for not using a smaller font size in fields or text boxes. If smaller font sizes are used, Apple’s operating system automatically zooms into the related field to increase the font size.

This causes an interruption in use, because users need to zoom out manually after typing in the text (Kennedy, 2018).

Try to also avoid using too many different fonts and font sizes because it leads to messy and complicated page layouts (see also section 2.3.1 on ‘Keep the number of fonts used at a minimum’).

9.1.6. Buttons and links

When designing buttons and links, two ergonomic factors to take into consideration are the size of the finger and the accuracy of a tap gesture. These two factors play an important role in defining the size of the button or links and the layout of tap targets.

Tapping is very different from clicking. During tapping on a mobile screen users are not as accurate as when using a mouse or trackpad. In comparison to a cursor, the size of the finger requires a much bigger target area. “The average adult finger pad is about 10mm wide, so it is recommended to have a minimum tap target size of about 7mm, or 48 pixels wide – at least for the most important tap targets” (Sentance, 2016).

Both the size of the tap targets and the distance between the tap targets should be sufficient to prevent errors when using buttons and links.

Figure 81: Showing the different sizes of buttons and fingers

Link to figure 81: https://miro.medium.com/max/640/0*E5IKQ8_HH4rweDAu.jpg

Source: User Experience planet, User Experienceplanet.org

9.1.7. Make navigation self-evident

Navigation is the top function that you need to pay attention to when it comes to designing any digital user interface. Key features or functions of your website or mobile application can become completely useless if users cannot reach them.

In order to help your users find their way in your mobile website or app, the main strategy you should follow is to keep the navigation in line with the expectations of users. It is recommended to “use navigation patterns that are familiar to your target audience so that the navigation doesn’t require any explanation” (Babich, 2018).

Building navigation systems that are familiar to users requires the pursuit of universal navigation patterns that have become conventional for users. There are a lot of options out there today for responsive navigation. We will discuss the most common types that suit statistical, content heavy websites best.

● The “Do Very Little” Pattern

“Do Very Little” is a navigation pattern that allows you to show the primary navigation bar at all times. If the main navigation is never hidden when using the mobile website or app, users will not get lost or not have to search for the navigation element.

Hiding the navigation on the screen (i.e. ‘progressive disclosure’) makes it harder to use mobile websites. “Progressive disclosure is a good option, [yet] it should only be pursued when a better option doesn’t exist” (Poteet, 2017). For this reason, eliminating progressive disclosure and increasing the visibility of navigation is a good approach for mobile user experience design.

Figure 82: Example of the ‘do very little pattern’. User Experience London 2017 uses a pattern that maximizes its navigation’s visibility and utility.

Link to figure 82: https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-

46f01eedd629/0a1b2ee7-9dc1-4006-9078-6d62045f91a3/ux-london-2017-opt.png

Source: User Experience London

This pattern is suitable for your website if you want to build a relatively simple structure. If your navigation structure is too nested with many levels, then the visibility of only one level might not be sufficient in enhancing the user experience. For websites with deeper navigation models, we recommend using other patterns.

● The Multi-Level Toggle

Multi-level toggle pattern enables users to expand the subsections of a website and see the contents on mobile screens (Poteet, 2017). While using this pattern, users can tap on the titles of the primary navigation menu to reveal the subsections. It is best to use this pattern if your information architecture is built for two levels.

Figure 83: An example of a multi-level toggle menu on the website of StatBel.

Link to figure 83: Go to mobile website of STATBEL and choose ‘themes’: https://statbel.fgov.be/en

Source: StatBel, https://statbel.fgov.be/en

● The Hamburger icon

Several (statistical) websites have already included the progressive disclosure of their main navigation and hidden it behind a ‘hamburger menu’.

Figure 84: Examples of the usage of Hamburger menus on Eurostat’s and INSEE’s website

Link to figure 84: Go to mobile website of Eurostat and INSEE and have a look at the ‘menu’ button: urostat, https://ec.europa.eu/eurostat/web/main/home and INSEE, https://www.insee.fr/en/accueil

Source: Eurostat, https://ec.europa.eu/eurostat/web/main/home and INSEE, https://www.insee.fr/en/accueil

Even though there is a lot of discussion about the universal understandability of this icon, it can be used to hide your navigation and should not influence the findability of information on your website. The following guidelines should be taken into account, though:

● Always keep in mind the reach of the user's thumb while using a mobile phone. As it is the

main way of browsing your website, it should be within reach (see section 9.1.4 for more

information).

Figure 88: Example of a thumbs’ reach while working on a mobile phone.

Link to figure 85: https://www.metaltoad.com/sites/default/files/styles/large_personal_photo_870x500_/public/201

9-03/image_1.png?itok=jiJmaISs

Source: User ExperiencePlanet, User Experienceplanet.org

● Always add a label. Even though the hamburger menu has been around for a couple of

years now, research still shows that a lot of users tend to ignore the hamburger icon,

having no clue what it is. When a label, such as “menu” is added, they immediately know

what to expect from the icon.

9.2. Visualizing data on a mobile device

As mentioned in the previous section, users who access your website via their mobile device will have a specific goal in mind, that can be slightly different from when they would access your website via a computer. Your website and your visualizations should, therefore, adapt to this goal. Since mobile screens require a different type of interaction, create different expectations and have limited space, they also require a different approach when it comes to data visualization. The following best practices will show how to optimize data visualizations for mobile screens, making sure they are easy to read and interpret.

As discussed in the previous section, mobile user experience design is bound to many additional considerations concerning the context of use, technological constraints and ergonomic factors. In this chapter we will discuss the principles that can be applied specifically to data visualization for mobile devices.

9.2.1. Simplify user interface and data

The principle of simplifying the design of mobile user interfaces can be implemented to mobile data visualization by making sure that only the essential elements of the graphs are visible to users.

If there are elements of secondary importance such as axis labels, icons, they can be removed as long as users can still understand the graph.

In the case of Eurostat and NSI websites it is, however, recommended to provide access to a more detailed version of the graph in case users would require this. But it is a good starting point to avoid overloading mobile users with too much information and to improve the user experience for them.

Figure 86: Example of a mobile data visualization with less information. The user is still able to interpret the graph.

Link to figure 86: https://espeo.eu/wp-content/uploads/2018/04/grafika3_v1-450x601.png

Source: Espeo software, https://espeo.eu/blog/making-data-visualization-a-major-feature-of-your-next- app/

9.2.2. Use the potentials of mobile devices

Although designing for mobile screens has its limitations due to screen size, it also provides the opportunity to present information in a more flexible setting.

The capability to use the screen in both portrait and landscape mode brings the advantage of displaying information dynamically. You can decide to show/hide certain sets of data based on the screen mode. This allows you to adjust the graph based on what you want to convey and not be limited to a static format.

When using the condensed form of the graph in portrait mode, you can include other functions to the screen. “Isolating a data point from a graph does not only offer access to more detailed information but may be used to include specific actions and features like sharing data via social

media or email” (Brych, 2018). You should, however, tell your users explicitly that they can tilt their screen for more details (e.g. using a roll over instruction when first opening the graph).

Figure 90: Example of the difference between graph visualizations in portrait and landscape.

Link to figure 87: https://espeo.eu/wp-content/uploads/2018/04/Leverage-img1.png

Source: Google Analytics mobile and desktop apps

9.2.3. Design for mobile gestures

The interaction layer of touchscreens also provides the opportunity to make your graphics more interactive. Mobile gestures can enrich the experience of data visualizations. It can be possible for users to get additional information by tapping on a certain spot, preview its continuation by sliding horizontally and seeing individual data points by using pinch zoom gesture (Brych, 2018).

According to the guidelines of the Material Design Library, there are three key behaviours that define the mobile interaction with data visualization (Material Design Library, Data Visualisation):

● ‘Progressive disclosure’ makes it possible to show/hide details of the graph and makes

extras accessible as soon as users tap on it.

● ‘Direct manipulation’ allows users to directly interact with user interface elements, by

gestures including: zooming and panning, pagination, and data controls.

● ‘Changing perspective’ enables to view different data types, controls and motion.

9.2.4. Pay attention to screen dynamics

Mobile devices are used in different contexts and environments. The level of ambient light changes depending on the setting and time of the day, which has a direct influence on the screen brightness. Some mobile devices provide the option to switch to night mode, which increases the warmth of screen colours. For these reasons, when designing the data visualisation for mobile use, pay attention to colour. Prevent using a colour scheme with similar colours and make sure there is enough contrast with the background colour of the screen.

The visibility of certain elements such as lines or bullets can also lower due to insufficient screen brightness. You can test your design in different light conditions on different screens to make sure the visual weight of the elements stays at the right level.

Figure 88: Example of a sales dashboard with distinguishable colours.

Link to figure 88: https://espeo.eu/wp-content/uploads/2018/04/wykres-07.png

Source: Espeo software, https://espeo.eu/blog/making-data-visualization-a-major-feature-of-your-next- app/

9.2.5. What to avoid?

One common mistake for designing for mobile screens is trying to include too much information and detail into the limited screen size. Displaying too much text is unnecessary, mainly because in responsive design, the font size gets automatically adjusted to small screen size and the text loses legibility.

Another mistake regarding legibility is not sticking to the horizontal and vertical edges of the device as reference points during designing graphs. Using text areas pointing to other directions can be frustrating for users both because of the disrupted reading direction and the risk of switching between portrait and landscape modes when users are tilting their screen to try and read the text.

The use of too many colours, sections or styles in the visualization also causes it to lose focus. It is important to visually emphasize only the key elements.

Figure 90: Example of a graph that shows too much information in a limited space.

Link to Figure 90: https://espeo.eu/wp-content/uploads/2018/04/poor-data.jpg

Source: Espeo software, https://espeo.eu/blog/making-data-visualization-a-major-feature-of-your-next- app/

10. Conclusion

These guidelines should be used as a support or evaluation tool to check if your new design or redesign complies with the most important rules of usability. The guidelines will help you avoid making common mistakes and having to drastically change certain elements on the website after the first user test. Keep in mind that complying with all these guidelines will not guarantee success, but doing so is a first step in the right direction. Each product, page and organisation has its own context and users and therefore user testing and other user research remains crucial to design a product that really meets its users’ needs.

Although many things presented in this document have been true for a long time and will likely hold true for a long time to come, guidelines and best practices are changing and evolving. This document should, therefore, not be seen as fixed. Instead, it should be perceived and used as a

‘living’ document that can be adapted. Over time new practices should be added and the guidelines should be updated to make sure they remain relevant.

11. References

Aisch, G. (2012, June 20). Doing the Line Charts Right. Retrieved from https://www.vis4.net/blog/2012/06/doing-the-line-charts-right/

Boag, P. (2012, June 4). Social media as part of the user experience. Retrieved from https://www.smashingmagazine.com/2012/06/social-media-is-a-part-of-the-user-experience/

Budiu, R. (2014, July 6). Memory Recognition and Recall in User Interfaces. Retrieved from https://www.nngroup.com/articles/recognition-and-recall/

Babich, N. (2016, May 7). Primary & Secondary Action Buttons. Retrieved from https://uxplanet.org/primary- secondary-action-buttons-c16df9b36150

Babich, N. (2016, November 9). Tooltips in UI Design. Retrieved from https://uxplanet.org/tooltips-in-ui- design-f63e117aa3d1

Babich, N. (2016, November 9). How To Design Better Buttons. Retrieved from https://www.smashingmagazine.com/2016/11/a-quick-guide-for-designing-better-buttons/

Babich, N. (2017, June 23). 10 Tips On Typography in Web Design. Retrieved from https://uxplanet.org/10-tips- on-typography-in-web-design-13a378f4aa0d

Babich, N. (2017, June 30). The Power of Whitespace. Retrieved from https://uxplanet.org/the-power-of- whitespace-a1a95e45f82b

Babich, N. (2018, February 1). 10 Do’s and Don’ts of Mobile App Design. Retrieved from https://xd.adobe.com/ideas/principles/app-design/10-dos-donts-mobile-app-design/

Babich, N. (2018, November 20). Symmetry vs. Asymmetry in Layout Design. Retrieved from https://www.shopify.com/partners/blog/asymmetrical-design

Brych, M. (2018, April 17). Data Visualization in Web & Mobile Apps: The Best Examples of Data Visualization. Retrieved from https://espeo.eu/blog/making-data-visualization-a-major-feature-of-your-next-app/

Cao J., Zieba K. & Ellis M. (2015, May 28). Why white space is crucial to UX Design. Retrieved from https://www.fastcompany.com/3046656/why-white-space-is-crucial-to-ux-design

Clarke, A. (2012, June 18). 12 Typography Guidelines for Good Web Usability. Retrieved from https://usabilitygeek.com/12-typography-guidelines-for-good-website-usability

Domingo, M. (2019, October 24). Dieter Rams: 10 Timeless Commandments for Good Design. Retrieved from https://www.interaction-design.org/literature/article/dieter-rams-10-timeless-commandments-for-good- design

Farley, J. (2011, January 24). Use Contrasting Fonts for Maximum Impact. Retrieved from https://www.sitepoint.com/use-contrasting-fonts-for-maximum-impact/

100

Fessenden, T. (2018, April 15). Scrolling and Attention. Retrieved from https://www.nngroup.com/articles/scrolling-and-attention/

Fireart Studio. (2019). 7 Best Mobile UX Design Principles and Best Practices. Retrieved from https://fireart.studio/7-best-mobile-ux-design-principles-and-best-practices/

Gautam, A. (2018, September 29). Help and Documentation. Retrieved from https://uxgorilla.com/help-and- documentation/

Grace, E. (2018, April 12). 8 Tips to Get Tabs Right in Web Design. Retrieved from https://www.justinmind.com/blog/8-tips-to-get-tabs-right-in-web-design/

Harley, A. (2014, July 27). Icon Usability. Retrieved from https://www.nngroup.com/articles/icon-usability/

Justin M. (2011, July 11). The Difference (And Relationship) Between Usability And User Experience. Retrieved from https://usabilitygeek.com/the-difference-between-usability-and-user-experience/

Kaushal, N. (2014, June 11). Page Traffic: SEO Tips - Guide to Cross Linking. Retrieved from https://www.pagetraffic.com/blog/seo-tips-guide-to-cross-linking/

Kennedy, E. (2018, April 23). The Responsive Website Font Size Guidelines. Retrieved from https://learnui.design/blog/mobile-desktop-website-font-size-guidelines.html

Kucheriavy, A. (2017, March 12). Best Practices to Improve Text Readability for Optimal User Experience https://www.intechnic.com/blog/best-practices-to-improve-text-readability-for-optimal-user-experience/

Kucheriavy, A. (2017, November 11). Search UX Tips and Design Guidelines to Improve Search Usability. Retrieved from https://www.intechnic.com/blog/search-ux-tips-and-design-guidelines-to-improve-search- usability/

Lawton H. & McGee L. (2018, June 22). Accessibility. Retrieved from https://www.w3.org/standards/webdesign/accessibility.html

Li, A. (2017, June 11). Dropdowns: Design Guidelines. Retrieved from https://www.nngroup.com/articles/drop- down-menus/

Loranger, H. (2014, May 18). Accordions Are Not Always the Answer for Complex Content on Desktops. Retrieved from https://www.nngroup.com/articles/accordions-complex-content/

Material Design Library. (2019). Data Visualisation. Retrieved from https://material.io/design/communication/data-visualization.html#

Munro, L. (2019, October 11). The Role of Color in Product Design: UX of Color Palettes. Retrieved from https://xd.adobe.com/ideas/principles/web-design/ux-of-color-palettes/

Nielsen, J. (2001, June 23). Error Message Guidelines. Retrieved from https://www.nngroup.com/articles/error- message-guidelines

Nielsen, J. (2010, October 31). Photos as Web Content. Retrieved from https://www.nngroup.com/articles/photos-as-web-content/

101

Nielsen, J. (2012, January 3). Usability 101: Introduction to Usability. Retrieved from https://www.nngroup.com/articles/usability-101-introduction-to-usability/

Nielsen, J. (2016, July 9). Tabs, Used Right. Retrieved from https://www.nngroup.com/articles/tabs-used-right/

Nielsen, J. (2017, December 24). A 100-Year View of User Experience. Retrieved from https://www.nngroup.com/articles/100-years-ux/

Nussbaumer, C. (2012, October 14). My Penchant for Horizontal Bar Graphs. Retrieved from http://www.storytellingwithdata.com/blog/2012/10/my-penchant-for-horizontal-bar-graph

Pernice, K. (2013, September 14). Carousel Usability: Designing an Effective UI for Websites with Content Overload. Retrieved from https://www.nngroup.com/articles/designing-effective-carousels/

Pernice, K. (2017, November 12). F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile). Retrieved from https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

Peltier, J. (2011, November 18). Broken Y Axis in an Excel Chart. Retrieved from https://peltiertech.com/broken-y-axis-in-excel-chart/

Poteet, C. (2017, April 19). A Brief Overview on Responsive Navigation Patterns. Retrieved from https://www.smashingmagazine.com/2017/04/overview-responsive-navigation-patterns/

Santora, J. (2019, November 8). 9 Best Ways to Collect Customer Feedback on Your Website. Retrieved from https://optinmonster.com/best-ways-to-collect-customer-feedback/

Scott, P. (2017, September 27). The Importance of Colour in Web Design. Retrieved from https://www.tictocdigital.co.uk/latest/46-the-importance-of-colour-in-web-design

Sentance, R. (2016, May 17). How do I make sure my site is mobile friendly? A checklist. Retrieved from https://www.searchenginewatch.com/2016/05/17/how-do-i-make-sure-my-site-is-mobile-friendly-a-checklist

Sherwin, K. (2016, February 7). User Intent Affects Filter Design. Retrieved from https://www.nngroup.com/articles/applying-filters/

Suwal, N. (2018, February 21). 100 UX Design Tips. Retrieved from https://nikeshsuwal.wordpress.com/2018/02/21/100-ux-design-tips/

Tubik Studio. (2018). How to Use Affordances in User Interfaces. Retrieved from https://uxplanet.org/ux- design-glossary-how-to-use-affordances-in-user-interfaces-393c8e9686e4

Whitenton, K. (2015, November 29). Menu Design: Checklist of 15 UX Guidelines to Help Users. Retrieved from https://www.nngroup.com/articles/menu-design/

Yalanska, M. (2017, March 30). Best Practices for Website Header Design. Retrieved from https://tubikstudio.com/best-practices-for-website-header-design/

Zieliński, W. (2017, January 23). How to Use Colors in UI Design. Retrieved from https://blog.prototypr.io/how- to-use-colors-in-ui-design-16406ec06753

102

Zoss, A. (2014, February 25). Top 10 Dos and Don'ts for Charts and Graphs. Retrieved from https://guides.library.duke.edu/datavis/topten

103