Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

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


Consultez-les par la suite

1 sur 46 Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

Similaire à How to Be a UX Design Army of One by Dan Olsen at Silicon Valley Product Camp (20)


Plus par Dan Olsen (17)

Plus récents (20)


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

  1. 1. { ] How to be A UX Design Army of One Dan Olsen Olsen Solutions Silicon Valley Product Camp March 23, 2013
  2. 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. 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. 4. Gegng  from  PRD  to  Code   Product   Coded  Product   Requirements   Document  (PRD)   Copyright  ©  2013  Olsen  Solu/ons  
  5. 5. Gegng  from  PRD  to  Code   UX   Design   Product   Coded  Product   Requirements   Document  (PRD)   Copyright  ©  2013  Olsen  Solu/ons  
  6. 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. 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. 8. The  Elements  of  User  Experience   by  Jesse  James  GarreY   Diagram  available   at  www.jjg.net   Copyright  ©  2013  Olsen  Solu/ons  
  9. 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. 10. The  Product  A-­‐Team   Visual   UI   Designer   Developer   Designer   Product   Manager   Copyright  ©  2013  Olsen  Solu/ons  
  11. 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. 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. 13. Informa/on  Architecture   Sitemap   Copyright  ©  2013  Olsen  Solu/ons  
  14. 14. Informa/on  Architecture   Sitemap   Copyright  ©  2013  Olsen  Solu/ons  
  15. 15. Wireframe  
  16. 16. Napkin  Wireframe   15   Copyright  ©  2013  Olsen  Solu/ons  
  17. 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. 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. 19. Visual  Hierarchy  Example   Eye  Tracking  Heatmap   2 1 3 4 5 6 Copyright  ©  2013  Olsen  Solu/ons  
  20. 20. Eye  Tracking  Heatmap  of   Google  Search  Results  Page   What’s   going  on   here?   Why  the   dropoff?  
  21. 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. 22. Gestalt  Principles:   How  We  Visually  Perceive  Objects   n  Figure  and  Ground   n  Similarity     n  Proximity   n  Closure   Copyright  ©  2013  Olsen  Solu/ons  
  23. 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. 24. Can  Use  Grid  to  Make  Blocks  of   Varying  Width   Copyright  ©  2013  Olsen  Solu/ons  
  25. 25. Wireframe  Using  Grid   Copyright  ©  2013  Olsen  Solu/ons  
  26. 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. 27. Flowchart  showing  condi/onal  logic   Copyright  ©  2013  Olsen  Solu/ons  
  28. 28. Napkin  Flowchart   Copyright  ©  2013  Olsen  Solu/ons  
  29. 29. Combo  Wireframe  &  Flowchart   Copyright  ©  2013  Olsen  Solu/ons  
  30. 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. 31. Visual  Design   Mockup   30   Copyright  ©  2013  Olsen  Solu/ons  
  32. 32. Visual  Design   UI  Spec   Copyright  ©  2013  Olsen  Solu/ons  
  33. 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. 34. Hue  &  Color  Wheel   Primary  Colors   Secondary  Colors   Ter/ary  Colors   Copyright  ©  2013  Olsen  Solu/ons  
  35. 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. 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. 37. Specifying  Color  PaleYe   Copyright  ©  2013  Olsen  Solu/ons  
  38. 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. 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. 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. 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. 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. 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. 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. 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. 46. http://olsensolutions.com { Questions? ] http://slideshare.net/dan_o @danolsen