IHM

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

2. Références • Luke Wroblewskin (2008, en anglais) : http://www.lukew.com/resources/articles/WebForms_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. 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) • Accéder à des services (impôts, concours) • Professionnel ou spécifique • Analyse de l’activité • Saisie de données

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. numéro sécu) • Quelles informations saisir ? • Pas de duplication, champs pré-remplis • Comment les saisir ? • Éléments du formulaire • Interaction

9. Éléments de formulaires

10. Éléments de formulaire Motiver, grouper Aide explicite Double liste

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 d’utilisation, ressemblance avec un formulaire papier • Indices visuels : pas d’excès

12. Alignement des intitulés : Bonnes pratiques

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. 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. 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. Primaire/secondaire

18. Rétroactions • Prise 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 page • Erreurs • Préventions/détection/correction

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. 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

21. Signaler une erreur

22. Un petit dernier

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 d’un œil critique • Testez votre formulaire avant de le mettre en œuvre