ElisabethDelozanneupmcfr Faciliter la tâche Exemple Les formulaires Cours 4 bis Références Luke Wroblewskin 2008 en anglais httpwwwlukewcomffentryasp1502 Amélie Boucher 2004 en français ID: 343269
Download Presentation The PPT/PDF document "IHM M2-IFL/DU-TICE, UPMC" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
IHM
M2-IFL/DU-TICE, UPMCElisabeth.Delozanne@upmc.fr
Faciliter la tâcheExemple : Les formulaires
Cours
4 bisSlide2
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.phpVan Duyne et al. : Design Patterns F, H, H10, E2
http://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.htmlSlide3
Cours 4 bis:
FormulairesTypes de formulaires Principes Les étapes
Points clésÉlémentsPrésentationInteractionAide
ErreursSlide4
A quoi sert un formulaire ?
Grand public Utiliser des Design PatternsAchat 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écifiqueAnalyse de l’activitéSaisie de données
4Slide5
Principes : A. Boucher
Des formulaires simples et efficacesÉléments de formulaires adaptés à la tâcheFaciliterLa prise en main du formulaireLa tâche de renseignementLa prévention et la correction des erreursSlide6
Principes : Luke Wroblewskin
Minimiser l’effort de l’utilisateurRendre visible les étapes pour terminerPrendre en compte le contexteFamilial/ internationalUsage fréquent/occasionnelCommuniquer Erreurs, aide, succèsSlide7
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 correctionSlide8
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 obligatoiresSlide9
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é-remplisComment les saisir ? Éléments du formulaire InteractionSlide10
Éléments de formulaires
ÉlémentUtilisation+++
---LigneLongueur de la ligne et format des donnéesFlexibilité
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 visibles
Sé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 clics
Peu de place à l’écran
Options non visibles
Sélection multiple non visible
Liste
Id
Plus de place
Options plus visibles
Double liste
Id
Id.
IdSlide11
Éléments de formulaire
Motiver, grouper
Aide explicite
Double listeSlide12
Placer les éléments
AlignerIntitulerSoigner les intitulés (tri des cartes)Placement : le plus près possible de l’élémentaligner à gauche, à droite, au-dessusPas de ponctuation (: .)Champs optionnels/obligatoiresGrouper Logique, importance, fréquence d’utilisation, ressemblance avec un formulaire papierIndices visuels : pas d’excèsSlide13
Intitulés Au-dessusSlide14
Intitulés à droiteSlide15
Intitulés à gaucheSlide16
Alignement des intitulés : Bonnes pratiques
AlignementUtilisation
Au-dessusDonnées familièresRapidité de lecture et de complétionAccessibilité (loupe)À droitePlace limitée en hauteur
Intitulés de longueur différente (différence
supérieure à 6 caractères)
À gauche
Intitulé de même longueur
Données
complexesSlide17
Sur mobileSlide18
Interaction
SéquencementPage unique/Wizard (Assistant) : indiquer la progressionChamps optionnels/obligatoiresActionsPrincipales : Valider, Continuer, Soumettre, RechercherSecondaires : Modifier, Annuler, RevenirAideImplicite : champs pré-remplis, valeurs par défaut, formatage, affordance (longueur du champ), rétroactionsExplicite : légende permanente, au survol, à la demande
ErreursPrévention, détection et correctionSlide19
SéquencementSlide20
Séquencement : Bonnes pratiques
Enlever toute saisie superflueJamais répéter une saisie (exception ?)Permettre une saisie flexibleJamais Imposer l’ordreEffacer/modifier les saisies de l’utilisateur
ToujoursPermettre des retoursIndiquer les champs optionnels/obligatoiresProposer Valeurs par défautComplétion automatique (dépendances entre données)Passer d’un champ à l’autreTabulationFormulaire long
Indiquer la progression
Sauvegarder page par page
Ne proposer les champs optionnels qu’à la demandeSlide21
Exercez-vousSlide22
Actions
Distinguer actions primaires et secondairesDistinction visuelle et spatialeÉviter les actions secondairesAligner les actions primaires et les éléments de saisieAfficher des rétroactions (feedback)Slide23
Primaire/secondaireSlide24
Rétroactions
Prise en compte de l’action modification du bouton, temps de recherche, chargementSuccès toujours indiquer quand les données sont validées (afficher, courriel, fichier etc.)ValidationSur le champ pour les données potentiellement source d’erreurÀ chaque changement de pageErreursPréventions/détection/correctionSlide25
Les erreurs
Mieux vaut prévenir Que guérirSlide26
Prévention des erreurs
Intitulés clairs et non ambigusÉventuellement légende pour les données complexesStatique, dynamique, à la demandeFormat des donnéesDate, téléphone, numéro de sécurité sociale etc.Soyez tolérants (514-255-221 ou 01 24 10 24 10)Minimiser la saisieRemplacer la saisie par des choix (calendrier)Date de naissance ?
Récapituler les données saisiesPossibilité de modifier sans tout effacerSlide27
ÉnervementSlide28
Détection/correction
Vérification Immédiate pour les données sources d’erreurDate d’arrivée < date de départÀ chaque page en généralPermet de corriger tout d’un coup (données dépendantes)Dans ce casUn message en haut de la pageExpliquant l’erreur et comment la corrigerEt mise en évidence visuelle des champs concernésDouble codage : couleur et gras
Ne pas sur-vérifier Slide29
ExempleSlide30
Formulaires sur les mobiles
Solutions plus moderneshttp://uxdesign.smashingmagazine.com/2010/03/11/forms-on-mobile-devices-modern-solutions/Slide31
SéquencementSlide32
DéfilementSlide33
Pour la route
Tenez compte de ces recommandations pour le projetAligner les intitulésPas de redondance de saisieRécapituler et vérifier les saisiesObservez les formulaires en ligne d’un œil critiqueTestez votre formulaire avant de le mettre en œuvre