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.
Upcoming SlideShare
Labels and buttons on forms
Next
Download to read offline and view in fullscreen.

36

Share

Download to read offline

Buttons on forms and surveys: a look at some research 2012

Download to read offline

Does 'Submit' or 'Send' or 'OK' go to the left or right of 'Cancel'? Does 'Next' go to the left or right of 'Previous'? This talk at the Information Design Conference 2012 discusses three research studies on forms and surveys.

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Related Books

Free with a 30 day trial from Scribd

See all

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
  26. More resources on http://www.slideshare.net/cjforms 26
  27. Caroline Jarrett twitter @cjforms caroline.jarrett@effortmark.co.uk http://www.formsthatwork.com http://www.rosenfeldmedia.com/books/survey-design/ 27
  • GoranRadovanovic6

    Jul. 6, 2020
  • KatarzynaTrz

    Jun. 26, 2018
  • SaphiraAmethysta

    Mar. 1, 2017
  • louvaro

    Jul. 30, 2016
  • makuster

    Apr. 14, 2016
  • lenochkzaytseva

    Mar. 24, 2016
  • krosenkranz

    Mar. 16, 2016
  • dimaqandah

    Dec. 22, 2015
  • KennekLe

    Oct. 29, 2015
  • milovandiest

    Feb. 16, 2015
  • uniquepixel

    Feb. 8, 2015
  • nielsforpokker

    Feb. 2, 2015
  • kenwyq

    Jan. 21, 2015
  • JoanaCerejo

    Oct. 22, 2014
  • neliorodrigues146

    Sep. 3, 2014
  • renato

    Sep. 3, 2014
  • silviamiazaki

    Sep. 2, 2014
  • zachidin

    Aug. 16, 2014
  • ssuser57a91030

    Aug. 14, 2014
  • LviaThimotheo

    Feb. 25, 2014

Does 'Submit' or 'Send' or 'OK' go to the left or right of 'Cancel'? Does 'Next' go to the left or right of 'Previous'? This talk at the Information Design Conference 2012 discusses three research studies on forms and surveys. This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Views

Total views

151,200

On Slideshare

0

From embeds

0

Number of embeds

123,134

Actions

Downloads

187

Shares

0

Comments

0

Likes

36

×