View
4.831
Download
3
Embed Size (px)
DESCRIPTION
Talk on User Experience (UX) Design principles that I gave at Silicon Valley Product Camp on March 23, 2013.
Citation preview
Dan Olsen Olsen Solutions
Silicon Valley Product Camp March 23, 2013
How to be A UX Design Army of One { ]
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
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
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 n meets needs beYer than alterna/ves n delivers a great user experience Focus of my talk today
See my other talks
Copyright © 2013 Olsen Solu/ons
Gegng from PRD to Code
Copyright © 2013 Olsen Solu/ons
Product Requirements
Document (PRD)
Coded Product
UX Design
Gegng from PRD to Code
Copyright © 2013 Olsen Solu/ons
Product Requirements
Document (PRD)
Coded Product
The UX Design Gap on Many Product Teams
Define Design Code
Product Mgmt Engineering
Product Mgmt Engineering
Product Mgmt Engineering
PM Eng
Eng PM
UI
Level
2
3
4
5
Engineering 1
Copyright © 2013 Olsen Solu/ons 5
Dan’s UX Design Iceberg
Visual Design
Interaction Design
Information Architecture
Conceptual Design
What most people see and react to
What good product people think about
Copyright © 2013 Olsen Solu/ons
The Elements of User Experience by Jesse James GarreY
Copyright © 2013 Olsen Solu/ons
Diagram available at www.jjg.net
User Experience Framework = Workflow for the Product Team
Copyright © 2013 Olsen Solu/ons
Product Manager
UI/Interac/on Designer
Visual Designer
Coding
Developer
Workflow
The Product A-‐Team
Copyright © 2013 Olsen Solu/ons
Product Manager
UI Designer
Visual Designer Developer
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
Copyright © 2013 Olsen Solu/ons 10
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
Informa/on Architecture Sitemap
Copyright © 2013 Olsen Solu/ons
Informa/on Architecture Sitemap
Copyright © 2013 Olsen Solu/ons
Wireframe
Napkin Wireframe
Copyright © 2013 Olsen Solu/ons 15
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
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
Visual Hierarchy Example Eye Tracking Heatmap
Copyright © 2013 Olsen Solu/ons
1 3
4
5 6
2
Eye Tracking Heatmap of Google Search Results Page
What’s going on here? Why the dropoff?
Copyright © 2010 YourVersion
Put Key Info & Ac/ons Above The Fold
Copyright © 2009 Olsen Solu/ons LLC
Landing Page A Landing Page B
Key action is above the fold
Key action is below the fold
The Fold
20
Gestalt Principles: How We Visually Perceive Objects
n Figure and Ground
n Proximity
n Similarity
n Closure
Copyright © 2013 Olsen Solu/ons
Grids Ensure You Have Good Alignment of Your Design Elements
Copyright © 2013 Olsen Solu/ons
970 pixel grid example 12 columns
Each 68 px wide with 14 px guYer
Can Use Grid to Make Blocks of Varying Width
Copyright © 2013 Olsen Solu/ons
Wireframe Using Grid
Copyright © 2013 Olsen Solu/ons
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
Copyright © 2013 Olsen Solu/ons 25
Flowchart showing condi/onal logic
Copyright © 2013 Olsen Solu/ons
Napkin Flowchart
Copyright © 2013 Olsen Solu/ons
Combo Wireframe & Flowchart
Copyright © 2013 Olsen Solu/ons
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
Visual Design Mockup
Copyright © 2013 Olsen Solu/ons 30
Visual Design UI Spec
Copyright © 2013 Olsen Solu/ons
Color Theory 101
n What are the primary colors? n A: Red, Yellow, Blue n B: Red, Green, Blue
Copyright © 2013 Olsen Solu/ons
Hue & Color Wheel
Primary Colors Secondary Colors Ter/ary Colors
Copyright © 2013 Olsen Solu/ons
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) n #FF = 255 in base 10 (15 x 16 + 15 x 1)
Copyright © 2013 Olsen Solu/ons
# 00 00 00
Red Green Blue 0 0 0
= Black
# FF FF FF
Red Green Blue 255 255 255
= White
# FF 00 00
Red Green Blue 255 0 0
= Red
# FF FF 00
Red Green Blue 255 255 0
= Yellow
Prize
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:
Copyright © 2013 Olsen Solu/ons 35
Specifying Color PaleYe
Copyright © 2013 Olsen Solu/ons
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?
Copyright © 2013 Olsen Solu/ons
n Most designs use 2 fonts n one for body text n one for headings
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
What’s your Weapon of Choice?
n Visio / OmniGraffle n Powerpoint n Photoshop / Illustrator / Fireworks
n Balsamiq n Others?
Copyright © 2013 Olsen Solu/ons
Design Ar/facts: Interac/vity vs. Fidelity
Copyright © 2013 Olsen Solu/ons
Hand sketch
Inte
ract
ivity
Fidelity
Prototype
Static Wireframe
Interactive Wireframe
Alpha
Mockup
InVision*
*hYp://www.invisionapp.com 40
Design Tools: Fidelity vs. Effort
Copyright © 2013 Olsen Solu/ons
Hand sketch D
esig
n Fi
delit
y
Effort to Create Artifact
Visio
Photoshop
Balsamiq 1
2
3 Product Manager
Visual Designer
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
Copyright © 2013 Olsen Solu/ons
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
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
http://olsensolutions.com http://slideshare.net/dan_o @danolsen
{ ] Questions?