Buttons on forms and surveys: a look at some research 2012
-
Upload
caroline-jarrett -
Category
Design
-
view
107 -
download
1
description
Transcript of Buttons on forms and surveys: a look at some research 2012
![Page 1: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/1.jpg)
on forms and surveysa look at some research
ButtonsCaroline Jarrett
![Page 2: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/2.jpg)
Buttons matter to users
2
![Page 3: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/3.jpg)
The basic eye movement on forms: look for a box, turn left to read the label
3
Where to put the button?
A B C D E
![Page 4: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/4.jpg)
Looks here first for button
Best place for a button:aligned with left-hand end of text boxes
4
2 Then looks here3 Looks here
last1
![Page 5: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/5.jpg)
Study #1: Luke Wroblewski and Etre (2007)
5
http://www.lukew.com/resources/articles/PSactions.asp
![Page 6: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/6.jpg)
Which one do you prefer? Why? Is there a better option?
6
“Only Option E performed poorly during our testing”
![Page 7: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/7.jpg)
LukeW’s examples considered again
7
1
1
1
1 2
1 Fail
12
“Only Option E performed poorly during our testing”
![Page 8: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/8.jpg)
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
![Page 9: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/9.jpg)
Does ‘Next’ go on the left or right of ‘Previous’?
9
![Page 10: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/10.jpg)
Surprise!
10
![Page 11: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/11.jpg)
What about for these two?
11
![Page 12: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/12.jpg)
Probably a lot less of a surprise
12
![Page 13: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/13.jpg)
The survey with the surprising layout ~ 10 mins
13Time to complete (minutes)
Su
rve
ys w
ith a
ny u
se o
f ‘p
revi
ous
’ (%
)
Graph inspired by http://blog.vovici.com/blog/bid/54343/The-Usability-of-Web-Surveys
![Page 14: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/14.jpg)
With an expected layout - quicker
14Time to complete (minutes)
Su
rve
ys w
ith a
ny u
se o
f ‘p
revi
ous
’ (%
)
![Page 15: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/15.jpg)
Unusual but not barmy layout: in between
15Time to complete (minutes)
Su
rve
ys w
ith a
ny u
se o
f ‘p
revi
ous
’ (%
)
Graph inspired by http://blog.vovici.com/blog/bid/54343/The-Usability-of-Web-Surveys
![Page 16: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/16.jpg)
Does that blow away my theory?The surprise layouts should be fine
16
1
Theory fail?
1
Theory fail?
![Page 17: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/17.jpg)
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
![Page 18: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/18.jpg)
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
![Page 19: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/19.jpg)
A survey study with some characteristicsof 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
![Page 20: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/20.jpg)
Example screenshot - first part of study #3
20
Second part of study #3 moved Previous / Save and Exit block to left of Next
![Page 21: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/21.jpg)
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)
21
1
Adapted from http://www.romanocog.com/blog-NextandPrevious.html
![Page 22: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/22.jpg)
Participants didn’t like the surprise layout
22
Mean rating against scale 1 to 91 = bad, 9 = goodFirst part of study #3
![Page 23: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/23.jpg)
Participants see the buttons, left or right, but they don’t like the surprise layout
23Adapted 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)
![Page 24: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/24.jpg)
The surprise layout takes longer,but doesn’t make much difference to break-off
24Time to complete (minutes)
Break-off(%)
![Page 25: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/25.jpg)
Conclusion: best place for a primary button isaligned with left-hand end of text boxes
25
(but avoid doing silly things with any secondary buttons)
Looks here first for button
2 Then looks here3 Looks here
last1
![Page 26: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/26.jpg)
More resources on http://www.slideshare.net/cjforms
26
![Page 27: Buttons on forms and surveys: a look at some research 2012](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c65ce64a795940598b45cb/html5/thumbnails/27.jpg)
Caroline Jarretttwitter @[email protected]
27
http://www.formsthatwork.com
http://www.rosenfeldmedia.com/books/survey-design/