15 Strategies for a Better User Experience

15 Strategies for
a Better User
Experience
Suzanne Chapman
University of Michigan
http://bit.ly/UX4MAC

UX What I Do
Head of UX Dept @ University of Michigan Library
HathiTrust, mobile, U-M Library
"UX Generalist"
Occasional blogging & tweeting @
userslib.com & @mlibraryUX

UX Plan for today
→ Survey says
→ What is UX?
→ 15 strategies in 5 areas
→ Activities

Survey Says….
● More than half of you work at an
organization with fewer than 10 FTEs.
● Almost all of you have some restriction on
what you can do with your site.
● You have limited time, resources, skills.
● You value and understand the importance
your website plays for your organization.
Yay!

Survey Says….topics you’re interested in

UX What is UX (User Experience)?
UX ≠ just usability
UX = problem solving, creative thinking
UX = understanding user behavior
UX = design (visual & interaction)
UX = bridge between programmers and users
UX = strategies
UX = holistic

PLANNING DESIGN CONTENT TESTING
Strategic Goals
Priorities
Project Brief
DISCOVERY
User Needs
Usage Stats
Participatory
Design
Inventory
Guiding
Principles
Plain Language
Labeling
Audit
Card Sorting
Mental Models
& Design
Patterns
Visual
Hierarchy
Guerrilla Test

UX #1 - KEEP IT ABOUT THE USERS
It doesn't matter how
awesome your product is
or your presentation or
your post, your awesome
thing matters only to the
extent that it serves the
user's ability to be more
awesome.
Kathy Sierra
● It’s not about
us!
● User-centered
content
● User-centered
features
● User-centered
design

http://www.flickr.
com/photos/uglib/553362813/sizes/l/in/photostrea
m/

UX #2 - KEEP IT SIMPLE
● Simple
strategies
● Simple
research
methods
● Simple
design
● Do less to do
it better

http://www.nngroup.com/articles/which-ux-research-methods/

No time? Doing something
quick is better than doing
nothing.

Focus on strategies that are qualitative,
informal, and unscientific.
The purpose isn’t to prove
anything; it’s to get insights
that enable you to improve
what you’re building.
Steve Krug

Less time researching =
more time making things
better.

UX #3 - KEEP IT REAL
WHEN POSSIBLE:
● Real needs (not
anticipated/perc
eived/projected
needs)
● Real tasks (not
artificial ones)
● Real user data

UX #3 - KEEP IT REAL
Use what’s available to you
● usage stats
● reference interactions
○ find and analyze user goals & traits
○ failure points
How do I find a
good database
for Art History?
Easily answered but...
why did they have to
ask? This should be
easily accomplished!

What people say,
what people do,
and what they say
they do are entirely
different things.
Margaret Mead http://en.wikipedia.org/wiki/File:
Margaret_Mead_NYWTS.jpg

Get the most from your limited user
interactions.
● They overestimate, underestimate, & even
fib!
● They’re really bad at articulating their
problem.
● And they’re really really bad at coming up
with solutions.
Luckily - you have powerful
reference interview skills!

I hate the staff intranet, the
usability is terrible.
Can you give me a
specific example?
It never has the information I need.
Actual problem = the information they needed
wasn’t actually on the intranet! = content problem

Can you build a tool that will let
me mark books with a flag?
Tell me more...
I look at a lot of books and it’s
hard to keep track of which ones
I’ve already looked at.
Actual solution = add a visited link color

PLANNING: Basics
Logistics:
● Documentation and formal reporting: for
tracking, communication, and problem-solving
& analysis.
● Pick a tool & establish method of use.
○ Google Drive - spreadsheets, docs, slides, images

15 Strategies for a Better User Experience

PLANNING: Basics
Get stakeholder approval & buy in:
● If you do the work will the
recommendations be implemented?
● What do they think/need? What are their
expectations?
● Involve them directly in the work
○ they’ll empathize more
○ they’ll trust results more
○ it’s harder to be critical if you’re participating

PLANNING: Basics
Establish a set of strategic goals for your
website.
1. Keep them basic & about the big picture -
what general services should your website
provide?
2. Draft & get feedback...and agreement.
3. Refer back to them when there’s
disagreement.
4. Revise as needed.

1 PLANNING: Strategic Goals
1. Users can efficiently find known library resources &
services.
2. Users can efficiently discover new library resources
& services.
3. Users can discover library events, exhibits, and
library-related news that interests them.
4. Users can efficiently manage their library account.
5. Users can perceive the library as a responsive,
inspiring, vibrant, and valuable.
6. All users can easily access library resources and
services.

2 PLANNING: Priorities http://commons.wikimedia.org/wiki/File:Whac-A-Mole-Dog.jpg

2 PLANNING: Priorities
80/20 Rule:
80% of a product’s usage involves 20% of it’s
features (so focus on the 20%).
http://designmind.frogdesign.com/blog/the-peculiar-logic-of-remote-control-design.html

2 PLANNING: Priorities
Admit you can’t solve all problems so plan
to iterate. “Phase 1” is a useful thing to tack
onto the end of a project title.
Know when to say “no” (or “no, not right
now).

Do we really need to do
this?

Just because we can
doesn’t mean we should.

Just because we should
doesn’t mean we should
right now.

2 PLANNING: Priorities (impact v. cost)
high user impact
low user impact
critical:
roadblock to getting
an important task
done
→
medium:
would improve
convenience; reduce
training costs
→
← high:
greatly help user
productivity &
awesomeness
← low:
few users would
benefit, minor
improvement

high
cost
low
cost
1 day 3 months

high user impact
low user impact
high
cost
low
cost
•
add popular
databases to
home page
add weather to
home page
•

high user impact
low user impact
high
cost
low
cost
DO THESE
FIRST!
DON’T
EVER DO
THESE!
DO THESE
SECOND!
DO THESE
SECOND!

2 PLANNING: Priorities (goal alignment)
1. Users can efficiently find known library resources &
services. (3)
2. Users can efficiently discover new library resources &
services. (3)
3. Users can discover library events, exhibits, and library-related
news that interests them. (2)
4. Users can efficiently manage their library account. (3)
5. Users can perceive the library as a responsive,
inspiring, vibrant, and valuable. (1)
6. All users can easily access library resources and
services. (3)

2 PLANNING: Priorities (goal alignment)
Feature →
Goals weight
Add weather
to
homepage
Add popular
databases to
homepage
Find known library
resources & services
3 0 5
Discover new library
resources & services
3 0 3
Discover events,
exhibits, news
1 0 0
TOTAL (VALUE SCORE) 0 24

LOTS OF INGREDIENTS, NOW
ALL WE NEED IS A RECIPE

3 PLANNING: Project Brief
● Who’s in charge? Who’s on the team?
● What’s the timeline?
● Who are the stakeholders?
● Is this a priority effort?
● What problem are we trying to solve?
● What are the Project Goals?
● What is the scope?
● Who are the target users?
● Obstacles or constraints?
● Type of work required?

Project Name Project: Stopgap (gateway refresh)
Problem Statement Gateway is weighted too much towards
communications content and not enough towards
user-focused activities that support research and
general information needs.
Goals 1. expand focus to include more research-related
activities and minimize communications
2. better visual balance
3. establish new procedures & best practices for
management of home page content
4. ensure new changes are compliant with web
accessibility standards

Project Name Project: Stopgap (gateway refresh)
Scope 1. “Complication free”
a. work within current framework/3 column
structure & overall design
b. focus on improvements we can make
quickly
c. don’t try to solve all problems right now
2. focus is entirely on body area, footer content
and minor styling
Target Users Regular/semi-regular users of the gateway who
are focused on core activities and invested in
getting to their valued resources quicker.

PLANNING: More
● gov.uk’s design principles
● Suzanne’s Google Spreadsheet for
priorities
● Priorities: Kano Method; Affinity Diagram

http://xkcd.com/773/

DISCOVERY: Basics
● Who are your users?
● What are their goals?
● What do they want and need?
● How is your website meeting or not
meeting those needs?

Survey Says…. Your users:
● Undergrad & Grad Students
● Genealogists
● Researchers
● Wide range of technological literacy
● Diverse socio-economic background
● Alumni
● Local Media
● Church ministers & members
● Local history buffs

4 DISCOVERY: User Needs
Exploring & Documenting User Needs helps
you: a) think about your users b) identify gaps
for further investigation c) frequent reference
throughout project (to be revised as more info
is found).
1. Brainstorm with your co-workers about your
experiences with your users - their goals, their
struggles.
2. Investigate known data & conduct new research.
3. Revise.

4 DISCOVERY: User Needs
User Freshman
User Goal 1st research paper due tomorrow & just
needs something to cite. Prof said to use
library & find something called a “primary
source”
Limitations Primarily familiar with Google & Wikipedia,
doesn’t know jargon, doesn’t have a clue
where to start.
Path to
accomplish
goals
homepage → get help → research guides
→ find right subject guide → skim/nav 10
pgs of info → find recommended database
→ use database → find useful article

ACTIVITY: User Needs
1. Individually or with your neighbor - take a
few minutes to draft up some ideas about
some of your user groups.
2. Discuss with your neighbor.
3. Volunteer for report out.

Are we using our
homepage real
estate wisely?
What kinds of
valuable content
are missing?

5 DISCOVERY: Usage Stats
Google Analytics!
● Gain insight about user behavior
● Help understand how pages & features are
(or are not) being used
● Help build a case
Some applications:
A. Use vs. Screen Real estate
B. Surface hidden & valuable content

A Site Use vs. Screen Real Estate
2% :: 40% 2% :: 2% 2% :: 35%
14% :: 0.4% 30% of real estate
0.001% of site traffic

What kinds of
valuable content
are missing?

B Surface hidden & valuable content

After release, searches for
these databases should go
down!

5 DISCOVERY: Usage Statistics
● low use may mean a page:
○ isn’t findable
○ isn’t needed at all
○ is needed but needs improvement!
● get a second opinion on analysis
● mix with other data points to complete the
picture (stats don’t tell you what the users
think about the content/feature)

What parts of the
page do users
think are or are
not useful?

6 DISCOVERY: Participatory Design
Part 1: Useful/Not Useful
Part 2: Ideal Design
1. Print screenshot
2. Gather supplies (markers, post-its, and
blank paper)
3. Find participants who are interruptible
4. Explain rules & watch them go!

● Circle the things you
find useful
● Put an X through the
things you don’t find
useful
● Add a note for
anything that’s
missing

Draw your ideal library website.

ACTIVITY: Participatory Design
1. Individually - using your site screenshot,
play the role of the participant and:
■ circle the parts you find useful
■ X through the parts you don’t
■ annotate missing elements
2. Share results with your neighbor
3. Volunteer for group sharing

DISCOVERY: More
● Lots: Universal Methods of Design
● Literature Review
● Surveys
● Learning from Strangers: the art and
method of qualitative interview studies
● Observing the User Experience
● Google Analytics Conversion University

Survey Says…you want your site to be:

Survey Says…your site is:
● Clunky and old-looking landing page
● Doubt that the lay out of the site is user friendly
● It doesn't have much visual appeal, so it isn't
welcoming
● Dated
● Layout is old
● It is ugly and out of date
● looks/feels outdated
● People say they like the uncluttered and simple
design of the site but then complain that they can't
find what they need and there should be more links
on the homepage.

The details are
not the details.
They make the
design.
Charles Eames

DESIGN: Basics
1. Aesthetic-Usability Effect: nicely designed
websites are perceived as being easier to
use (whether or not they actually are).
2. Universal Design: design for the margins and
everyone benefits.
3. Don’t try to be original or fancy, just keep it
simple!

7 DESIGN: Mental Models & Design Patterns
1. People rely on past experiences
2. People scan for navigation & headings to
figure out organization
3. People look for action items (“call to action”)

7 DESIGN: Mental Models & Design Patterns
http://ui-patterns.com/patterns/Pagination

8 DESIGN: Visual Hierarchy
Order in which the eye perceives what it sees.
Gestalt Psychology proposes that the brain has
innate organizing tendencies to take individual
elements and organize them into a cohesive
whole.
1. Chunking/Grouping
2. Highlighting (color & contrast)
3. Alignment

Principle 1: Chunking/Grouping
● Things that are close together are perceived
as belonging together
● People process information better in bite-sized
chunks
● Grouping can improve recall & readability
(734) 904-7409 vs. 7349047409

No hierarchy
Workshops
EndNote Basics
Covers the basic features of using EndNote, including importing records from online databases, searching, sorting, and
organizing records. Learn how to automatically create bibliographies and in-text citations.
Location: Gallery Instruction Lab
Monday Nov 8, 9-10 am
Refworks Basics
RefWorks is a web-based tool for managing your citations. In this introductory session, we'll cover the basics of
creating a RefWorks account, importing citations from online resources, generating formatted bibliographies, and
sharing your RefWorks database on the web. We'll also work with Microsoft Word and incorporate citations from your
RefWorks database into your documents.
Location: Instruction Center
Tuesday Nov 9, 3-5pm
Zotero Basics
Zotero is a free, Firefox browser-based extension that allows you to save citation information while browsing the Web. It
is not a web application like RefWorks. With a single click from an online database, web page, news source, and library
catalog, Zoter saves citation information and provides you the ability to add notes, tag citations, or add attachments
such as PDFs of journal articles.
Thursday Nov 11, 3-5pm

Workshops
EndNote Basics
Refworks Basics
Zotero Basics

Principle 2: Highlighting
Change visual weight to give focus to important
information (and take focus away from less important
information)
color some colors carry more weight
(red is perceived as having more weight
than yellow)
value dark text has more weight than light text
size larger type has more weight
style different typefaces or effects on type can
alter weight

WORKSHOPS
EndNote Basics
Refworks Basics
Zotero Basics

Principle 3: Alignment
● Alignment creates a sense of unity and
cohesion.
● Left or right alignment is more powerful than
center aligned.
● Justify alignment typically to be avoided.

WORKSHOPS
EndNote Basics
Covers the basic features of using EndNote, including importing records from online databases, searching,
sorting, and organizing records. Learn how to automatically create bibliographies and in-text citations.
Refworks Basics
sharing your RefWorks database on the web. We'll also work with Microsoft Word and incorporate citations from
your RefWorks database into your documents.
Zotero Basics
Zotero is a free, Firefox browser-based extension that allows you to save citation information while browsing the
Web. It is not a web application like RefWorks. With a single click from an online database, web page, news
source, and library catalog, Zoter saves citation information and provides you the ability to add notes, tag
citations, or add attachments such as PDFs of journal articles.

WORKSHOPS
EndNote Basics
Covers the basic features of using EndNote, including importing records
from online databases, searching, sorting, and organizing records. Learn
how to automatically create bibliographies and in-text citations.
Refworks Basics
RefWorks is a web-based tool for managing your citations. In this
introductory session, we'll cover the basics of creating a RefWorks
account, importing citations from online resources, generating formatted
bibliographies, and sharing your RefWorks database on the web. We'll also
work with Microsoft Word and incorporate citations from your RefWorks
database into your documents.
Zotero Basics
Zotero is a free, Firefox browser-based extension that allows you to save
citation information while browsing the Web. It is not a web application like
RefWorks. With a single click from an online database, web page, news
source, and library catalog, Zoter saves citation information and provides
you the ability to add notes, tag citations, or add attachments such as
PDFs of journal articles.

DESIGN: More
1. Design patterns: Yahoo Design Library
2. User Interface Design Pattern Library
3. Mobile First
4. Universal Design
5. The Gestalt Principle: Design Theory for
Web Designers

Survey Says… your website:
“hodgepodge of information”
“problems with broken links and links going to
obsolete pages”
“We have struggled with language - trying to be
precise in our word choices”
“Tone of the text is authoritarian”
“We struggle with how to ‘group’ the various links,
pages, and information”
“It isn’t organized well”

Moreville’s UX honeycomb
http://semanticstudios.com/publications/semantics/000029.php

10 CONTENT: Basics
Collection development principles apply:
Collection
Development
Web Content
Management
Written policies & guidelines Yes Yes
Deliberate selection based on patron needs
Yes Yes
+ cost of material and resources to process,
describe, organize, and maintain
Systematic weeding of items no longer
needed
Yes Yes
Reorganize/relocate as needed to
accommodate space
Yes Yes
Create good metadata to improve findability Yes Yes
Strategy with built in analysis & assessment Yes Yes

CONTENT: Basics
1. Figure out what you have (inventory, site map)
2. Establish Guidelines - criteria for success (guiding
principles for content, style guide, plain language,
labeling)
3. Evaluate based on guidelines
a. Find problem content
b. Identify and classify content & content issues
(redundant, low-value, low-use, orphaned, out-of-
date, etc.)
4. Act (cull, improve, create new)
5. Organize (card sorting)

9 CONTENT: Inventory
Figure out what you have.
● Export from your CMS
● Manual inventory

For a number of years, librarians were
motivated to create more Web content. It
was assumed that adding more content
was a service for library users, and ... a
way to improve their Web skills and
demonstrate their fluency with
technology... Unfortunately, few libraries
predicted the content problems that this
would create down the road.
Rebecca Blackiston

10 CONTENT: Guiding Principles
#1 Start with needs:
● User needs not internal needs.
● Ease of use trumps the org chart and the
floor plan.
● Users don’t care about our internal pet
projects, they’re busy getting things done.

How we feel about our pet project:

How our users feel:

#2 Quantity matters (less is more)
● Users are often better served by fewer
pages with more succinct (and useful!)
content on them. We should err on the side
of being strategic over being exhaustive.
● Best stuff can’t shine in a sea of mediocre.

The website is not a filing
cabinet.

#3 Quality matters
● Good quality content is more helpful and
bad quality content is frustrating and wastes
users’ time.
● 7 C’s of quality web content: considered,
chunked, clear, concrete, concise,
complete, correct

Reference Services for Alumni:
As part of the University Library's mission to assist
researchers with their questions regarding the
collections, resources and services of the University
of Michigan libraries, U-M alumni are encouraged to
contact the various reference service desks for
assistance, either in person, via phone, via email, or
via instant message. University Library reference staff
and subject specialists are happy to help you use our
collections and resources. Just What Ask a the Librarian! heck If you
is
need assistance with your research, this please trying feel to
free
to browse the library's subject-based guides.
say?

Reference Services for Alumni:
U-M alumni are encouraged to use our various
reference services for help using library collections
and resources.
Try Ask a Librarian via email, phone, instant
message, or in person.
Or find a subject-based guide to help you get started.

11 CONTENT: Plain Language
● Users don’t “read” - they browse and hunt so make it
simple, clear, concise and scannable.
● Meaningful titles & headings are critical - they help
communicate key pieces of information.
● Brevity ≠ unsophisticated.
● Simplicity = sophisticated!
● It’s not about “dumbing it down,” it’s opening up to
everyone who might need our content — English as a
second language, mobile users and assistive
technology users.

11 CONTENT: Plain Language
● Less is more. Get to the point. Then stop. Web content
should be 1/2 the length of its paper equivalent.
● Avoid acronyms and institutional jargon.
● Use active voice.
● Address the user.
● Be direct but human, serious but not pompous.
● Be strategic rather than exhaustive.

12 CONTENT: Labeling
Some
content fully
available
online
Available
Online
Full text
Full text

CONTENT: Activity
1. Individually, review the Paley page
2. Draft a revision
3. Share results with your neighbor
4. Volunteer for sharing with group

So, is our
content any
good?

13 CONTENT: Audit Checkpoints
1. Does this page present valuable (or potentially valuable)
information?
2. Page title: Is it sufficiently descriptive, does it
accurately represent the content, and provide context?
3. Is the content accurate & up-to-date?
4. Is it well-written & concise?
5. Does it use headings appropriately? Is it organized and
chunked for easy scanning?
6. Is it focused on user needs (not internal needs)?
7. Is it appropriate for the audience?
8. Are the images high-quality and purposeful?

14 CONTENT: Card Sorting
Explore how participants group pages into
categories that are meaningful to them.
● Typically done with participants but could be
used as internal activity to think about your
content & organization outside of it’s normal
context.
● Individual vs. Group
● In-person vs. Online

ACTIVITY: Card Sorting
● Get into groups of 4: 1 will be a note taker, 3
will play role of participants
● 3 participants will organize the cards into
similar groupings
● Label each grouping with a post-it
● Note taker should note when participants
have a hard time agreeing on something.

CONTENT: More
● PlainLanguage.gov
● Developing a Content Strategy for an Academic Library
● Content Strategy for the Web
● The Web Content Strategist’s Bible
● Content Everywhere
● Giant list of Content Strategy Resources by Jonathon Colman
● U Virginia Library’s style guide
● Guide to strategic content templates
● Extracting the content
● Mini Wireframe Flow chart template

CONTENT: More
Special Love for Gov.UK
https://www.gov.uk/designprinciples
https://www.gov.uk/designprinciples/styleguide
https://www.gov.uk/service-manual/browse
https://www.gov.uk/performance/dashboard
http://digital.cabinetoffice.gov.uk/2011/09/19/introducing-the-
needotron-working-out-the-shape-of-the-product/
And also probably worth watching is Sarah Richard's
presentation from this page: https://togetherlondon.
com/talks/meetup/2012-04-19

Can users
find high-value
content?

15 TESTING: Guerrilla Testing
(aka informal, budget, hallway, etc.)
Ask a quick question to answer a simple
problem! 5 minutes max. 5-25 participants.
1. print screenshot
2. come up with a simple question or two
3. approach users
4. gather responses
5. give them $1 or candy

Where would you click
to find out how late the
Undergraduate Library
is open?

Unmoderated version via
survey tool

TESTING: Tips
● When coming up with tasks, start with known valuable
content (pages accessed the most or resources/service
in high demand).
● Avoid matching terms in question to terms used in UI.
● Ask good “reference interview” follow-ups like WHY?
● If you do a few and see you clearly have a problem with
your test - stop and revise!
● If you do a few and see you clearly have a UI problem,
stop and fix it!
● A/B testing if debating between 2 labels or designs, etc.
● ALWAYS test the test with a co-worker first.

ACTIVITY: Guerrilla Test
1. With your neighbor, pick a problem area
from your selected website.
2. Develop a question or two.
3. Find a couple of other people in your area to
test (and be tested).
4. Return to your partner and compare your
findings.
5. Volunteer for report out to whole group.

TESTING: More
1. RITE (rapid and iterative testing and
evaluation)
2. Click survey software: Optimal Workshop
3. Lists of other online tools here & here
4. Inherent Value Test
5. Cognitive Walkthrough
6. Formal Usability Testing
7. Heuristic Evaluation

Questions?
http://bit.ly/UX4MAC

15 Strategies for a Better User Experience

More Related Content

What's hot (15)

Viewers also liked (19)

Similar to 15 Strategies for a Better User Experience (20)

Recently uploaded (20)

15 Strategies for a Better User Experience