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/resources/articles/WebForms_LukeW.pdfAmé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-tasks

3

Cours 4 bis: FormulairesTypes de formulairesPrincipesLes étapesPoints 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

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)Quelles informations saisir ?

Pas de duplication, champs pré-remplisComment les saisir ?

Éléments du formulaire Interaction

9

É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

10

Éléments de formulaire

Motiver, grouper

Aide explicite

Double liste

11

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

12

Alignement des intitulés : Bonnes pratiques

Alignement

Utilisation

Au-dessus Données familièresRapidité de lecture et de complétion

À 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

13

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

14

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

15

Exercez-vous

16

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)

17

Primaire/secondaire

18

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

19

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-25-52-21 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

20

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

21

Signaler une erreur

22

Un petit dernier

23

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