html5-img
1 / 34

IHM

IHM. Cours 4 bis. Faciliter la tâche Exemple : Les formulaires. M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr. Références : Recommandations. Référentiel Accessiweb 2.2 (2012) Livre blanc Clever Age 44p (2011) http://fr.clever-age.com/IMG/pdf/lb-formulairesweb-ncvvca.pdf

joanna
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 : Recommandations • Référentiel Accessiweb 2.2 (2012) • Livre blanc Clever Age 44p (2011) http://fr.clever-age.com/IMG/pdf/lb-formulairesweb-ncvvca.pdf • 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 • Check-list Opquasts http://checklists.opquast.com/fr/oqs-v2?q=formulaires • Choblab(2011, résumé en français) http://www.choblab.com/web-design/ergonomie-et-usabilite-creer-des-formulaires-efficaces-3230.html

  3. Références : Exemples • Des exemples de problèmes et solution pour faciliter l’accès pour les handicapés • formulaires http://www.youtube.com/watch?v=itGwtZY3J-M • images http://www.youtube.com/watch?v=oB3LelGzFII • Des présentations amusantes http://www.smashingmagazine.com/web-form-design-showcases-and-solutions/

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

  5. A quoi sert un formulaire ? Saisir des données • 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é

  6. Principes : A. Boucher • Des formulaires simples et efficaces • Éléments de formulaires adaptés à la tâche • Faciliter • Prise en main du formulaire • Tâche de renseignement • Prévention et la correction des erreurs

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

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

  9. Principes : Cholab Privilégier la clarté Regrouper et ordonner les éléments similaires Donner un intitulé à chaque élément et le positionner près du champ de saisie Fournir une aide pour les éléments à saisir et indiquer les champs obligatoires

  10. Principes Accessiweb Mettre un intitulé significatif devant chaque champ de saisie Regrouper les champs proches Faire correspondre l’ordre de navigation entre les champs (touche tab) avec le code source Préciser les champs obligatoires par une * Mettre en évidence le bouton de validation (avec texte alternatif si c’est une image)

  11. Saisir des informations • Pourquoi ? • Intérêt (e.g. données personnelles) • Données complexes : • Préparer les informations (e.g. n° sécu, n°télédéclarant) • Lesquelles ? • Pas de duplication, champs pré-remplis • Comment ? • Éléments du formulaire • Interaction

  12. Éléments de formulaires

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

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

  15. Intitulés Au-dessus

  16. Intitulés à droite

  17. Intitulés à gauche

  18. Bonnes pratiques

  19. Sur mobile

  20. 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 visuelles • Explicite : légende permanente, au survol, à la demande • Erreurs • Prévention, détection et correction

  21. 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 • Effectuer des branchements

  22. Critiques ?

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

  24. Primaire/secondaire

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

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

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

  28. Énervement

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

  30. Exemple

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

  32. Séquencement

  33. Défilement

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