User Experience Design & Paper Prototyping
Upcoming SlideShare
Loading in...5
×
 

User Experience Design & Paper Prototyping

on

  • 1,876 views

Presentation is part of the Mobile Accelerator Program organized by the Mobile Experience Innovation Centre, at OCAD University in Toronto, Canada. www.ilonaposner.com

Presentation is part of the Mobile Accelerator Program organized by the Mobile Experience Innovation Centre, at OCAD University in Toronto, Canada. www.ilonaposner.com

Statistics

Views

Total Views
1,876
Views on SlideShare
1,871
Embed Views
5

Actions

Likes
2
Downloads
34
Comments
0

1 Embed 5

http://ilonaposner.com 5

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

User Experience Design & Paper Prototyping User Experience Design & Paper Prototyping Presentation Transcript

  • User  Experience  Design     &  Paper  Prototyping       ILONA  POSNER  User  Experience  &  Usability  Consultant   www.ilonaposner.com   Mobile  Accelerator  Program  (MAP)   Mobile  Experience  InnovaJon  Centre  (MEIC)   OCADU,  Toronto,  ON   February  14,  2013   ILONA  POSNER  ©  2013   1  
  • Bio  -­‐    ILONA  POSNER   User  Experience  &  Usability  Consultant  •  Industries:  Telecom,  Financial,  Web,  Mobile,  SoTware,   Hardware,  Healthcare,  TransportaJon,  EducaJon  •  Clients:    AMD,  Autodesk,  Apple,  Bell,  CIBC,  DB,  MicrosoT,   Pitney  Bowes,  LA  Metro  Transit  Authority,  Human  Factors   InternaJonal,  NaJonal  Research  Council  of  Canada,  Canada   Health  Infoway,  CIBC,  RBC,  ScoJa,  TD,  Visa,  &  Yahoo!  •  Teaching:  University  of  Toronto,  Canadian  Film  Centre,     OCADU,  Professional  Development  Courses  •  Research:  University  of  Toronto,  Computer  Science,  Human   Computer  InteracJon,  Dynamic  Graphics  Project  •  Educa=on:  M.Sc.  &  B.Sc.  Computer  Science,  U.  of  Toronto   ILONA  POSNER  ©  2013   2  
  • Points  of  View   “A  point  of  view  is  worth  80  points  of  IQ.”                                                                                -­‐  Alan  Kay  “You  are  NOT  the  User!”   ILONA  POSNER  ©  2013   3   Source  www.openmuseum.org/objet/show/1835  
  • Keyhole  Impact   “I  am  NOT  the  User!”   ILONA  POSNER  ©  2013   4  Source  hfp://s125.beta.photobucket.com/user/alongway99/media/Halloween%20AnimaJons/Scary%20Eye%20AnimaJons/EyeLooksKeyhole.gif.html?sort=4&o=47  
  • History  of  User  Experience  •  Human  Factors  &  Ergonomics  •  Human  Computer  InteracJon  •  Usability  •  User  Experience   ILONA  POSNER  ©  2013   5  
  • 1940’s  ILONA  POSNER  ©  2013   6  
  • 1950’s  ILONA  POSNER  ©  2013   7  
  • 1980’s  ILONA  POSNER  ©  2013   8  
  • And  Now…     ILONA  POSNER  ©  2013   9  
  • Human  Impact  of  Technology  Human ImpactDevices  ApplicaJons  Input  forms    Features  InformaJon  Time  of  use  Dependence  Interdependence    Sociability  Environmental  impact   Human Capacities ILONA  POSNER  ©  2013   10  
  • What  is  User  Experience?  Interna=onal  Standards  Organiza=on    •  ISO  defines  user  experience  as  "a  persons  percep=ons  and  responses  that  result  from  the  use  or   an=cipated  use  of  a  product,  system  or  service".  So,  user  experience  is  subjec=ve  and  focuses  on   the  use.  •  The  addiJonal  notes  for  the  ISO  definiJon  explain  that  user  experience  includes  all  the  users   emo=ons,  beliefs,  preferences,  percep=ons,  physical  and  psychological  responses,  behaviors  and   accomplishments  that  occur  before,  during  and  aMer  use.  The  notes  also  list  the  three  factors  that   influence  user  experience:  system,  user  and  the  context  of  use.  •  Note  3  of  the  standard  hints  that  usability  addresses  aspects  of  user  experience,  e.g.  "usability   criteria  can  be  used  to  assess  aspects  of  user  experience".  Unfortunately,  the  standard  does  not  go   further  in  clarifying  the  relaJon  between  user  experience  and  usability.  Clearly,  the  two  are   overlapping  concepts,  with  usability  including  pragma=c  aspects  (geNng  a  task  done)  and  user   experience  focusing  on  users’  feelings  stemming  both  from  pragma=c  and  hedonic  aspects  of  the   system.   ISO  FDIS  9241-­‐210:2009.  Ergonomics  of  human  system  interacJon  -­‐  Part  210:  Human-­‐centered  design  for   interacJve  systems  (formerly  known  as  13407).  InternaJonal  OrganizaJon  for  StandardizaJon  (ISO).   Switzerland.        hfp://en.wikipedia.org/wiki/User_experience   ILONA  POSNER  ©  2013   11  
  • User  Experience    Everything  that  the  user  sees,  hears,  &  touches!   Share   Customize   ILONA  POSNER  ©  2013   12  
  • **  Balloon  Image  **   ILONA  POSNER  ©  2013   13  
  • User  Experience  =  Product   ILONA  POSNER  ©  2013   14  
  • User  Experience  =  Brand   ILONA  POSNER  ©  2013   15  
  • User  Experience   UX  Honeycomb,  Peter  Moreville       ILONA  POSNER  ©  2013   16  
  • Buying  Pop  with  a  Cell  Phone   IDEO  researchers  test  i-­‐mode  leading  edge   mobile  services  plavorm,  2003  Bill  Moggridge,  Designing  InteracJons,  February  2,  2007  lecture  by  Bill  Moggridge  for  the  Stanford  University  Human  Computer  InteracJon  Seminar  (CS  547).        hfp://www.youtube.com/watch?v=kVkQYvN4_HA   ILONA  POSNER  ©  2013   17  
  • User  Experience  Example  …   hfp://www.switched.com/2010/12/28/aol-­‐free-­‐trial-­‐cds-­‐cost-­‐300-­‐million/   ILONA  POSNER  ©  2013   18  
  • UX  Problem   ILONA  POSNER  ©  2013   19  
  • Cost  of  UX  Problem   •  Bush  won  by  537  of  5.8  million  votes   •  Buchanan  5x  >  votes  in  Palm  Beach   •  19,120  ballots  registered  2  votes,   20,000  disqualified  ballots   •  Law  suit  claimed:   “Ballots  were  decepJve,  misleading,   and  confusing.”     •  Results  delayed  37  days!    Nov  7  -­‐  Dec  13     hfp://costofwar.com/   ILONA  POSNER  ©  2013   20  
  • How  to  Maximize  UX?   ILONA  POSNER  ©  2013   21  
  • Trinity  for  Success   Users   Business   Technology   ILONA  POSNER  ©  2013   22  
  • Research  Focus  Problem  Space  -­‐ Environment  -­‐ Market  -­‐ LegislaJon   Users     Business   Users   -­‐ Goals,  Needs   -­‐ AcJviJes,  Tasks   -­‐ Vision  &  Goals   -­‐ Requirements   -­‐ Requirements   -­‐ CompeJJon   Business   ?   Technology   Technology -­‐ Constraints     -­‐ Requirements   ILONA  POSNER  ©  2013   23  
  • UX  Success  Stories   Mazda  Miata,  1989  -­‐  present   ILONA  POSNER  ©  2013   24  
  • $300  Million  Bufon    eCommerce  website  changed  one  bufon  label     ✗   REGISTER   CONTINUE   ✓+  45%  sales  up  aTer  renaming  of  bufon              &  removal  of  forced  registraJon  +  $300  Million/year  revenue   Source:  www.uie.com/ar,cles/three_hund_million_bu(on   ILONA  POSNER  ©  2013   25  
  • $12  Million  –  OpJonal  Field   •  Expedia.com  makes  $12  Million  profit,   aTer  removing  opJonal  field  “Company”  from   online  purchase  form   •  Prior,  customers  who  clicked  the  Buy  Now  did  not   complete  transacJons…     Source:    hfp://www.silicon.com/management/sales-­‐and-­‐markeJng/2010/11/01/ expedia-­‐  on-­‐how-­‐one-­‐extra-­‐data-­‐field-­‐can-­‐cost-­‐12m-­‐39746554/   ILONA  POSNER  ©  2013   26  
  • iPod  vs  Zune   ILONA  POSNER  ©  2013   27  
  • How  to  Maximize  UX?   ILONA  POSNER  ©  2013   28  
  • Five  D’s  of  User  Experience  Design   Discover   Deploy   Define     Develop   Design   ILONA  POSNER  ©  2013   29  
  • Five  D’s  of     DISCOVER DEFINE DESIGN DEVELOP DEPLOY !"#$%&## Business stakeholder interviews Business objectives Review concepts & designs often Business goals, mission, vision Market Positioning Attend usability testing sessions Attend usability testing sessions Monitor usage & metrics Concept Success metrics Future features list UX  Design   Product SWOT Analysis Marketing Mix(four Ps) Market Positioning Market Segmentation Demographic Research Design Guidelines / Standards? ()*+",- Product reports & surveys Concept prototype/video Review concepts & designs often Critical incident analysis Project definition/Concept Attend usability testing sessions Attend usability testing sessions Monitor usage & metrics Weblogs & analytics Deliverables defined Future features list Competitive Analysis Use cases Quantitative Research Initial design exploration Qualitative Research Visualization Expert heuristic evaluation Flowchart (tasks) Design research Success metrics -&,.%*/*01 Current technology used Technical requirements !"#$%&()*+,+-.&-#(/$0&(#((+1$( DEVELOP with input from UX SUPPORT deployed product Limitation of old technology Success metrics 2#3+#4&51$5#6-(&7&%#(+0$(&18#$ !"#$%&()*+,+-.&-#(/$0&(#((+1$( Opportunities for new tech Research tech constraints 2$#"3/+&#$0% Brand & Design Guidelines Develop Strategy, explore look & Design Direction, agree on chosen Style Guide - Pixel placements feel direction definition Frames of reference, analagous Generate Initial Ideas, style frames, Iterations of Hi-Fidelity Designs Graphic Production - Icons, examples initial concepts, mock-ups before user testing graphics, page elements Future Design Direction Developer Toolkit - Examples, sample code, wiki THESE ABOVE MAY NEED TO HAPPEN SOONER!?!? "#&)&4(&)$&%,&5"#3!$/$-1 Business stakeholder interviews Concept prototype/video Call centre reports User stories Brainstorm concepts & metaphors Work closely with development User Surveys User community feedback User profiles Modules requirements & designs Beware: Last minute design changes Monitor social networks & user done without UX Input communities Field studies Usability goals & objectives Screen flow, functions, fields Field studies of actual use User surveys User performance requirements Navigation/site map User interviews User experience goals Review early design concepts Conduct heuristic evaluations of Usage metrics, & performance (including graphic treatment) evolving product measurements Expert heuristic evaluation Personas Prototypes Low-Fidelity (multiples) Usability test evolving product as Future features list soon as possible Usability testing current product Storyboarding Wireframes Low-Fidelity Confirm success metrics and (multiples) objectives are being met Design research User scenarios Usability Test Low-Fidelity Prototypes & Wireframes Task Analysis Prototypes High-Fidelity (includes Final Usability Testing before graphic treatment) Deployement Competitive Analysis Success metrics Detailed Designs Quantitative Research Usability Test Designs & High-Fi Project Process Debrief & Lessons Prototypes Learned Qualitative Research Update Design Guidelines Task Analysis Update detailed designs & functional specifications for development User Goal Analysis Document Design Rationale Update Design Guidelines/StandardsILONA  POSNER  ©  2013   Five  D’s  of  UX  Design  –  Discover,    Define,  Design,  Develop,  Deploy   ILONA  POSNER  © 2013   30  
  • hfp://www.uxmafers.com/mt/archives/2011/09/images/EffecJveUIJourneyMapExample.jpg  Customer  Journey   ILONA  POSNER  ©  2013   31  
  • Vision  ILONA  POSNER  ©  2013   32  
  • Samsung  vs  iPhone  Comparison  -­‐  Memo   ILONA  POSNER  ©  2013   Samsung,  RelaJve  EvaluaJon  Report  on  S1,  iPhone,  Product  Engineering  Team,  SW  VefiricaJon  Group  March  2,  2010   33   PlainJff’s  Exhibit  No.  44,  United  States  District  Court,  Northern  District  of  California,  Apple  Inc.  v.  Samsung  Elecs.  
  • iTunes  Usability  Challenges   hfp://www.nngroup.com/arJcles/disrupJve-­‐workflow-­‐design/   ILONA  POSNER  ©  2013   34  
  • iTunes  Usability  Challenges   ILONA  POSNER  ©  2013   35  
  • iTunes  User  Experience  Challenges   ILONA  POSNER  ©  2013   36  
  • User  Research   ILONA  POSNER  ©  2013   37  
  • 360  Degree  View  of  Customer  •  Call  centre   •  Field  Studies  •  Customer  support  emails   •  Interviews  •  User  forums   •  Surveys  •  AnalyJcs   •  Diary  studies  •  Web  logs   •  Focus  groups  •  3rd  party  review  sites   •  Card  sorJng   •  Usability  tesJng   Lean  UX  -­‐  Applying  Lean  Principles  to  Improve  User  Experience,  Jeff  Gothelf  &  Josh  Seiden,  2013   ILONA  POSNER  ©  2013   38  
  • User  Research   ObservaJons  Interviews   QuesJonnaires   ILONA  POSNER  ©  2013   39  
  • Example:  Research  QuesJon  Research  QuesJon:    What  is  the  weather?  How  would  you  conduct  this  research?  List  several  different  ways  you  could  try  to   answer  this  quesJon?   ILONA  POSNER  ©  2013   40  
  • Example:  Weather  1     ILONA  POSNER  ©  2013   41  
  • Example:  Weather  2   ILONA  POSNER  ©  2013   42  
  • ObservaJons  or  Field  Studies   ILONA  POSNER  ©  2013   43  
  • Field  Study   ILONA  POSNER  ©  2013   44  
  • Field  Studies  ✗   I would use a drop-down menu rather than using I find it difficult to keep track of my knitting patterns. ✓ check boxes. ILONA  POSNER  ©  2013   45  
  • Nokia  Mobile  Phone  Study   Metro  car   CHI  2005     ILONA  POSNER  ©  2013   46  
  • Wells  Fargo  Mobile  Research   Answerlab.com  &  Wells  Fargo  Research  PresentaJon,  UPA  2011   ILONA  POSNER  ©  2013   47  
  • Users’  Profiles  •  Demographics   –  Age,  gender,  family,  educaJon,   job,  HHI,  technology,  geography,   language,  culture,  preferences,   etc…  •  Behavior  paferns   –  Where,  when,  how,  why   ILONA  POSNER  ©  2013   48  
  • Personas  Persona   A  hypotheJcal  user  archetype  used  throughout  design  How   Compiled  from  ethnographic  interviews  with  real   people   Defined  by  goals,  moJvaJons,  behaviors,  of  real  target   users  Why   Designing  for  archetype  can  saJsfy  bigger  user  group   Helps  focus  on  users  &  context,  assist  in  decision-­‐ making  &  communicaJon     www.cooper.com/newslefers/2002_02   ILONA  POSNER  ©  2013   49  
  • Persona  Types  Primary    If  the  design  fails  for  the  primary  persona     then  the  product  is  a  failure  Secondary  An,  •  Examples:       –  Extreme  Ed,  CauJous  Carl,  Businessman  Brad,  Mobile  Mike,  Mainstream  MaryILONA  POSNER  ©  2013   50  
  • Build  -­‐  Prototypes   Early  Design   Late  Design   Development  Costs  of  Making  Changes:          $1                $10            $100     ILONA  POSNER  ©  2013   51  
  • Prototype  PalmPilot   Bill  Buxton,  Sketching  User  Experiences,  2007   ILONA  POSNER  ©  2013   52  
  • Physical  Device    hfp://www.sketchingtomorrow.com/wp-­‐content/uploads/2010/06/cardboard.jpg   ILONA  POSNER  ©  2013   53  
  • InteracJve  Paper  Prototype  hfp://graphics.csail.mit.edu/classes/6.893/F03/PaperPrototypePhotos/pic2_0018.JPG   ILONA  POSNER  ©  2013   54  
  • Prototype  of  GPS  System   ILONA  POSNER  ©  2013   55  
  • Mobile  Phone  Paper  Prototypes  www.liliamanguy.com/iBuyRight_webdocs/   www.nngroup.com/reports/prototyping/tesJng_handheld.jpg   ILONA  POSNER  ©  2013   56  
  • Paper  in  Screen  Prototype   hfp://uxmag.com/arJcles/paper-­‐in-­‐screen-­‐prototyping   ILONA  POSNER  ©  2013   57  
  • Paper  Prototyping  “Without paper prototyping these decisions would likely havetaken 6 to 12 months longer.”“85% of usability practitioners find Paper Prototyping useful &essential.”“Any mid-sized design project will probably get an ROI of severalthousand percent from following the advice in this book.” Jakob Nielsen www.paperprototyping.com     ©  ILONA  POSNER,  2011   58  
  • Paper  Prototype  Design  Exercise   ILONA  POSNER  ©  2013   59  
  • Usability  TesJng  –  Kids  Using  Rotary  Phone   hfp://youtu.be/j6ArmonNCi8     ILONA  POSNER  ©  2013   60  
  • UX  TesJng  Myths   Hard   Expensive   Time  Consuming   ILONA  POSNER  ©  2013   61  
  • Lean  UX   Declare  AssumpJons   Create  Minimal  Viable  Product  (MVP)   Run  an  Experiment  (GOOB)   Feedback  &  Research  (Pivot)  Lean  UX  -­‐  Applying  Lean  Principles  to  Improve  User  Experience,  Jeff  Gothelf  &  Josh  Seiden,  2013   ILONA  POSNER  ©  2013   62  
  • Wizard  of  Oz  Technique   ParJcipants’  Roles   • User(s)   • Facilitator   • Computer   • Observer(s)   ILONA  POSNER  ©  2013   63  
  • User  Test     Product  Demo   ILONA  POSNER  ©  2013   64  
  • Usability  TesJng  of  Paper  Prototypes   “Debugging  before  wriJng  any  code!”   Layout   Workflow   Terminology   Requirements   Content   Help   ILONA  POSNER  ©  2013   65  
  • All  Technology  is  User  Tested!   The  only  ques=ons  are:   When?   By  Whom?   At  What  Cost!?   ILONA  POSNER  ©  2012   013   66