Buttons on forms and surveys: a look at some research 2012
•
37 likes•153,768 views
The document summarizes several studies on button placement in forms and surveys. The key findings are: 1) Buttons should be aligned with the left-hand side of text boxes as users' eyes naturally scan left to right. 2) A "surprise" layout with the Previous button on the right performed poorly in tests compared to more standard layouts. 3) While unusual layouts can be completed, they take longer and are less preferred by users compared to expected layouts with Previous on the left of Next. The best practice is to avoid non-standard button placements.
Recommended
More Related Content
What's hot
What's hot (16)
Viewers also liked
Viewers also liked (20)
Similar to Buttons on forms and surveys: a look at some research 2012
Similar to Buttons on forms and surveys: a look at some research 2012 (20)
More from Caroline Jarrett
More from Caroline Jarrett (20)
Recently uploaded
Recently uploaded (20)
Buttons on forms and surveys: a look at some research 2012
- 1. Buttonson forms and surveys a look at some research Caroline Jarrett
- 2. Buttons matter to users 2
- 3. The basic eye movement on forms: look for a box, turn left to read the label Where to put the button? A B C D E 3
- 4. Best place for a button: aligned with left-hand end of text boxes Looks here first for button 2 Then looks here 3 Looks here last 1 4
- 5. Study #1: Luke Wroblewski and Etre (2007) http://www.lukew.com/resources/articles/PSactions.asp 5
- 6. Which one do you prefer? Why? Is there a better option? “Only Option E performed poorly during our testing” 6
- 7. Luke W’s examples considered again 1 1 1 1 2 1 Fail 1 2 “Only Option E performed poorly during our testing” 7
- 8. Study #2: Couper et al, 2011. Couper, M. P., Baker, R. & Mechling, J. (2011). Placement and design of navigation buttons in Web surveys. http://surveypractice.wordpress.com/2011/02/14/navigation-buttons/ “…we recommend that survey designers consider the use of a hyperlink for the Previous or Back function, or place the Previous button below the Next button, either centered (if the questions are centered on the page or the majority are presented horizontally) or on the left (if most of the questions are presented vertically and left-justified)”. 8
- 9. Does ‘Next’ go on the left or right of ‘Previous’? 9
- 10. Surprise! 10
- 11. What about for these two? 11
- 12. Probably a lot less of a surprise 12
- 13. The survey with the surprising layout ~ 10 mins Surveyswithanyuseof‘previous’(%) Time to complete (minutes) Graph inspired by http://blog.vovici.com/blog/bid/54343/The-Usability-of-Web-Surveys 13
- 14. With an expected layout - quicker Time to complete (minutes) Surveyswithanyuseof‘previous’(%) 14
- 15. Unusual but not barmy layout: in between Time to complete (minutes) Surveyswithanyuseof‘previous’(%) Graph inspired by http://blog.vovici.com/blog/bid/54343/The-Usability-of-Web-Surveys 15
- 16. Does that blow away my theory? The surprise layouts should be fine 1 Theory fail? 1 Theory fail? 16
- 17. Or does it? Are forms the same as surveys? Form study #1 • Single screen • ‘Submit’ and ‘Cancel’ • Time: not given, but probably ~ 1 minute • General public Survey study #2 • Survey • ‘Next’ and ‘Previous’ • Time: ~ 9 to ~ 10 minutes • Survey panel members – Used to long surveys – Used to adapting to different formats for surveys 17
- 18. Study #3: Jennifer Romano Bergstrom (2011) http://www.romanocog.com/blog-NextandPrevious.html Also reports findings from two U.S. Census Bureau studies • Romano, J. C. & Chen, J. M. (2011). A usability and eye-tracking evaluation of four versions of the online National Survey for College Graduates (NSCG): Iteration 2 (Statistical Research Division Study Series SSM2011-01). U.S. Census Bureau. http://www.census.gov/srd/papers/pdf/ssm2011-01.pdf • Romano, J. C. & Chen, J. M. (2010). A usability evaluation of the online National Survey for College Graduates (NSCG)(Statistical Research Division Study Series SSM2010-05). U.S. Census Bureau. http://www.census.gov/srd/papers/pdf/ssm2010-05.pdf 18
- 19. A survey study with some characteristics of a form study? Form study #1 • Single screen • ‘Submit’ and ‘Cancel’ • Time: not given, but probably ~ 1 minute • General public Survey study #3 • Government survey (more important) • ‘Next’ and ‘Previous’ • Time: ~ 9 to ~ 10 minutes • General public 19
- 20. Example screenshot - first part of study #3 Second part of study #3 moved Previous / Save and Exit block to left of Next 20
- 21. My theory claims that users can use this layout – and they could use it “All participants were able to successfully complete the NSCG Web-based survey”. (both conditions – study #3) 1 Adapted from http://www.romanocog.com/blog-NextandPrevious.html 21
- 22. Participants didn’t like the surprise layout Mean rating against scale 1 to 9 1 = bad, 9 = good First part of study #3 22
- 23. Participants see the buttons, left or right, but they don’t like the surprise layout Adapted from http://www.romanocog.com/blog-NextandPrevious.html “really irritated” “opposite of what most people would design” “logical” “pretty standard, like what you would typically see on Web sites.” Surprise layout (previous on right) Stacked layout (previous on left) 23
- 24. The surprise layout takes longer, but doesn’t make much difference to break-off Time to complete (minutes) Break-off (%) 24
- 25. Conclusion: best place for a primary button is aligned with left-hand end of text boxes Looks here first for button 2 Then looks here 3 Looks here last (but avoid doing silly things with any secondary buttons) 1 25