1

IHM

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

Faciliter la tâcheExemple : Les formulaires

Cours 4 bis

2

Références : RecommandationsRéférentiel Accessiweb 2.2 (2012)Livre blanc Clever Age 44p (2011)

http://fr.clever-age.com/IMG/pdf/lb-formulairesweb-ncvvca.pdfLuke Wroblewskin (2008, en anglais) :

http://www.lukew.com/ff/entry.asp?1502Amélie Boucher (2004, en français) :

http://www.ergolab.net/articles/ergonomie-formulaire.phpVan Duyne et al. : Design Patterns F, H, H10, E2

http://www.designofsites.com/helping-customers-complete-tasksCheck-list Opquasts

http://checklists.opquast.com/fr/oqs-v2?q=formulairesChoblab (2011, résumé en français)

http://www.choblab.com/web-design/ergonomie-et-usabilite-creer-des-formulaires-efficaces-3230.html

3

Références : ExemplesDes exemples de problèmes et solution pour

faciliter l’accès pour les handicapés formulaires http://www.youtube.com/watch?v=itGwtZY3J-M images http://www.youtube.com/watch?v=oB3LelGzFII

Des présentations amusanteshttp://www.smashingmagazine.com/web-form-design-showcases-and-solutions/

4

Cours 4 bis: FormulairesTypes de formulairesPrincipesLes étapesPoints clés

ÉlémentsPrésentationInteractionAideErreurs

5

A quoi sert un formulaire ?Saisir des donnéesGrand 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é

5

6

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

Prise en main du formulaire Tâche de renseignement Prévention et la correction des erreurs

7

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

8

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

9

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

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

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

et indiquer les champs obligatoires

10

Principes AccessiwebMettre un intitulé significatif devant chaque

champ de saisieRegrouper les champs prochesFaire correspondre l’ordre de navigation

entre les champs (touche tab) avec le code source

Préciser les champs obligatoires par une *Mettre en évidence le bouton de validation

(avec texte alternatif si c’est une image)

11

Saisir des informationsPourquoi ?

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

Préparer les informations (e.g. n° sécu, n° télédéclarant)

Lesquelles ? Pas de duplication, champs pré-remplis

Comment ? Éléments du formulaire Interaction

12

É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

13

Éléments de formulaire

Motiver, grouper

Aide explicite

Double liste

14

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

15

Intitulés Au-dessus

16

Intitulés à droite

17

Intitulés à gauche

18

Bonnes pratiques

Alignement UtilisationAu-dessus Données familières

Rapidité de lecture et de complétionAccessibilité

À 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

19

Sur mobile

20

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 visuelles Explicite : légende permanente, au survol, à la demande

Erreurs Prévention, détection et correction

21

Séquencement : Bonnes pratiquesEnlever 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 Effectuer des branchements

22

Critiques ?

23

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)

24

Primaire/secondaire

25

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

26

Les erreurs

Mieux vaut prévenirQue guérir

27

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

28

Énervement

29

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

30

Exemple

31

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

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

32

Séquencement

33

Défilement

34

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