Avoiding UI Mistakes
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Avoiding UI Mistakes

on

  • 559 views

Avoiding UI Mistakes as delivered at KCDC in May 2013. This quick look at Nielsen & Molich's 10 Usability Heuristics provides a great starting point for developers looking to incorporate some UX ...

Avoiding UI Mistakes as delivered at KCDC in May 2013. This quick look at Nielsen & Molich's 10 Usability Heuristics provides a great starting point for developers looking to incorporate some UX thinking into their work.

Statistics

Views

Total Views
559
Views on SlideShare
559
Embed Views
0

Actions

Likes
1
Downloads
8
Comments
0

0 Embeds 0

No embeds

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

Avoiding UI Mistakes Presentation Transcript

  • 1. KCDC 2013Avoiding UI MistakesIntroduction toUser Experience Methods1  Danielle Gobert Cooley@dgcooley03  May  2013        #KCDC2013  
  • 2. KCDC 20132  03  May  2013                                      @dgcooley                                        #KCDC2013    
  • 3. KCDC 2013Danielle  Gobert  Cooley  3  03  May  2013                                      @dgcooley                                        #KCDC2013    danielle@dgcooley.com  @dgcooley  14  years  as  a  UX  Specialist    BE,  Biomedical  and  Electrical  Engineering  –  Vanderbilt  University  MS,  Human  Factors  in  InformaMon  Design  –  Bentley  University  Selected  Clients          hOp://linkedin.com/in/dgcooley  
  • 4. KCDC 2013Good sites?4  03  May  2013                                      @dgcooley                                        #KCDC2013    
  • 5. KCDC 2013 03  May  2013                                      @dgcooley                                        #KCDC2013    5  
  • 6. KCDC 2013 03  May  2013                                      @dgcooley                                        #KCDC2013    6  
  • 7. KCDC 2013 03  May  2013                                      @dgcooley                                        #KCDC2013    7  
  • 8. KCDC 2013 03  May  2013                                      @dgcooley                                        #KCDC2013    8  hOp://www.theworldsworstwebsiteever.com/  
  • 9. KCDC 2013 03  May  2013                                      @dgcooley                                        #KCDC2013    9  hOp://metatech.org/  
  • 10. KCDC 2013 03  May  2013                                      @dgcooley                                        #KCDC2013    10  hOp://www.fgmarchitects.com/  
  • 11. KCDC 2013The 10 Heuristics11  03  May  2013                                      @dgcooley                                        #KCDC2013    
  • 12. KCDC 2013Visibility  of  System  Status  12  03  May  2013                                      @dgcooley                                        #KCDC2013    The  system  should  always  keep  users  informed  about  what  is  going  on,  through  appropriate  feedback  within  reasonable  Mme.  Where  am  I?  How  do  I  get  Home?  Was  my  data  saved?  How  much  longer  will  it  take?  How  many  steps  are  there?  Am  I  done?  Am  I  logged  in?  
  • 13. KCDC 2013Visibility  of  System  Status  03  May  2013                                      @dgcooley                                        #KCDC2013    13  How  do  I  get  Home?  
  • 14. KCDC 2013Visibility  of  System  Status  03  May  2013                                      @dgcooley                                        #KCDC2013    14  How  do  I  get  Home?  
  • 15. KCDC 2013Visibility  of  System  Status  03  May  2013                                      @dgcooley                                        #KCDC2013    15  How  much  longer  will  it  take?  
  • 16. KCDC 2013Visibility  of  System  Status  03  May  2013                                      @dgcooley                                        #KCDC2013    16  How  many  steps  are  there?  
  • 17. KCDC 2013Visibility  of  System  Status  03  May  2013                                      @dgcooley                                        #KCDC2013    17  Was  my  data  saved?  Mailchimp.com,  Kayak.com  
  • 18. KCDC 2013Visibility  of  System  Status  03  May  2013                                      @dgcooley                                        #KCDC2013    18  Was  my  data  saved?  hOp://swagbucks.com  
  • 19. KCDC 2013Visibility  of  System  Status  03  May  2013                                      @dgcooley                                        #KCDC2013    19  Was  my  data  saved?  HootSuite  iPad  app,  April  2012  
  • 20. KCDC 2013Visibility  of  System  Status  03  May  2013                                      @dgcooley                                        #KCDC2013    20  Am  I  logged  in?  
  • 21. KCDC 2013Visibility  of  System  Status  03  May  2013                                      @dgcooley                                        #KCDC2013    21  Where  am  I?  
  • 22. KCDC 2013Visibility  of  System  Status  03  May  2013                                      @dgcooley                                        #KCDC2013    22  Where  am  I?  
  • 23. KCDC 2013Match  Between  System  and  Real  World  The  system  should  speak  the  users’  language,  with  words,  phrases  and  concepts  familiar  to  the  user,  rather  than  system-­‐oriented  terms.  Follow  real-­‐world  convenMons,  making  informaMon  appear  in  a  natural  and  logical  order.  03  May  2013                                      @dgcooley                                        #KCDC2013    23  
  • 24. KCDC 2013User  Control  and  Freedom  Users  oaen  choose  system  funcMons  by  mistake  and  will  need  a  clearly  marked  “emergency  exit”  to  leave  the  unwanted  state  without  having  to  go  through  an  extended  dialogue.  Support  undo  and  redo.  03  May  2013                                      @dgcooley                                        #KCDC2013    24  
  • 25. KCDC 2013Consistency  and  Standards  Users  should  not  have  to  wonder  whether  different  words,  situaMons,  or  acMons  mean  the  same  thing.  Follow  plaform  convenMons.  03  May  2013                                      @dgcooley                                        #KCDC2013    25  ?  
  • 26. KCDC 2013Consistency  and  Standards  03  May  2013                                      @dgcooley                                        #KCDC2013    26  
  • 27. KCDC 2013Consistency  and  Standards  03  May  2013                                      @dgcooley                                        #KCDC2013    27  Recommenda)on:  Both  for    consistency  and  intui5veness,    use  the  tradi5onal  calendar    picker  tool  throughout  the    applica5on.          
  • 28. KCDC 2013Consistency  and  Standards  03  May  2013                                      @dgcooley                                        #KCDC2013    28  The  three-­‐way  toggle,  though  not  unique  to  this  tool,  is  not  an  immediately-­‐recognizable  control.    Recommenda)on:  Consider  a  more  tradi5onal  radio  bu>on  control:    Exists:        ¤Yes          ¢No          ¢Either  
  • 29. KCDC 2013Consistency  and  Standards  03  May  2013                                      @dgcooley                                        #KCDC2013    29  
  • 30. KCDC 2013Error  PrevenMon  Even  beOer  than  good  error  messages  is  a  careful  design  which  prevents  a  problem  from  occurring  in  the  first  place.  Either  eliminate  error-­‐prone  condiMons  or  check  for  them  and  present  users  with  a  confirmaMon  opMon  before  they  commit  to  the  acMon.  03  May  2013                                      @dgcooley                                        #KCDC2013    30  
  • 31. KCDC 2013Error  PrevenMon  03  May  2013                                      @dgcooley                                        #KCDC2013    31  
  • 32. KCDC 2013Error  PrevenMon  03  May  2013                                      @dgcooley                                        #KCDC2013    32  hOp://www.lukew.com/ff/entry.asp?571  
  • 33. KCDC 2013Error  PrevenMon  03  May  2013                                      @dgcooley                                        #KCDC2013    33  Microsoa  Word,  Unknown  version;  Microsoa  Word  for  Mac  2011,  Version  14.3.1  
  • 34. KCDC 2013RecogniMon  >  Recall  Minimize  the  user’s  memory  load  by  making  objects,  acMons,  and  opMons  visible.  The  user  should  not  have  to  remember  informaMon  from  one  part  of  the  dialogue  to  another.  InstrucMons  for  use  of  the  system  should  be  visible  or  easily  retrievable  whenever  appropriate.  03  May  2013                                      @dgcooley                                        #KCDC2013    34  hOp://online.epocrates.com/noFrame/  
  • 35. KCDC 2013RecogniMon  >  Recall  03  May  2013                                      @dgcooley                                        #KCDC2013    35  Microsoa  PowerPoint  for  Mac  2011,  Version  14.3.1  
  • 36. KCDC 2013Flexibility  and  Efficiency  of  Use  Accelerators  –  unseen  by  the  novice  user  –  may  oaen  speed  up  the  interacMon  for  the  expert  user  such  that  the  system  can  cater  to  both  inexperienced  and  experienced  users.  Allow  users  to  tailor  frequent  acMons.  03  May  2013                                      @dgcooley                                        #KCDC2013    36  
  • 37. KCDC 2013Flexibility  and  Efficiency  of  Use  03  May  2013                                      @dgcooley                                        #KCDC2013    37  American  Giant,  ThinkGeek  
  • 38. KCDC 2013Flexibility  and  Efficiency  of  Use  03  May  2013                                      @dgcooley                                        #KCDC2013    38  Chrome’s  right-­‐click  menu  
  • 39. KCDC 2013Flexibility  and  Efficiency  of  Use  03  May  2013                                      @dgcooley                                        #KCDC2013    39  Microsoa  Word  and  PowerPoint  for  Mac  2011,  Version  14.3.1  
  • 40. KCDC 2013Flexibility  and  Efficiency  of  Use  03  May  2013                                      @dgcooley                                        #KCDC2013    40  TwiOer’s  iOS  app,  November  2011  
  • 41. KCDC 2013AestheMc  and  Minimalist  Design  Dialogues  should  not  contain  informaMon  which  is  irrelevant  or  rarely  needed.  Every  extra  unit  of  informaMon  in  a  dialogue  competes  with  the  relevant  units  of  informaMon  and  diminishes  their  relaMve  visibility.  03  May  2013                                      @dgcooley                                        #KCDC2013    41  
  • 42. KCDC 2013AestheMc  and  Minimalist  Design  03  May  2013                                      @dgcooley                                        #KCDC2013    42  
  • 43. KCDC 2013AestheMc  and  Minimalist  Design  03  May  2013                                      @dgcooley                                        #KCDC2013    43  Lane  Furniture  (2011)  
  • 44. KCDC 2013AestheMc  and  Minimalist  Design  03  May  2013                                      @dgcooley                                        #KCDC2013    44  
  • 45. KCDC 2013AestheMc  and  Minimalist  Design  03  May  2013                                      @dgcooley                                        #KCDC2013    45  hOp://lesscontentmorestrategy.com  
  • 46. KCDC 2013Help  users  recognize,  diagnose,  and  recover  from  errors  Error  messages  should  be  expressed  in  plain  language  (no  codes),  precisely  indicate  the  problem,  and  construcMvely  suggest  a  soluMon.  03  May  2013                                      @dgcooley                                        #KCDC2013    46  
  • 47. KCDC 2013Help  users  recognize,  diagnose,  and  recover  from  errors  03  May  2013                                      @dgcooley                                        #KCDC2013    47  
  • 48. KCDC 2013Help  users  recognize,  diagnose,  and  recover  from  errors  03  May  2013                                      @dgcooley                                        #KCDC2013    48  
  • 49. KCDC 2013Help  users  recognize,  diagnose,  and  recover  from  errors  03  May  2013                                      @dgcooley                                        #KCDC2013    49  Chrome,  version  26.0.141065  –  May  2013  
  • 50. KCDC 2013Help  users  recognize,  diagnose,  and  recover  from  errors  03  May  2013                                      @dgcooley                                        #KCDC2013    50  
  • 51. KCDC 2013Help  users  recognize,  diagnose,  and  recover  from  errors  03  May  2013                                      @dgcooley                                        #KCDC2013    51  
  • 52. KCDC 2013Help  users  recognize,  diagnose,  and  recover  from  errors  03  May  2013                                      @dgcooley                                        #KCDC2013    52  AmericanGiant.com  
  • 53. KCDC 2013Help  and  DocumentaMon  Even  though  it  is  beOer  if  the  system  can  be  used  without  documentaMon,  it  may  be  necessary  to  provide  help  and  documentaMon.  Any  such  informaMon  should  be  easy  to  search,  focused  on  the  user’s  task,  list  concrete  steps  to  be  carried  out,  and  not  be  too  large.  03  May  2013                                      @dgcooley                                        #KCDC2013    53  
  • 54. KCDC 2013Help  and  DocumentaMon  03  May  2013                                      @dgcooley                                        #KCDC2013    54  
  • 55. KCDC 2013Help  and  DocumentaMon  03  May  2013                                      @dgcooley                                        #KCDC2013    55  Microsoa  PowerPoint  for  Mac  2011,  Version  14.3.1  
  • 56. KCDC 2013So,  ask  yourself:  •  Am  I  keeping  them  informed  about  what’s  going  on?  •  Will  they  understand  this  terminology?  •  If  I  do  X,  will  it  take  control  away  from  my  user?  •  Am  I  being  consistent  with  standards?  With  myself?  •  How  can  I  reduce  the  possibility  that  they  will  make  this  mistake?  •  Am  I  asking  them  to  remember  something  unnecessarily?  If  they  get  a  phone  call  in  the  middle  of  this,  are  they  screwed?  •  Am  I  accommodaMng  both  my  novices  and  my  experts?  (How  about  repeat  novices?  •  Is  there  too  much  crap  in  here?  •  Have  I  given  them  the  informaMon  they  need  to  recover  from  their  errors?  •  Can  they  find  the  help  they  need?  Quickly  and  easily?  When  and  where  they  need  it?  56  03  May  2013                                      @dgcooley                                        #KCDC2013    
  • 57. KCDC 2013References  03  May  2013                                      @dgcooley                                        #KCDC2013    57