1

IHM

M2-IFL/DU-TICE, UPMCElisabeth.Delozanne@upmc.fr

Faciliter la tâcheExemple : Les formulaires

Cours 4 bis

2

RéférencesLuke Wroblewskin (2008, en anglais) :http://www.lukew.com/ff/entry.asp?1502 Amélie Boucher (2004, en français) :http://www.ergolab.net/articles/ergonomie-formulaire.phpVan Duyne et al. : Design Patterns F, H, H10,

E2http://www.designofsites.com/helping-customers-complete-tasksChoblab (2011, résumé en français) http://www.choblab.com/web-design/ergonomie-et-usabilite-creer-des-formulaires-efficaces-3230.html

3

Cours 4 bis: FormulairesTypes de formulaires Principes Les étapes Points clés

ÉlémentsPrésentationInteractionAideErreurs

4

A quoi sert un formulaire ?Grand public

Utiliser des Design Patterns Achat en ligne, fidélisation, contact, réservation

(transports, spectacles) Participation à une communauté (blog, forum,

messages) Accéder à des services (impôts, concours)

Professionnel ou spécifique Analyse de l’activité

Saisie de données

4

5

Principes : A. BoucherDes formulaires simples et efficacesÉléments de formulaires adaptés à la

tâcheFaciliter

La prise en main du formulaire La tâche de renseignement La prévention et la correction des erreurs

6

Principes : Luke Wroblewskin Minimiser l’effort de l’utilisateurRendre visible les étapes pour terminerPrendre en compte le contexte

Familial/ international Usage fréquent/occasionnel

Communiquer Erreurs, aide, succès

7

Principes : Van Duyne et al.Montrer l’intérêt de remplir le formulaireSoigner les intitulés des champs

Termes, alignement, groupementUtiliser le formatage automatique de

donnéesMinimiser la longueur réelle ou perçue du

formulaireMinimiser la saisiePrévoir les erreurs et faciliter leur

correction

8

Principes : Cholab Privilégier la clartéRegrouper et ordonner les éléments

imilairesDonner un intitulé à chaque élément et le

positionner près du champ de saisieFournir une aide pour les éléments à saisir

et montrer les champs obligatoires

9

Les étapesPourquoi saisir les informations ?

Intérêt (e.g. données personnelles) Données complexes :

Préparer les informations (e.g. numéro sécu, de télédéclarant)

Quelles informations saisir ? Pas de duplication, champs pré-remplis

Comment les saisir ? Éléments du formulaire Interaction

10

Éléments de formulairesÉlément Utilisation +++ ---Ligne Longueur de la ligne

et format des données

Flexibilité Erreurs de saisie

Champ de texte

Nombre de caractères maximum, ascenseur

Flexibilité FlexibilitéComplexité d’analyse

Bouton radio Choix exclusif Tous les choix sont visiblesSélection en 1 seul clic

Charge l’écran si nombre de choix élevé

Case à cocher Choix multiple Id. Id.Menu déroulant

Sélection unique ou multiple

Grand nombre d’options en 1 ou 2 clicsPeu de place à l’écran

Options non visiblesSélection multiple non visible

Liste Id Plus de place Options plus visibles

Double liste Id Id. Id

11

Éléments de formulaire

Motiver, grouper

Aide explicite

Double liste

12

Placer les élémentsAlignerIntituler

Soigner les intitulés (tri des cartes) Placement : le plus près possible de l’élément

aligner à gauche, à droite, au-dessus Pas de ponctuation (: .) Champs optionnels/obligatoires

Grouper Logique, importance, fréquence d’utilisation,

ressemblance avec un formulaire papier Indices visuels : pas d’excès

13

Intitulés Au-dessus

14

Intitulés à droite

15

Intitulés à gauche

16

Alignement des intitulés : Bonnes pratiques

Alignement

Utilisation

Au-dessus Données familièresRapidité de lecture et de complétionAccessibilité (loupe)

À droite Place limitée en hauteurIntitulés de longueur différente (différence supérieure à 6 caractères)

À gauche Intitulé de même longueurDonnées complexes

17

Sur mobile

18

InteractionSéquencement

Page unique/Wizard (Assistant) : indiquer la progression Champs optionnels/obligatoires

Actions Principales : Valider, Continuer, Soumettre, Rechercher Secondaires : Modifier, Annuler, Revenir

Aide Implicite : champs pré-remplis, valeurs par défaut,

formatage, affordance (longueur du champ), rétroactions Explicite : légende permanente, au survol, à la demande

Erreurs Prévention, détection et correction

19

Séquencement

20

Séquencement : Bonnes pratiques Enlever toute saisie superflue

Jamais répéter une saisie (exception ?) Permettre une saisie flexible

Jamais Imposer l’ordre Effacer/modifier les saisies de l’utilisateur

Toujours Permettre des retours Indiquer les champs optionnels/obligatoires

Proposer Valeurs par défaut Complétion automatique (dépendances entre données)

Passer d’un champ à l’autre Tabulation

Formulaire long Indiquer la progression Sauvegarder page par page Ne proposer les champs optionnels qu’à la demande

21

Exercez-vous

22

ActionsDistinguer actions primaires et

secondaires Distinction visuelle et spatiale

Éviter les actions secondairesAligner les actions primaires et les

éléments de saisieAfficher des rétroactions (feedback)

23

Primaire/secondaire

24

RétroactionsPrise en compte de l’action

modification du bouton, temps de recherche, chargement

Succès toujours indiquer quand les données sont validées

(afficher, courriel, fichier etc.)Validation

Sur le champ pour les données potentiellement source d’erreur

À chaque changement de pageErreurs

Préventions/détection/correction

25

Les erreurs

Mieux vaut prévenirQue guérir

26

Prévention des erreursIntitulés clairs et non ambigus

Éventuellement légende pour les données complexes Statique, dynamique, à la demande

Format des données Date, téléphone, numéro de sécurité sociale etc. Soyez tolérants (514-255-221 ou 01 24 10 24 10)

Minimiser la saisie Remplacer la saisie par des choix (calendrier) Date de naissance ?

Récapituler les données saisies Possibilité de modifier sans tout effacer

27

Énervement

28

Détection/correctionVérification

Immédiate pour les données sources d’erreur Date d’arrivée < date de départ

À chaque page en général Permet de corriger tout d’un coup (données

dépendantes) Dans ce cas

• Un message en haut de la page–Expliquant l’erreur et comment la corriger

• Et mise en évidence visuelle des champs concernés–Double codage : couleur et gras

Ne pas sur-vérifier

29

Exemple

30

Formulaires sur les mobilesSolutions plus moderneshttp://uxdesign.smashingmagazine.com/

2010/03/11/forms-on-mobile-devices-modern-solutions/

31

Séquencement

32

Défilement

33

Pour la routeTenez compte de ces recommandations

pour le projet Aligner les intitulés Pas de redondance de saisie Récapituler et vérifier les saisies

Observez les formulaires en ligne d’un œil critique

Testez votre formulaire avant de le mettre en œuvre