No Tears Methods for
“ ”
User Centered Design
DrupalCon Boston 2008
Michael Angeles

First, a word from jibbajabba...
Information Architect & Interaction Designer
From enterprise software and large consumer sites
to nonprofit and small business sites
Drupal User Since v. 2 Philosophy
• iaslash.org (‘01 - ‘05) • Understand users
• urlgreyhot.com (‘01 - now) • Design simple, sensible
solutions
• loveandsprockets.com
•
(‘07 - now) Continually improve and evolve
products based on feedback
• konigi.com (‘08 - now)
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 2

What users want is convenience and results.
But all they see is the interface.
As far as the customer is concerned,
the interface is the product.
Jef Raskin, Macintosh Project lead.
Quote from The Humane Interface.
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 3

What
If the interface is the product, it needs to reflect what
users want.
Why
Not considering what users really want up front, costs
you at the other end.
How
“No Tears” method. Considering what users want
doesn’t need to be hard.
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 4

The Process
Who are you?
DEFINE Who are your users?
Business Rules, User Research
Mental Models, Use Cases
Competitive Research
TEST DESIGN
Is it what they want? How does it function?
Usability Test, Web Analytics How does it look?
Qualitative Info/Feedback
Sketches, Wireframes
Paper Prototypes
REFINE
Visual Design
REFINE
BUILD
Make it work
Develop, Prototype, Deploy

The Process
A reliable process ... produces a predictable result
time and again.
A valid process, on the other hand, flows from
designers' deep understanding of both user and
context, and leads them to ideas they believe in but
can't prove.
Great designers worry less about replicating a
successful process than about producing a
spectacular solution.
Roger Martin, Dean of the Rotman B-school.
From \"Tough Love.\" Fast Company.
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 6

Define
Who are you & Who are your users?
• Business rules • Mental models
• User Research • Personas
• Surveys & Interviews • Use cases
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 7

Define
Who are you and what do you want?
• What are your business goals
• What does the business intend to do
• Define the problem and the solution in a way that is
clear and simple
• Define the opportunity and the market
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 8

Define
I would spend 24 hours, seven days a week,
greeting every single person who came to the site. ...
All of these people are your potential evangelists.
You need to show those people love.
We did all kinds of dumb, stupid things.
But our unofficial slogan was, \"F--- up fast.\"
Make mistakes rapidly, learn from them,
and move past them.
Caterina Fake, Co-founder of Flickr.
From \"How We Did It: Stewart Butterfield and Caterina Fake, Co-founders, Flickr.\" inc
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 9

Define
Who are your users, what do they want?
• What are their needs and
expectations?
• What research can we
derive from market
research, demographics,
and feedback?
• Can we survey and
interview?
Conceptual Model for Book Site
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 10

Define
Research and describe users
The Easy Way The Hard Way
• Research
Steve Newman
Member, TV addict, Social Network user,
• Survey Not a SlingBox owner
Demographics Tech Comforts Ne
Age: 21 PC: High •S
Occupation: Student, Film & Television major Web: High blo
Gear: Mac OS X, Firefox, Motorola RAZR •T
Steve Newman
• Interview
Member, TV addict, Social Network user, Not a
SlingBox owner
Age: 21
Occupation: Student, Film & Television major
Goals and Motivations Scenarios
Gear: Mac OS X, Firefox, Motorola RAZR
• Looks for a \"Sign up\" link, finds it and clicks on it
I'm blogging this.
1. Create user account
• Observe
• Fills out form to enter basic info, e.g. user name, em
• Gets confirmation that his account is created
Steve is a young multi-tasker who is very social.
He's an undergrad in a visual arts program. He
• User logs in and heads to his account area
wants to work in film as a director one day. He
• Fills out information about himself (his name, locatio
also plays a bass guitar and is in a band.
2. Create and build profile
his avatar, etc.
Steve is a heavy internet user, uses the web to •!Clicks to view his profile
do a lot of his school research and reads lots of
blogs in his RSS reader. He keeps in touch with • User enters a search for a show he likes \"Adult Swi
• Describe
friends via IM, Dodgeball and Twitter 3. Find shows and clips I like then watch AJAX autocompletion, he selects it in the form)
them • Looks for his show title in the search results and clic
He keeps a WordPress blog for his thoughts on
• Views the show page
TV, film and music, and a MySpace site for his
band. He's also a big user of Digg. He subscribes
Favoriting
to nearly every new social networking site, just to
• While watching a show, he notices the Favorite tool
try them out, and has profiles on some of them.
4. Favorite a show •!He clicks the icon and it tells him it was added to his
He posts photos to Flickr and occassionally posts
Looking for favorites later
movies experiments to YouTube to get noticed.
• He goes to look for the videos he's added to his fav
• Roles He is into watching web video–short films, music
performances and TV clips on YouTube and iFilm
• While viewing a video, he clicks on the clipper's nam
and keeps public playlists. He embeds video in
5. Favorite a person • He notices that his TV interests match his and that t
his blog regularly. He is also active on Flixter and
• He looks for and finds an icon to add that person as
rates movies and actors with zeal.
He watches TV a lot–mostly reality shows,
• When he registers, he notices a step in the process
gadget TV like Attack of the Show, and movies on
•!He sees an option to import his contacts either via a
IFC and cable. He can imagine clipping his own 6. Invite friends to register
•!He decides to click the option to import his gmail co
• Goals
video directly from his camcorder or DVD player
•!He sees a list of his gmail contacts and selects his c
to a web service if it were possible.
• While watching a clip, looks for the comments area
• Sees a few dumb comments and gives them thumb
7. Comment on a clip
• Skims the first few and then looks for the form to ad
•!Enters his comment and submits
• While watching a video clip from an SNL episode, h
8. Rate a clip
•!He looks for the star rating tool and gives the clip a
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 11

Define
How do they get what they want now?
• What are competitors
doing in your industry
or product area?
• Evaluate them for what
they get right/wrong
• State the things that
relate to your business
and product
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 12

Define
Categorize what they want
• Categorize goals and Use Cases
expectations (use
cases)
Mental Model
• Describe what users View Interact Re-use Learn
will do (scenarios) Watching video
Sending to a
Searching for a via a direct link What can I find H
Favoriting show/ friend via
Commenting
clip using global sent or found off here?
channel/clip etc. \"Share\" UI
search site
Sending to a Embedding clip
Watching video How did these
Browsing by Favoriting friend via email in an external
off site, e.g. in a Rating a clip clips get here?
show or channel people client site
weblog
Find Watch Rate & Comment Save for later Share Republish What is it? Ho
• The overall picture is
the mental model Create Organize Manage
Clipping from
Adding clip to Adding clip to Change my
my own media, Naming a clip Remove
View my clips
playlist group password
e.g. camcorder
Clipping from Favoriting Edit my account Remov
Tagging a clip Creating a View my
SlingPlayer Creating groups (people, clips, info favorite
playlist favorites
shows, etc.)
Clip Describe Playlists Groups Favorites My Account My Videos
Desired features that came up
repeatedly in interviews and
surveys with CNS users
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 13

Define
Give users what they actually want,
not what they say they want.
And whatever you do,
don't give them new features
just because your competitors have them!
Kathy Sierra, Programming Instructor and Game Developer.
From \"Featuritis vs. the Happy User Peak.\" Creating Passionate Users.
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 14

Define
Do better than competitors
• One way: Differentiate
yourself by providing
better user experience
• Apple applications differentiate
themselves by focusing on
simple controls that really
consider context
• Netflix differentiated
themselves by focussing on
faster delivery and better
recommendation
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 15

Design
How does it function?
Simplicity means
How does it look?
the achievement of
• Functional
Requirements maximum effect
• Sketches with minimum means.
• Wireframes Dr. Koichi Kawana, Architect
• Paper Prototypes
• Visual Design
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 16

Design
Focus and prioritize
“ [Innovation] comes from saying no to 1,000 things to
make sure we don’t get on the wrong track or try to
do too much. We’re always thinking about new
markets we could enter, but it’s only by saying no that
you can concentrate on the things that are really
important. ”
Steve Jobs, CEO of Apple Inc.
\"The Seed of Apple's Innovation\" BusinessWeek. http://www.businessweek.com/bwdaily/
dnflash/oct2004/nf20041012_4018_db083.htm
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 17

Design
Find your focus
• List and prioritize what
should appear on the
page
• To make it clear and
simple, focus on one
thing (or a small
number of things) and
do it very well
Page Description Diagram, by Dan Brown
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 18

Design
Consider design patterns
• Based on established
design principles
• Usable
• Well understood
• Provide predictable
behaviors
• and are therefore safe
(non innovative)
Yahoo! Design Pattern Library
See: http://konigi.com/notebook/design-pattern-libraries-and-ui-guidelines
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 19

Design
Sketch & Prototype
Sketches are for ideation: Creating as many
different ideas as you can in order to further
suggest new ideas
Prototypes are for evaluation: Narrowing down
the choices to find the best idea.
Bill Buxton, Principal Researcher Microsoft Research
and Author of Sketching User Experience
From Nov. 2006 Boston CHI presentation
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 20

Design
Sketch
• Turn functional
requirements into
descriptions for the UI
and interaction
• Get down at least 3
different ideas
• Narrow down and
select
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 21

Design
Wireframe Page Elements
• Wireframes are low
fidelity page
schematics that
describe:
• Template and module
models
• Elements required
• Hierarchy of elements
• Generalized layout
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 22

Design
Storyboard interaction
• Storyboards are low-
fidelity interaction
schematics that:
• Show application flow
and interface behaviors
• Provide a sense of the
feel of interactive
interface elements
• Describe application
logic
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 23

Wireframing should be easy
• Tools like Axure allow
you to spec and
prototype quickly
• Visio or OmniGraffle
with a good stencil
library makes page
schematics simple
• The hardest part is
deciding behavior
and priority
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 24

Design
Prototype (paper, click through, etc.)
• Prototypes allow you
test how users
actually use the
product
• Provide the “feel” of a
product
• Low-fidelity prototypes
are best (paper, simple
click-through html)
• Allow you to iterate
before product is built
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 25

Design
Review, reduce, and remove
• Eliminate the pieces
1
you don't need
e.g. BaseCamp, task management;
2
Twitter and Tumblr micro publishing
Drupal Sign In / Register UI (konigi.com)
• Simplify the
experience with the
things you do need
e.g. Kayak, Roost, Amazon Rings,
Data filtering; iPhone click wheel
Amazon “Create Your Own Ring” UI
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 26

Design
Consider effortless energy
• Strive for simpler,
contextual, forgiving GMail
interactions
1
• Provide predictive
behaviors 2
e.g. GMail, undo; Humanized/Google
Reader, infinite scroll; Google
Calendar, Quick Add; I Want Sandy,
3
Natural language UI, QuickSilver/Enso
actions
TaDa List
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 27

Design
Iterate
• Review your designs with the team
• Think about framing your review discussion on
personas
• Iterate designs based on your evaluation and repeat
the design process
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 28

Design
Perfection is achieved,
not when there is nothing more to add,
but when there is nothing left to take away.
Antoine de Saint-Exupery, French writer (1900 - 1944)
Less isn’t more,
just enough is more.
Milton Glaser, Graphic Designer
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 29

Test
Can people use this
product?
In usability, the fastest
Is this what they really and cheapest methods
want? are often the best..
• Usability Testing Jakob Nielsen, Usability Engineer
• Web analytics
• Feedback
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 30

Test
Is this usable & is it what they want?
• Evaluate product by
observing how real
users use it
• Measurement focusses
on 4 factors
• Efficiency
• Accuracy
• Recall
• Emotional response and
satisfaction
Usability Punch List
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 31

04 Test
Discount Usability
• Discount UT is the
most cost effective
• Fast and cheap
• As few as 5
participants is sufficient
• Uncovers the most
prominent issues
• Allows you to test early
and often
Usability Test Script & Session captured with Morae
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 32

Evaluating use, post-launch
• Web analytics – how are people actually using the
site?
• Customer feedback – direct contact, monitoring
public discussion, sentiment analysis
• Surveys – soliciting user feedback, guaging
satisfaction
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 33

Conclusion
• User centered design is not that difficult.
• It requires that you:
• Ask questions, and attempt to understand what
users want
• Empathize with users while designing
• Test your design decisions
• Iterate design based on how users actually use
the product
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 34

Thank you Michael Angeles
urgreyhot.com/contact
1. “The Humane Interface.” by Jef Raskin.
2. \"Tough Love.\" by Roger Martin. Fast Company. http://www.fastcompany.com/
magazine/109/open_design-tough-love.html
3. \"How We Did It: Stewart Butterfield and Caterina Fake, Co-founders, Flickr.” By
Steward Butterfield and Caterina Fake. inc. http://www.inc.com/magazine/20061201/hidi-
butterfield-fake_Printer_Friendly.html
4. \"Featuritis vs. the Happy User Peak.\" By Kathy Sierra. Creating Passionate Users.
http://headrush.typepad.com/creating_passionate_users/2005/06/featuritis_vs_t.html
5. \"The Seed of Apple's Innovation\" BusinessWeek. http://www.businessweek.com/
bwdaily/dnflash/oct2004/nf20041012_4018_db083.htm
6. “Fast, Cheap, and Good: Yes, You Can Have It All.” By Jakob Nielsen. Jakob Nielsen’s
Alertbox, useit.com. http://www.useit.com/alertbox/fast-methods.html
“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 35