1. Does This Font Make My Button Look Big? Style Guide Considerations for Human-Centered Design Jennifer Smith, e-Learning Coach/Instructional Development Manager Heidi Huff-Hague, MLS, Instructional Development Manager

2. Let’s hear from you! C - I’m interested in taking our user experience project to the next level. B - I’m interested in DIY: Low-cost ways to improve user experience D - Something else! A - I want to learn how to create or enhance our Style Guide. © Harrison College

3. How Human-Centered Design Relates to “Style” Own workOwn work by Fav203, CC BY-SA 3.0BY-SA 3.0 © Harrison College

4. 1. Begin with Basics 2. Identify the Issues 3. Evaluate the Evidence © Harrison College

5. Begin with Basics © Harrison College

6. Your User Demographics Experience Reading ability Why they visit the site Informal Interview Web Analytics © Harrison College Begin with Basics

7. © Harrison College

8. Don’t Start From Scratch Other departments Partner library/institution Professional Organization ALA Support: Web Style Guide © Harrison College Begin with Basics

9. © Harrison College

10. Don’t Start From Scratch Listserv Research/Read articles Creative Commons licensed resources Adobe Legal Style Guide Queensland Government Web Writing and Style Guide The Orange Grove: Web Writing Style Guide © Harrison College Begin with Basics

11. © Harrison College

12. Personalize Adopt a writing style Add institution-required components Follow accessibility guidelines Incorporate e-learning elements Focus on your users © Harrison College Begin with Basics

13. Identify the Issues © Harrison College

14. Use Your Data Website Analytics Search Words Frequently Asked Questions Chat Transcripts Feedback Surveys Video Views © Harrison College Identify the Issues

15. © Harrison College

16. Your Site’s Usability © Harrison College Identify the Issues EASE OF USE LEARNABILITY USER- SPECIFIC INTUITIVENESS

17. Usability Testing ● How users interact with site ● Ongoing Process © Harrison College Identify the Issues

18. Usability DIY User-identified tasks from initial interviews/data Free screen recording software: Jing Screenr Screencast-o-matic Use join.me to do testing remotely Chart data to easily identify trends Survey for qualitative data © Harrison College Identify the Issues

19. Usability Testing Example University of Washington Libraries Video Tutorials © Harrison College Identify the Issues USABILITY Does it do what it’s supposed to do for users?

20. © Harrison College Identify the Issues Results Focus on specific research problems in videos Embrace quality Keep tutorials VERY short Assign a practical title

21. New Learning Management System Harrison College Usability Testing Example © Harrison College 19 students Identify the Issues Asked to complete a series of tasks Observed students performing tasks Analyzed data

22. © Harrison College LEARNABILITY ERRORS How easy is it for users to do basic tasks? What errors are made? How quickly do users recover? Identify the Issues

23. © Harrison College

24. Identify the Issues

25. Evaluate the Evidence © Harrison College

26. Use Usability Testing Data Task: Go to where you’d start on your coursework Evaluate the Evidence

27. Revisit Your Style Guide © Harrison College Evaluate the Evidence

28. Track Changes © Harrison College Evaluate the Evidence

29. Critique your Own Site List pages in a spreadsheet Revisit your data Work on your work-arounds Attempt being objective Start small Use a checklist © Harrison College Evaluate the Evidence

30. Watch Your Language Goes back to knowing your user Conversational tone Check readability Microsoft Word WebPagefx Readability Score Hemingway Editor © Harrison College Evaluate the Evidence

31. © Harrison College

33. Write for the Web Links indicate content and action ○ Avoid: To access your account click here ○ Better: Account ○ Best: Access your account Be succinct Avoid jargon © Harrison College Evaluate the Evidence

34. Library Terms Users Understand John Kupersmith © Harrison College

35. Sequence Information Inverted Pyramid 2Inverted Pyramid 2 by The Air Force Departmental Publishing Office (AFDPO) is free of known copyright restrictions. © Harrison College Evaluate the Evidence

36. F-Shaped Pattern For Reading Web Content Jakob Nielsen ArticleProduct Page Search Engine © Harrison College

37. Follow Design Norms Consistent Navigation Site logo is linked to Home page Breadcrumbs Contact and Location Information Top-level navigation/banner Footer Branding Consistent with all other ‘touch points’ Links are distinct Blue, underlined, alternative text © Harrison College Evaluate the Evidence

38. © Harrison College

39. Focus on Memorability © Harrison College Quickly re-establish proficiency Evaluate the Evidence

40. © Harrison College Style Guide Application Evaluate the Evidence

41. Use Headings and Bullets Effects of Headings on Text Summarization Lorch, Lorch, Ritchey, McGovern ● Students were asked to summarize under three conditions: i) All subtopics were headings ii) Half of the subtopics headings iii) None of the subtopics were headings ● Subtopics were more likely to be included if they were a header. ● Subtopics were more likely to to be included if only half the topics were headings than if all of them were. © Harrison College Evaluate the Evidence

42. © Harrison College

43. Minimalist approach Bells & Whistles Videos that play automatically Avoid Trends Illogical icons/images Evaluate the Evidence

44. Focus on Efficiency Interaction Cost = Physical + Mental Effort Scroll Click Scan words Watch the screen Locate links Things that need to take place to do a task/complete a goal Read Remember/Store Info Think about where to go Make sense of a picture © Harrison College Evaluate the Evidence Source: Bedford (2015)

45. © Harrison College Reduce amount of info users need to remember to complete the task Reduce scrolling Website speed (page loads & wait time) Reduce the amount of words that need to be read Tips for Managing Interaction Cost Keep it Consistent Evaluate the Evidence

46. Templates from Style Guide © Harrison College

48. Activity Evaluate a Website © Harrison College

49. Evaluating User Experience is Ongoing Own workOwn work by Fav203, CC BY-SA 3.0BY-SA 3.0 © Harrison College

50. References Bedford, A. (2015). Don’t prioritize efficiency over expectations. Retrieved from https://www.nngroup.com/articles/efficiency-vs-expectations/.https://www.nngroup.com/articles/efficiency-vs-expectations/ Kucheriavy, A. (n.d.). Top 100 UX Design Tips from a User Experience Master. Retrieved from https://www.intechnic.com/blog/100-ux-design-pro-tips-from-user-experience-master/.https://www.intechnic.com/blog/100-ux-design-pro-tips-from-user-experience-master/ Kupersmith, J. (2012). Library terms users understand. Retrieved from http://escholarship.org/uc/item/3qq499w7?query=library%20terms%20that%20users%20understand.http://escholarship.org/uc/item/3qq499w7?query=library%20terms%20that%20users%20understand Lorch, R., Lorch, E., Ritchey, K., & McGovern, L. (2001). Effects of headings on text summarization. Contemporary Educational Psychology, 26(2), 171-191. Nielsen, J. (2006). F-Shaped pattern for reading Web content. Retrieved from https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/.https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/ Norlin, E., & Winters, C. M. (2002). Usability testing for library websites: A hands-on guide. Chicago: American Library Association. Schmidt, A., & Etches, A. (2014). Useful, usable, desirable: Applying user experience design to your library. Chicago: American Library Association. Tawatao, C., Kern, V., Lam, N., & Chin Roemer, R. (2014). Watch and learn: Assessment of online video tutorials. 2014 Library Assessment Conference.

51. Thank You! Questions & Comments? Does This Font Make My Button Look Big? Style Guide Considerations for Human-Centered Design Jennifer Smith: jennifer.smith@harrison.edu Heidi Huff-Hague: heidi.huff-hague@harrison.edujennifer.smith@harrison.eduheidi.huff-hague@harrison.edu