0
{                      ]    How to be    A UX Design    Army of One      Dan Olsen      Olsen Solutions      Silicon Valle...
My	  Background	  n    Educa/on	         n    BS,	  Electrical	  Engineering,	  Northwestern	         n    MS,	  Indust...
UX	  Design	  Army	  of	  One	  n    What	  is	  “UX	  Design”?	         n  UX	  =	  User	  experience	         n  Desi...
Gegng	  from	  PRD	  to	  Code	     Product	                            Coded	  Product	   Requirements	  Document	  (PRD)...
Gegng	  from	  PRD	  to	  Code	                           UX	                          Design	     Product	               ...
The	  UX	  Design	  Gap	  on	  Many	  Product	  Teams                                                                   	 ...
Dan’s	  UX	  Design	  Iceberg	  What mostpeople seeand react to         Visual                     Design                 ...
The	  Elements	  of	  User	  Experience	              by	  Jesse	  James	  GarreY	  Diagram	  available	  at	  www.jjg.net...
User	  Experience	  Framework	  =	    Workflow	  for	  the	  Product	  Team 	  Workflow	                                    ...
The	  Product	  A-­‐Team	   Visual	                           UI	                                   Designer	             ...
Elements	  of	  User	  Experience	  Design	           Consists	  of	  Three	  Dis/nct	  Elements:	           n  Informa/o...
Informa/on	  Architecture	  n    Documents	  used	         n    Sitemap	                n  Show	  how	  sec/ons	  of	  ...
Informa/on	  Architecture	         Sitemap   	                          Copyright	  ©	  2013	  Olsen	  Solu/ons	  
Informa/on	  Architecture	         Sitemap   	                          Copyright	  ©	  2013	  Olsen	  Solu/ons	  
Wireframe	  
Napkin	  Wireframe	  15	                         Copyright	  ©	  2013	  Olsen	  Solu/ons	  
Visual	  Hierarchy	  n  Very	  important:	  impacts	  how	  users	  scan	  &	  read	  n  Can	  you	  rank	  these	  circ...
Visual	  Hierarchy	  is	  Cri/cal                                               	  n  Posi/on	         n  Top	  more	  i...
Visual	  Hierarchy	  Example   	   Eye	  Tracking	  Heatmap 	                        2       1                  3         ...
Eye	  Tracking	  Heatmap	  of	                    Google	  Search	  Results	  Page   	  What’s	  going	  on	  here?	  Why	...
Put	  Key	  Info	  &	  Ac/ons	  Above	  The	  Fold	                   Landing	  Page	  A	              Landing	  Page	  B	...
Gestalt	  Principles:  	    How	  We	  Visually	  Perceive	  Objects                                             	  n    ...
Grids	  Ensure	  You	  Have	  Good	  Alignment	  of	  Your	  Design	  Elements 	               970	  pixel	  grid	  exampl...
Can	  Use	  Grid	  to	  Make	  Blocks	  of	                Varying	  Width      	                                       Co...
Wireframe	  Using	  Grid	                          Copyright	  ©	  2013	  Olsen	  Solu/ons	  
Interac/on	  Design	           n  Documents	  used	              n  Flowchart	              n  Combina/on	  of	  Wirefr...
Flowchart	  showing	  condi/onal	  logic                                          	                                  Copyr...
Napkin	  Flowchart                  	                     Copyright	  ©	  2013	  Olsen	  Solu/ons	  
Combo	  Wireframe	  &	  Flowchart                                   	                              Copyright	  ©	  2013	  ...
Visual	  Design	  n  Documents	  used	      n  Mockups	  (aka	  comps)	  n  Tools	  used:	  	      n  Photoshop	      ...
Visual	  Design  	              Mockup    	  30	                              Copyright	  ©	  2013	  Olsen	  Solu/ons	  
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,	  G...
Hue	  &	  Color	  Wheel                         	  Primary	  Colors	     Secondary	  Colors	     Ter/ary	  Colors	        ...
Colors	  are	  Specified	  as	  RGB	  Values                                                       	       n      For	  ea...
Tints,	  Shades,	  and	  Tones                                                    	           n  Tints:	  adding	  white	...
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	  diff...
Fonts	  in	  a	  Browser                                                 	  n  Web	  font	  choices	  use	  to	  be	  qui...
What’s	  your	  Weapon	  of	  Choice?	  n    Visio	  /	  OmniGraffle	  n    Powerpoint	  n    Photoshop	  /	  Illustrator...
Design	  Ar/facts:   	                                    Interac/vity	  vs.	  Fidelity	                                  ...
Design	  Tools:    	                              Fidelity	  vs.	  Effort   	                                              ...
Why	  Balsamiq	  Is	  Great	  n  Super	  easy	  to	  learn	  and	  use	  n  Widget	  library	  has	  most	  UI	  element...
But	  wait,	  there’s	  more!	  	          What	  I	  didn’t	  have	  /me	  to	  cover	  n  Understanding	  and	  priori/...
UX	  Army	  of	  One	                             Cheat	  Sheet	  n  Iden/fy	  &	  fill	  gaps	  in	      your	  Product	 ...
http://olsensolutions.com{   Questions?                 ]   http://slideshare.net/dan_o                     @danolsen
Upcoming SlideShare
Loading in...5
×

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

5,400

Published on

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

Published in: Business
7 Comments
28 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,400
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
160
Comments
7
Likes
28
Embeds 0
No embeds

No notes for slide

Transcript of "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 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. 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 Eng5   Copyright  ©  2013  Olsen  Solu/ons  
  7. 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. 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 fold20   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 ProductDesign 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×