Buttonson forms and surveysa look at some researchCaroline Jarrett
Buttons matter to users                          2
The basic eye movement on forms:    look for a box, turn left to read the labelA           B             C              D ...
Best place for a button:aligned with left-hand end of text boxes3 Looks here            1            2 Then looks here    ...
Study #1: Luke Wroblewski and Etre (2007)                                                                      5          ...
Which one do you prefer? Why?Is there a better option?“Only Option E performedpoorly during our testing”      6
LukeW‟s examples considered again 1                           1              2 1                           1              ...
Study #2: Couper et al, 2011.Couper, M. P., Baker, R. & Mechling, J. (2011).Placement and design of navigation buttons in ...
Does „Next‟ go on the left or right of „Previous‟?                                                 9
Surprise!            10
What about for these two?                            11
Probably a lot less of a surprise                                    12
The survey with the surprising layout ~ 10 minsSurveys with any use of „previous‟ (%)                                     ...
With an expected layout - quickerSurveys with any use of „previous‟ (%)                                                   ...
Unusual but not barmy layout: in betweenSurveys with any use of „previous‟ (%)                                            ...
Does that blow away my theory?The surprise layouts should be fine                  Theory    1                   fail?    ...
Or does it?Are forms the same as surveys?Form study #1               Survey study #2• Single screen             • Survey• ...
Study #3: Jennifer Romano Bergstrom (2011)http://www.romanocog.com/blog-NextandPrevious.htmlAlso reports findings from two...
A survey study with some characteristicsof a form study?Form study #1               Survey study #3• Single screen        ...
Example screenshot - first part of study #3Second part of study #3 moved                                                 2...
My theory claims that users can use this layout– and they could use it     1“All participants were able to successfully co...
Participants didn‟t like the surprise layout                             Mean rating against scale 1 to 9                 ...
Participants see the buttons, left or right,  but they don‟t like the surprise layout Surprise layout                     ...
The surprise layout takes longer,    but doesn‟t make much difference to break-offBreak-off(%)                            ...
Conclusion: best place for a primary button isaligned with left-hand end of text boxes3 Looks here            1           ...
More resources onhttp://www.slideshare.net/cjforms                                    26
Caroline Jarretttwitter @cjformscaroline.jarrett@effortmark.co.uk                  http://www.formsthatwork.com           ...
Upcoming SlideShare
Loading in...5
×

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

56,286

Published on

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.

Published in: Design, Technology, Business

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

  1. 1. Buttonson forms and surveysa look at some researchCaroline Jarrett
  2. 2. Buttons matter to users 2
  3. 3. The basic eye movement on forms: look for a box, turn left to read the labelA B C D E Where to put the button? 3
  4. 4. Best place for a button:aligned with left-hand end of text boxes3 Looks here 1 2 Then looks here last Looks here first for button 4
  5. 5. Study #1: Luke Wroblewski and Etre (2007) 5 http://www.lukew.com/resources/articles/PSactions.asp
  6. 6. Which one do you prefer? Why?Is there a better option?“Only Option E performedpoorly during our testing” 6
  7. 7. LukeW‟s examples considered again 1 1 2 1 1 Fail 1 1 2“Only Option E performedpoorly during our testing” 7
  8. 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 hyperlinkfor the Previous or Back function, or place the Previous button belowthe Next button, either centered (if the questions are centered on thepage or the majority are presented horizontally) or on the left (if most ofthe questions are presented vertically and left-justified)”. 8
  9. 9. Does „Next‟ go on the left or right of „Previous‟? 9
  10. 10. Surprise! 10
  11. 11. What about for these two? 11
  12. 12. Probably a lot less of a surprise 12
  13. 13. The survey with the surprising layout ~ 10 minsSurveys with any use of „previous‟ (%) Time to complete (minutes) 13 Graph inspired by http://blog.vovici.com/blog/bid/54343/The-Usability-of-Web-Surveys
  14. 14. With an expected layout - quickerSurveys with any use of „previous‟ (%) Time to complete (minutes) 14
  15. 15. Unusual but not barmy layout: in betweenSurveys with any use of „previous‟ (%) Time to complete (minutes) 15 Graph inspired by http://blog.vovici.com/blog/bid/54343/The-Usability-of-Web-Surveys
  16. 16. Does that blow away my theory?The surprise layouts should be fine Theory 1 fail? Theory fail? 1 16
  17. 17. Or does it?Are forms the same as surveys?Form study #1 Survey study #2• Single screen • Survey• „Submit‟ and „Cancel‟ • „Next‟ and „Previous‟• Time: not given, • Time: but probably ~ 1 minute ~ 9 to ~ 10 minutes• General public • Survey panel members – Used to long surveys – Used to adapting to different formats for surveys 17
  18. 18. Study #3: Jennifer Romano Bergstrom (2011)http://www.romanocog.com/blog-NextandPrevious.htmlAlso 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. 19. A survey study with some characteristicsof a form study?Form study #1 Survey study #3• Single screen • Government survey (more important)• „Submit‟ and „Cancel‟ • „Next‟ and „Previous‟• Time: not given, • Time: but probably ~ 1 minute ~ 9 to ~ 10 minutes• General public • General public 19
  20. 20. Example screenshot - first part of study #3Second part of study #3 moved 20Previous / Save and Exit block to left of Next
  21. 21. My theory claims that users can use this layout– and they could use it 1“All participants were able to successfully complete theNSCG Web-based survey”. (both conditions – study #3) Adapted from http://www.romanocog.com/blog-NextandPrevious.html 21
  22. 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. 23. Participants see the buttons, left or right, but they don‟t like the surprise layout Surprise layout Stacked layout (previous on right) (previous on left)“really irritated” “logical”“opposite of what most people “pretty standard, like what you wouldwould design” typically see on Web sites.” 23 Adapted from http://www.romanocog.com/blog-NextandPrevious.html
  24. 24. The surprise layout takes longer, but doesn‟t make much difference to break-offBreak-off(%) 24 Time to complete (minutes)
  25. 25. Conclusion: best place for a primary button isaligned with left-hand end of text boxes3 Looks here 1 2 Then looks here last Looks here first for button(but avoid doing silly thingswith any secondary buttons) 25
  26. 26. More resources onhttp://www.slideshare.net/cjforms 26
  27. 27. Caroline Jarretttwitter @cjformscaroline.jarrett@effortmark.co.uk http://www.formsthatwork.com http://www.rosenfeldmedia.com/books/survey-design/ 27
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×