User centered design workshop

User-Centered Design
A r e l a t i v e l y b r i e f i n t r o d u c t i o n t o
u s e r - c e n t e r e d d e s i g n .

We are particular about type
My favorite font!

Stretched type is not fun
A kitten dies every time this happens – but it’s still not ok

What’s wrong here?
Sounds…awkward? Kerning matters!

No matter what:
The previous guys
code is crap.

JavaScript sucks…ex:
Every script is executed in a
single global namespace that
is accessible in browsers with
the window object.

Interactive designers
are no different

Buttons vs links
Good:
Bad:
Sample debate: http://www.ixda.org/node/15621

Should designers
learn to code?
011110010110010101110011

It’s not crazy…
it’s passion

Are you this
enthusiastic about
Interactive Design?
I f s o , U s e r - C e n t e r e d D e s i g n wi l l h e l p y o u
a c h i e v e h e b e s t r e s u l t s p o s s i b l e .

Hello, I’m Patrick
A n d I h a v e a n o b s e s s i o n wi t h t h e we b

About me
I teach at the Univ. of Missouri St. Louis
About 15 years in the web industry
Started in tech – shifted to design – and back again

Get in touch:
mcneilp@gmail.com
or @designmeltdown
or pmcneil.com

Today's agenda
1. An overview of the User-Centered Design
Process (90 min)
2. Deep dives into key topics (70 min)

PDF download
at the end
Got links?

I loathe bulleted
presentations…
Warning, impending hypocrisy

This is the tip of the iceberg
Caution,

The User-Centered
Design Process
Part 1:

Backgrounds
The background of UX professionals

Your backgrounds
From the pre-conference survey:
A previous group:

User-centered design (UCD) is a
design philosophy that puts the
user of a product, application, or
experience, at the center of the
design process.

The foundation
The three basic principles behind UCD:
1.Early focus on users and their tasks
2.Evaluation and measurement of product usage
3.Iterated design

users
define
concept
designdevelop
deploy
UCD Process overview
UCD is a state of mind & it is not a one man show
Start here…

UCD Step 1:
Defining the project
users
define
concept
designdevelop
deploy

Define the scale
• Replacement or brand new product
• Update to an existing product

Documentation
Many options to select from

Define basic requirements
• What should it do (features, functionality, what
it does etc)? Or what are we working on?
• How will we measure our success?
• Incremental changes in revenue (direct or indirect)
• Customer leads or other activity
• What are the environmental factors (physical
& technical)?
• Who is the user (demographics, skill level,
frequency of use & physical)?

Generate documentation
Site maps – defines
the sites content and
information
architecture
Information
Architecture (IA) is
an entire field of work
Awesome resource:
http://iainstitute.org/en/learn/
Source: http://ils.indiana.edu/faculty/smilojev/teaching/s515spring2012/2012springprojects/session11/

Sitemap tools – text editor
Sitemaps can be simple outlines and
remind us that the purpose is more
important than the tool.

Flowcharts
Sometimes the flow
is more important
than a chart of all the
pages.
Source: http://www.codeproject.com/Articles/111949/Excerpt-from-Designing-the-iPhone-User-Experience

• Activity diagrams – Flowcharts showing how a process will work
Source: http://www.edmullen.com/work/project/free-people-retail & http://ils.indiana.edu/faculty/smilojev/teaching/s515spring2012/2012springprojects/session11/

Content Inventories:
A catalog of an entire
websites content.
1.Title/logo
2.Input field labels
3.Remember me
4.Login button
5.Lost password link

Content inventories
Learn more:
Responsive Design
Workflow
by Stephen Hay

Site planning answers
the question:
What am I designing?

User research happens
in concert with the
fundamental project
definition

Documenting users
• Write personas – A rich description of typical users
• http://uxmag.com/articles/personas-the-foundation-of-a-great-user-experience
• Write use case scenarios – Written descriptions of
how a product will be used describing common
scenarios
• http://www.gatherspace.com/static/use_case_example.html

Methods for researching users
• Interviews (great for exploring ideas) (requirements)
• Questionnaires / surveys (a great preliminary tool) (requirements)
• Focus groups (basically group interviews) (requirements)
• Direct observation (observe users completing a task) (flowchart)
• Card sorts (to discover how users view the content) (sitemaps)

As a result we have:
• A clear description of the project
• A plan for what we are building
• A detailed understanding of the user
• Vision for how the product will be used
• Best of all, tangible assets the team can share

Learn more
If you would like to learn more about this phase:
Learn to make:
• Personas
• Concept models
• Site maps
• Flowcharts
• Wireframes
• Design Briefs
• Usability plans
• Usability reports

UCD boils down to
seeking meaningful
design insights over
random acts of design

In the Define phase we
include the user by
inquiring of them

Our product:
A new tool to help
holiday shoppers
stay organized,
find gift ideas &
score the best deals

Steps:
1) Reflect
2) Ask questions
3) Answer questions
4) Reflect
Time box 5 minutes per step
organized, gift ideas & deals

My results:
1) The list repeats itself every year
2) Zero carry over year to year
3) Thoughtfulness over price tag

User research isn’t as
hard as it might sound

UCD Step 2:
Create concepts
users
define
concept
designdevelop
deploy

Developing concepts includes
• Interpret the documentation to develop possible solutions
• Shift from listening to problem solving
• Build wireframes and prototypes
• User testing

Wireframes
A schematic or blueprint that
represents the structure of a website.
Wireframes are nonfunctional, static
image.
Start with low-fidelity. Less detail and
quick to produce. Move towards higher
fidelity as you shape and improve it.
Work from the documentation project
requirements and research from step 1!

Prototypes
Creating the illusion of functionality
They don’t need to be complete and typically only
simulate a small set of features in an interface
Allows you to test out how an interface flows from
screen to screen
Can start as paper prototypes and move up to full
functional high-fidelity prototypes

Iterations are the key
Wireframe
something
Visual
design
Test with a
prototype
Discover
something

Lean on your user insights
and work magic
Beautiful, unicorn magic

Video time
Source: http://www.youtube.com/watch?v=9wQkLthhHKA
Usability test with a paper prototype

Observations
• You DO NOT need a finished app to test!
• It takes practice
• Focus on the user experience of the app and not technical or
secondary issues – it is about the essence of the app
• Paper prototype allows to accommodate the unexpected
• You could quickly change it and test with a new subject
• He isn’t trying to get her to do what he wants and prove his
design is right – genuine interest in improving

More on usability
testing in the
second half.

In the Concept phase
we include the user via
Exploratory based
usability tests

UCD Step 3:
Design visual solutions
users
define
design
concept
develop
deploy

Design the interface
using the blueprints
Finally,

So much more than
a suggestion
Wireframes,

Sample wireframe
http://newsignature.com/blog/2011/08/06/a-quick-introduction-to-wireframing/#.UnD57PnXRvB

Style Tiles
A stepping stone towards the full design:
Minimize the radical leap from idea to visual design:

A design deliverable
consisting of fonts,
colors and interface
elements that
communicate the
essence of a visual
brand for the web.
Style tiles:

Establish the visual
voice before
committing to a full
blown design
Style tiles:

An iterative tool for
visual design
Style tiles:

UI Design tools
http://www.adobe.com/products/photoshop.html
http://html.adobe.com/edge/reflow/

UI Design tools
http://macaw.co/
http://www.bohemiancoding.com/sketch/

UI Design tools
Question:
What is your primary tool for designing websites (the actual look and feel of the interface)?
Out of 274 respondents
22%
53%
18%

In the Design phase we
include the user via
assessment based
usability test

UCD Step 4:
Development
users
define
develop design
concept
deploy

Documentation
can really pay off
This is when all that

Toss it over the fence
and forget about it
You do not get to

In the Develop phase
we include the user via
Validation based
usability test

UCD Step 5:
Deploy into the wild
users
define
deploy
designdevelop
concept

In the Deploy phase we
include the user by
measuring the use
of the product

The foundation
1.Early focus on users and their tasks
2.Evaluation and measurement of product usage
3.Iterated design

Google Analytics
Who
What
When
From
Events
Goals
Conversions
And much more
http://www.google.com/analytics/

Crazy Egg
http://www.crazyegg.com/

Inspectlet
http://www.inspectlet.com/

The definition of the
next project
Ideas and insights from here become

User Centered Design
users
define
designdevelop
deploy concept
UX Designers &
Information
Architects
UI Designers
Front end dev’s &
programmers
SEO and web
optimization folks
Interaction
Designers
(IxD)

x
x
Did you notice
something missing?

Sources
Books referenced in this presentation & others I recommend:

Take 10 minutes…
Break time
Come back for some free books

Thank you for
completing the survey!

users
UCD Recap
Because it is a lot to absorb:

Part 2 Outline
What we will cover:
1.Interviews & Surveys
2.Wireframes & prototypes
3.Usability testing

Interviewing users
A b r i e f g u i d e

Interviews will
humanize your
apps problems

Interviews almost
always lead to
ideas, solutions and
features that you had
not thought of.

1) Interviewing is not
selling – don’t defend
your app – ask more
questions

“Why is that feature
important to you?”
“Describe what you
wanted to happen”

2) Get actual users –
not just your office
neighbor

3) Don’t ask
hypothetical questions

5) Shut up – it’s not a
conversation

After a round of
interviews, use a
survey to validate
the results

Survey tips
Simple tips for a good survey:
• Know what you want to learn
• Write questions that everyone:
• will interpret the same way (ex: avoid “do you frequently do x”)
• can answer accurately
• Avoid leading questions:
• Do you agree with most people that Windows 8 is terrible?
• Do not make people predict their own behavior
• Have follow up questions!!!

Wireframes & Prototypes
A b r i e f g u i d e

Finding problems early
1x cost to change during requirements / design
5x cost to change during development
25x cost to change during formal testing
100x cost to change in production
You can’t afford not to do it.
Researchers at Hewlett-Packard, IBM, Hughes Aircraft, TRW, and other
organizations have found that purging an error by the beginning of construction
allows rework to be done 10 to 100 times less expensively than when it’s done in
the last part of the process, during system test or after release.
(Fagan 1976; Humphrey, Snyder, and Willis 1991; Leffingwell 1997; Willis et al. 1998; Grady 1999; Shull et al. 2002; Boehm and Turner 2004).

Elements of Wireframes
Wireframes address three core elements
1) Information design – the placement
and prioritization of the layout. Very
inline with graphic design.
2) Navigation design – the location and
structure of the navigation systems.
3) Interface design – expose the
features that the app offers. What does
it do? How does the structure expose
this to users?

Wireframing tools
http://inspirationhut.net/printable-paper/

Wireframing tools
http://www.interfacesketch.com/

Wireframing tools
http://www.uistencils.com/

Wireframing tools
Many people also frequently use the following to wireframe:
InDesign, PowerPoint, Keynote, Visio & HTML

Wireframing: move fast
• Sketch 6 to 8 thumbnail sketches in 5 minutes
• Asses the results
• Take a break
• Rinse and repeat
• Identify a solid solution – flush out variants on that idea
• Move up to larger sketches
• Rapidly iterate on variations of your favorite thumbnail
• Slowly move towards a more refined result
(lookup Prototyping by Todd Zaki Warfel)

Wireframes should
be iterative

Tools for prototyping
Many people also frequently use the following to prototype:
InDesign, PowerPoint, Keynote, Visio & HTML

Demo PDF prototype
Demo Axure prototype

Specialized tools
https://fluidui.com/ (Is it a wireframe or a prototype? )

Not every prototype is
made for the same
purpose

Type 1:
To unify groups
of people
(often diverse people)

Type 3:
Get buy in to the idea
of UX design practices

Type 5:
Is it technically
possible?

Prototype formats
• Digital prototypes
• Paper Prototypes
• Storyboards
• Video based

Our product:
A mobile weather
application…
with a twist

Why do you check the weather?
• What to wear?
• Type of hat to wear
• Type of shoes to wear
• Type of jacket/coat
• Bring an umbrella?
• Drive the convertible?
• Bike or bus?
• Surfing related
• Ski related
• Biking related
• Phases of the moon
• Tide related
• Hunting related
•Tornado watching
• Snow days
• Global warming
related
• Spelunking
• Water the garden?
• Good day for the
beach?
• Leave early for work?
• Monitor weather on a
target date: like a
vacation etc
•Historical weather
patterns for a day in
relation to planning an
event like a wedding
• BBQ weather?
• Planning to view
changing leaves or any
other seasonal event

What does this do?
Test on at least 3 users in each round.
5 second test:

Steps:
1) Think & sketch
2) Test your design
3) Sketch some more
4) Test your design
Mobile weather app

Testing designs
can be easy.
&
Wireframes can be
packed with meaning.

Usability testing
A n e x t r e m e l y b r i e f i n t r o d u c t i o n .

What is usability?
• In essence, how easy it is to use an interface
• Good usability = easy to use = positive user experience
• Poor usability = hard to use = negative user experience
• Attributes that describe the usability of a design:
• Usefulness
• Efficiency
• Effectiveness
• Learnability
• Satisfaction
• Accessibility

What we are looking for:
• Usefulness – Does it do what users need and want?
• Efficiency – Does it perform its tasks efficiently?
• Effectiveness – Does it perform its tasks the way it is intended to?
• Learnability – Is it easy to learn use the interface?
• Satisfaction – Does the user enjoy using it?
• Accessibility – Is the product usable by those with disabilities?

We can craft the
usability as a way to
influence the user
experience

Accessibility: What’s
good for a few, is often
good for everyone.

Usability testing is our
attempt to answer
these questions –
is it usable?

Nano Tests
T h e 5 m i n u t e g e t s t a r t e d g u i d e t o u s a b i l i t y
t e s t i n g .

Nano-usability tests as
described in
Observing the User
Experience
What we are going to do:

Bite sized guerilla
usability testing
designed to get you
started in 5 minutes.
Nano-usability testing

Nano-usability testing
Our simple process:
1. Find one person who cares about your product.
It doesn’t matter who. Seriously, anyone.
2. Arrange to watch them use the product. (in person)
3. Ask them to use the product to do something. Any function of
the application. (I suggest you focus on the core feature)
4. Watch them do it. Keep your mouth shut. Just watch.
5. Ask yourself: what did I learn?

Keep your mouth shut.
Did I mention,

You want to learn what
is wrong. You are not
trying to defend
your creation.
Remember,

Five users will find
80% of the problems
(typically)

Many small tests,
not one big test.
Goal:

There is much more to
usability testing. But
this is a totally legit
way to start.
Naturally,

Beyond digital interfaces
T h i s m o d e l wo r k s i n m a n y s c e n a r i o s

Wrapping up
We a r e a l m o s t d o n e !

Get a PDF of this
presentation: pmcneil.com
Get in touch:
mcneilp@gmail.com
or @designmeltdown
or pmcneil.com

1) Mini Brochure Site
The good old content driven brochure style website.
Assuming responsive web design is required.
Involving users on this type of project feels hard at first.
Investigate the user
•Interview users
•Use analytics
Content Inventory Sitemap
Wireframes Style Tile UI Design
5 Second tests Development Measure the results

2) New iPhone app
Interview
users
Survey users Flowchart Wireframes
Prototype
Usability
testing
Style Tile UI Design
Usability
testing
Development
Usability
testing

User centered design workshop

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to User centered design workshop

Similar to User centered design workshop (20)

More from Patrick McNeil

More from Patrick McNeil (7)

Recently uploaded

Recently uploaded (20)

User centered design workshop

Editor's Notes