How to Be a UX Design Army of One by Dan Olsen at Silicon Valley Product Camp

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


Product Requirements

Document (PRD)

Coded Product

UX Design

Gegng from PRD to Code


Product Requirements

Document (PRD)

Coded Product

The UX Design Gap on Many Product Teams

Define Design Code

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


The Elements of User Experience by Jesse James GarreY


Diagram available at www.jjg.net

User Experience Framework = Workflow for the Product Team


Product Manager

UI/Interac/on Designer

Visual Designer

Coding

Developer

Workflow

The Product A-‐Team


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


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


Informa/on Architecture Sitemap


Informa/on Architecture Sitemap


Wireframe

Napkin Wireframe


Visual Hierarchy n  Very important: impacts how users scan & read n  Can you rank these circles in order of importance?


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


Visual Hierarchy Example Eye Tracking Heatmap


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


Grids Ensure You Have Good Alignment of Your Design Elements


970 pixel grid example 12 columns

Each 68 px wide with 14 px guYer

Can Use Grid to Make Blocks of Varying Width


Wireframe Using Grid


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


Flowchart showing condi/onal logic


Napkin Flowchart


Combo Wireframe & Flowchart


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


Visual Design Mockup


Visual Design UI Spec


Color Theory 101

n What are the primary colors? n A: Red, Yellow, Blue n B: Red, Green, Blue


Hue & Color Wheel

Primary Colors Secondary Colors Ter/ary Colors


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)


# 00 00 00

Red Green Blue 0 0 0

= Black

# FF FF FF


= White

# FF 00 00


= Red

# FF FF 00


= 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:


Specifying Color PaleYe


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

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)


What’s your Weapon of Choice?

n  Visio / OmniGraffle n  Powerpoint n  Photoshop / Illustrator / Fireworks

n  Balsamiq n  Others?


Design Ar/facts: Interac/vity vs. Fidelity


Hand sketch

Inte

ract

ivity

Fidelity

Prototype

Static Wireframe

Interactive Wireframe

Alpha

Mockup

InVision*

*hYp://www.invisionapp.com 40

Design Tools: Fidelity vs. Effort


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



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


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?

http://olsensolutions.com

http://www.slideshare.net/dan_o/presentations

https://twitter.com/danolsen

Business

How to Be a UX Design Army of One by Dan Olsen at Silicon Valley Product Camp