Download presentation
Presentation is loading. Please wait.
Published byArthur Robert Wilcox Modified over 8 years ago
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
Similar presentations
© 2024 SlidePlayer.com Inc.
All rights reserved.