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
Let’s hear from you!

A - I want to learn how to B - I’m interested in DIY:

create or enhance our Low-cost ways to improve
Style Guide. user experience

C - I’m interested in taking D - Something else!

our user experience project
to the next level.
© Harrison College
How Human-Centered Design Relates to “Style”

Own work by Fav203, CC BY-SA 3.0

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

© Harrison College
Begin with Basics

© Harrison College
Begin with Basics

Your User
Demographics

Experience

Reading ability

Why they visit the site

Informal Interview

Web Analytics

© Harrison College
© Harrison College
Begin with Basics
Don’t Start From Scratch
Other departments

Partner library/institution

Professional Organization

ALA Support: Web Style Guide

© Harrison College
© Harrison College
Begin with Basics
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
© Harrison College
Begin with Basics
Personalize
Adopt a writing style

Add institution-required components

Follow accessibility guidelines

Incorporate e-learning elements

Focus on your users

© Harrison College
Identify the Issues

© Harrison College
Identify the Issues
Use Your Data
Website Analytics

Search Words

Frequently Asked Questions

Chat Transcripts

Feedback Surveys
© Harrison College
© Harrison College
Identify the Issues
Your Site’s Usability

EASE OF USE INTUITIVENESS

LEARNABILITY USER-
SPECIFIC

© Harrison College
Identify the Issues

Usability
Testing
● How users interact with site

● Ongoing Process

© Harrison College
Identify the Issues
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
Usability Testing Example

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

Focus on specific research problems in videos

Keep tutorials VERY short

Embrace quality

Assign a practical title

© Harrison College
Identify the Issues
Usability Testing Example
19 students

Asked to complete a
New Learning
series of tasks
Management System
Harrison College Observed students
performing tasks

Analyzed data

© Harrison College
Identify the Issues

ERRORS
What errors are made?
How quickly do users
LEARNABILITY recover?

How easy is it for users

to do basic tasks?

© Harrison College
© Harrison College
Identify the Issues

© Harrison College
Evaluate the Evidence

© Harrison College
Evaluate the Evidence Task: Go to where you’d start on your
coursework

Use Usability Testing Data

© Harrison College
Evaluate the Evidence
Revisit Your Style Guide

© Harrison College
Evaluate the Evidence
Track Changes

© Harrison College
Evaluate the Evidence
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
Watch Your Language
Goes back to knowing your user

Conversational tone

Check readability

Microsoft Word
WebPagefx
Readability Score
Hemingway Editor

© Harrison College
© Harrison College
© Harrison College
Evaluate the Evidence
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
Library Terms Users Understand
John Kupersmith

© Harrison College
Evaluate the Evidence
Sequence Information

Inverted Pyramid 2 by The Air Force Departmental Publishing Office (AFDPO) is free of known copyright restrictions.
© Harrison College
F-Shaped Pattern For Reading Web Content
Jakob Nielsen

Article Product Page Search Engine

© Harrison College
Evaluate the Evidence
Follow Design Norms
Consistent Navigation Branding
Site logo is linked to Home page Consistent with all other ‘touch points’
Breadcrumbs

Contact and Location Information Links are distinct

Top-level navigation/banner Blue, underlined, alternative text

Footer

© Harrison College
© Harrison College
Evaluate the Evidence
Focus on Memorability

Quickly
re-establish proficiency

© Harrison College
Evaluate the Evidence

Style Guide
Application

© Harrison College
Evaluate the Evidence
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
© Harrison College
Evaluate the Evidence
Avoid Trends
Bells & Whistles
Videos that play automatically
Minimalist approach
Illogical icons/images

© Harrison College
Evaluate the Evidence
Focus on Efficiency

Interaction Cost = Physical + Mental Effort

Things that need to take Scroll Read
place to do a task/complete Click Remember/Store Info
a goal Scan words Think about where to go
Watch the screen Make sense of a picture
Locate links

Source: Bedford (2015)

© Harrison College
Evaluate the Evidence
Tips for Managing Interaction Cost

Reduce scrolling

Website speed (page loads & wait time)

Reduce amount of info users need to remember to complete the

task

Reduce the amount of words that need to be read

Keep it Consistent
© Harrison College
Templates from
Style Guide

© Harrison College
© Harrison College
 Activity
Evaluate a Website

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

© Harrison College
 References
Bedford, A. (2015). Don’t prioritize efficiency over expectations. Retrieved from
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/.

Kupersmith, J. (2012). Library terms users understand. Retrieved from

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

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.
 Does This Font Make My Button Look Big?

Style Guide Considerations

for Human-Centered Design
Thank You!
Jennifer Smith: jennifer.smith@harrison.edu
Heidi Huff-Hague: heidi.huff-hague@harrison.edu

Questions & Comments?