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
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
33. Easiest input possible
33
Redesigning the Country Selector, by Christian Holst
https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/
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
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
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