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/ff/entry.asp?1502 • 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 • Choblab (2011, résumé en français) http://www.choblab.com/web-design/ergonomie-et-usabilite-creer-des-formulaires-efficaces-3230.html

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. Principes : Cholab Privilégier la clarté Regrouper et ordonner les éléments imilaires Donner un intitulé à chaque élément et le positionner près du champ de saisie Fournir une aide pour les éléments à saisir et montrer les champs obligatoires

9. 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, de télédéclarant) • Quelles informations saisir ? • Pas de duplication, champs pré-remplis • Comment les saisir ? • Éléments du formulaire • Interaction

10. Éléments de formulaires

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

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

13. Intitulés Au-dessus

14. Intitulés à droite

15. Intitulés à gauche

16. Alignement des intitulés : Bonnes pratiques

17. Sur mobile

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

19. Séquencement

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

21. Exercez-vous

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

23. Primaire/secondaire

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

25. Les erreurs Mieux vaut prévenir Que guérir

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

27. Énervement

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

29. Exemple

30. Formulaires sur les mobiles Solutions plus modernes http://uxdesign.smashingmagazine.com/2010/03/11/forms-on-mobile-devices-modern-solutions/

31. Séquencement

32. Défilement

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