how to make on line forms beautiful
TRANSCRIPT
![Page 1: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/1.jpg)
How to make beautiful but also usable and accessible online forms
July 2016
Jessica Cameron
Abi Reynolds
Gayle Whittaker
1
![Page 2: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/2.jpg)
Does form design really matter?
2
![Page 3: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/3.jpg)
3
![Page 4: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/4.jpg)
![Page 5: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/5.jpg)
Best forms ever
Accessibility
Usability
Design
5
![Page 6: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/6.jpg)
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
![Page 7: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/7.jpg)
Good Form
Design Principles
7
![Page 8: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/8.jpg)
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?
![Page 9: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/9.jpg)
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!
![Page 10: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/10.jpg)
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
![Page 11: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/11.jpg)
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:
![Page 12: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/12.jpg)
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
![Page 13: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/13.jpg)
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
![Page 14: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/14.jpg)
GDS Design Patterns
14
https://www.gov.uk/service-manual/user-centred-design/resources/patterns/progress-indicators.html
![Page 15: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/15.jpg)
The devil is in the details
Passwords
Error messages
Mobile inputs
Easiest input possible
Clear labels and examples*
Labels, not placeholder text
15
![Page 16: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/16.jpg)
Passwords
16
Mygovscot myaccount
![Page 17: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/17.jpg)
Passwords
17
Student Loans Company
![Page 18: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/18.jpg)
Passwords
18
Geeklist via eConsultancy
Google app guidelines
![Page 19: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/19.jpg)
Error Messages - useful feedback?
19
Please check your details on the following pages and change anything that is incorrect.
DVLA
![Page 20: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/20.jpg)
Error messages
20
Ikea via Formisimo
via Formisimo
via CyberText Consulting
![Page 21: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/21.jpg)
Error messages
21
Toys R Us via Baymard
![Page 22: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/22.jpg)
Error messages
22
Design Better Forms, by Andrew Coyle https://uxdesign.cc/design-better-forms-96fadca0f49c
![Page 23: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/23.jpg)
Error messages
23
Design Better Forms, by Andrew Coyle https://uxdesign.cc/design-better-forms-96fadca0f49c
![Page 24: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/24.jpg)
Error messages
24
Google app guidelines
Student Loans Company
![Page 25: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/25.jpg)
Error messages and feedback
25
Booking.com
![Page 26: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/26.jpg)
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
![Page 27: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/27.jpg)
© User Vision Limited™, 2014. All rights reserved
Mobile
![Page 28: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/28.jpg)
Mobile: HTML 5 tags
28
![Page 29: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/29.jpg)
Mobile
29
![Page 30: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/30.jpg)
Passwords should have ability to unmask
30
![Page 31: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/31.jpg)
Easiest input possible
31
![Page 32: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/32.jpg)
Easiest input possible
32
Fido via Bad Forms City of Edinburgh Council
![Page 33: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/33.jpg)
Easiest input possible
33
Redesigning the Country Selector, by Christian Holst https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/
![Page 34: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/34.jpg)
Clear labels and examples
34
Cisco Norway via Twitter
![Page 35: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/35.jpg)
35
![Page 36: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/36.jpg)
Clear labels and examples
36
Amazon via Bad Forms
![Page 37: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/37.jpg)
Clear labels and examples
37
Threadless via eConsultancy
![Page 38: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/38.jpg)
Flexible inputs
38
Ikea via Formisimo
![Page 39: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/39.jpg)
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…
![Page 40: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/40.jpg)
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
![Page 41: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/41.jpg)
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
![Page 42: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/42.jpg)
Placeholder text ≠ a label
42
Fandango via Baymard
![Page 43: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/43.jpg)
Labels and placeholders
43
Trainline
Booking.com
City of Edinburgh Council
via Baymard
![Page 44: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/44.jpg)
Moving or floating labels
44
Mygovscot myaccount
Warby Parker
![Page 45: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/45.jpg)
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
![Page 46: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/46.jpg)
Quick quiz 1: what’s wrong with this form?
46
Ibis
![Page 47: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/47.jpg)
Quick quiz 2: what’s wrong with this form?
47
Virgin East Coast Trains
![Page 48: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/48.jpg)
Quick quiz 3: what’s wrong with this form?
48
Ryanair
![Page 49: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/49.jpg)
Dark patterns – force customer to sign up?
49
![Page 50: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/50.jpg)
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
![Page 51: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/51.jpg)
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
![Page 52: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/52.jpg)
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
![Page 53: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/53.jpg)
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
![Page 54: How to make on line forms beautiful](https://reader031.vdocument.in/reader031/viewer/2022021813/587d51c91a28abee158b4bd1/html5/thumbnails/54.jpg)
55 North Castle Street
Edinburgh
EH2 3QA
United Kingdom
Tel: 0131 225 0850
@UserVision
www.uservision.co.uk
Thank You