User Experience 102

UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102

UX 102
• Why does User Experience Design exist?
• Information Architecture: it's a big deal
• What is a wireframe and how do I get my
client to understand it?
• Interaction design and how it's diﬀerent
from visual design
• Usability is good manners
• How does UX work?
Agenda

UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
Why does User Experience Design exist?

We make sure digital stuﬀ works
for the people in front of the interface
User Experience Design

We See It Diﬀerently
Programming
Data
Hosting
People who make websites

Text
Images
Feeds
Videos
Stuﬀ
Games
Programming
Data
Hosting

Interface
Text
Images
Feeds
Videos
Stuﬀ
Games
Programming
Data
Hosting

Interface
People who visit websites
Interface
Text
Images
Feeds
Videos
Stuﬀ
Games
Programming
Data
Hosting

Interface
People who visit websites
Interface
Text
Images
Feeds
Videos
Stuﬀ
Games
MAGIC
Programming
Data
Hosting

Interface
How it should go
Text
Images
Feeds
Videos
Stuﬀ
Games
Interface
Text
Images
Feeds
Videos
Stuﬀ
Games
Building Websites
Programming
Data
Hosting
How it usually goes
Programming
Data
Hosting

THE USER!
YOUare not
(and neither is UX)

What do you call the
sweetened carbonated beverage
in this can?

Information architecture: it’s a big deal

The art and science
of organizing and labeling
information
Information Architecture

We identify these:
People Content Context

Then we map them together
Linear

Linear
Hub and Spoke

Linear
Hub and Spoke
Narrow and Deep

Linear
Hub and Spoke
Wide and Shallow
Narrow and Deep

You can’t have navigation without IA

You can’t have navigation without IA
People
Content Context
Navigation Design
Sitemap

“Information architecture is the stuﬀ
that is never rendered in pixels
and it’s never rendered in code.”
- Dan Klyn,
The Understanding Group

Information architecture disasters

And how do I get my client to understand it?
What’s a wireframe

The skeleton of a website
Wireframe

content priorities
interactions
Wireframe

content priorities
interactions
initial layout
Wireframe

content priorities
interactions
initial layout
limited colors +
images
Wireframe

content priorities
interactions
initial layout
visual design
limited colors +
images
Wireframe

content priorities
interactions
initial layout
visual design
ﬁnal layout
limited colors +
images
Wireframe

content priorities
interactions
initial layout
visual design
ﬁnal layout
limited colors +
images
ﬁlled with
content
Wireframe

functional elements
“skeleton”
Wireframe ≠ Visual Design

functional elements
“skeleton”
graphical elements
“surface”
Wireframe ≠ Visual Design

Can’t we just go straight to
visual design?
that sounds expensive.

What happens when you skip UX:

• critical functional decisions aren’t made

• scope creep

• scope creep
• endless design revisions

• scope creep
• which take longer in photoshop

• scope creep
• endless development revisions

• scope creep
• obliterated budgets

• scope creep
• ux ends up ﬁxing things anyway

• scope creep
• ux ends up ﬁxing things anyway
• clients get mad

it’s our job to educate our clients.
Wireframes can be hard to understand

and how it’s diﬀerent from visual design
Interaction design

planning how a person might move through a system
Interaction Design

the aesthetic and emotional expression of a brand
Visual Design (@ BR)

Interaction Design...
is goal-driven

1
is goal-driven
2
3
4
5 6

is goal-driven
1

is goal-driven
1
2

is goal-driven
1
2
3

is goal-driven
1
2
3
4

is goal-driven
1
2
3
4
?

provides aﬀordances

makes things learnable

old: tag clouds

old: tag clouds new: recommended posts

NO

YESNO

it’s good manners
Usability

A quality attribute used to evaluate
how easy interfaces are to use.
Usability

Usability Evaluation

Principles of
Usability
Usability
Recommendations

Usability Testing
• always done post-design

Usability Testing
• measures task completion

Usability Testing
• should be observed, repeatable

Usability Testing
• should be observed, repeatable
• other kinds of user research
may be done pre-design

Usability Testing ≠ Focus Groups

what people do

what people do what people say

makes things discoverable
Good Usability

gives users feedback and context
Good Usability

gives users feedback and context
lets users recover from errors
Good Usability

makes people feel dumb
Bad Usability

Bad Usability
is disrespectful

Bad Usability
is disrespectful
damages our clients’ credibility

usability usability
visual design, content + development

usability usability
user
experience
visual design, content + development

How does User Experience Design work?

The Digital Flower
Developer
AS/PR

The Digital Flower
Developer
Creative,
content, BAMAS/PR

The Digital Flower
Developer User Experience
Creative,
content, BAMAS/PR

The Digital Flower
Developer User Experience
Creative,
content, BAMAS/PR
Producer

The Digital Process
strategy
session

The Digital Process
strategy
session
work work work

The Digital Process
strategy
session
checkpoint
work work work

The Digital Process
strategy
session
checkpoint
work work work
client
review

The Digital Process
strategy
session
checkpoint
work work work work work work
client
review

The Digital Process
strategy
session
checkpoint
checkpoint
client
review

The Digital Process
strategy
session
checkpoint
checkpoint
client
review
client
review

The User Experience Design Process
sitemap navigation design
1
2
3
4
5
6
user ﬂows
wireframes visual designusability
assessment
101101101101010101101101101010
101101101101010101101101101010
101101101101010101101101101010
101101101101010101101101101010
101101101101010101101101101010
coding

Throughout the process, UX Design:

• gets involved as early as possible

• represents the user

• incorporates user needs with business needs

• asks questions you may never think of

• thinks holistically

• thinks holistically
• zooms in and out (strategic and tactical)

Make nice memories with your UX Designer

• allow early access to the client to clarify
needs

needs
• avoid playing “telephone”

needs
• we always present our own work

needs
• we always present our own work
• use us to identify opportunities for new work

Thanks.

User Experience 102

More Related Content

What's hot

Similar to User Experience 102

More from Gretchen Thomas

Recently uploaded

User Experience 102