(Self-)service design!
Eye-tracking Findings That Will Help You Design Forms That
Everyone Can Use!
!
!
Caitlin Rinn, Univ...
Why forms?
< What are the *%#@
password requirements??
7
There are MANY of tiny decisions

•  Where	
  do	
  the	
  instruc.ons	
  go?	
  
•  Should	
  they	
  be	
  visible	
  or...
In a world of self-service design,
If you can’t fill the form, you cant [X]


o  Order on-line
o  Change your mailing addre...
Bargas-Avila, Orsini, Urwyler & Opwis (2011)
Use	
  this	
  	
  
Use	
  this	
  	
  
Seckler, Heinz, Bargas-avila, Opwis & Tuch (2014)
Bojko, Aga and Schumacher, R. (2008).
Use	
  these	
  
*	
   Use	
  this	
  	
  
[Required]
* Not published, but based on Toronto Public Library UT & accessibility field research
Our studies …

•  Where	
  do	
  the	
  instruc.ons	
  go?	
  
•  Should	
  they	
  be	
  visible	
  or	
  behind	
  a	
  ...
Participants
18 Expert Users (American University Students and Community members)
•  Ages 18 – 47; 72% male
25 At-Risk Use...
Participants
REALM health literacy reading test
Participants
At risk reading Demographics
At risk reading levels
8% at or below 3rd grade level
16% 4th-6th grade level
48...
Method
Participants completed a series of
forms to
•  Voter registration
•  Get a parking permit
•  Sign in at a medical c...
Method
Study design:!
"
3 x 3 x 3 design / Latin square presentation"
"
Variables"
•  Instruction placement"
•  Instructio...
Method
Instruction location
"
"
"
"
"
Top of
Section
Above Field
Right of Field
Method
Instruction visibility"
"
"
"
"
"
Visible
 Hidden -Button
 Hidden -Link
Method
Wizard/Gated
 Accordion
 Long page
Page layout"
"
"
"
"
"
Findings
Low literacy participants
Took twice as long do complete the task
and they often didn’t finish.
(30 mins vs. 60 m...
Findings
^^ 
Instructions above the field 

got most notice
Instruc.on	
  
Loca.on	
  
Instruction
Engagement
User Type
Exp...
Findings
Older users
& experts
engaged
when
needed

Low literacy
users
tended not
to engage
< No engagement with 

the ins...
Findings
Instruction
Engagement
(Clicks)
User Type
Expert
 Low Lit
 Over 60
Button
 2.18
 .65
 2.56
Text Link
 3.18
 1.13*...
Findings
^^ ^^
At-risk users didn’t predict how
the accordion would look.
Form	
  
Layout	
  
Accordion
Percent
Completion...
Findings
Low literacy findings



Low literacy participants were often surprised by new sections
of the page opening up.
Findings
Low literacy findings



Participants had ideas and expectations about how the interaction might
work, but tended ...
Findings
< Participants did not read
the page heading
Findings




Experts expect the form to fix it for them
Recommendations
Instruction location
"
"
Top of
Section
Above Field
Right of Field
Use	
  
this	
  	
  
Recommendations
Instruction visibility"
"
"
Visible
 Hidden -Button
 Hidden -Link 
2nd	
  choice	
  Use	
  this	
  	
  
Recommendations
Page layout"
"
"
Wizard/Gated
 Accordion
 Long page
Don’t	
  use	
  this	
  (!!)	
  
Work in progress
•  What sorts of
validation feedback
engage users and
reduce errors?
Validation
How does
environment
influ...
Thanks!
Questions?






For questions later, contact kath@usability.org
Self-service design - Eye-tracking Findings That Will Help You Design Forms That Everyone Can Use
Self-service design - Eye-tracking Findings That Will Help You Design Forms That Everyone Can Use
Self-service design - Eye-tracking Findings That Will Help You Design Forms That Everyone Can Use
Upcoming SlideShare
Loading in …5
×

Self-service design - Eye-tracking Findings That Will Help You Design Forms That Everyone Can Use

801 views

Published on

We describe results from an experiment exploring how to effectively place instructions in online forms for expert and low literacy users.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
801
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Self-service design - Eye-tracking Findings That Will Help You Design Forms That Everyone Can Use

  1. 1. (Self-)service design! Eye-tracking Findings That Will Help You Design Forms That Everyone Can Use! ! ! Caitlin Rinn, University of Baltimore! Noël Alton, University of Baltimore! Kathryn Summers, University of Baltimore! Kath Straub, Usability.org! !
  2. 2. Why forms?
  3. 3. < What are the *%#@ password requirements??
  4. 4. 7
  5. 5. There are MANY of tiny decisions •  Where  do  the  instruc.ons  go?   •  Should  they  be  visible  or  behind  a  link?   •  How  many  sec.ons  or  pages?   •  Where  do  the  labels  go?   •  How  do  we  show  which  fields  are  required?   •  How  do  we  show  what’s  required  in  a  field?   •  How  do  we  communicate  that  the  user  didn’t     do  what  we  wanted?   •  How  do  we  word  rights  and  responsibili.es?    
  6. 6. In a world of self-service design, If you can’t fill the form, you cant [X] o  Order on-line o  Change your mailing address o  Get a parking spot at Uni o  Access internet @ the conference o  Register to vote o  Get needed government benefits
  7. 7. Bargas-Avila, Orsini, Urwyler & Opwis (2011) Use  this    
  8. 8. Use  this     Seckler, Heinz, Bargas-avila, Opwis & Tuch (2014)
  9. 9. Bojko, Aga and Schumacher, R. (2008). Use  these  
  10. 10. *   Use  this     [Required] * Not published, but based on Toronto Public Library UT & accessibility field research
  11. 11. Our studies … •  Where  do  the  instruc.ons  go?   •  Should  they  be  visible  or  behind  a  link?   •  How  many  sec.ons  or  pages?   •  Where  do  the  labels  go?   •  How  do  we  show  which  fields  are  required?   •  How  do  we  show  what’s  required  in  a  field?   •  How  do  we  communicate  that  the  user  didn’t     do  what  we  wanted?   •  How  do  we  word  rights  and  responsibili.es?    
  12. 12. Participants 18 Expert Users (American University Students and Community members) •  Ages 18 – 47; 72% male 25 At-Risk Users •  Ages 28 – 77; 52% male •  9 Older users (over 60) What did they do? •  REALM •  Participants each completed several forms •  Parking permit" •  User name and password" •  Medical/Optical clinic intake form" Study design:! "
  13. 13. Participants REALM health literacy reading test
  14. 14. Participants At risk reading Demographics At risk reading levels 8% at or below 3rd grade level 16% 4th-6th grade level 48% 7th – 8th grade 28% High school +
  15. 15. Method Participants completed a series of forms to •  Voter registration •  Get a parking permit •  Sign in at a medical clinic •  Participate in future studies (paper)
  16. 16. Method Study design:! " 3 x 3 x 3 design / Latin square presentation" " Variables" •  Instruction placement" •  Instruction visibility" •  Form Layout" Measured" •  Errors" •  Looking patterns/Instruction engagement" " " "
  17. 17. Method Instruction location " " " " " Top of Section Above Field Right of Field
  18. 18. Method Instruction visibility" " " " " " Visible Hidden -Button Hidden -Link
  19. 19. Method Wizard/Gated Accordion Long page Page layout" " " " " "
  20. 20. Findings Low literacy participants Took twice as long do complete the task and they often didn’t finish. (30 mins vs. 60 mins)
  21. 21. Findings ^^ Instructions above the field 
 got most notice Instruc.on   Loca.on   Instruction Engagement User Type Expert Low Lit Over 60 Above 62.78 116.47* 89.5 @ Right 45.65 57.65 43.56 Section head 72.33 60.12 70.43
  22. 22. Findings Older users & experts engaged when needed Low literacy users tended not to engage < No engagement with 
 the instruction links
  23. 23. Findings Instruction Engagement (Clicks) User Type Expert Low Lit Over 60 Button 2.18 .65 2.56 Text Link 3.18 1.13* 3.00 Visible Text 5.29 4.88 5.50 Input Errors User Type Expert Low Lit Over 60 Button 2.67 3.24 1.78 Text Link 1.88 4.75* 2.88 Visible Text 1.94 4.13 1.88 ^^ ^^ They looked more but comprehension was shaky < People clicked links more often 
 than buttons Instruc.on   Visibility  
  24. 24. Findings ^^ ^^ At-risk users didn’t predict how the accordion would look. Form   Layout   Accordion Percent Completion User Type Expert Low Lit Over 60 Step One 100% 100% 100% Step Two 100% 75% 75% Step Three 100% 56% 63% Step Four 100% 38% 50% Wizard Percent Completion User Type Expert Low Lit Over 60 Step One 100% 100% 100% Step Two 100% 75% 88% Step Three 100% 81% 100% Step Four 100% 94% 100% Scrolling Percent Completion User Type Expert Low Lit Over 60 Step One 100% 100% 100% Step Two 100% 81% 88% Step Three 100% 81% 88% Step Four 100% 94% 100%
  25. 25. Findings Low literacy findings
 
 Low literacy participants were often surprised by new sections of the page opening up.
  26. 26. Findings Low literacy findings
 
 Participants had ideas and expectations about how the interaction might work, but tended not to try them spontaneously. Usernames and passwords were foreign to them. Most didn’t have an email. Low engagement with help information •  Didn’t look at buttons / links •  If they did, they tended not to engage
  27. 27. Findings < Participants did not read the page heading
  28. 28. Findings Experts expect the form to fix it for them
  29. 29. Recommendations Instruction location " " Top of Section Above Field Right of Field Use   this    
  30. 30. Recommendations Instruction visibility" " " Visible Hidden -Button Hidden -Link 2nd  choice  Use  this    
  31. 31. Recommendations Page layout" " " Wizard/Gated Accordion Long page Don’t  use  this  (!!)  
  32. 32. Work in progress •  What sorts of validation feedback engage users and reduce errors? Validation How does environment influence success? Field research Is mobile different? Many of the low literacy participants use a smart phone. Mobile
  33. 33. Thanks! Questions? For questions later, contact kath@usability.org

×