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

Présentation au sujet: "1 IHM M2-IFL/DU-TICE, UPMC Faciliter la tâche Exemple : Les formulaires Cours 4 bis."— Transcription de la présentation:

1 1 IHM M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Faciliter la tâche Exemple : Les formulaires Cours 4 bis

2 2 Références Luke Wroblewskin (2008, en anglais) : http://www.lukew.com/resources/articles/WebFor ms_LukeW.pdf Amélie Boucher (2004, en français) : http://www.ergolab.net/articles/ergonomie- formulaire.php Van Duyne et al. : Design Patterns F, H, H10, E2 http://www.designofsites.com/helping-customers- complete-tasks

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

4 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 lactivité Saisie de données 4

5 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 6 Principes : Luke Wroblewskin Minimiser leffort de lutilisateur Rendre visible les étapes pour terminer Prendre en compte le contexte Familial/ international Usage fréquent/occasionnel Communiquer Erreurs, aide, succès

7 7 Principes : Van Duyne et al. Montrer linté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 8 Les étapes Pourquoi 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é-remplis Comment les saisir ? Éléments du formulaire Interaction

9 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é danalyse 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 doptions 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 10 Éléments de formulaire

11 11 Placer les éléments Aligner Intituler 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 dutilisation, ressemblance avec un formulaire papier Indices visuels : pas dexcès

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

13 13 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 : 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 14 Séquencement : Bonnes pratiques Enlever toute saisie superflue Jamais répéter une saisie (exception ?) Permettre une saisie flexible Jamais imposer lordre effacer/modifier les saisies de lutilisateur Toujours Permettre des retours Indiquer les champs optionnels/obligatoires Proposer Valeurs par défaut, Complétion automatique (dépendances entre données) Passer dun champ à lautre Tabulation Formulaire long Indiquer la progression Sauvegarder page par page Ne proposer les champs optionnels quà la demande

15 15 Exercez-vous

16 16 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)

17 17 Primaire/secondaire

18 18 Rétroactions Prise en compte de laction 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 derreur À chaque changement de page Erreurs Préventions/détection/correction

19 19 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, 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 20 Détection/correction Vérification Immédiate pour les données sources derreur Date darrivée < date de départ À chaque page en général Permet de corriger tout dun coup (données dépendantes) Dans ce cas Un message en haut de la page – Expliquant lerreur et comment la corriger Et mise en évidence visuelle des champs concernés – Double codage : couleur et gras Ne pas sur-vérifier

21 21 Signaler une erreur

22 22 Un petit dernier

23 23 Pour la route Tenez 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 dun œil critique Testez votre formulaire avant de le mettre en œuvre