Usability Workshop, 11-8-2012

Usability Immersion Workshop
A crash course in UXD for the
KSU IT Department
11-8-2012

For the Record…
• I have been doing this kind of work for over 15 years
–
–
–
–

Independent Consultant 2007-Present
Director, Usability Thomson West 2004-2007
VP IA, Wachovia 2001-2004
VP Operations, Argus Associates 1996-2001

• Experience spans innie, outie, practitioner, manager,
startupmajor corporations
• MILS, University of Michigan 1996

• Active in IA Institute (founding member,
board of directors, job board) & ASIST (IA
Summit Chair, 2009)

Service Design

GUI Design

User-interface Design

Information Architecture

Usability
Usability Engineering

Human Factors

Interaction Design

Information Design
Information Ecology

User Centered Design

User Experience Design
Service Design

GUI Design


User Centered
Human Factors
Usability
Design



Interaction Design

Information Design
Information Ecology


User Experience Design

User Centered
Design Service Design
GUI Design


User Experience
Human Factors
Usability
Design


Information Design
Information Ecology

Interaction Design

UX

Focus for today:
• Overview of user experience design, which
provides the framework for consistently
creating usable interfaces
• Deep dive into understanding users
• Primer on Information Architecture, an often
overlooked piece of the puzzle
• Explanation of the role of usability
engineering in the broader UX process

Session Agenda
•
•
•
•

Introductions
Interactive Lecture, brief exercises
Lunch
Cover anything we ran out of time for in the
AM
• Select a topic & conduct a problem solving
session using the K-J Method

USER EXPERIENCE DESIGN, DEFINED

What is User-Centered Design?
• UCD is a web design (product/software
development) approach that focuses on the
end users of the web site (product) as a vital
component of a successful outcome
• Principles of UCD
– An early focus on users and tasks
– Empirical measurement of product usage
– Iterative Design

That sounds pretty simple…

What’s so hard
about it?

Multi-disciplinary Partnerships
• Business goals/objectives—business stakeholders,
marketing, brand experts
• Content development, editorial—subject matter
experts
• Visual design—graphic designers, branding experts
• User Interface design—interaction designers,
information architects, user experience designers
• Research & testing—usability engineers
• Development & Implementation—coders,
developers, QA testing

Jesse James Garrett’s UX Diagram

Morville’s IA Venn Diagram
context

content

users

Iterative Design Process
Kuniavsky (pp 30-42)
1) Project kickoff
2) Examination: define
problem
3) Definition: Specify
solutions
4) Creation
5) Repeat loops 2-4 as many
times as needed
6) Launch

My process:
• Discovery
• Definition
• Design test, design, test,
design (RITE)
• Handoff to developers
• Conduct usability testing on
beta or
• Launch/conduct usability
testing on launch
• discovery

Observing the User Experience: A Practitioner's Guide to User Research
by Mike Kuniavsky

UCD Methods
(the tools in the tool kit)
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•

Stakeholder interviews
Expert/Heuristic evaluation
Competitive/comparative analysis
Web logs/web analytics
Content Inventory
User Profiles/Personas/Scenarios
Customer interviews
Surveys
Wants & Needs Analysis (Focus Groups)
Task Analysis
Card Sorting
Field Studies/Contextual Inquiry
Diary Studies
Ongoing relationships/beta testers
Cognitive walk-throughs
Usability testing

Morville’s IA Venn Diagram

context
content

users

Context & Content Oriented
UCD Methods
• Stakeholder interviews— understand upper management, opinion
leaders, people who sign the checks
• Expert (Heuristic) evaluation— “rule of thumb”; done by one or more
reviewers

• Competitive/comparative analysis: gauge the state of your
competition/peers
• Web logs/web analytics— interpret the traffic on your site

• Content Inventory— detailed documentation of every page and url on your
site/every screen in your software or app
• Baseline Usability Testing-– one on one, moderated, task-based evaluation
of an interface

Mapping Methods: Context

context
content

users

stakeholder interviews, competitive analysis, expert analysis,
baseline usability testing

Mapping Methods: Content
context

content

users

Content Inventory, Editorial Review, Logs/analytics analysis,
Gap analysis

Mapping Methods: Understanding Users
context

content

contentu
users
users
sers

Users: user profiles, interviews, wants & needs analysis,
task analysis, diary studies, field studies, (surveys, focus
groups)

Ideal vs Real
• The challenge is to understand what our
organization’s goals are *and* to understand
who our users are  and then to shape
products to best fit that intersection
– There are always tradeoffs

UNDERSTANDING USERS: BEGIN AT
THE BEGINNING

A User’s Perspective
Email

Lotus Notes
Databases
Personal Netw orks
& Colleagues
Shared
LAN drives

Printed
Resources

Special
Apps

Public
Web Sites

Mainframe Apps

Europe
Intranet
U.S.
Intranet

TV
Intranet
Portal

"Local"
Intranet
Sites

“Referring to people as "users" is a
custom of two professions: computer
scientists and drug dealers.”
-Edward Tufte

How do we learn about users?
• Examine what we already know
– Be open to the idea that what we think we know
may not be accurate
– Develop user profiles (which can lead to personas
& scenarios)
• Meet our customers face to face
– Interviews, focus groups, surveys
• Observe and interact with our customers
– wants & needs analysis, card sorting, task analysis,
diary studies, field studies, contextual analysis
• Run baseline usability tests with actual users

In the context of user
experience design & user
interface design SURVEYS
and FOCUS GROUPS are
usually not the most
effective or efficient
techniques for learning
what you need to know
about your users.

Defining the Audience
• In an environment as large as Kent State / the
population the IT dept serves, you will need to
think about audiences/user profiles at a
macro level and a micro level
– Macro  all the users you serve generally
– Micro users for a specific
tool/application/interface in context

User Profile
• A detailed description of your users’ attributes
• Characteristics may include:
– Job title
– Experience (with your product, with the web)
– Education
– Key tasks
– Age range & other demographic details
– Their goals

Classification of Users
• Primary: Individuals who work
regularly/directly with the product.
• Secondary: Use the product less often or with
an intermediary
• Tertiary: Those affected by the system or
purchasing decision makers
• [anti users]

Westlaw
• Primary: Associates, Law students, Librarians
• Secondary: Judges, Partners/Sr Associates
• Tertiary: Partners, Librarians

Users don’t operate in isolation
• The same individual likely wears many hats
(e.g., banking professional, has own bank
accounts, manages elderly parent’s accounts)
• The end user isn’t always the primary decision
maker (librarians vs lawyers)—you may need
to take into account managers, sys admins,
purchasers

Treat Profiling Iteratively
• In the beginning, your user profile may be sparsely
populated—and it may be incorrect!
• That’s part of what we’re learning when we do user
research
– Better to put a stake in the ground and refine than to leave
everything hazy
– Cleveland Fed: thought their primary users were
economists; we discovered they were wrong

• In my experience one on one interviews are the
fastest, cheapest, easiest* way to refine user profiles
and develop personas
*fast, cheap & easy being relative!

If you design for everyone, you’re
designing effectively for no one, which is to
say you are effectively designing for no
one.

If you only take one thing away from
today’s session…

You are NOT
like your users.

It bears repeating:

You are NOT
like your users.

You CAN
understand
your users.

Let’s spend a few
minutes talking about
your users/audiences

Pulse Check

Do we need a short
break?

UNDERSTANDING USERS:
METHODS & TECHNIQUES

Why do research?
• to generate buy-in
– Internally
– with customers

• to prove/disprove something
– kill beloved ideas

• to learn

How the customer
explained it: user
research

Caution
• People don’t always know what they will really
like and what they would really use.
• People often anticipate liking/needing features
more than they actually will. “That’s cool!”
• What people say they do and what they actually
do often differ.
• Don’t rely on a surveys and/or focus groups as
your sole source of user data for requirements
gathering.

It isn’t easy, but it doesn’t have to
be complicated
• Simple techniques can yield powerful results

I

Interviews!

• If you had to pick one research method, this would
be the one.
• Cheapest, most flexible, low-cost way to gather
*rich* qualitative information about your users
• The only down-side to interviewing, is that you’re
dealing with a small sample-size
– If you’ve got your audiences well defined and have
recruited effectively, this is a minor point considering how
much information you can get out of a 45-60 minute
interview

When?
• Technically, they can be done anytime in the
UCD cyclehowever, most useful early on
• This is the point at which there is the most
potential for shaping the project to meet the
users’ needs

Interview vs. Survey
• Cleveland Fed discovery: we don’t know our
users as well as we thought we did
• There can be a chicken-or-egg dynamic
• Often one technique is used to provide
insights, feedback or confirmation to support
the other technique

Interviews are good for…
• Collecting rich, detailed data
• Collecting information that will help you be
more successful with other research tasks, like
surveys, usability studies, field studies
• Getting a holistic viewalso, serendipitous
learning

Interviews are not good for:
• Collecting large samples—too time consuming and
expensive
• Collecting data on highly sensitive topics
• If you want do to face-to-face in a variety of
geographic locations, interviewing becomes
expensive—but phone interviews are an option
• While you can collect data more quickly from focus
groups than from interviews, I still consider
interviewing a pretty fast method for data
collection—and interviews often yield richer results

Moderating Interviews
• Be an active listener.
• Really listen. Do not interrupt. Do not finish
their thoughts for them. Do not put words
into their mouths.
• Endure more silence than you feel completely
comfortable with.
• Be engaged, pay attention.
• Look for markers.
• Use probes! But avoid introducing bias.

Unbiased Probes
• Tell me more about X. Say more about X.
• Can you say more about that?
• I think I understood you to say X, am I
following you?
• How do you feel about that?
• Do you have any reactions to that?

Personas
• A user profile made specific
• A short-hand way to keep the team aligned
around the most important user
considerations as defined by your team

Scenarios
•

•
•
•

Scenarios: Situations that online customers
face, usually constructed around the most
critical customer needs.
Scenarios are used to brainstorm “paths to
resolution” of critical customer needs.
Scenarios cannot work without personas.
Like personas, have to extrapolate to a few
core scenarios
Personas and scenarios assist in developing smarter potential designs which are then
tested with real customers.

Personas and scenarios: What are they not?
•

•

•

Personas and scenarios are not
representative of every customer or every
experience
They are representations of key customers
who pose design challenges where business
needs and user needs intersect.
They encourage designers to be user-centric,
reminding us to take our users into
consideration in all aspects of our design
work.

A typical persona project
• Created user profiles for large company’s corporate
“university”
– Began with stakeholder interviews and working session
with the team to develop deep understanding of the
project
– Identified user profiles for audiences based on job role,
region/language, expertise
• Conducted 27 interviews with 3-5 representatives of each of
the user profiles
– These interviews were conducted over the course of 3
weeks
– 2 people participated; moderator & note-taker, most calls
recorded

Persona project, con’d
• Interview team debriefed regularly
– Began to draft a potential model at around interview 16
– Felt pretty confident that we were on the right track by interview 22

• Analyzed notes and gathered 391 unique data points
(Edistorm, Excel)
– Refined and strengthened our model based on the data analysis
• Identified some additional persona variations that didn’t make it into the final set
but that we wanted to share with the team for more breadth

• Proposed 6 general personas
– Shared these with the team, “gut check”

• Developed and refined the personas
– Focused primarily on a description/ “Understanding X” and “How We
Can Help”

• Had personas printed and made available in variety of
formats—emphasized the importance of actually USING them

Typical Persona Project,
Summarized
• Spent 8 weeks from start to finish
• Two key players were devoted to the project,
one close to full time and the other part-time
• Met with the larger team approximately 4
times over the course of the project for
approx 8-10 hours total
• Developed a series of artifacts that were relied
on throughout the design phase and continue
to be used today

UCD Methods
• Interviews (Surveys)
• Wants & Needs Analysis: structured focus group to
gather/confirm user requirements
• Task Analysis: observing users completing tasks
• Card Sorting: open: users create categories, closed:
users put concepts in buckets
• Field Studies/Contextual Inquiry: Setting for task
analysis, method for gathering data about users’
physical space, distractions, approach to tasks
• Diaries/ongoing relationships/beta testers: way to
gather longitudinal data

Interfaces should be intuitive.

True or False?

Google stats, 2009
• Intuitive design: 13,400,000
• Intuitive interface design: 2,030,000
• Intuitive web design: 2,530,000

Google stats, 2012
• Intuitive design: 7,190,000
• Intuitive interface design: 16,000,000
• Intuitive web design: 21,100,000

How to Peel a Banana
You Tube Video:
• http://www.youtube.com/watch?v=Hq0URt9x
nCc&feature=fvst

What does
*intuitive*
really mean?

Read Me
• Jef Raskin
– http://www.asktog.com/papers/raskinintuit.html

• Jared Spool
– http://www.uie.com/articles/design_intuitive/

What is interaction design?
• There is less standard agreement about the
definition of this term in part because some
define it very broadly (on par with UX) and
some much more narrowly (focusing more on
GUI design).
• I think the right answer is somewhere in
between, as I see IxD as more than the “page”
but less than the field

What is IA?
• The art and science of structuring and
organizing information systems to help people
achieve their goals.

• Information architects organize content and
design navigation systems to help people find
and manage information.

Hard Truths
• Every site has an information architecture.
• Few sites have a planned information
architecture.
• Even fewer sites have an information
architecture that was informed by UCD
research.

Why is IA often overlooked?
• Successful IA recedes into the background;
you only notice it when it isn’t working
• There is often a tendency to want to skip over
abstract work to get to the more tangible
aspects of the project
– In many cases organizations don’t realize they are
skipping something; IA is rarely a stand-alone role

• As with user research, the early phases of this
work tend to be messy and uncomfortable

Why is IA Difficult?
Use rs
Example
Pe rsonal Digital Assistant

Communication Chasm

Docume nts and Applications

Synonyms
Handheld Computer
"Alte rnate " Spe llings
Persenal Digitel Asistent
Abbre v iations / Acronyms
PDA
Broade r Te rms
Wireless, Computers
Narrowe r Te rms
PalmPilot, PocketPC
Re late d Te rms
WindowsCE, Cell Phones

Why is IA important?
• Cost of finding (time, clicks, frustration,
precision)
• Cost of NOT finding (success, recall,
frustration, alternatives)
• Cost of development(time, budget, staff,
frustration)
• Value of learning (related products, services,
projects, people)

Components of an IA
• Organization systems
• Labeling systems
• Navigation systems
– Global
– Persistent
– Local
– Contextual

• Supplementary Navigation & Search

Organization Systems
• Organization structures (e.g., the “shape” of
the information): hierarchy, database,
hypertext)

• Organization schemes: exact vs. ambiguous

Organization Schemes
• Exact Schemes
–
–
–
–

e.g.,white pages, author/title database
Everything has a place (one right answer)
Easy to create and maintain
Great for known-item searches

• Ambiguous Schemes
–
–
–
–

e.g., yellow pages, org by topic/task/audience
Messy and full of overlap
Hard to create and maintain
Great for subject searches and associative learning

Labeling Systems
•
•
•
•
•

Navigation bar options
Headings, Subheads, sub-subheads
Contextual links
Controlled vocabularies and thesauri
[Icons]

Navigation Systems
• Elements:
– Global (site-wide, access to primary
content)
– Local (sub-site)
– Contextual (page-level)
– Persistent/universal (ancillary links from
every page, typically header/footer)
– Supplementary (e.g., table of contents,
index, guide, search)

Navigation Systems
• Purpose/Goals
–Provide context (Where am I?)
–Provide flexibility (Where can I go?)
–Make sense (Separate global and
local systems)
–Avoid competing with content

Navigation Systems
• Global, Local, Contextual, Persistent: Wachovia.com

Supplementary Navigation Systems
Topical (site index): New York Times (nyt.com)

Supplementary Navigation: Search

Top-down vs. bottom-up IA
• “Top-down” IA
• Birds eye view looking down on the forest.
• Tie together disparate pockets of content for improved searching
and browsing.
• Highly focused on users and information needs.

• “Bottom-up” IA
• From the ground up, looking at individual trees and leaves on trees.
• Improve searching and browsing within a single, high-volume
pocket of content.
• Highly focused on content (content model, document types and
meta-information).

• Not mutually exclusive—most projects
need both perspectives.

Navigation Stress Test
• Keith Instone’s navigation stress test:
http://instone.org/navstress
• The idea behind the navigation stress test is to ask some hard
questions about your web site navigation to see if it can
"pass."
– It is called a "stress test" because most pages will not pass.
The failures may be serious, or they may not matter at all,
but at least by performing the test you will have discussed
the navigation issues and made conscious design
decisions.
• The questions are detailed ways to ask about the 3 basic
concerns users often have upon arriving at a page:
– Where am I?
– What’s here?
– Where can I go?

Process
• “Randomly” pick a low-level page (not a home page or subsite menu page) from your site
• Print the page out without the URL listed in the header/footer
• Pretend that you are entering this site for the first time at this
page and try to answer the stress test questions
• Mark up the printed page with what you think the answers
are
• Have other members of your team, and people who know
nothing about your site, do the stress test too. Then compare
notes. Where did you agree? Where did no one agree?

Navigation Question

Mark up on the paper:

What is this page about?

Draw a rectangle around the TITLE of the
page, or write it on the paper yourself

What site is this?

Circle the site name, or write it on the paper
yourself

What are the major sections of this site?

Label with X

What major section is this page in?

Draw a triangle around the X

What is “up” 1 level from this page?

Label with U

How do I get to the Homepage of this site?

Label with H

How do I get to the top of this section of the
site?

Label with T

What does each group of links represent?

Circle the major groups of links and label:
-D: more detail, sub-page (children)
-N: Nearby pages within the same section
(siblings)
-S: Pages on same site, but not as near
-O: Off-site pages

How might you get to this page from the
homepage?

Write the set of selections as:
Choice 1> Choice 2>…

Main Page Wireframe
Header nav igation f or
site-wide f unctions.

Tabs represent major
categories of serv ices

Banner Ad or
Internal
Promotion

Logo
Home | Help | Login/Signout
Search | Site Index
Cards

Invitations

Gift Shop

Gift Certificates

Banner Ad or
Internal
Promotion
Promotions

My Cardshop

Welcome, Tim! Dad's Day is June 18th. New Cards | Most Popular | Highest Rated
Send a card for free.
Card
Thumbnail

Primary card
classif ication scheme.
Expand lev el two
channels as much as
possible.

Card
Thumbnail

Card
Thumbnail

title: text text
More Father's
Day Cards

title: text text
More Summer
Cards

title: text text
More Music
Cards

Reasons to Send
Birthday
Subchannel | Subchannel |
Subchannel
Subchannel | Subchannel | more...

Collections
Music
Promo
TV
Image
Movies
(Music)
Stationery
Teen Lounge
African American
Spanishl
Religious
Calendar

Promote searching
using the wizard on
home. Position to
catch users not
satisf ied by channels.

Channel
Subchannel | Subchannel |
Subchannel
Subchannel | Subchannel | more...

Search Assistant

Search
Assistant
Image

Don't know where to
start? I can help you SEARCH

date
date
date
date
date
date
date
date
date
date
date
date...

full calendar

Holiday
editorial
editorial
editorial
editorial
editorial
Holiday
editorial
editorial
editorial
editorial

holiday
holiday
holiday
holiday
holiday
holiday
holiday
holiday
holiday

learn more | about us | investor relations | advertise with us | privacy policy
job opportunities | contact us | terms of service

partner ad/offer space

Mockup
• Non-functional model
(usually to scale) for
demonstration
purposes
• High fidelity: color,
graphic design
treatment applied
• Lo fidelity: black and
white/wireframes

Prototype
• Generally it’s a functional representation of a would
be product/website
– Level of functionality can vary from one or two features to
all or nearly all
– paper prototyping: reluctance due to informality vs.
inclusivity

• Used to reduce riskway to discover and solve
issues in a cheaper medium before production
• Spectrum—often thought of as “throw-away”, but
not always
– Agile

Gurus

http://www.useit.com/alertbox/

http://www.sensible.com/

Usability Testing
• Design technique for improving products by
measuring their usability—i.e., capacity to
meet intended purpose
• Formative: diagnostic testing
• Summative: validation testing
• Qualitative: participant’s descriptions, your
observations of their actions
• Quantitative: measured activity (speed,
accuracy, recall)

Usability Demo
• Steve Krug created a 24 minute video that
demonstrates how he conducts usability
sessions
• http://www.youtube.com/watch?v=QckIzHC9
9Xc&feature=player_embedded

Crosby’s Maturity Grid
Adapted to Usability

Ignorance

“We don’t have any problems with Usability”

Uncertainty

“We don’t know why we have problems with usability”

Awakening

“Is it absolutely necessary to always have problems
with usability?”

Enlightenment

“Through management commitment and improvement
of human-centered processes we are identifying and
resolving our problems”

Wisdom

“Usability defect prevention is a routine part of our
design process & operation”

Certainty

“We know why we do not have problems with
usability”

Samantha Bailey
User Experience Design Consulting
136 E Main St. Suite 4
Kent, OH 44240
(330) 474-1138
samantha@baileysorts.com

Usability Workshop, 11-8-2012

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Usability Workshop, 11-8-2012

Ähnlich wie Usability Workshop, 11-8-2012 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Usability Workshop, 11-8-2012

Hinweis der Redaktion