Avoiding UI MIstakes - Code PaLOUsa 2014

590 views

Published on

What are some of the most common UI mistakes, and how can you avoid them? We'll look at some common violations of the 10 basic tenets of usable interfaces and examine ways to avoid them.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
590
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Avoiding UI MIstakes - Code PaLOUsa 2014

  1. 1. Avoiding UI Mistakes Introduction to Danielle Gobert Cooley User Experience Methods @dgcooley 26  February  2014  #CPL14   1  
  2. 2. 26  February  2014                                      @dgcooley                                        #CPL14           Danielle  Gobert  Cooley   Selected  Work   15  years  as  a  UX  Specialist     BE,  Biomedical  and  Electrical  Engineering  –  Vanderbilt  University   MS,  Human  Factors  in  InformaOon  Design  –  Bentley  University   danielle@dgcooley.com   @dgcooley   hQp://linkedin.com/in/dgcooley   2  
  3. 3. 26  February  2014                                      @dgcooley                                        #CPL14   Good sites? 3  
  4. 4. 26  February  2014                                      @dgcooley                                        #CPL14   4  
  5. 5. 26  February  2014                                      @dgcooley                                        #CPL14   5  
  6. 6. 26  February  2014                                      @dgcooley                                        #CPL14   6  
  7. 7. 26  February  2014                                      @dgcooley                                        #CPL14   hQp://www.theworldsworstwebsiteever.com/   7  
  8. 8. 26  February  2014                                      @dgcooley                                        #CPL14   hQp://metatech.org/   8  
  9. 9. 26  February  2014                                      @dgcooley                                        #CPL14   hQp://www.fgmarchitects.com/   9  
  10. 10. 26  February  2014                                      @dgcooley                                        #CPL14   Mistake #1: Keeping Secrets 10  
  11. 11. 26  February  2014                                      @dgcooley                                        #CPL14   Tell  the  user  what’s  going  on.   The  system  should  always  keep  users  informed  about  what  is  going  on,   through  appropriate  feedback  within  reasonable  Ome.   How  much   longer  will  it   take?   Am  I   done?   Where   am  I?   How  do  I   get  Home?   Am  I  logged   in?   Was  my   data  saved?   How  many   steps  are   there?   11  
  12. 12. 26  February  2014                                      @dgcooley                                        #CPL14   How  do  I   get  Home?   12  
  13. 13. 26  February  2014                                      @dgcooley                                        #CPL14   How  do  I   get  Home?   13  
  14. 14. 26  February  2014                                      @dgcooley                                        #CPL14   How  much   longer  will  it   take?   14  
  15. 15. 26  February  2014                                      @dgcooley                                        #CPL14   How  many   steps  are   there?   15  
  16. 16. 26  February  2014                                      @dgcooley                                        #CPL14   Was  my   data  saved?   Mailchimp.com,  Kayak.com   16  
  17. 17. 26  February  2014                                      @dgcooley                                        #CPL14   Was  my   data  saved?   hQp://swagbucks.com   17  
  18. 18. 26  February  2014                                      @dgcooley                                        #CPL14   Was  my   data  saved?   HootSuite  iPad  app,  April  2012   18  
  19. 19. 26  February  2014                                      @dgcooley                                        #CPL14   Am  I   logged  in?   19  
  20. 20. 26  February  2014                                      @dgcooley                                        #CPL14   Where  am  I?   20  
  21. 21. 26  February  2014                                      @dgcooley                                        #CPL14   Where  am  I?   21  
  22. 22. 26  February  2014                                      @dgcooley                                        #CPL14   Mistake #2: Poor Word Choice 22  
  23. 23. 26  February  2014                                      @dgcooley                                        #CPL14   Use  words  people  will  understand.   The  system  should  speak  the  users’  language,  with  words,  phrases  and   concepts  familiar  to  the  user,  rather  than  system-­‐oriented  terms.  Follow   real-­‐world  convenOons,  making  informaOon  appear  in  a  natural  and  logical   order.   23  
  24. 24. 26  February  2014                                      @dgcooley                                        #CPL14   Use  words  people  care  about   Ortholite  ®  anatomical   footbed   Breathable  mesh  lining   treated  with  Aegis®   Keep  feet  comfortable  with   our  Ortholite®  washable  foam   insole   Fight  odor  with  our  Aegis®   anOmicrobial-­‐treated  mesh   lining   hQp://www.nngroup.com/arOcles/user-­‐centric-­‐language/   24  
  25. 25. 26  February  2014                                      @dgcooley                                        #CPL14   Use  words  people  can  relate  to   Customer  must  return  item  within  30  days  for  full  refund.   We  give  you  a  30-­‐day,  money-­‐back  guarantee  on  all  of  our  products.   hQp://www.nngroup.com/arOcles/user-­‐centric-­‐language/   25  
  26. 26. 26  February  2014                                      @dgcooley                                        #CPL14   Mistake #3: Taking Over 26  
  27. 27. 26  February  2014                                      @dgcooley                                        #CPL14   User  Control  and  Freedom   Users  ocen  choose  system  funcOons  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.   27  
  28. 28. 26  February  2014                                      @dgcooley                                        #CPL14   User  Control  and  Freedom     <script  language="JavaScript1.2">   <!-­‐-­‐     top.window.moveTo(0,0);   if  (document.all)  {   top.window.resizeTo(screen.availWidth,screen.availHeight);   }   else  if  (document.layers||document.getElementById)  {   if  (top.window.outerHeight<screen.availHeight|| top.window.outerWidth<screen.availWidth){   top.window.outerHeight  =  screen.availHeight;   top.window.outerWidth  =  screen.availWidth;   }   }     //-­‐-­‐>   </script>       28  
  29. 29. 26  February  2014                                      @dgcooley                                        #CPL14   Mistake #4: Being Inconsistent 29  
  30. 30. 26  February  2014                                      @dgcooley                                        #CPL14   Consistency  and  Standards   ?   Users  should  not  have  to  wonder  whether  different  words,  situaOons,  or   acOons  mean  the  same  thing.  Follow  plauorm  convenOons.   30  
  31. 31. 26  February  2014                                      @dgcooley                                        #CPL14   31  
  32. 32. 26  February  2014                                      @dgcooley                                        #CPL14   Recommenda)on:  Both  for     consistency  and  intui6veness,     use  the  tradi6onal  calendar     picker  tool  throughout  the     applica6on.         32  
  33. 33. 26  February  2014                                      @dgcooley                                        #CPL14   The  three-­‐way  toggle,  though  not  unique  to  this  tool,  is   not  an  immediately-­‐recognizable  control.     Recommenda)on:  Consider  a  more  tradi6onal   radio  bu?on  control:     Exists:        ¤Yes          ¢No          ¢Either   33  
  34. 34. 26  February  2014                                      @dgcooley                                        #CPL14   Consistency  and  Standards   34  
  35. 35. 26  February  2014                                      @dgcooley                                        #CPL14   Mistake #5: Making Mistakes Easy 35  
  36. 36. 26  February  2014                                      @dgcooley                                        #CPL14   Error  PrevenOon   Even  beQer  than  good  error  messages  is  a  careful  design  which  prevents  a   problem  from  occurring  in  the  first  place.  Either  eliminate  error-­‐prone   condiOons  or  check  for  them  and  present  users  with  a  confirmaOon  opOon   before  they  commit  to  the  acOon.   36  
  37. 37. 26  February  2014                                      @dgcooley                                        #CPL14   37  
  38. 38. 26  February  2014                                      @dgcooley                                        #CPL14   hQp://www.lukew.com/ff/entry.asp?571   38  
  39. 39. 26  February  2014                                      @dgcooley                                        #CPL14   Microsoc  Word,  Unknown  version;  Microsoc  Word  for  Mac  2011,  Version  14.3.1   39  
  40. 40. 26  February  2014                                      @dgcooley                                        #CPL14   Mistake #6: Relying on People’s Memories 40  
  41. 41. 26  February  2014                                      @dgcooley                                        #CPL14   RecogniOon  >  Recall   Minimize  the  user’s  memory  load  by  making  objects,  acOons,  and  opOons   visible.  The  user  should  not  have  to  remember  informaOon  from  one  part   of  the  dialogue  to  another.  InstrucOons  for  use  of  the  system  should  be   visible  or  easily  retrievable  whenever  appropriate.   hQp://online.epocrates.com/noFrame/   41  
  42. 42. 26  February  2014                                      @dgcooley                                        #CPL14   Microsoc  PowerPoint  for  Mac  2011,  Version  14.3.1   42  
  43. 43. 26  February  2014                                      @dgcooley                                        #CPL14   Mistake #7: Failing to Balance Ease & Speed 43  
  44. 44. 26  February  2014                                      @dgcooley                                        #CPL14   Flexibility  and  Efficiency  of  Use   Accelerators  –  unseen  by  the  novice  user  –  may  ocen  speed  up  the   interacOon  for  the  expert  user  such  that  the  system  can  cater  to  both   inexperienced  and  experienced  users.  Allow  users  to  tailor  frequent   acOons.   44  
  45. 45. 26  February  2014                                      @dgcooley                                        #CPL14   American  Giant,  ThinkGeek   45  
  46. 46. 26  February  2014                                      @dgcooley                                        #CPL14   Chrome’s  right-­‐click  menu   46  
  47. 47. 26  February  2014                                      @dgcooley                                        #CPL14   Microsoc  Word  and  PowerPoint  for  Mac  2011,  Version  14.3.1   47  
  48. 48. 26  February  2014                                      @dgcooley                                        #CPL14   TwiQer’s  iOS  app,  November  2011   48  
  49. 49. 26  February  2014                                      @dgcooley                                        #CPL14   Mistake #8: Too Much Stuff 49  
  50. 50. 26  February  2014                                      @dgcooley                                        #CPL14   AestheOc  and  Minimalist  Design   Dialogues  should  not  contain  informaOon  which  is  irrelevant  or  rarely   needed.  Every  extra  unit  of  informaOon  in  a  dialogue  competes  with  the   relevant  units  of  informaOon  and  diminishes  their  relaOve  visibility.   50  
  51. 51. 26  February  2014                                      @dgcooley                                        #CPL14   51  
  52. 52. 26  February  2014                                      @dgcooley                                        #CPL14   AestheOc  and  Minimalist  Design   Lane  Furniture  (2011)   52  
  53. 53. 26  February  2014                                      @dgcooley                                        #CPL14   53  
  54. 54. 26  February  2014                                      @dgcooley                                        #CPL14   hQp://lesscontentmorestrategy.com   54  
  55. 55. 26  February  2014                                      @dgcooley                                        #CPL14   Mistake #9: Bad Error Messages 55  
  56. 56. 26  February  2014                                      @dgcooley                                        #CPL14   Help  users  recognize,  diagnose,     and  recover  from  errors   Error  messages  should  be  expressed  in  plain  language  (no  codes),  precisely   indicate  the  problem,  and  construcOvely  suggest  a  soluOon.   56  
  57. 57. 26  February  2014                                      @dgcooley                                        #CPL14   57  
  58. 58. 26  February  2014                                      @dgcooley                                        #CPL14   58  
  59. 59. 26  February  2014                                      @dgcooley                                        #CPL14   Chrome,  version  26.0.141065  –  May  2013   59  
  60. 60. 26  February  2014                                      @dgcooley                                        #CPL14   60  
  61. 61. 26  February  2014                                      @dgcooley                                        #CPL14   61  
  62. 62. 26  February  2014                                      @dgcooley                                        #CPL14   AmericanGiant.com   62  
  63. 63. 26  February  2014                                      @dgcooley                                        #CPL14   Mistake #10: No or Bad Help 63  
  64. 64. 26  February  2014                                      @dgcooley                                        #CPL14   Help  and  DocumentaOon   Even  though  it  is  beQer  if  the  system  can  be  used  without  documentaOon,   it  may  be  necessary  to  provide  help  and  documentaOon.  Any  such   informaOon  should  be  easy  to  search,  focused  on  the  user’s  task,  list   concrete  steps  to  be  carried  out,  and  not  be  too  large.   64  
  65. 65. 26  February  2014                                      @dgcooley                                        #CPL14   65  
  66. 66. 26  February  2014                                      @dgcooley                                        #CPL14   Help  and  DocumentaOon   Microsoc  PowerPoint  for  Mac  2011,  Version  14.3.1   66  
  67. 67. 26  February  2014                                      @dgcooley                                        #CPL14   Bonus Mistake: Being Evil 67  
  68. 68. 26  February  2014                                      @dgcooley                                        #CPL14   Dark  PaQerns   A  Dark  PaQern  is  a  type  of  user  interface  that  appears  to  have  been   carefully  craced  to  trick  users  into  doing  things,  such  as  buying  insurance   with  their  purchase  or  signing  up  for  recurring  bills.   darkpaQerns.org   68  
  69. 69. 26  February  2014                                      @dgcooley                                        #CPL14   Road  Block   69  
  70. 70. 26  February  2014                                      @dgcooley                                        #CPL14   So,  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  accommodaOng  both  my  novices  and  my  experts?  (How  about  repeat   novices?)   Is  there  too  much  crap  in  here?   Have  I  given  them  the  informaOon  they  need  to  recover  from  their  errors?   Can  they  find  the  help  they  need?  Quickly  and  easily?  When  and  where  they   need  it?   •  Are  we  being  evil?   70  
  71. 71. 26  February  2014                                      @dgcooley                                        #CPL14   10  HeurisOcs  for  User  Interface  Design   71  
  72. 72. 26  February  2014                                      @dgcooley                                        #CPL14   References   72  
  73. 73. 25  February  2014                                      @dgcooley                                        #CPL14   More  from  me?   73  

×