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 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 3 Cours 4 bis: Formulaires Types de formulaires Principes Les étapes Points clés Éléments Présentation Interaction Aide Erreurs

4 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 lactivité Saisie de données 4

5 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 6 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

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

8 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 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 10 É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

11 11 Éléments de formulaire

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

13 13 Intitulés Au-dessus

14 14 Intitulés à droite

15 15 Intitulés à gauche

16 16 Alignement des intitulés : Bonnes pratiques AlignementUtilisation Au-dessusDonnées familières Rapidité de lecture et de complétion Accessibilité (loupe) À 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

17 17 Sur mobile

18 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 19 Séquencement

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

21 21 Exercez-vous

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

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

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

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

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

29 29 Exemple

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

31 31 Séquencement

32 32 Défilement

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