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

  • 40,664 views
Uploaded 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 …

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.

More in: Design , Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
40,664
On Slideshare
0
From Embeds
0
Number of Embeds
28

Actions

Shares
Downloads
118
Comments
0
Likes
26

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Buttonson forms and surveysa look at some researchCaroline Jarrett
  • 2. Buttons matter to users 2
  • 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. 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. Study #1: Luke Wroblewski and Etre (2007) 5 http://www.lukew.com/resources/articles/PSactions.asp
  • 6. Which one do you prefer? Why?Is there a better option?“Only Option E performedpoorly during our testing” 6
  • 7. LukeW‟s examples considered again 1 1 2 1 1 Fail 1 1 2“Only Option E performedpoorly 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 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. 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 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. With an expected layout - quickerSurveys with any use of „previous‟ (%) Time to complete (minutes) 14
  • 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. Does that blow away my theory?The surprise layouts should be fine Theory 1 fail? Theory fail? 1 16
  • 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. 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. 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. Example screenshot - first part of study #3Second part of study #3 moved 20Previous / Save and Exit block to left of Next
  • 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. 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 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. The surprise layout takes longer, but doesn‟t make much difference to break-offBreak-off(%) 24 Time to complete (minutes)
  • 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. More resources onhttp://www.slideshare.net/cjforms 26
  • 27. Caroline Jarretttwitter @cjformscaroline.jarrett@effortmark.co.uk http://www.formsthatwork.com http://www.rosenfeldmedia.com/books/survey-design/ 27