2
RéférencesLuke 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.phpVan Duyne et al. : Design Patterns F, H, H10,
E2http://www.designofsites.com/helping-customers-complete-tasksChoblab (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: FormulairesTypes de formulaires Principes Les étapes Points clés
ÉlémentsPrésentationInteractionAideErreurs
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
4
5
Principes : A. BoucherDes formulaires simples et efficacesÉléments de formulaires adaptés à la
tâcheFaciliter
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’utilisateurRendre visible les étapes pour terminerPrendre 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 formulaireSoigner les intitulés des champs
Termes, alignement, groupementUtiliser le formatage automatique de
donnéesMinimiser la longueur réelle ou perçue du
formulaireMinimiser la saisiePrévoir les erreurs et faciliter leur
correction
8
Principes : Cholab Privilégier la clartéRegrouper et ordonner les éléments
imilairesDonner un intitulé à chaque élément et le
positionner près du champ de saisieFournir une aide pour les éléments à saisir
et montrer les champs obligatoires
9
Les étapesPourquoi 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Élément Utilisation +++ ---Ligne Longueur de la ligne
et format des données
Flexibilité Erreurs de saisie
Champ de texte
Nombre de caractères maximum, ascenseur
Flexibilité FlexibilitéComplexité d’analyse
Bouton radio Choix exclusif Tous les choix sont visiblesSélection en 1 seul clic
Charge l’écran si nombre de choix élevé
Case à cocher Choix multiple Id. Id.Menu déroulant
Sélection unique ou multiple
Grand nombre d’options en 1 ou 2 clicsPeu de place à l’écran
Options non visiblesSélection multiple non visible
Liste Id Plus de place Options plus visibles
Double liste Id Id. Id
11
Éléments de formulaire
Motiver, grouper
Aide explicite
Double liste
12
Placer les élémentsAlignerIntituler
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
Alignement
Utilisation
Au-dessus Données familièresRapidité de lecture et de complétionAccessibilité (loupe)
À droite Place limitée en hauteurIntitulés de longueur différente (différence supérieure à 6 caractères)
À gauche Intitulé de même longueurDonnées complexes
17
Sur mobile
18
InteractionSé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
ActionsDistinguer actions primaires et
secondaires Distinction visuelle et spatiale
Éviter les actions secondairesAligner les actions primaires et les
éléments de saisieAfficher des rétroactions (feedback)
23
Primaire/secondaire
24
RétroactionsPrise 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 pageErreurs
Préventions/détection/correction
25
Les erreurs
Mieux vaut prévenirQue guérir
26
Prévention des erreursIntitulé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/correctionVé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 mobilesSolutions plus moderneshttp://uxdesign.smashingmagazine.com/
2010/03/11/forms-on-mobile-devices-modern-solutions/
31
Séquencement
32
Défilement
33
Pour la routeTenez 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
Top Related