User-Centered Design of Forms and Surveys
10 likes1,840 views
The document presents best practices for designing web forms and surveys, emphasizing user-centered design. Key recommendations include using checkboxes and radio buttons appropriately, formatting open-ended responses correctly, and optimizing navigation through paging and scrolling. Additionally, it highlights the importance of clear visual layouts, effective labeling, concise instructions, and context-sensitive error messages for improved user experience.
User-Centered Design of Forms and Surveys
- 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. 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. Ac;vity • How long did it take you to get here today? • What is today’s date? 3 #UXPA2015 @romanocog
- 4. Why is Design Important? 4 #UXPA2015 @romanocog
- 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. Check Boxes & Radio BuEons 6 #UXPA2015 @romanocog Use check boxes for “select all that apply” and radio buUons for “select only one.” Always.
- 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. 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. Drop-‐Down Menus: Reduce Op;ons 9 #UXPA2015 @romanocog Only provide the opPons that are necessary for data quality.
- 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. 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. 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. • 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. 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. 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. 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. 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. 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. 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. Previous & Next BuEons • Next should be on the right • Web applicaPon order • Everyday devices • Logical reading order 20 #UXPA2015 @romanocog
- 21. Previous & Next BuEons 21 #UXPA2015 @romanocog
- 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. Visual Layout: Single vs. Mul;ple Column Format? 23 #UXPA2015 @romanocog
- 24. Mul;-‐Column Format: Naviga;on Path is Not Clear 24 #UXPA2015 @romanocog
- 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. 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. Labels: LeW-‐Aligned, Right-‐Aligned, Above? 27 #UXPA2015 @romanocog
- 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. 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. 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. Clarifying Instruc;ons 31 #UXPA2015 @romanocog Use clarifying instrucPons only when they are necessary.
- 32. Reducing Instruc;ons 32 #UXPA2015 @romanocog Avoid blocks of text. Chunk instrucPons into: • Bullets • Steps • Sentences
- 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 #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 Messages should be: • Near the item • PosiPve • Helpful, suggesPng how to help • In the correct language #UXPA2015 @romanocog Error Messages
- 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. “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. Op;mize Across Devices 38 Test surveys and forms across devices, and test the errors too. #UXPA2015 @romanocog
- 39. Op;mize Across Devices 39 Test surveys and forms across devices and test the errors too.
- 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. 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. 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. 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. 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. 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. 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. 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.