1 / 33

IHM

IHM. Cours 4 bis. Faciliter la tâche Exemple : Les formulaires. M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr. Références. Luke Wroblewskin (2008, en anglais) : http://www.lukew.com/ff/entry.asp?1502 Amélie Boucher (2004, en français) :

tracy
Télécharger la présentation

IHM

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related