FORMULAIRES - BONNES PRATIQUES2016

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.

Introduce the form

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

HELPSHORT 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).

HELPLONGER 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

HELPREASSURANCE

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

ErrorsMINIMIZE 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”

ErrorsDISPLAY 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.

ErrorsOFFER 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

Clarity and readability

Positioning of labelsABOVE 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 reminderWITHIN 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

Positioning of labelsAT 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).

Positioning of labelsAT 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 layoutCREATE 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 layoutHIGHLIGHT 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 layoutAFFORDANCE 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 layoutONLY 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 layoutKEEP 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)

What components should be used?

What components should be used?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

What components should be used?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.

What components should be used?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:*

ShirtNapkinCupUmbrella

What components should be used?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

What components should be used?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

Simplifying completion

Vary the formVARY 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 FORMADD 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 formPROGRESSIVE 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 inputMAKE 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 inputDEDUCE

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 inputCOMPLETE 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 inputAVOID 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 SchaefersLuke Wroblewski

Keyboard navigationBASIC 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 buttonsMAXIMUM 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 buttonsPRIMARY 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. Wroblewski7 basic best practices for buttons - Caroline Jarett

Country

Region

Postal code

City

Work phone

CancelSave

Mobile phone

Submit buttonsPOSITIONING 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 buttonsPOSITIONING 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 formSUMMARY

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 formCONFIRMATION

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!

Taking it one step further…

The simple formONE 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 languageA 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).

ExampleTympanus - Natural language

Conversational modeBY 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.com01 73 00 28 00