"no tears" method for user centered design

No Tears Methods forUser Centered DesignDrupalCon Boston 2008

Michael Angeles

“ ”

“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008

Information Architect & Interaction Designer

From enterprise software and large consumer sites

to nonprofit and small business sites

2

First, a word from jibbajabba...

Drupal User Since v. 2

• iaslash.org (‘01 - ‘05)

• urlgreyhot.com (‘01 - now)

• loveandsprockets.com

(‘07 - now)

• konigi.com (‘08 - now)

Philosophy

• Understand users

• Design simple, sensible

solutions

• Continually improve and evolve

products based on feedback


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.

3

“No Tears” Methods for User Centered Design • DrupalCon Boston • 4 March 2008 4

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.

DEFINE

DESIGN

BUILD

TEST

Business Rules, User ResearchMental Models, Use Cases

Competitive Research

Who are your users?Who are you?

How does it function?

Sketches, WireframesPaper Prototypes

Visual Design

REFINE

How does it look?

Develop, Prototype, DeployMake it work

Usability Test, Web AnalyticsQualitative Info/Feedback

REFINE

Is it what they want?

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.

6

The Process


DefineWho are you & Who are your users?

• Business rules

• User Research

• Surveys & Interviews

• Mental models

• Personas

• Use cases


Who are you and what do you want?

8

Define

• 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


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

Magazine.


Who are your users, what do they want?

10

• What are their needs and

expectations?

• What research can we

derive from market

research, demographics,

and feedback?

• Can we survey and

interview?

Define

Conceptual Model for Book Site


Research and describe users• Research

• Survey

• Interview

• Observe

• Describe

• Roles

• Goals

11

I'm blogging this.

Steve is a young multi-tasker who is very social.

He's an undergrad in a visual arts program. He

wants to work in film as a director one day. He

also plays a bass guitar and is in a band.

Steve is a heavy internet user, uses the web to

do a lot of his school research and reads lots of

blogs in his RSS reader. He keeps in touch with

friends via IM, Dodgeball and Twitter

He keeps a WordPress blog for his thoughts on

TV, film and music, and a MySpace site for his

band. He's also a big user of Digg. He subscribes

to nearly every new social networking site, just to

try them out, and has profiles on some of them.

He posts photos to Flickr and occassionally posts

movies experiments to YouTube to get noticed.

He is into watching web video–short films, music

performances and TV clips on YouTube and iFilm

and keeps public playlists. He embeds video in

his blog regularly. He is also active on Flixter and

rates movies and actors with zeal.

He watches TV a lot–mostly reality shows,

gadget TV like Attack of the Show, and movies on

IFC and cable. He can imagine clipping his own

video directly from his camcorder or DVD player

to a web service if it were possible.

Age: 21

Occupation: Student, Film & Television major

Gear: Mac OS X, Firefox, Motorola RAZR

Member, TV addict, Social Network user, Not a

SlingBox owner

Steve Newman

• Toolbar

• Rating

• While watching a video clip from an SNL episode, he decides that he loves the clip and wants to rate it

•!He looks for the star rating tool and gives the clip a high star rating8. Rate a clip

7. Comment on a clip

• While watching a clip, looks for the comments area of the page

• Sees a few dumb comments and gives them thumbs down

• Skims the first few and then looks for the form to add his own

•!Enters his comment and submits

• Comments

6. Invite friends to register

• When he registers, he notices a step in the process to invite all of his friends to create SlingIt accounts as well

•!He sees an option to import his contacts either via a web-based email service or by importing from an email client

•!He decides to click the option to import his gmail contacts

•!He sees a list of his gmail contacts and selects his closest friends to invite, and submits the message

• Registration

• Email a friend, contact importing

5. Favorite a person• While viewing a video, he clicks on the clipper's name or avatar to view that person's profile

• He notices that his TV interests match his and that this other person clips a lot, so he wants to remember him

• He looks for and finds an icon to add that person as a friend or to "favorite" him and clicks it

• User profile, public view of other user

• General toolbar

• Favoriting process

• My account page (to view favorite)

Favoriting

• While watching a show, he notices the Favorite tool in a toolbar near the video player

•!He clicks the icon and it tells him it was added to his Favorites

Looking for favorites later

• He goes to look for the videos he's added to his favorites by checking out his page

4. Favorite a show• Video player toolbar

• Favoriting process

• My account page

• Site search

• Search suggestions/recommendations

• User enters a search for a show he likes "Adult Swim" in the global navigation bar (optionally, if his title is found by an

AJAX autocompletion, he selects it in the form)

• Looks for his show title in the search results and clicks on it

• Views the show page

3. Find shows and clips I like then watch them

• My Account

• Profile building / editing

• Profile, view of own profile

2. Create and build profile

• User logs in and heads to his account area

• Fills out information about himself (his name, location, age), enters info about his TV taste / interests, uploads a picture for

his avatar, etc.

•!Clicks to view his profile

• Global nav

• Sign up call to action

• Registration

• Looks for a "Sign up" link, finds it and clicks on it

• Fills out form to enter basic info, e.g. user name, email, password

• Gets confirmation that his account is created

1. Create user account

Features(features refer to SlingIt features unless otherwise indicated as SlingPlayer)

ScenariosGoals and Motivations

Personal Background

Steve is a young multi-tasker who is very social on the Internet. He writes a

blog where he embeds YouTube video and Flickr photos pretty regularly, diggs

sites, maintains profiles on social networking sites and publishes video of his

band that he produces himself. He wants people to know who he is, and his

online reputation is as important as his real world rep.

All my friends are online and IM, blogs, and

MySpace are where you'll find us a lot of the time.

If you want to know what I'm up to, check my blog.

Demographics

Age: 21

Occupation: Student, Film & Television major

Gear: Mac OS X, Firefox, Motorola RAZR

Needs

• Social features that allow him to use media anywhere he wants to–his

blog, his MySpace site

• To be rewarded for be social

Tech Comforts

PC: High

Web: High

Steve NewmanMember, TV addict, Social Network user, Not a SlingBox owner

The Easy Way The Hard Way

Define


How do they get what they want now?

12

• 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

Define


Categorize what they want• Categorize goals and

expectations (use

cases)

• Describe what users

will do (scenarios)

• The overall picture is

the mental model

13

Define

Save for later Share RepublishRate & Comment

GroupsPlaylistsDescribeClip

WatchFind

Create Organize

InteractView

Clipping from

SlingPlayer

Clipping from

my own media,

e.g. camcorder

Embedding clip

in an external

site

Tagging a clip Creating a

playlistCreating groups

Rating a clip

Adding clip to

playlist

Adding clip to

group

Sending to a

friend via email

client

Sending to a

friend via

"Share" UI

Favoriting

people

Watching video

via a direct link

sent or found off

site

Watching video

off site, e.g. in a

weblog

Browsing by

show or channel

Searching for a

clip using global

search

Re-use

Commenting

Naming a clip

Favorites

Favoriting

(people, clips,

shows, etc.)

Favoriting show/

channel/clip etc.

RegisterHow do I use it?What is it?

Learn

How did these

clips get here?

What can I find

here?

What's a

SlingBox?

How do I create

a clip?

Join

Create an

account

What do I get for

joining?

Manage

My VideosMy Account

View my clips

View my

favorites

Edit my account

info

Change my

passwordRemove clips

Remove

favorites

Desired features that came up repeatedly in interviews and surveys with CNS users

Features we can expect to get heavy use by very active members, e.g. users of social networks

Mental Model

Use Cases


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.

14

Define


• Netflix differentiated

themselves by focussing on faster delivery and better

recommendation

• Apple applications differentiate

themselves by focusing on simple controls that really

consider context

Do better than competitors

15

• One way: Differentiate

yourself by providing

better user experience

Define


DesignHow does it function?

How does it look?

• Functional

Requirements

• Sketches

• Wireframes

• Paper Prototypes

• Visual Design

16

Simplicity means

the achievement of

maximum effect

with minimum means.

Dr. Koichi Kawana, Architect


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

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

18

Page Description Diagram, by Dan Brown

Design


• Based on established

design principles

• Usable

• Well understood

• Provide predictable

behaviors

• and are therefore safe

(non innovative)

19

Consider design patterns

Yahoo! Design Pattern Library

Design

See: http://konigi.com/notebook/design-pattern-libraries-and-ui-guidelines

http://konigi.com/notebook/design-pattern-libraries-and-ui-guidelines

http://konigi.com/notebook/design-pattern-libraries-and-ui-guidelines


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

Design

Sketch & Prototype


Sketch

21

• Turn functional

requirements into

descriptions for the UI

and interaction

• Get down at least 3

different ideas

• Narrow down and

select

Design


Wireframe Page Elements• Wireframes are low

fidelity page

schematics that

describe:

• Template and module

models

• Elements required

• Hierarchy of elements

• Generalized layout

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

23

Design


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

24


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

25

Design


Review, reduce, and remove

26

Design

Amazon “Create Your Own Ring” UI

• Simplify the

experience with the

things you do need

e.g. Kayak, Roost, Amazon Rings,

Data filtering; iPhone click wheel

Drupal Sign In / Register UI (konigi.com)

1

2

• Eliminate the pieces

you don't need

e.g. BaseCamp, task management;

Twitter and Tumblr micro publishing


Consider effortless energy

27

Design

GMail

• Strive for simpler,

contextual, forgiving

interactions1

2

3

TaDa List

• Provide predictive

behaviors

e.g. GMail, undo; Humanized/Google

Reader, infinite scroll; Google

Calendar, Quick Add; I Want Sandy,

Natural language UI, QuickSilver/Enso

actions


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

28

Design


Design

Less isn’t more,

just enough is more.

Milton Glaser, Graphic Designer

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)


Can people use this

product?

Is this what they really

want?

• Usability Testing

• Web analytics

• Feedback

30

Test

In usability, the fastest

and cheapest methods

are often the best..

Jakob Nielsen, Usability Engineer


Is this usable & is it what they want?

31

• Evaluate product by

observing how real

users use it

• Measurement focusses

on 4 factors

• Efficiency

• Accuracy

• Recall

• Emotional response and

satisfaction

Test

Usability Punch List


Discount Usability

32

04 Test

• 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


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

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

34


Thank you

35

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

Michael Angelesurgreyhot.com/contact

http://www.fastcompany.com/magazine/109/open_design-tough-love.html








http://www.inc.com/magazine/20061201/hidi-butterfield-fake_Printer_Friendly.html














http://urgreyhot.com/contact




"no tears" method for user centered design

Documents