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