Usability definitions How users read Web content How users’ reading behavior affects Web content development The importance of Web and link consistency How to ensure link consistency Additional Web usability resources

1. Web Usability, Consistency,
and Content Development
2015 Code(Her) Conference
Weimin Hou, Ph.D.
Senior UX Specialist, UserWorks, Inc.
Ali (Alexandra) Tobolsky, CAPM
Usability and Information Architecture, Aquilent, Inc.

2. 2
How Many of You Are?
 Content strategists, writers, editors, or analysts
 Web developers, programmers
 Graphic designers
 Usability specialists, Information architects, user experience
specialists
 Others?

3. 3
Today’s Objectives
By the end of today’s session you will be able to:
 Describe what usability is and some Web usability basics
 Explain how people read online and how that affects Web content
development
 Summarize how to ensure Web consistency to improve usability

4. 4
Covered in Today’s Session
 Usability definitions
 How users read Web content
 How users’ reading behavior affects Web content development
 The importance of Web and link consistency
 How to ensure link consistency
 Additional Web usability resources

5. 5
Usability Definitions

6. 6
What Is Usability? (1 of 2)
 The extent to which a product can be used by specified users to
achieve specified goals with effectiveness, efficiency and
satisfaction in a specified context of use. (International
Organization for Standardization 9241-11)
 According to Jakob Nielsen in Usability 101: Introduction to
Usability, usability is defined by 5 quality components:
Learnability How easy is it for users to accomplish basic tasks the first time they
encounter the design?
Efficiency Once users have learned the design, how quickly can they perform
tasks?
Memorability When users return to the design after a period of not using it, how
easily can they reestablish proficiency?
Errors How many errors do users make, how severe are these errors, and
how easily can they recover from the errors?
Satisfaction How pleasant is it to use the design?

7. 7
What Is Usability? (2 of 2)
 After all, usability really just means that making sure that
something works well: that a person of average (or even below
average) ability and experience can use the thing - whether it's a
Web site, a fighter jet, or a revolving door - for its intended purpose
without getting hopelessly frustrated.
Steve Krug, Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability

8. 8
Usability in the World Around You: (1 of 2)

9. 9
Usability in the World Around You: (2 of 2)
Perceived affordance: the
appearance of the device
could provide the critical clues
required for its proper
operation (see Affordance,
Conventions and Design by Don Norman)
In other words:
The visual cues that the
things provide us so that we
know how to interact with
them appropriately
Photo source: http://golangtutorials.blogspot.com/2012/07/my-
favorite-ideas-in-go-ecosystem.html

10. 10
Why Is Web Usability Important?
People will leave, if they:
 Can’t find what they are looking for
 Can’t understand what they find
 Can’t use the information to solve their problems
But:
 All of us spend a lot of time working on the websites.
 We believe users can benefit from the Web content, and we can
help them!

11. 11
Reading on the Web

12. 12
How Do People Read Online?
 How do users read on the Web*?
 79% don’t read; they scan.
 Only 16% read word-by-word.
 During an average visit, how little do users read*?
 At most 28% of the words
 20% is more likely
 18% according to Web Writing That Works on PlainLanguage.gov
 Why do Web users scan instead of reading*?
 Reading from computer screens is tiring.
 The Web is a user-driven medium.
 People simply don't have time to work too hard for their information.
 Each page has to compete with many other pages for the user's attention.
* Source: NN/g Nielsen Norman Group

13. 13
F-Shaped Scanning Pattern
Source: http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/, 2006
 Users typically see about 2 words for most list items.
Source: http://www.nngroup.com/articles/first-2-words-a-signal-for-scanning/

14. 14
Usability Testing Video Clips
Background of a usability testing on SAMHSA.gov
 Conducted remotely and in-person in January 2015
 Worked with professionals, consumers, and SAMHSA staff members
 Evaluated both desktop and mobile versions by conducting pre-
defined tasks (clips showing desktop evaluation)
 Was one of the efforts to continuously improve SAMHSA.gov

15. 15
Video Clips of How People Read Online…

16. 16
What Did You Notice?
 Participants scrolled fast.
 They mentioned or pointed out:
 Page titles
 Headings
 Links
 Bulleted lists
 What did they not read and not want to read?

17. 17
Another Example…
Source:
http://blog.crazyegg.com/2014/10/22/cro-
uses-crazy-egg-heatmaps/

18. 18
A Crazy Egg Report
Source: http://blog.crazyegg.com/2014/10/22/cro-uses-crazy-egg-heatmaps/

19. 19
Krug’s Facts of Life
1. We don’t read pages. We scan them.
2. We don’t make optimal choices. We satisfice.
3. We don’t figure out how things work. We muddle through.
Steve Krug, Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability

20. 20
Implications of Scanning Behavior
Create scannable Web content using:
 Highlighted keywords (such as links, font variations, and colors)
 Meaningful headings and sub-headings
 Bulleted lists
 One idea per paragraph
 Users will skip over any additional ideas if they are not caught by the
first few words in the paragraph
 Half the word count (or less) than conventional writing
Source: http://www.nngroup.com/articles/how-users-read-on-the-web

21. 21
Webpage Critique

22. 22
Webpage Critique (1 of 2)
Source: http://www.cancer.gov/about-cancer/treatment/clinical-trials/paying/insurance
Good aspects:
 Meaningful headings
and sub-headings
 Questions as headings
 Bulleted lists
 One idea per paragraph
What to improve?
 More links, such as to
the Federal law

23. 23
Good aspects:
 Meaningful headings and sub-
headings
 Questions as headings
 Bulleted lists
Anything to improve?
 Add more headings
 Who Are Clinical Trials for?
 How Are Clinical Trials Done?
 Bold definitions
Source: http://www.cancer.gov/about-cancer/treatment/clinical-
trials/what-are-trials
Webpage Critique (2 of 2)

24. 24
Web Consistency

25. 25
Why Web Consistency and How to Ensure It
 Web consistency is critical to a positive user experience, as it:
 Allows your users to quickly transfer prior knowledge to new contexts
and focus on relevant tasks
 Builds comfort and trust with your users so that they are more likely to
stay and then come back later
 Areas to ensure Web consistency
 Behavior: Interaction and functionality
 Look and feel: Design and visual elements
 Content: Language (voice, tone, links, words, etc.)

26. 26
To Ensure Web Content Consistency
Develop and follow a Style Guide, including documentation on using:
 Abbreviations and acronyms
 Academic degrees and professional affiliations
 Font/typeface (bold and italics)
 Grammar and word usage
 Links

27. 27
Importance of Link Usability and Consistency
 Sighted users scan for links on webpages.
 Visually impaired screen reader users also scan for links.
 They scan the links to decide whether or not to click a link.
 Generic links are not good, such as:
 Click here
 Learn More
So what’s the right way to create links?

28. 28
Link Guidelines
 Write descriptive, accurate, and stand-alone link labels
 Make sure links are consistent
 Immediately and clearly display what the user expects to see on the
destination page to confirm their assumption
 Match the link label with the destination title – page or heading.
 Remember: A Link is a Promise

29. 29
Link Critique

30. 30
Link Critique
Source: https://egov.maryland.gov/mva/

31. 31
To Improve the Links
Download the DBM User Guide (PDF, size)
Download the BVA User Guide (PDF, size)
Download the API Integration Guide (PDF, size)
 Write descriptive, accurate, and stand-alone link labels
 Make sure links are consistent
 Immediately and clearly display what the user expects to see on the
destination page to confirm their assumption
 Match the link label with the destination title – page or heading.

32. 32
Link Critique: Another Example
Source:
https://www.nlm.nih.gov/medlineplus/ency/article/003213.htm

33. 33
Link Launching and Landing (1 of 2)

34. 34
Link Launching and Landing (2 of 2)
Rewrite: Talk to your health
care provider before stopping
your medicines

35. 35
Key Takeaways
 Usability is important, especially on the Web.
 Most people don’t read Web content; they scan instead.
 It is important to create scannable text.
 Consistency, including link consistency, builds trust with users and
should be carefully protected.

36. 36
Resources

37. 37
Books and Online Resources
 Usability.gov
 Ginny Reddish
 Book page: Letting Go of the Words
 Presentation: Letting Go Of the Words – Writing Great Copy
 Steve Krug
 Book page: Don't Make Me Think, Revisited: A Common
Sense Approach to Web Usability (3rd ed.)
 Nielsen Norman Group online articles
 Web Usability
 Writing for the Web
 Content Strategy

38. 38
Contact Us
 Weimin Hou
whou@userworks.com
 Ali (Alexandra) Tobolsky
Alexandra.Tobolsky@Aquilent.com / Twitter: @AliTobolsky