user-centered design of forms and surveys

User Centered Design of Forms and Surveys

Jen Romano-‐Bergstrom UX Researcher Facebook [email protected]

June 23, 2015 UXPA | Coronado, CA

Emily Geisen Survey Methodologist RTI [email protected]

#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


Ac;vity

• How long did it take you to get here today? • What is today’s date?

3


Why is Design Important?

4






5


Check Boxes & Radio BuEons

6


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


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


Use drop-‐down menus for long, discrete lists.

Drop-‐Down Menus: Reduce Op;ons

9


Only provide the opPons that are necessary for data quality.

Open-‐Ended Responses

10


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


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


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


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


Use the pre-‐filled default for forms that are used repeatedly. Do not pre-‐fill with one-‐use forms and surveys.





15


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


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


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


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


Previous & Next BuEons

• Next should be on the right • Web applicaPon order •  Everyday devices •  Logical reading order

20


Previous & Next BuEons

21






22


Visual Layout: Single vs. Mul;ple Column Format?

23


Mul;-‐Column Format: Naviga;on Path is Not Clear

24


Single-‐Column Format: Preferred*

25


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


Labels: LeW-‐Aligned, Right-‐Aligned, Above?

27


Introduc;ons on Separate Screen

28


•  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


Provide introducPons on separate screens.

Clarifying Instruc;ons

Redline, 2013 30


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


Use clarifying instrucPons only when they are necessary.

Reducing Instruc;ons

32


Avoid blocks of text. Chunk instrucPons into: •  Bullets •  Steps •  Sentences


•  Eliminate obvious instrucPons (e.g., “Please enter name and address”)

• Avoid blocks of text: “Chunk” instrucPons into Bullets, steps, or sentences

33


People only read what they need to read. Include only what is necessary.

34


He, Siu, Strohl, & Chaparro (2014).


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



language Consider a graphic near the item.


“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




language Consider a graphic near the item.

Op;mize Across Devices

38

Test surveys and forms across devices, and test the errors too.



39

Test surveys and forms across devices and test the errors too.


Desktop

Tablet Smartphone

•  What story do the open-‐ended boxes tell? •  Is there a beUer way to ask QuesPon 1?

40


Summary




41


Summary: Input Fields •  Check Boxes & Radio BuUons •  Drop-‐Down Menus •  Open-‐Ended Responses •  Calendars

42


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)


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.


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 [email protected]

Emily Geisen Survey Methodologist RTI [email protected]


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.

user-centered design of forms and surveys

Education