How to Be a UX Design Army of One by Dan Olsen at Silicon Valley Product Camp
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 4,955 views

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

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

Statistics

Views

Total Views
4,955
Views on SlideShare
4,631
Embed Views
324

Actions

Likes
24
Downloads
124
Comments
7

10 Embeds 324

https://twitter.com 212
http://eventifier.co 48
http://storify.com 37
http://product-jobs.com 16
http://www.linkedin.com 6
http://crearvirtual.blogspot.com 1
http://www.5ideas.in 1
http://eventifier.com 1
http://www.steampdf.com 1
http://5ideas.in 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 7 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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 todayn  “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 Eng5   Copyright  ©  2013  Olsen  Solu/ons  
  • 7. Dan’s  UX  Design  Iceberg  What mostpeople seeand 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 fold20   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 ProductDesign 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