1 IHM M2-IFL/DU-TICE, UPMC 09-Accueil.htm Faciliter la tâche Exemple : Les formulaires Cours 4 bis

2 Références  Luke Wroblewskin (2008, en anglais) : ms_LukeW.pdf  Amélie Boucher (2004, en français) : formulaire.php  Van Duyne et al. : Design Patterns F, H, H10, E2 complete-tasks

3 Cours 4 bis: Formulaires  Types de formulaires  Principes  Les étapes  Points clés  Éléments  Présentation  Interaction  Aide  Erreurs

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)  Professionnel ou spécifique  Analyse de l’activité  Saisie de données 4

5 Principes : A. Boucher  Des formulaires simples et efficaces  Éléments de formulaires adaptés à la tâche  Faciliter  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’utilisateur  Rendre visible les étapes pour terminer  Prendre 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 formulaire  Soigner les intitulés des champs  Termes, alignement, groupement  Utiliser le formatage automatique de données  Minimiser la longueur réelle ou perçue du formulaire  Minimiser la saisie  Prévoir les erreurs et faciliter leur correction

8 Les étapes  Pourquoi saisir les informations ?  Intérêt (e.g. données personnelles)  Données complexes :  Préparer les informations (e.g. numero sécu)  Quelles informations saisir ?  Pas de duplication, champs pré-remplis  Comment les saisir ?  Éléments du formulaire  Interaction

9 Éléments de formulaires ÉlémentUtilisation LigneLongueur de la ligne et format des données FlexibilitéErreurs de saisie Champ de texte Nombre de caractères maximum, ascenseur Flexibilité Complexité d’analyse Bouton radioChoix exclusifTous les choix sont visibles Sélection en 1 seul clic Charge l’écran si nombre de choix élevé Case à cocherChoix multipleId. Menu déroulantSélection unique ou multiple Grand nombre d’options en 1 ou 2 clics Peu de place à l’écran Options non visibles Sélection multiple non visible ListeIdPlus de placeOptions plus visibles Double listeIdId.Id

10 Éléments de formulaire

11 Placer les éléments  Aligner les éléments  Intituler  Soigner les intitulés (tri des cartes)  Placement : aligner à gauche, à droite, au-dessus  Grouper  Logique, importance, fréquence d’utilisation, ressemblance avec un formulaire papier  Indices visuels : pas d’excès

12 Massacre

13 Alignement des intitulés : Bonnes pratiques AlignementUtilisation Au-dessusDonnées familières Rapidité de lecture À droitePlace limitée en hauteur Intitulés de longueur différente (différence supérieurs à 6 caractères) À gaucheIntitulé de même longueur Données complexes

14 Interaction  Séquencement  Page unique/Wizard (Assistant) : indiquer la progression  Champs optionnels/obligatoires  Actions  Principales : Valider, Continuer, Soumettre, Rechercher  Secondaires : Modifier, Annuler, Revenir  Aide  Implicite : 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

15 Séquencement : Bonnes pratiques  Enlever toute saisie superflue  Jamais répéter une saisie (exception ?)  Permettre une saisie flexible  Ne pas imposer l’autre, permettre des retours  Ne jamais effacer/modifier les saisies de l’utilisateur  Indiquer les champs optionnels  Proposer  Valeurs par défaut,  Complétion automatique (dépendances entre données)  Passage d’un champ à l’autre  Tabulation  Formulaire long  Indiquer la progression  Sauvegarder page par page  Ne proposer les champs optionnels qu’à la demande

16 Exercez-vous

17 Actions  Distinguer actions primaires et secondaires  Distinction visuelle et spatiale  Éviter les actions secondaires  Aligner les actions primaires et les éléments de saisie  Afficher des rétroactions (feedback)

18 Primaire/secondaire

19

20 Rétroactions  Prise en compte de l’action  modification du bouton, temps de recherche, chargement e  Succès  toujours indiquer quand les données sont validées (courriel, fichier joint etc.)  Validation  Sur le champ  pour les données potentiellement source d’erreur  À chaque changement de page  Erreurs  Préventions/détection/correction

21 Prévention des erreurs  Intitulés clairs et non ambigus  Éventuellement légende pour les données complexes  Statique, dynamique, à la demande  Format des données  Date, etc.  Minimiser la saisie  Remplacer la saisie par des choix (calendrier)  Récapituler les données saisies  Possibilité de modifier sans tout effacer

22 Détection/correction  Vé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

23 Encore un

24 Un petit dernier

25 Pour la route  Tenez compte de ces recommandations pour le projet  Observez les formulaires en ligne d’un œil critique  Testez votre formulaire avant de le mettre en œuvre