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.

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

5. Best forms ever
Accessibility
Usability
Design
5

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

7. Good Form
Design Principles
7

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

14. GDS Design Patterns
14
https://www.gov.uk/service-manual/user-centred-
design/resources/patterns/progress-indicators.html

15. The devil is in the details
Passwords
Error messages
Mobile inputs
Easiest input possible
Clear labels and examples*
Labels, not placeholder text
15

16. Passwords
16
Mygovscot myaccount

17. Passwords
17
Student Loans Company

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

31. Easiest input possible
31

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