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

2. 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.

3. 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.

4. 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.

5. 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.

6. 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 :2008 Ergonomics of human-system interaction - Part 151: Guidance on World Wide Web user interfaces ($200)
Guidelines for Academic Websites:

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

8. 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,
(2010)

9. 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)

10. Avoid anything that looks like an ad
People missed this statistic because they thought it was a banner ad.

11. 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)

12. 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)
Finding: hidden navigation significantly decreases user experience both on mobile and on desktop
(2016)

13. 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)

14. 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
(2010)

15. 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%
(2013)