Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Uxpa romano bergstrom_geisen_formsandsurveys_final

899 views

Published on

Whether surveys or forms are your final product or a part of your website/app, creating usable surveys and forms is crucial to a strong user experience for both the user entering information and the user receiving the information. In this session, you will learn about UX principles that drive a strong user experience when completing surveys/forms. The session will focus on understanding the key components of surveys/forms, what they are used for, and how to use them effectively. Topics include using labels to make forms and surveys easier, writing clear instructions, reducing respondent burden, and determining appropriate input fields such as check boxes versus radio buttons. Examples will include findings from usability studies and empirical research, some of which include eye tracking. Usability testing, eye tracking, and other user experience research methods will be discussed.

You will participate in a number of activities, including designing a form that takes into account the learned principles.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Uxpa romano bergstrom_geisen_formsandsurveys_final

  1. 1. User  Centered  Design  of   Forms  and  Surveys Jen  Romano-­‐Bergstrom   UX  Researcher   Facebook   jenrb@8.com   June  23,  2015   UXPA    |    Coronado,  CA     Emily  Geisen   Survey  Methodologist     RTI   egeisen@rP.org      #UXPA2015   @romanocog  
  2. 2. Web  Form  and  Survey  Design Input  Fields   •  Check  Boxes  &  Radio  BuUons   •  Drop-­‐Down  Menus   •  Open-­‐Ended  Responses   •  Dates  &  Calendars     NavigaPon   •  Paging  &  Scrolling   •  Previous  &  Next     Text  and  Visual  Layout   •  Visual  Layout   •  Label  Placement   •  Providing  InstrucPons   •  Error  Messages   2      #UXPA2015   @romanocog  
  3. 3. Ac;vity •  How  long  did  it  take  you  to  get  here  today?   •  What  is  today’s  date?   3      #UXPA2015   @romanocog  
  4. 4. Why  is  Design  Important? 4      #UXPA2015   @romanocog  
  5. 5. Web  Form  and  Survey  Design Input  Fields   •  Check  Boxes  &  Radio  BuUons   •  Drop-­‐Down  Menus   •  Open-­‐Ended  Responses   •  Dates  &  Calendars     NavigaPon   •  Paging  &  Scrolling   •  Previous  &  Next     Text  and  Visual  Layout   •  Visual  Layout   •  Label  Placement   •  Providing  InstrucPons   •  Error  Messages   5      #UXPA2015   @romanocog  
  6. 6. Check  Boxes  &  Radio  BuEons 6      #UXPA2015   @romanocog   Use  check  boxes  for   “select  all  that  apply”   and  radio  buUons  for   “select  only  one.”   Always.  
  7. 7. Check  Boxes  &  Radio  Grid     (forced  choice) Smyth  et  al.,  2006;  Thomas  &  Klein,  2006,   Smyth  et  al,  2008;  Dykema  et  al.,  2011;   Callegaro  et  al.,  2015   7      #UXPA2015   @romanocog   Forced  choice  grids   elicit  more  posiPve   responses  than  check  all   that  apply.  
  8. 8. Drop-­‐Down  Menus •  Ensures  consistent,  codeable   answers  (e.g.,  FL  not  Fla.)   •  Saves  space  compared  to   radio  buUons   8      #UXPA2015   @romanocog   Use  drop-­‐down  menus   for  long,  discrete  lists.  
  9. 9. Drop-­‐Down  Menus:     Reduce  Op;ons 9      #UXPA2015   @romanocog   Only  provide  the   opPons  that  are   necessary  for  data   quality.  
  10. 10. Open-­‐Ended  Responses 10      #UXPA2015   @romanocog   Type   Example   NarraPve   Describe…   Short  verbal  responses   What  was  your  occupaPon?   Single  word/phrase  responses   Name   Frequency/Numeric  response   How  many  Pmes…   FormaUed  number/verbal   Telephone  number  
  11. 11. Open-­‐Ended  Responses:     Narra;ve Wells  et  al.,  2012   32.8 characters 38.4 characters ~700 Rs 11      #UXPA2015   @romanocog   Open-­‐ended  boxes  give   a  message:   •  Large  boxes  =  tell  a   story.   Avoid  verPcal  scrolling,   when  possible.   Always  avoid  horizontal   scrolling.  
  12. 12. Open-­‐Ended  Responses:     Numeric 12      #UXPA2015   @romanocog   When  the  response   type  is  always  going  to   be  the  same,  provide   the  format:   •  Separate  boxes   Annual  Salary/Earned  Income:  $                                ,                                .00        
  13. 13. •  June  23,  2015  vs.  6/23/2015  vs.  6/23/15  vs.  Jun  23  vs.   2015-­‐6-­‐23   •  Use  a  format  that  will  always  provide  responses  in   same  way   •  Use  drop-­‐down  for  DOB  or     known  dates   •  Use  calendar  (unless  range  is  too  big)   Dates  &  Calendars •  Dates  are  not  suitable  for  open-­‐ended   13      #UXPA2015   @romanocog   When  the  response   type  is  always  going  to   be  the  same,  provide   the  format:   •  Separate  boxes   •  Drop-­‐down   •  Calendar  
  14. 14. Pre-­‐Filled  Responses •  Use  pre-­‐filled  or  “default”  opPons  with  cauPon   •  What  if  the  user  doesn’t  noPce  it?   •  Default  opPons  in  survey  quesPons  can  cause  bias       14      #UXPA2015   @romanocog   Use  the  pre-­‐filled   default  for  forms  that   are  used  repeatedly.  Do   not  pre-­‐fill  with  one-­‐use   forms  and  surveys.  
  15. 15. Web  Form  and  Survey  Design Input  Fields   •  Check  Boxes  &  Radio  BuUons   •  Drop-­‐Down  Menus   •  Open-­‐Ended  Responses   •  Dates  &  Calendars     NavigaPon   •  Paging  &  Scrolling   •  Previous  &  Next     Text  and  Visual  Layout   •  Visual  Layout   •  Label  Placement   •  Providing  InstrucPons   •  Error  Messages   15      #UXPA2015   @romanocog  
  16. 16. Paging  &  Scrolling Paging   •  Single  or  mulPple   quesPons  per  page   •  Complex  skip  paUerns   •  Data  from  each  page   saved   •  Can  be  suspended/ resumed   •  Order  of  responding  can   be  controlled   •  Requires  more  mouse   clicks   Scrolling   •  All  on  one  staPc  page   •  No  data  is  saved  unPl   submiUed  at  end   •  Can  lose  all  data   •  Respondent  can  review/ change  responses   •  QuesPons  can  be   answered  out  of  order   •  Similar  look-­‐and-­‐feel  as   paper     16      #UXPA2015   @romanocog  
  17. 17. Paging  on  Mobile •  MulPple  quesPon  format   is  difficult  for  quesPons   with  text  entry   •  The  keyboard  can  block   lower  quesPons  so  they   are  not  visible   •  Can  result  in  quesPons   being  skipped   •  Could  affect  perceived   context  of  the  survey   quesPons   Geisen,  Olmsted,  Goerman,  Lakhe  (2014)   17      #UXPA2015   @romanocog  
  18. 18. Paging  &  Scrolling •  LiUle  advantage  (breakoffs,  nonresponse,  Pme,   straightlining)  of  one  over  the  other   •  Mixed  approach  may  be  best  (scrolling  for  similar   quesPons,  paging  between  topics)   •  Choice  should  be  driven  by  content  and  target   audience   •  Scrolling  for  forms  or  short  surveys  with  few  skip  paUerns;   respondent  needs  to  see  previous  responses   •  Paging  for  long  surveys  with  intricate  skip  paUerns;   quesPons  should  be  answered  in  order   Couper  2001;  Gonyea  2007;  Peytchev,  Couper,  McCabe,   Crawford  2006;  Vehovar,  Manfreda,  Batagelj  2000   18      #UXPA2015   @romanocog  
  19. 19. General  Naviga;on •  In  a  paging  survey,  awer  entering  a  response   •  Proceed  to  next  page   •  Return  to  previous  page  (somePmes)   •  Quit  or  stop   •  Launch  separate  page  with  Help,  definiPons,  etc.   •  Prevailing  pracPce  is  to  put  the  Next  (or  ConPnue)   buUon  on  the  right   19      #UXPA2015   @romanocog  
  20. 20. Previous  &  Next  BuEons •  Next  should  be  on  the  right   •  Web  applicaPon  order   •  Everyday  devices   •  Logical  reading  order   20      #UXPA2015   @romanocog  
  21. 21. Previous  &  Next  BuEons 21      #UXPA2015   @romanocog  
  22. 22. Web  Form  and  Survey  Design Input  Fields   •  Check  Boxes  &  Radio  BuUons   •  Drop-­‐Down  Menus   •  Open-­‐Ended  Responses   •  Dates  &  Calendars     NavigaPon   •  Paging  &  Scrolling   •  Previous  &  Next     Text  and  Visual  Layout   •  Visual  Layout   •  Label  Placement   •  Providing  InstrucPons   •  Error  Messages   22      #UXPA2015   @romanocog  
  23. 23. Visual  Layout:     Single  vs.  Mul;ple  Column  Format? 23      #UXPA2015   @romanocog  
  24. 24. Mul;-­‐Column  Format:     Naviga;on  Path  is  Not  Clear 24      #UXPA2015   @romanocog  
  25. 25. Single-­‐Column  Format:  Preferred* 25      #UXPA2015   @romanocog   Single-­‐column  format  is   best,  but  *mulPple-­‐ column  format  works   well  for  items  that  “go   together,”  such  as:   •  Date   •  Zip  Code   •  Phone  Number  
  26. 26. Labels:     Inside,  Below,  Above? Inside:  Avoid  prompts  inside  text  box;  saves   space,  but  disappears  when  typing   Below:  Prompt  outside  of  the  box  results   in  more  complete  names   Below  &  Separate  Boxes:  Provides   even  more  complete  names   Geisen,  Olmsted,   Goerman,  Lakhe   (2014)   Labels  Above  &   Separate  Boxes  is  best:   •  Quicker   •  Easier  to  see   •  Not  covered  up  by   keyboard   26      #UXPA2015   @romanocog  
  27. 27. Labels:     LeW-­‐Aligned,  Right-­‐Aligned,  Above? 27      #UXPA2015   @romanocog  
  28. 28. Introduc;ons  on  Separate  Screen 28      #UXPA2015   @romanocog   •  IntroducPon   on  the   opening  log-­‐in   screen  is  not   read.   •  IntroducPon   on  the  next   screen  is  read.   Provide  introducPons   on  separate  screens.   Individual  gaze  plots  and  aggregate  heat  map  (lower  right):  parPcipants  did  not  read  intro  screen.  
  29. 29. Introduc;ons  on  Separate  Screen •  Intros  before   quesPons  are   owen  ignored   •  When  moved  to  a   separate  screen,   they  are  read   more  owen   •  Improved   reporPng   Geisen,  Olmsted,  Goerman,  Lakhe   (2014)   29      #UXPA2015   @romanocog   Provide  introducPons   on  separate  screens.  
  30. 30. Clarifying  Instruc;ons Redline,  2013   30      #UXPA2015   @romanocog   Start  with  the  target   quesPon  and  add   mulPple  clarifying   quesPons.   •  Percentage  of  valid  responses  was   higher  with  clarificaPon   •  Longer  response  Pme  when  before   item   •  Before  item  is  beUer  than  awer   •  Asking  a  series  of  quesPons  is  best  
  31. 31. Clarifying  Instruc;ons 31      #UXPA2015   @romanocog   Use  clarifying   instrucPons  only  when   they  are  necessary.  
  32. 32. Reducing  Instruc;ons 32      #UXPA2015   @romanocog   Avoid  blocks  of  text.   Chunk  instrucPons  into:   •  Bullets   •  Steps   •  Sentences  
  33. 33. Reducing  Instruc;ons •  Eliminate  obvious  instrucPons  (e.g.,  “Please  enter   name  and  address”)   •  Avoid  blocks  of  text:  “Chunk”  instrucPons  into   Bullets,  steps,  or  sentences   33      #UXPA2015   @romanocog   People  only  read  what   they  need  to  read.   Include  only  what  is   necessary.  
  34. 34. 34      #UXPA2015   @romanocog   He,  Siu,  Strohl,  &  Chaparro  (2014).     Reducing  Instruc;ons People  only  read  what   they  need  to  read.   Include  only  what  is   necessary.  
  35. 35. 35   Messages  should  be:   •  Near  the  item   •  PosiPve   •  Helpful,  suggesPng   how  to  help   •  In  the  correct   language      #UXPA2015   @romanocog   Error  Messages
  36. 36. •  Should  be  near  the  item   •  Should  be  posiPve  and  helpful,  suggesPng  HOW  to   help   •  Bad  error  message:   36   Messages  should  be:   •  Near  the  item   •  PosiPve   •  Helpful,  suggesPng   how  to  help   •  In  the  correct   language   Consider  a  graphic  near   the  item.      #UXPA2015   @romanocog   Error  Messages
  37. 37. “How  do  I  advance  to  the   next  screen?”     “It  seems  like  it's  stuck  on  the   screen.”   Gaze  Plot:  Awer   gezng  an  error   message,  the   parPcipant  had  to   search  all  over  the   screen  to  find  the   missing  field.   37      #UXPA2015   @romanocog   Error  Messages Messages  should  be:   •  Near  the  item   •  PosiPve   •  Helpful,  suggesPng   how  to  help   •  In  the  correct   language   Consider  a  graphic  near   the  item.  
  38. 38. Op;mize  Across  Devices 38   Test  surveys  and  forms   across  devices,  and  test   the  errors  too.      #UXPA2015   @romanocog  
  39. 39. Op;mize  Across  Devices 39   Test  surveys  and  forms   across  devices  and  test   the  errors  too.  
  40. 40. Op;mize  Across  Devices Desktop   Tablet   Smartphone   •  What  story  do  the  open-­‐ended  boxes  tell?   •  Is  there  a  beUer  way  to  ask  QuesPon  1?   40      #UXPA2015   @romanocog  
  41. 41. Summary Input  Fields   •  Check  Boxes  &  Radio  BuUons   •  Drop-­‐Down  Menus   •  Open-­‐Ended  Responses   •  Dates  &  Calendars     NavigaPon   •  Paging  &  Scrolling   •  Previous  &  Next     Text  and  Visual  Layout   •  Visual  Layout   •  Label  Placement   •  Providing  InstrucPons   •  Error  Messages   41      #UXPA2015   @romanocog  
  42. 42. Summary:  Input  Fields   •  Check  Boxes  &  Radio  BuUons   •  Drop-­‐Down  Menus   •  Open-­‐Ended  Responses   •  Calendars   42      #UXPA2015   @romanocog   Use  drop-­‐down  menus  for  long,   discrete  lists.     Only  provide  responses  that  are   necessary.   Use  check  boxes  for  “select  all   that  apply.”   Use  radio  buUons  for  “select   only  one.”   For  open-­‐ended  responses:   •  Use  large  boxes  for  more  text   •  When  the  response  is  always   going  to  be  the  same,  provide   the  format   •  Separate  boxes   •  Drop-­‐down  menu   •  Calendar  
  43. 43. Summary:  NavigaPon   •  Paging  &  Scrolling   •  Previous  &  Next   43   •  LiUle  advantage  of  paging   vs.  scrolling   •  Should  be  driven  by   content  and  target   audience   •  Mixed  approach  may  be   best  (scrolling  for  similar   quesPons,  paging  between   topics)      #UXPA2015   @romanocog  
  44. 44. Summary:  Text  and  Visual  Layout   •  Visual  Layout   •  Label  Placement   •  Providing  InstrucPons   •  Error  Messages   44   InstrucPons  are  owen  ignored  or  skimmed.   •  Place  introducPons  on  separate   screen/page.   •  Embed  instrucPons  into  survey   quesPon.     •  Make  definiPons  easy  to  access.   •  Rule  of  2s:  Key  info  in  first  two   paragraphs,  sentences,  words.   Use  only  one  column  and  one  quesPon  per   row  (with  excepPons).   Labels  or  quesPons  go  above  input  fields.   Input  field  length  should  match  expected   response.      #UXPA2015   @romanocog   Error  messages  should   be:   •  PosiPve  and  helpful   •  Near  the  item  with  an   error.  
  45. 45. Thank  You! June  23,  2015   UXPA    |    Coronado,  CA     Jen  Romano-­‐Bergstrom   UX  Researcher   Facebook   jenrb@8.com   Emily  Geisen   Survey  Methodologist     RTI   egeisen@rP.org      #UXPA2015   @romanocog  
  46. 46. References •  Callegaro,  M.,  Murakami,  M.,  Tepman,  Z.,  &  Henderson,  V.  (2015).  Yes-­‐no  answers  versus   check-­‐all  in  self-­‐administered  modes.  InternaPonal  Journal  of  Market  Research,  57(2),   203-­‐223.   •  Couper,  M.P.  (2001),  “The  Promises  and  Perils  of  Web  Surveys.”  In  A.  Westlake.,  W.  Sykes,   T.  Manners,  and  M.  Riggs  (eds.),  The  Challenge  of  the  Internet.  London:  AssociaPon  for   Survey  CompuPng,  pp.  35-­‐56.  Conrad,  F.G.,  Couper,  M.P.,  Tourangeau,  R.,  and  Peytchev,   A.  (2006),  “Use  and  Non-­‐Use  of  ClarificaPon  Features  in  Web  Surveys.”  Journal  of  Official   StaPsPcs,  22  (2):  245-­‐269.     •  Dykema,  J.,  Schaeffer,  N.C.,  Beach,  J.,  Lein,  V.  &  Day,  B.  (2011)  Designing  quesPons  for  web   surveys:  effects  of  check-­‐list,  check-­‐all,  and  stand-­‐alone  response  formats  on  survey   reports  and  data  quality.  Paper  presented  at  the  66th  Annual  Conference  of  the  American   AssociaPon  for  Public  Opinion  Research,  Phoenix,  AZ.     •  Geisen,  Olmsted,  Goerman,  Lakhe  (2014)  Planning  for  the  future:  Usability  tesPng  for  the   2020  Census.  Paper  presented  at  the  2014  FedCASIC  Workship,  Washington,  DC.   •  Gonyea,  R.,  Chamberlain,  T.,  Kennedy,  J.  (2007)  The  impact  of  format  changes  on  web   survey  abandonment  and  response  distribuPons.  Paper  presented  at  the  62nd  Annual   Conference  of  the  American  AssociaPon  for  Public  Opinion  Research.     •  Peytchev,  A.,  Couper,  M.,  McCabe,  S.,  &  Crawford,  S.  (2006).  Web  survey  design:  Paging   vs.  scrolling.  Public  Opinion  Quarterly,  70(4),  596–607.    
  47. 47. References  (con;nued) •  Peytchev,  A.,  Conrad,  F.,  Couper,  M.,  &  Tourangeau,  R.  (2007,  May).  Minimizing   respondent  effort  increases  use  of  definiKons  in  web  surveys.  Presented  at  American   AssociaPon  for  Public  Opinion  Research  conference,  Anaheim,  CA.     •  Peytchev,  A.,  Conrad,  F.,  Couper,  M.  P.,  &  Tourangeau,  R.  (2010).  Increasing  respondents’   use  of  definiPons  in  web  surveys.  Journal  of  Official  StaKsKcs,  26(4),  633–650.     •  Redline,  C.  (2013).  Clarifying  Categorical  Concepts  in  a  Web  Survey.  Public  Opinion   Quarterly,  77(S1),  89-­‐105.   •  Smyth,  J.D.,  Dillman,  D.A.,  ChrisPan,  L.M.  &  Stern,  M.J.  (2006)  Comparing  check-­‐all  and   forced-­‐choice  quesPon  formats  in  web  surveys.  Public  Opinion  Quarterly,  70,  1,  pp.  66–77.   •  Smyth,  J.D.,  ChrisPan,  L.M.  &  Dillman,  D.A.  (2008)  Does  ‘yes  or  no’  on  the  telephone  mean   the  same  as  ‘check-­‐all-­‐that-­‐apply’  on  the  web?  Public  Opinion  Quarterly,  72,  1,  pp.  103– 113.   •  Thomas,  R.K.  &  Klein,  J.D.  (2006)  Merely  incidental?  Effect  on  response  format  on   selfreported  behavior.  Journal  of  Official  StaPsPcs,  22,  2,  pp.  221–244.     •  Vehovar,  Vasja,  Katja  Lozar  Manfreda,  and  Zenel  Batagelj.  2000.  “Design  Issues  in  Web   Surveys.”  Proceedings  of  the  American  StaPsPcal  AssociaPon,  Survey  Research  Methods   SecPon,  pp.  983–88.  

×