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

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 E Where to put the button? 3

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

Study #1: Luke Wroblewski and Etre (2007) 5 http://www.lukew.com/resources/articles/PSactions.asp

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 Fail 1 1 2“Only Option E performedpoorly during our testing” 7

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

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‟ (%) Time to complete (minutes) 13 Graph inspired by http://blog.vovici.com/blog/bid/54343/The-Usability-of-Web-Surveys

With an expected layout - quickerSurveys with any use of „previous‟ (%) Time to complete (minutes) 14

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

Does that blow away my theory?The surprise layouts should be fine Theory 1 fail? Theory fail? 1 16

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

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

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

Example screenshot - first part of study #3Second part of study #3 moved 20Previous / Save and Exit block to left of Next

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

Participants didn‟t like the surprise layout Mean rating against scale 1 to 9 1 = bad, 9 = good First part of study #3 22

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

The surprise layout takes longer, but doesn‟t make much difference to break-offBreak-off(%) 24 Time to complete (minutes)

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

More resources onhttp://www.slideshare.net/cjforms 26

Caroline Jarretttwitter @cjformscaroline.jarrett@effortmark.co.uk http://www.formsthatwork.com http://www.rosenfeldmedia.com/books/survey-design/ 27

http://www.uxmatters.com	13073
http://uxmatters.com	451
http://uxlabs.pl	395
http://www.roberthempsall.co.uk	112
http://translate.googleusercontent.com	19
http://us-w1.rockmelt.com	8
http://clipboard.com	5
https://twitter.com	5
http://proxy.usabilitytools.com	5
http://reader.googleusercontent.com	4
http://d3r3jj4tch5va8.cloudfront.net	2
http://paper.li	2
http://www.twylah.com	1
https://si0.twimg.com	1
http://dev.uxmatters.com	1
http://131.253.14.66	1
http://tweetedtimes.com	1

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

by Caroline Jarrett on Apr 12, 2012

Accessibility

Categories

Upload Details

Usage Rights

17 Embeds 14,086

Statistics

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