1 ihm m2-ifl/du-tice, upmc [email protected] faciliter la tâche exemple : les formulaires...

33
1 IHM M2-IFL/DU-TICE, UPMC [email protected] Faciliter la tâche Exemple : Les formulaires Cours 4 bis

Upload: marceau-bourguignon

Post on 03-Apr-2015

107 views

Category:

Documents


1 download

TRANSCRIPT

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

1

IHM

M2-IFL/DU-TICE, [email protected]

Faciliter la tâcheExemple : Les formulaires

Cours 4 bis

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

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

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

3

Cours 4 bis: Formulaires

Types de formulaires Principes Les étapes Points clés

ÉlémentsPrésentationInteractionAideErreurs

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

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

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

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

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

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

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

7

Principes : Van Duyne et al.Montrer l’intérêt de remplir le formulaireSoigner 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 saisiePrévoir les erreurs et faciliter leur

correction

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

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

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

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

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

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

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

11

Éléments de formulaire

Motiver, grouper

Aide explicite

Double liste

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

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

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

13

Intitulés Au-dessus

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

14

Intitulés à droite

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

15

Intitulés à gauche

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

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

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

17

Sur mobile

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

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

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

19

Séquencement

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

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

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

21

Exercez-vous

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

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)

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

23

Primaire/secondaire

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

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 page

Erreurs Préventions/détection/correction

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

25

Les erreurs

Mieux vaut prévenirQue guérir

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

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

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

27

Énervement

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

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

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

29

Exemple

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

30

Formulaires sur les mobilesSolutions plus moderneshttp://uxdesign.smashingmagazine.com/

2010/03/11/forms-on-mobile-devices-modern-solutions/

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

31

Séquencement

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

32

Défilement

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

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