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

Présentation au sujet: "1 IHM M2-IFL/DU-TICE, UPMC Faciliter la tâche Exemple : Les formulaires Cours 4 bis."— Transcription de la présentation:

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

2 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 3 Références : Exemples Des exemples de problèmes et solution pour faciliter laccè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 4 Cours 4 bis: Formulaires Types de formulaires Principes Les étapes Points clés Éléments Présentation Interaction Aide Erreurs

5 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 lactivité 5

6 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 7 Principes : Luke Wroblewskin Minimiser leffort de lutilisateur Rendre visible les étapes pour terminer Prendre en compte le contexte Familial/ international Usage fréquent/occasionnel Communiquer Erreurs, aide, succès

8 8 Principes : Van Duyne et al. Montrer linté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 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 10 Principes Accessiweb Mettre un intitulé significatif devant chaque champ de saisie Regrouper les champs proches Faire correspondre lordre 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 cest une image)

11 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 12 Éléments de formulaires ÉlémentUtilisation+++--- LigneLongueur de la ligne et format des données FlexibilitéErreurs de saisie Champ de texte Nombre de caractères maximum, ascenseur Flexibilité Complexité danalyse Bouton radioChoix exclusifTous les choix sont visibles Sélection en 1 seul clic Charge lécran si nombre de choix élevé Case à cocherChoix multipleId. Menu déroulantSélection unique ou multiple Grand nombre doptions en 1 ou 2 clics Peu de place à lécran Options non visibles Sélection multiple non visible ListeIdPlus de placeOptions plus visibles Double listeIdId.Id

13 13 Éléments de formulaire

14 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 dutilisation, ressemblance avec un formulaire papier Indices visuels : pas dexcès

15 15 Intitulés Au-dessus

16 16 Intitulés à droite

17 17 Intitulés à gauche

18 18 Bonnes pratiques AlignementUtilisation Au-dessusDonnées familières Rapidité de lecture et de complétion Accessibilité À droitePlace limitée en hauteur Intitulés de longueur différente (différence supérieure à 6 caractères) À gaucheIntitulé de même longueur Données complexes

19 19 Sur mobile

20 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 21 Séquencement : Bonnes pratiques Enlever toute saisie superflue Jamais répéter une saisie (exception ?) Permettre une saisie flexible Jamais Imposer lordre Effacer/modifier les saisies de lutilisateur Toujours Permettre des retours Indiquer les champs optionnels/obligatoires Proposer Valeurs par défaut Complétion automatique (dépendances entre données) Passer dun champ à lautre Tabulation Formulaire long Indiquer la progression Sauvegarder page par page Ne proposer les champs optionnels quà la demande Effectuer des branchements

22 22 Critiques ?

23 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 24 Primaire/secondaire

25 25 Rétroactions Prise en compte de laction 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 derreur À chaque changement de page Erreurs Préventions/détection/correction

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

27 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 28 Énervement

29 29 Détection/correction Vérification Immédiate pour les données sources derreur Date darrivée < date de départ À chaque page en général Permet de corriger tout dun coup (données dépendantes) Dans ce cas Un message en haut de la page – Expliquant lerreur et comment la corriger Et mise en évidence visuelle des champs concernés – Double codage : couleur et gras Ne pas sur-vérifier

30 30 Exemple

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

32 32 Séquencement

33 33 Défilement

34 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 dun œil critique Testez votre formulaire avant de le mettre en œuvre