how to be a ux design army of one by dan olsen at silicon valley product camp

Post on 17-Oct-2014

4.831 Views

Category:

Business

3 Downloads

Preview:

Click to see full reader

DESCRIPTION

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

TRANSCRIPT

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?

top related