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 • 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
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/
Cours 4 bis: Formulaires Types de formulaires Principes Les étapes Points clés Éléments Présentation Interaction Aide Erreurs
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é
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
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
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
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
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)
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
Éléments de formulaires
Éléments de formulaire Motiver, grouper Aide explicite Double liste
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
Intitulés Au-dessus
Intitulés à droite
Intitulés à gauche
Bonnes pratiques
Sur mobile
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
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
Critiques ?
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)
Primaire/secondaire
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
Les erreurs Mieux vaut prévenir Que guérir
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
Énervement
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
Exemple
Formulaires sur les mobiles Solutions plus modernes http://uxdesign.smashingmagazine.com/2010/03/11/forms-on-mobile-devices-modern-solutions/
Séquencement
Défilement
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
