Post on 14-Aug-2015
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
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
Ac;vity
• How long did it take you to get here today? • What is today’s date?
3
#UXPA2015 @romanocog
Why is Design Important?
4
#UXPA2015 @romanocog
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
Check Boxes & Radio BuEons
6
#UXPA2015 @romanocog
Use check boxes for “select all that apply” and radio buUons for “select only one.” Always.
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.
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.
Drop-‐Down Menus: Reduce Op;ons
9
#UXPA2015 @romanocog
Only provide the opPons that are necessary for data quality.
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
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.
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
• 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
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.
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
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
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
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
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
Previous & Next BuEons
• Next should be on the right • Web applicaPon order • Everyday devices • Logical reading order
20
#UXPA2015 @romanocog
Previous & Next BuEons
21
#UXPA2015 @romanocog
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
Visual Layout: Single vs. Mul;ple Column Format?
23
#UXPA2015 @romanocog
Mul;-‐Column Format: Naviga;on Path is Not Clear
24
#UXPA2015 @romanocog
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
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
Labels: LeW-‐Aligned, Right-‐Aligned, Above?
27
#UXPA2015 @romanocog
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.
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.
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
Clarifying Instruc;ons
31
#UXPA2015 @romanocog
Use clarifying instrucPons only when they are necessary.
Reducing Instruc;ons
32
#UXPA2015 @romanocog
Avoid blocks of text. Chunk instrucPons into: • Bullets • Steps • Sentences
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
#UXPA2015 @romanocog
He, Siu, Strohl, & Chaparro (2014).
Reducing Instruc;ons
People only read what they need to read. Include only what is necessary.
35
Messages should be: • Near the item • PosiPve • Helpful, suggesPng
how to help • In the correct
language
#UXPA2015 @romanocog Error Messages
• 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
“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.
Op;mize Across Devices
38
Test surveys and forms across devices, and test the errors too.
#UXPA2015 @romanocog
Op;mize Across Devices
39
Test surveys and forms across devices and test the errors too.
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
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
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
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
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.
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
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.
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.