Downloaded 266 times
Uploaded byCaroline Jarrett
Labels and buttons on forms
Caroline Jarrett discusses the optimal placement of labels and buttons on forms to enhance user experience, emphasizing the need for testing and adapting forms based on user interactions. Key findings suggest that users primarily focus on the left edge of fields and that the design of buttons plays a crucial role in guiding user behavior. Ultimately, it is essential to prioritize user understanding of questions over superficial design elements.
More Related Content
Similar to Labels and buttons on forms
More from Caroline Jarrett
Labels and buttons on forms
- 1. Labels and buttonson forms and other time-consuming forms controversies Caroline Jarrett FORMS CONTENT Copyright is held by the author/owner(s). CHI 2011, May 7–12, 2011, Vancouver, BC, Canada. ACM 11/05.
- 2.
- 3. Agenda Where peoplelook on forms What that implies for - placing labels - placing buttons Let’s stress about unimportant details Two other details that affect users Final reminder: it’s what you ask and why that really matters 3
- 4. Reading forms isdifferent from using them 4
- 5. Are my observationsconfirmed by eye-tracking? A look at some heat maps 5
- 6. Ordering a prospectus • Userhas chosen a prospectus • Postcode lookup for the address 6
- 7. Now try itfor yourself • Look at this printout of a forms page • Circle the places where you think that users looked • Put a cross on the places where users clicked 7
- 8.
- 9. One person’s heat map •Small green dots show narrow focus on labels and left end of fields • Red crosses show clicks 9
- 10. An aggregate • Usersfocus on the left-hand edge of the fields • Users read the labels 10
- 11. The ‘narrow focus’means big jumps for the users’ eyes. 11
- 12. Agenda Where peoplelook on forms What that implies for - placing labels - placing buttons Let’s stress about unimportant details Two other details that affect users Final reminder: it’s what you ask and why that really matters 12
- 13. Matteo Penzo’s recommendation: “Placelabels above or right-align them” Penzo, M (2006) Label Placement in Forms http://www.uxmatters.com/MT/archives/000107.php 13
- 14. Are all thesequestions equivalent? Where do the answers come from? • Your address • Your city • Company you work for • Number of colleagues • Your address • Your city • Company you work for • no of colleagues • Name • Surname • Age • City 1414
- 15. Easy questions andhard questions prompt different patterns of reading • Users glance at populated answers • Users look mostly at the left end of the answer space for easy questions • Users read complex instructions quite carefully... • ... provided they are on the way to their goal 15
- 16. Update: Labels above thefields may be no faster than right aligned labels • Das, McEwan and Douglas investigated label placement • Chose a simple form with simple questions • Found no difference between labels above the fields and right-aligned labels Das, McEwan and Douglas (2008) Using eye-tracking to evaluate label alignment in online forms, NordiCHI '08: Proceedings of the 5th Nordic conference on Human- computer interaction: building bridges 16
- 17. A section ofa form where I think left-aligned labels really are necessary 17
- 18. Method 1 (moreeffort, and may not work): Decide where to put your labels according to your users, their goals, and the questions Your users and their goals .... Your questions ... Put the labels ... Willing to reveal the answers; filling in the form helps them to achieve a goal Simple, only a few of them Above Simple but lots of them Right-justified Complex Left-justified Unwilling to reveal answers or reluctant to fill in the form Simple or complex Left-justified (you’ll need more explanation) 18
- 19. Users can survive alot 19
- 20. Update: Roland Feichtingerlooked at labels under the boxes http://uxmatters.com/mt/archives/2010/10/label-placement-in-austrian- forms-with-some-lessons-for-english-forms.php 20
- 21. Roland found thecrucial point: labels need to be closely associated with fields 21
- 22. Labels too farfrom the fields 22
- 23.
- 24. Method 2 (easier,and guaranteed success): Choose anything harmonious then test and test • Choose an arrangement that looks harmonious to you • Make sure each label is closely associated with its field • The only guaranteed way of achieving a good form is: – Test YOUR form with YOUR users – Make changes based on what you find – Test again with (different) users – Make more changes – Repeat until the form works 24
- 25.
- 26.
- 27. Agenda Where peoplelook on forms What that implies for - placing labels - placing buttons Let’s stress about unimportant details Two other details that affect users Final reminder: it’s what you ask and why that really matters 27
- 28. Buttons matter tousers. 28
- 29. 1. Label thebutton with what it does. 2. If the user doesn't want to do it, don't have a button for it. • “OK” works – if it makes sense to say “OK” at that point • “Reset” probably doesn’t work • Reset Button: INPUT TYPE=RESET An INPUT element with `TYPE=RESET' represents an input option, typically a button, that instructs the user agent to reset the form's fields to their initial states. The VALUE attribute, if present, indicates a label for the input (button). When you are finished, you may submit this request: <input type=submit><br> You may clear the form and start over at any time: <input type=reset> http://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.1.2.8 29http://www.usabilitynews.com/news/article1944.asp
- 30. LukeW writes aboutbuttons http://www.lukew.com/resources/articles/PSactions.asp 30
- 31. Which one doyou prefer? Why? Is there a better option? 31
- 32. Which one doyou prefer? Why? Is there a better option? “Only Option E performed poorly during our testing” 32
- 33. A new selectionof options: get rid of E, add another one? 33
- 34. Remember the basiceye movement: look for a box, turn left to read the label Where to put the button? 34
- 35. Best place fora button: aligned with left-hand end of text boxes Looks here first for button Then looks here second Looks here last 35
- 36. Current: users hadno problems 36
- 37. Better: away fromfields 37
- 38. Best: in linewith left edge of fields 38
- 39. Complication: a complex formneeds a ‘back’ button Wrong. Users will click ‘back’ in error 39
- 40. Slightly better, butstill a high risk that users will click the wrong button 40
- 41. Correct. ‘Back’ is secondaryaction and out of sight 41
- 42. Method 2 (easier,and guaranteed success): Choose anything sensible then test and test • Any arrangement of buttons that puts the SUBMIT (primary action) button where users expect to find it will probably be OK • Make sure that the SUBMIT button cannot be confused with destructive buttons • The only guaranteed way of achieving a good form is: – Test YOUR form with YOUR users – Make changes based on what you find – Test again with (different) users – Make more changes – Repeat until the form works 42
- 43. Agenda Where peoplelook on forms What that implies for - placing labels - placing buttons Let’s stress about unimportant details Two other details that affect users Final reminder: it’s what you ask and why that really matters 43
- 44. Colons at theends of labels are a matter of considerable debate Pick one style. Stick with it. It’s not worth arguing about. http://www.usabilitynews.com/news/article3200.asp and http://www.usabilitynews.com/news/article3112.asp 44
- 45. Sentence or titlecase? Sentence case wins. (But only just). • This is sentence case • This is Title Case • This Is Capitalisation Of Each Initial Letter • ISO-9241 part 17 says • "Initial upper-case (capital) letter for field labels: To facilitate readability, the text field labels begin with an upper-case letter. The rest of the label should contain lower case (small) letters except for cases where the label is a logo, an acronym or language convention that requires each word in the label to begin with a capital letter.“ • Sentence case is slightly more legible due to familiarity • It’s not worth changing a big suite of forms to fix this http://www.usabilitynews.com/news/article2594.asp 45
- 46. Required field indicator? •Miriam Frost Jungwirth: • “I was once charged with testing that. Seriously. $10,000 of manhours testing asterisk placement. There was no difference in user performance. At all.“ • I’m a little more interested in this discussion: – Indicators placed to the right of the field are likely to be invisible – Put the text describing the indicator at the top of the fields (that is, not at the end of the form and not in the instructions) – Use the same indicator in both places (text and next to required field) – Use the alt-text ‘required’ (not ‘asterisk’) – Always indicate required; don’t switch to indicating optional – If you feel the urge to indicate optional, use the full word ‘optional’ – Do not use colour on its own as an indicator Miriam Frost Jungwirth, posting on CHI-WEB, 19 April 2007 There’s a theme developing here .... 46
- 47. An example ofrequired field indicators at the wrong end of the field 47
- 48. Which is themost important problem • Examine the Michigan Department of Transport form • Find as many usability problems as you can • Decide which ONE problem is the most important 48
- 49. Agenda Where peoplelook on forms What that implies for - placing labels - placing buttons Let’s stress about unimportant details Two other details that affect users Final reminder: it’s what you ask and why that really matters 49
- 50. Two other details that affectusers 1. Shorter preambles 2. ‘False ends’ 50
- 51. A/B testing Varied: • photo • background •colours • shading • buttons • preamble 51
- 52. In our 2004study, we found that only a better preamble made any real difference • We tested a wide selection of visual variants of a form • Variants improved conversion rates • The only variation that achieved statistical significance was the improved preamble: – Shorter – Clearer – Better layout Jarrett, C. and Minott, C. (2004) Making a better web form Proceedings of the Usability Professionals' Association Conference, Minneapolis, Minnesota, USA. http://www.formsthatwork.com/files/Articles/BetterForm.pdf 52
- 53.
- 54.
- 55. Two other details that affectusers 1. Shorter preambles 2. ‘False ends’ 55
- 56. ‘False ends’: ifit feels like the end of the conversation, users will stop 56
- 57. ‘False ends’: ifit feels like the end of the conversation, users will stop 57
- 58. Avoid screens inthe middle of forms that have no fields for user entries • Option 1: save a ‘false end’ screen for the true end of the conversation • Option 2: include a question that guides users around the ‘false end’ screen 58
- 59. Agenda Where peoplelook on forms What that implies for - placing labels - placing buttons Let’s stress about unimportant details Two other details that affect users Final reminder: it’s what you ask and why that really matters 59
- 60. It’s what youask and why that really matters • Users rarely abandon forms because of: – Label placement – Use of colons – Required field indicators – Sentence or title case • Users often abandon forms or lie on them because of: – Questions that they don’t understand – Questions that they have no answer for – Intrusive questions that are inappropriate to the task – Validations that refuse their preferred or correct answer 60
- 61. Thanks and please contact me Caroline Jarrett [email protected] +441525 370379 I’m a consultant, hire me: Consultancy: www.effortmark.co.uk Training: www.usabilitythatworks.com Free stuff: Forms advice: www.formsthatwork.com Editing: www.editingthatworks.com Columns: www.usabilitynews.com “Caroline’s Corner” www.uxmatters.com “Good Questions” 61