Talk on User Experience (UX) Design principles that I gave at Silicon Valley Product Camp on March 23, 2013.

1. { ]
How to be
A UX Design
Army of One
Dan Olsen
Olsen Solutions
Silicon Valley
Product Camp
March 23, 2013

2. My
Background
n Educa/on
n BS,
Electrical
Engineering,
Northwestern
n MS,
Industrial
Engineering,
Virginia
Tech
n MBA,
Stanford
n Web
development
and
UI
design
courses
n 20
years
of
Product
Management
Experience
n Managed
submarine
design
for
5
years
n 5
years
at
Intuit,
led
Quicken
Product
Management
n Led
Product
Management
at
Friendster
n CEO
&
Cofounder
of
YourVersion
(personalized
news)
n Product
consultant:
Box,
YouSendIt,
Epocrates
n Speaker,
Author
“42
Rules
of
Product
Management”
Will
post
slides
to
hYp://slideshare.net/dan_o

3. UX
Design
Army
of
One
n What
is
“UX
Design”?
n UX
=
User
experience
n Designing
the
product
in
a
way
that
:
n meets
customer
needs
See my other talks
n meets
needs
beYer
than
alterna/ves
n delivers
a
great
user
experience
Focus of my talk today
n “UX”
vs.
“UI”
(User
Interface):
UX
is
broader
n Why
“Army
of
One”?
n Great
UX
takes
diverse
set
of
people/skills
n Skills
are
o`en
missing
from
your
product
team
n Good
product
people
fill
cri/cal
gaps
Copyright
©
2013
Olsen
Solu/ons

4. Gegng
from
PRD
to
Code
Product
Coded
Product
Requirements
Document
(PRD)
Copyright
©
2013
Olsen
Solu/ons

5. Gegng
from
PRD
to
Code
UX
Design
Product
Coded
Product
Requirements
Document
(PRD)
Copyright
©
2013
Olsen
Solu/ons

6. The
UX
Design
Gap
on
Many
Product
Teams
Level Define Design Code
1 Engineering
2 Product Mgmt Engineering
3 Product Mgmt Engineering
Product Mgmt Engineering
4 PM Eng
UI
5 PM Eng
5
Copyright
©
2013
Olsen
Solu/ons

7. Dan’s
UX
Design
Iceberg
What most
people see
and react to Visual
Design What good
product
people
Interaction think about
Design
Information
Architecture
Conceptual
Design
Copyright
©
2013
Olsen
Solu/ons

8. The
Elements
of
User
Experience
by
Jesse
James
GarreY
Diagram
available
at
www.jjg.net
Copyright
©
2013
Olsen
Solu/ons

9. User
Experience
Framework
=
Workflow
for
the
Product
Team
Workflow
Coding
Product
UI/Interac/on
Visual
Developer
Manager
Designer
Designer
Copyright
©
2013
Olsen
Solu/ons

10. The
Product
A-­‐Team
Visual
UI
Designer
Developer
Designer
Product
Manager
Copyright
©
2013
Olsen
Solu/ons

11. Elements
of
User
Experience
Design
Consists
of
Three
Dis/nct
Elements:
n Informa/on
Architecture
n Structure
and
layout
at
both
site
and
page
level
n How
site
is
structured
(sitemap)
n How
site
informa/on
is
organized
(site
layout)
n How
each
page
is
organized
(page
layout)
n Interac/on
Design
n How
user
and
product
interact
with
one
another
n User
flows
(e.g.,
naviga/on
across
mul/ple
pages)
n User
input
(e.g.,
controls
and
form
design)
n Visual
Design
n “How
it
looks”
vs.
“What
it
is”,
o`en
called
“chrome”
n Fonts,
colors,
graphical
elements
10
Copyright
©
2013
Olsen
Solu/ons

12. Informa/on
Architecture
n Documents
used
n Sitemap
n Show
how
sec/ons
of
website
are
organized
n Show
major
naviga/on
paYerns
n Wireframes
n Show
the
layout
of
components
on
a
page
n Does
NOT
focus
on
visual
design
n Black
&
White
n No
graphics
n Templates
for
overall
website
and
individual
pages
n Tools:
Visio,
OmniGraffle,
Axure,
Powerpoint,
Word,
Excel,
Photoshop,
Balsamiq,
whiteboard
Copyright
©
2013
Olsen
Solu/ons

13. Informa/on
Architecture
Sitemap
Copyright
©
2013
Olsen
Solu/ons

14. Informa/on
Architecture
Sitemap
Copyright
©
2013
Olsen
Solu/ons

15. Wireframe

16. Napkin
Wireframe
15
Copyright
©
2013
Olsen
Solu/ons

17. Visual
Hierarchy
n Very
important:
impacts
how
users
scan
&
read
n Can
you
rank
these
circles
in
order
of
importance?
Copyright
©
2013
Olsen
Solu/ons

18. Visual
Hierarchy
is
Cri/cal
n Posi/on
n Top
more
important
than
boYom
n Le`
more
important
(le`-­‐to-­‐right
languages)
n Size
n Larger
more
important
than
smaller
n Color
&
contrast
n Brighter/higher
contrast
more
important
than
darker/lower
contrast
Copyright
©
2013
Olsen
Solu/ons

19. Visual
Hierarchy
Example
Eye
Tracking
Heatmap
2
1
3
4
5
6
Copyright
©
2013
Olsen
Solu/ons

20. Eye
Tracking
Heatmap
of
Google
Search
Results
Page
What’s
going
on
here?
Why
the
dropoff?

21. Put
Key
Info
&
Ac/ons
Above
The
Fold
Landing
Page
A
Landing
Page
B
The Fold
Key action is above
the fold
Key action is below
the fold
20
Copyright
©
2009
O2010
YourVersion
Copyright
©
lsen
Solu/ons
LLC

22. Gestalt
Principles:
How
We
Visually
Perceive
Objects
n Figure
and
Ground
n Similarity
n Proximity
n Closure
Copyright
©
2013
Olsen
Solu/ons

23. Grids
Ensure
You
Have
Good
Alignment
of
Your
Design
Elements
970
pixel
grid
example
12
columns
Each
68
px
wide
with
14
px
guYer
Copyright
©
2013
Olsen
Solu/ons

24. Can
Use
Grid
to
Make
Blocks
of
Varying
Width
Copyright
©
2013
Olsen
Solu/ons

25. Wireframe
Using
Grid
Copyright
©
2013
Olsen
Solu/ons

26. Interac/on
Design
n Documents
used
n Flowchart
n Combina/on
of
Wireframes
&
Flowcharts
n Tools:
Visio,
OmniGraffle,
Powerpoint,
Photoshop,
whiteboard
n May
build
prototype
using
HTML,
jQuery,
Ruby
on
Rails,
Flash,
or
paper
n Usability
tes/ng
can
help
find
problems
25
Copyright
©
2013
Olsen
Solu/ons

27. Flowchart
showing
condi/onal
logic
Copyright
©
2013
Olsen
Solu/ons

28. Napkin
Flowchart
Copyright
©
2013
Olsen
Solu/ons

29. Combo
Wireframe
&
Flowchart
Copyright
©
2013
Olsen
Solu/ons

30. Visual
Design
n Documents
used
n Mockups
(aka
comps)
n Tools
used:
n Photoshop
n Illustrator
n Fireworks
n Deliverables
n Usually
images
n Can
be
HTML
&
CSS
Copyright
©
2013
Olsen
Solu/ons

31. Visual
Design
Mockup
30
Copyright
©
2013
Olsen
Solu/ons

32. Visual
Design
UI
Spec
Copyright
©
2013
Olsen
Solu/ons

33. Color
Theory
101
n What
are
the
primary
colors?
n A:
Red,
Yellow,
Blue
n B:
Red,
Green,
Blue
Copyright
©
2013
Olsen
Solu/ons

34. Hue
&
Color
Wheel
Primary
Colors
Secondary
Colors
Ter/ary
Colors
Copyright
©
2013
Olsen
Solu/ons

35. Colors
are
Specified
as
RGB
Values
n For
each
color,
value
can
vary
from
0
to
255
n Values
are
wriYen
in
hexadecimal
(base
16)
n Instead
of
1
to
10,
hex
goes
from
1
to
16
n Since
we
run
out
of
digits,
A
thru
F
are
used
n A=10,
B=11,
C=12,
D=13,
E=14,
F=15
n #10
=
16
in
base
10
(1
x
16
+
0
x
1)
Prize
n #FF
=
255
in
base
10
(15
x
16
+
15
x
1)
#
00
00
00
#
FF
00
00
#
FF
FF
FF
#
FF
FF
00
Red
Green
Blue
Red
Green
Blue
Red
Green
Blue
Red
Green
Blue
0
0
0
255
0
0
255
255
255
255
255
0
=
Black
=
Red
=
White
=
Yellow
Copyright
©
2013
Olsen
Solu/ons

36. Tints,
Shades,
and
Tones
n Tints:
adding
white
to
a
pure
hue
n Shades:
adding
black
to
a
pure
hue
n Tones:
adding
gray
to
a
pure
hue:
35
Copyright
©
2013
Olsen
Solu/ons

37. Specifying
Color
PaleYe
Copyright
©
2013
Olsen
Solu/ons

38. Fonts
101
4
common
fonts:
n Times New Roman
n Courier!
n Arial"
n Helvetica"
n How
is
Courier
different
than
the
other
3
fonts?
n Most
designs
use
2
fonts
n one
for
body
text
n one
for
headings
Copyright
©
2013
Olsen
Solu/ons

39. Fonts
in
a
Browser
n Web
font
choices
use
to
be
quite
limited
n Not
any
more,
thanks
to
CSS
@font-­‐face
n Other
CSS
proper/es
for
controlling
text:
n font-­‐family
n color
n font-­‐size
n line-­‐height
n font-­‐weight
(bold)
n font-­‐style
(italic)
n text-­‐decora/on
(underline)
n text-­‐shadow
(CSS3)
Copyright
©
2013
Olsen
Solu/ons

40. What’s
your
Weapon
of
Choice?
n Visio
/
OmniGraffle
n Powerpoint
n Photoshop
/
Illustrator
/
Fireworks
n Balsamiq
n Others?
Copyright
©
2013
Olsen
Solu/ons

41. Design
Ar/facts:
Interac/vity
vs.
Fidelity
Alpha
Prototype
Interactivity
Interactive InVision*
Wireframe
Hand Static Mockup
sketch Wireframe
Fidelity
*hYp://www.invisionapp.com
40
Copyright
©
2013
Olsen
Solu/ons

42. Design
Tools:
Fidelity
vs.
Effort
3 Photoshop
Product
Design Fidelity
Manager
2
1 Balsamiq Visio
Visual
Hand Designer
sketch
Effort to Create Artifact
Copyright
©
2013
Olsen
Solu/ons

43. Why
Balsamiq
Is
Great
n Super
easy
to
learn
and
use
n Widget
library
has
most
UI
elements
n Can
annotate
with
s/cky
notes
n Can
add
click
naviga/on
between
pages
to
illustrate
a
user
story
n Can
export
as
PDF
(so
others
don’t
need
to
have
Balsamiq),
mul/ple
pages
in
1
PDF
n Best
$79
you’ll
spend
n hYp://www.balsamiq.com
Copyright
©
2013
Olsen
Solu/ons

44. But
wait,
there’s
more!
What
I
didn’t
have
/me
to
cover
n Understanding
and
priori/zing
customer
needs
n Iden/fying
your
product
value
proposi/on
n User
tes/ng
and
design
itera/on
n Measuring
user
experience
with
analy/cs
n See
my
other
talks
on
all
of
the
above
hYp://slideshare.net/dan_o
Copyright
©
2013
Olsen
Solu/ons

45. UX
Army
of
One
Cheat
Sheet
n Iden/fy
&
fill
gaps
in
your
Product
A-­‐Team
n Be
sketchy
n Wireframe
n Visual
hierarchy
n Gestalt
principles
n Flow
n Mockups
n Grid,
Color
PaleYe,
Fonts
Copyright
©
2013
Olsen
Solu/ons

46. http://olsensolutions.com
{ Questions?
] http://slideshare.net/dan_o
@danolsen