Evidence-Based Design Charlie Kreitzberg November 16, 2016 Website Wednesdays

Evidence-Based Design The best possible research Expert judgment Situational analysis: what the user wants & needs Comes from an approach to medicine called “evidence-based practice”. Based on the three dimensions shown here. Has been applied to a wide-variety of fields.

Where does evidence come from? Analysis of the Literature Site Analytics User Research and Testing Intercept Surveys & Feedback What can we learn by reviewing published research? What can we learn about how users interact with our current site? What can we learn by studying our users and performing usability testing on prototypes? What can we learn by asking users questions when they are actually on our site? Research quality is highly variable. Difficult to compare studies. Difficult to draw actionable conclusions. Relates to how people use our current site. May discourage us from innovating and trying new ideas. Subject to sample bias. May get angry or ecstatic users but miss the mean. May not engage the user at the appropriate point. Usability testing does not get users in “real” situations. Tends to focus on initial experience, not repeat users.

Pros and cons for evidence-based design We can replace opinion with research and metrics. We will make better decisions and reduce risk. The websites we create will perform better for our users. Evidence is often weak and incomplete. It’s hard to assess the quality of research. May not apply to our users. May not apply to our situation. May stifle creativity and innovation.

We should be careful in generalizing from research that may reflect different populations and different goals: We are a university – not a commercial enterprise. We are not generally interested in “conversions” – that is moving a person viewing a site into a paying customer. We don’t typically have “product pages” that people search and compare. We don’t solicit reviews/comments. Our content tends to be deeper than is typical of many sites. We may move the user among multiple sites.

Where to find information: Search for articles from the Nielsen Norman Group Look at usability.gov Download Research-Based Web Design and Usability Guidelines ISO 9241-151:2008 Ergonomics of human-system interaction - Part 151: Guidance on World Wide Web user interfaces ($200) Guidelines for Academic Websites: http://www.usabilitynet.org/guidelines/academic.html

So, what can we learn? I focused only on research articles available free on the web.

Eyetracking: what makes a good image Crisp and colorful Iconic and related to content Cropped rather than reduced to fit Simple rather than busy Smiling, approachable faces Not generic or obvious stock art 70% 30% Obvious stock images are ignored 85% of the time. People spend 70% of the time looking at the left side of the page and 40% at the right, https://www.nngroup.com/books/eyetracking-web-usability/ (2010)

Use caution with carousels or content rotators… Do not assume that users will stick around to see all the slides. If It looks like an “ad” people will ignore it. Be very careful about timing. Too slow and you will lose users. Too fast and you will lose users. People for whom English is not their native language cannot process at the same speed as native speakers. People with cognitive disabilities cannot process at the same speed as people without. Use no more than five frames. Make the controls obvious. Keep the imagery simple and text very simple and large. Be aware that you may be introducing accessibility problems. (2013) https://www.nngroup.com/articles/designing-effective-carousels/

Avoid anything that looks like an ad People missed this statistic because they thought it was a banner ad. https://media.nngroup.com/media/editor/2016/04/19/gcuacuk_admissions_redesign.png

Below the Fold While it is true that users scroll more, this study of 57,453 eye fixations shows that there is a rapid drop off. 84% more attention above the fold Users will scroll if they see something visible that encourages them to scroll. Users will not scroll in the hope of finding something useful below the fold. Users may mistakenly feel they have seen all the page content when there is more below the fold. (2015) https://www.nngroup.com/articles/page-fold-manifesto/

Avoid hidden navigation… “Mobile first” strategies may not translate well to the desktop. Hidden navigation (such as ‘hamburger menus’ should not be used on desktop versions. On mobile, you may have to use hidden navigation because of screen real-estate Use it only if you have more than four navigation items Assume the user may never find the hidden navigation so provide text links Consider a highly-visible search but do not make it the only way to find content (2015) https://www.nngroup.com/articles/support-mobile-navigation/ Finding: hidden navigation significantly decreases user experience both on mobile and on desktop (2016) https://www.nngroup.com/articles/hamburger-menus/

Information scent… If users don’t find information in the place where they think it should be, they are likely to conclude that it does not exist on the site. (2004) https://www.nngroup.com/articles/wrong-information-scent-costs-sales/

Response Speed 0.1 seconds 1 second 10 seconds More than 10 seconds direct manipulation user feels in control Like turning the steering wheel on a car. user feels delay but feels the flow up to 10 seconds user is frustrated but will tolerate it user is distracted, loses continuity and may leave site https://www.nngroup.com/articles/website-response-times/ (2010)

How users read on the web Users start by scanning the page for information of interest They scan the first couple of words in a headline If the information in the heading is interesting, they will read the paragraph Users pay the most information to the top of the page Headlines should have major content in the first two words White space is critical Paragraph % Users 1 81% 2 71% 3 63% 4 32% https://www.nngroup.com/articles/website-reading/ (2013)