Downloaded 25 times
![Laminated_Springs[1]. Machine design practice](https://cdn.slidesharecdn.com/ss_thumbnails/laminatedsprings1-251116120255-2a3c06fb-thumbnail.jpg?width=640&height=640&fit=bounds)
Web Usability, Consistency, and Content Development 2015 Code(Her)-Hou-Tobolsky
- 1. Web Usability, Consistency, andContent 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 ofYou 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 theend 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’sSession 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.
- 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 theWorld Around You: (1 of 2)
- 9. 9 Usability in theWorld 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 WebUsability 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.
- 12. 12 How Do PeopleRead 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 VideoClips 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 ofHow People Read Online…
- 16. 16 What Did YouNotice? 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.
- 18. 18 A Crazy EggReport Source: http://blog.crazyegg.com/2014/10/22/cro-uses-crazy-egg-heatmaps/
- 19. 19 Krug’s Facts ofLife 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 ScanningBehavior 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.
- 22. 22 Webpage Critique (1of 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: Meaningfulheadings 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.
- 25. 25 Why Web Consistencyand 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 WebContent 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 LinkUsability 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 Writedescriptive, 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.
- 30.
- 31. 31 To Improve theLinks 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: AnotherExample Source: https://www.nlm.nih.gov/medlineplus/ency/article/003213.htm
- 33. 33 Link Launching andLanding (1 of 2)
- 34. 34 Link Launching andLanding (2 of 2) Rewrite: Talk to your health care provider before stopping your medicines
- 35. 35 Key Takeaways Usabilityis 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.
- 37. 37 Books and OnlineResources 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 WeiminHou whou@userworks.com Ali (Alexandra) Tobolsky Alexandra.Tobolsky@Aquilent.com / Twitter: @AliTobolsky