How to design forms that deliver a great user experience

FORMULAIRES - BONNES PRATIQUES
2016
FORMS – BEST PRACTICES

1. Introduce the form
Accompany the user
Clarity and readability
What components should be used?
Simplify completion
Submitting and end of the form
To go further
SUMMARY

Filling out a form is painful.
Everyone agrees on this point.
Nonetheless, forms enable us to collect data, to interact
with a service, to become a participant in an interface.
It is thus essential to take care of your forms!
If it’s too long, if it leads to errors or elicits mistrust, you will
make a bad impression on your users.
Follow some good practices to make a form intuitive and
fun, instilling a positive relationship between the person
and the brand.

Prepare the user
Before getting into the heart of the matter, the
user needs to know what is expected of him
and the nature of the form he is going to fill
out: accompanying the form with a clear
title and a reassuring introduction will be a
good way to approach the subject.
One can also remind him of the documents to
prepare and the conditions required to be able
to fill out the form, which will avoid interrupting
the process.

Create steps
• The number of steps needs to be clearly
shown at the beginning of the process.
• The user’s progress should be indicated.
• Regular messages of encouragement will
make the process more pleasant.
• The user must be able to go back to the
preceding step without losing data already
entered.
Exemple 1
Exemple 2

Do a good job of holding the user’s hand

HELP
SHORT AIDS - PLACEHOLDERS
A placeholder can help the user to
understand what is expected of him (e-mail
format, for example, or format of date of birth).
There is no substitute for help when the user
needs information while he is entering text
(since the placeholder will disappear upon data
entry).

HELP
LONGER HELP – DISPLAYED OR IN A MASK
Sometimes one needs text-based help which
is a little longer to help the user understand
what is expected from him.
This text can be displayed on the side, above
or below the field.
According to the importance of the message,
one can display it all the time, upon entering
the field, or one can hide it behind a help
balloon.
Displayed upon entry into the field
Displayed upon clicking on a help balloon
Password

HELP
REASSURANCE
The user needs to be reassured during the
entire length of the form.
When he enters sensitive information (for
example: address, bank information, etc.), a
pictogram or a text message can reassure the
user of the security and privacy of this data.
One can also propose that the user get in
touch with an advisor or be recontacted (via
chat, call back, etc.), which gives him recourse
in case he gets stuck on the form.
Call back
Data security
Note : attention:
specify the wait time
before a call back
accurately.

Required fields
A good form involves very few optional
fields. It is thus not necessary to mark all
fields as required.
One can show the required nature of all the
fields by a message at the beginning of the
form. One can indicate the optional nature of a
field at the side or within it (placeholder).
Sources :
Anthony - UX mouvement

Errors
MINIMIZE THE RISK OF ERROR
By following the best practices in this
document, one can already significantly reduce
the risks of error.
There are other tips you shouldn’t forget:
• Based on the type of field, block the entry of
certain characters;
• Manage spaces on the server side.
Please enter a valid email address.
Password rules
At least 8 characters
Include both characters and
numbers
Must not resemble the e-mail address.
Must be more complex than
“Password123”

Errors
DISPLAY ERRORS NEXT TO THE DATA ENTRY POINT
Errors must be mentioned to the user while he
is filling out the form (and not in one block at the
end).
The fields where the errors occur must be
immediately identifiable.

Errors
OFFER SOLUTIONS
One must always explain the reason for the
error to the user.
It is also possibile to offer a solution to this, on
which he simply has to click to avoid having to
re-enter text (for example: rewrite an e-mail
address correctly).
Message d’erreur explicite
Proposition de solution
95 00
Explicit error message
Postal code your postal code needs to include 5 digits
Proposed solution

Positioning of labels
ABOVE THE FIELD
The proximity of the label to its field facilitates
fast reading and thus efficient completion.
This is the option to prefer in most cases.

Positioning of reminder
WITHIN THE FIELD (PLACEHOLDER)
There must be a reminder of the title of the
field somewhere. Without this, the user will
not know what was asked for when the field
is selected.
The best solution is a small placeholder
located above the field when it is completed
(example 1).
A reminder can also be evoked by a
pictogram but this must be very explicit
(example 2).
Example 2
Example 1

AT THE SIDE – FLUSH RIGHT
The least possible amount of vertical space
should be used.
This type of alignment is recommended for
very short forms because it is difficult to read.
Note : This positioning works only with short labels (a
maximum of about fifteen characters).

AT THE SIDE – FLUSH LEFT
This type of positioning is not to be favored
because it is very hard for the user to visually
scan. He must make an effort to move from the
label to the field.
Pour aller plus loin :
Anthony - UX mouvement
Example of eye tracking
on a form that is flush left.

Page layout
CREATE VISUAL RELATIONSHIPS
Managing space is fundamental to a good
understanding of the content.
Example of management of space:
- Between 1 label and 1 field = 10 px
- Between 1 field and another label = 30 px
- Between 2 "groups of fields” = 60 px
Name
Date of Birth
MM/DD/YYYY
City of Birth
Name
Date of Birth
MM/DD/YYYY
City of Birth

Page layout
HIGHLIGHT THE FOCUS STATE
The active/selected field must be clearly
different from the others.
On mobile, the active field can also move up to
the top of the scroll area.

Page layout
AFFORDANCE OF FIELDS
The length of a field should indicate the
expected content.
For example, a postal code field that only
contains 5 characters would be shorter than an
e-mail field .
Mobile phone number
Address
Additional Address Information
Apartment No., Stairway, Building, etc.

Page layout
ONLY ONE COLUMN
It is strongly recommended that forms be laid
out in only one column. Multi-column layouts
can hinder readability.
The only excepts are the fields First Name/
Last Name or Postal code / City which can be
placed side by side.
Your information
Type of account
I’d like to open a(n) Individual account Joint account
Personal information
Salutation Mr.Ms.
First Name
Last Name
E-mail address
Confirm E-mail address
Mobile phone
Other phone
Date of Birth MM/DD/YYYY

La taille de typo diminue au fil de la saisie
Page layout
KEEP IN MIND ALL THE DATA TO BE ENTERED
Sometimes the content is too long compared
to the size of the field, which prevents the user
from being able to see the entire text entered.
To fix this, it is possible to adapt the size of
the font within the field.
Sources :
Nicolas Catherin - Livre blanc (p. 43)

RADIO BUTTONS OR CHECKBOXES?
Radio buttons allow the user to select only one
element in a list (example: title, work, etc.)
Checkboxes allow the user to select multiple
elements in a list. A single checkbox can also
mean an acceptance.
Sources :
Which input When - Morgan Carter
Radio buttons
Checkboxes

SWITCHES
A switch enables the user to choose between two
elements. Most often this is used for YES/NO or
ON/OFF
The states selected/not selected must be very
clear.
Example 1
Example 2
In the Segmented Control iOS, for example, it is not
always easy to distinguish the “active” tab from the
“select” tab.

SCROLLING LISTS
Scrolling lists enable the user to select an
element in a list.
Scrolling lists lead to several problems:
• A number of useless clicks for a short list;
• Difficulties in selecting from a list that is too
long (especially on mobile) ;
• CSS personalization difficulties;
• Etc.
One must always ask oneself if a scrolling list
is really the most appropriate component (by
the way, in most cases the answer is no).
Information on the object wanted:
Object:*
Quantity:*
Color:*
Shirt
Napkin
Cup
Umbrella

SLIDERS AND STEPPERS
Sliders enable the user to select an approximate
value or a range of values (for example:
brightness, volume, price ranges, etc.). They don’t
have to be used for a specific amount because
they can be difficult to manipulate.
A stepper enables the user to increase or reduce
a value. It is recommended for values that don’t
vary much.
Slider
Stepper

TIME PICKERS AND DATE PICKERS
These components are primarily used on mobile
devices (native).
A time picker enables the user to select a time
(hours/minutes/seconds).
A date picker enables the user to select a date
(day/month/year).
Time picker
Date picker iOS

Vary the form
VARY THE COMPONENTS
A long form which only uses fields and
scrolling menus will be annoying to the user.
Steppers, switches, sliders are among those
components which, used in the right place and
at the right time, can help speed up
completion.
Sources :
Which input When - Morgan Carter
Slider
Mr. Ms.
First Name
Last Name
Number of dependent children
Home situation
Living for free (other)
Renter/co-renter
Owner

VARY THE FORM
ADD A FUN TOUCH
There are several ways to make a form more
fun to complete:
• Icons to dress it up visually;
• A writing style that is more pleasant;
• Some discrete animations (for example:
upload or confirm button).
Icons
A friendly, responsive tone

Vary the form
PROGRESSIVE DISPLAY OF FIELDS
In order for the form to appear less long, one
can display dependent fields progressively.
For example, one only displays the
“profession” and ”area of activity” fields if the
user selects “active” as professional status.
Note : be careful not to abuse this tip– this will give the
user the impression that each field is hiding others.
Family status Married
SelectProfessional status
Income
Total assets Select
Select
Select
Select
Married
Active
Family status
Professional status
Income
Total assets
Profession
Industry

Minimize text input
MAKE SUGGESTIONS
Text input is always painful and a source of
errors, even more so when the user is on a
mobile device (not necessarily seated, nor very
focused).
The cognitive effort necessary during text input
is more significant than during a selection from
a list.
We recommend that the maximum number
of fields be pre-completed.
Example: the departure city is pre-completed
(geolocation of the user) and the departure date is
automatically set to today’s date.
today
Search

Minimize text input
DEDUCE
It is possible to deduce certain elements.
For example, if the user has entered his postal
code, a reduced list of cities can be displayed
(example 1).
Or, if the user enters the first 4 digits of his
card, one can deduce that it’s a Visa or
Mastercard (example 2).
Example 1
Example 2
City
Postal code

Minimize text input
COMPLETE AUTOMATICALLY
You’ve probably understood that, whenever
possible, one should present the user with an
alternative to text input:
• Autocompletion ;
• Scan (example: bank card);
• Automatic identification (example:
Facebook connect);
• Voice search.
Auto-completion
Card scan

Minimize text input
AVOID ASKING FOR THE SAME INFORMATION TWICE
To have to input the same information twice can be
very constraining.
For a password, one can give the user the
opportunity to display or hide it in order to verify
that the input is correct.
Sources :
Klaus Schaefers
Luke Wroblewski

Keyboard navigation
BASIC RULES
• To be able to go from one field to another
easily:
- On mobile : use “previous/next” buttons
- On desktop : use the “tab” key
• On mobile, it is necessary to load the correct
keyboard based on the content required in the
input (for example: a numeric keyboard for a
price, an e-mail keyboard for an e-mail, a
telephone keyboard for a phone number, etc.).

Submitting data and the end of the form

Submit buttons
MAXIMUM VISIBILITY
A submit button (the form’s call to action) or
the passage to the next step must be clear and
visible.
The text on the button must display the action
without ambiguity and encourage the user to
click.
Sources :
7 Basic Best Practices for Buttons - Caroline Jarett

Submit buttons
PRIMARY AND SECONDARY BUTTONS
When there are several buttons (for example:
save and cancel), it is preferable to differentiate
them to attract the attention to the primary
action.
Destructive buttons (cancel, delete, etc.) must be
harder to find: they should be smaller and more
discreet.
Sources :
Primary & Secondary Actions in Forms - L. Wroblewski
7 basic best practices for buttons - Caroline Jarett
Country
Region
Postal code
City
Work phone
CancelSave
Mobile phone

Submit buttons
POSITIONING ON THE WEB
For forms that involve buttons like “send” or
“save”, it is preferable to position these on the
left, aligned with the fields.
In this manner, they remain within the flow of the
vertical path traveled by the eye.
Forgot your password?
Current password
Confirm
new password
Save changes

Submit buttons
POSITIONING ON MOBILE
On mobile, it’s important that the submit button
always be visible, even once the keyboard
appears.
One can tie it to the keyboard or put it at the
top of the screen.
In every case, it’s a good idea to refer to the
OS guidelines to use codes to which users
are already accustomed.

End of the form
SUMMARY
Right before sending the form, you can present
a summary of the information entered.
This enables the user to reread everything and
to verify his information.

End of the form
CONFIRMATION
The confirmation message permits you to
reassure the user and to confirm the
successful completion of the form.
If it is accompanied by a small illustration or an
animation, this will be a sort of reward for the
user, especially if the form was long!
Hooray!
Your information has been submitted successfully!

The simple form
ONE QUESTION AT A TIME
Forms like TypeForm present only one
question at a time, which allows the user to
focus on what he has to input.
This type of form is not well-suited to forms
where it’s useful to have 2 or 3 fields in front of
you at the same time).
Example :
http://www.typeform.com/

Natural language
A COMPLETE SENTENCE
Natural language consists of asking for
information in a sentence and not only by
means of chopped up fields.
This allows you to give a more human tone to
the form. This type of form adapts itself
particularly well to a search form (like the one
shown at right).
Example
Tympanus - Natural language

Conversational mode
BY SMS OR CHAT
A form can become a discussion by SMS or
chat between the user and the brand.
Hello Bank, for example, already offers a first
connection in this format.
OPEN AN ACCOUNT
Hello!
It’s very simple to open a
Hello Bank account! You
just have to answer a couple
of questions.
Ready? Let’s go!
Step 1: Your information
To get started, what should
I call you?

www.backelite.com
01 73 00 28 00

How to design forms that deliver a great user experience

More Related Content

Viewers also liked (20)

Similar to How to design forms that deliver a great user experience (20)

More from Idean France (20)

Recently uploaded (20)

How to design forms that deliver a great user experience