How to make on line forms beautiful
1 like646 views
This document provides guidance on designing beautiful, usable and accessible online forms. It discusses best practices for passwords, error messages, mobile inputs, required fields, labels, and more. The key recommendations are to make forms easy to complete, provide clear instructions and feedback, and ensure all elements are accessible. Form design impacts users' experiences, so principles like progressive disclosure, clear labeling and validation can help improve usability and conversions.
How to make on line forms beautiful
- 1. How to make beautiful but also usable and accessible online forms July 2016 Jessica Cameron Abi Reynolds Gayle Whittaker 1
- 2. Does form design really matter? 2
- 3. 3
- 6. Forms and you How do you use forms? Are you happy with them? Are your users happy with them? Is there anything you would like to change? 6
- 8. Login Register Email Address: Password: Forgot password? This form appeared after users filled their shopping cart and pressed the Checkout Button* Confusion – “Is it my first time?”, “Which e-mail address did I use?” When to introduce the form? The €300 million button Introduction to User Vision 8 *Jared Spool -UIE 45% of customers with multiple registrations (45%) 160,000 password requests per day! What did they do to increase conversions?
- 9. Login Email Address: Password: Forgot password? You do not need to create an account to make purchases on our site. Simply click Continue to proceed to checkout. To make your future purchases even faster, you can create an account during checkout. • 45% increase in customer conversions • $15 million revenue increase in first month • Additional $300 million in first year! The $300 million button Register Continue Introduction to User Vision 9 They changed a button!
- 10. To scroll or not to scroll? 10 Layout 1 Layout 2 Part 1 Layout 2 Part 2 Page fold Register Register Design A Design B
- 11. Form principles: Path to completion Clear scan lines. Provide a clear scan line from start to finish. An example of what people look at when filling in a simple web form:
- 12. What about longer more complex forms? 12 Steps should be clearly labelled Chunks broken into related information and captured together. Show progress: User can see what has been completed and what is yet to complete Break into bite sized chunks & progress indicator
- 13. More complex forms Progressive disclosure 13 Hides complications “80% of the people filling in the form will only need to know about 20% of the possibilities” Gov. worker (www.formsthatwork.com) Present one question at a time to build form Present summary at end for any edits Images from Student loans company. Gov.uk
- 15. The devil is in the details Passwords Error messages Mobile inputs Easiest input possible Clear labels and examples* Labels, not placeholder text 15
- 18. Passwords 18 Geeklist via eConsultancy Google app guidelines
- 19. Error Messages - useful feedback? 19 Please check your details on the following pages and change anything that is incorrect. DVLA
- 20. Error messages 20 Ikea via Formisimo via Formisimo via CyberText Consulting
- 21. Error messages 21 Toys R Us via Baymard
- 22. Error messages 22 Design Better Forms, by Andrew Coyle https://uxdesign.cc/design-better-forms-96fadca0f49c
- 23. Error messages 23 Design Better Forms, by Andrew Coyle https://uxdesign.cc/design-better-forms-96fadca0f49c
- 24. Error messages 24 Google app guidelines Student Loans Company
- 25. Error messages and feedback 25 Booking.com
- 26. What do good error messages do? They tell the user 1. WHAT the problem is 2. WHERE the problem is 3. HOW to fix the problem They preserve data that have already been entered as much as possible They are patient and kind 26
- 27. © User Vision Limited™, 2014. All rights reserved Mobile
- 28. Mobile: HTML 5 tags 28 Facebook
- 29. Mobile 29
- 30. Passwords should have ability to unmask 30
- 32. Easiest input possible 32 Fido via Bad FormsCity of Edinburgh Council
- 33. Easiest input possible 33 Redesigning the Country Selector, by Christian Holst https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/
- 34. Clear labels and examples 34 Cisco Norway via Twitter
- 35. 35
- 36. Clear labels and examples 36 Amazon via Bad Forms
- 37. Clear labels and examples 37 Threadless via eConsultancy
- 38. Flexible inputs 38 Ikea via Formisimo
- 39. Required fields 39 Luke Wroblewski via UX Stack Exchange Fields marked as required means users skip fields marked optional If information is optional, do you really need to ask for it? Asterisks are not universally understood…
- 40. Required fields 40 Provide instructions before the form on what is required Indicate required fields by either text or symbol positioned inside the label If a symbol such as an asterisks is used to identify required fields provide a caption for what the icon means before the form Don’t denote required fields with colour Can be enhanced with the use of HTML5 ‘required’ and the ‘aria-required’ property
- 41. Help/additional info in forms 41 Provide instructions on what data you expect in what format (e.g. dd/mm/yyyy) Should be included in the label element before the form field – can be re- positioned with CSS Must be associated programmatically using the ‘aria-describedby’ property Must be operable via the keyboard, and not rely on hover state
- 42. Placeholder text ≠ a label 42 Fandango via Baymard
- 43. Labels and placeholders 43 Trainline Booking.com City of Edinburgh Council via Baymard
- 44. Moving or floating labels 44 Facebook Mygovscot myaccount Warby Parker
- 45. Placeholder text is bad for accessibility 45 Should not be used as an alternative to a label Default colour of text is not of sufficient contrast Keyboard users must read ahead of the current focus Users with memory impairments will not have the text label available for reference when filling in a field or when fixing errors
- 46. Quick quiz 1: what’s wrong with this form? 46 Ibis
- 47. Quick quiz 2: what’s wrong with this form? 47 Virgin East Coast Trains
- 48. Quick quiz 3: what’s wrong with this form? 48 Ryanair
- 49. Dark patterns – force customer to sign up? 49
- 50. Accessibility rules on form design 50 Accessible form overview When forms do not provide instructions or labels users may not be able to accurately complete a form When form fields are not properly grouped users may not be able to identify the purpose of a field Grouping particularly important for radio buttons and checkboxes – one question with two possible answers User impact: users who are blind users who are visually impaired users who are mobility impaired users who are cognitively impaired
- 51. Accessibility rules on form design 51 List of priorities that can be done to improve accessibility of forms Apply a distinct page hierarchy to the visual page’s design, to be programmatically determined to help assistive technology identify the page structure Form elements presented in a logical manner when using the keyboard to navigate All interactive functionality must work via the keyboard and not rely on hover states Colour should not be used as the only visual means of conveying information All form inputs should have a label that explicitly refers to the form input Labels must be positioned near form fields Required fields announced
- 52. Beautiful, usable and accessible form design - summary 55 Passwords Make it easy to enter password, provide an option to unmask Error Messages Provide both general error message and an in-line field specific one Retain user’s information Validate a field when a user is done with it, not while typing Provide time to correct their mistakes Mobile inputs Utilise new features to optimise user engagement – HTML5 properties for email, URL etc. Easiest input possible only ask for necessary data and make it clear what is optional and what is not Be clear what type of input is inspected, provide explanations or transform the data Display fields when you need them Clear labels Describe the purpose and be properly associated to the form control Use placeholders for additional information, if needed, not to replace labels
- 53. Resources 56 A few web resources: W3C form concepts tutorial http://www.w3.org/WAI/tutorials/forms Gov.uk Design Patterns https://www.gov.uk/service-manual/user-centred- design/resources/patterns/index.html Luke Wroblewski on Web Form Design
- 54. 55 North Castle Street Edinburgh EH2 3QA United Kingdom Tel: 0131 225 0850 @UserVision www.uservision.co.uk Thank You Jessica@uservision.co.uk