21
Audit ergonomique formulaire

Audit formulaire

Embed Size (px)

DESCRIPTION

L’objectif de cette recommandation est de présenter nos propositions d’optimisation des formulaires.

Citation preview

Page 1: Audit formulaire

Audit ergonomique formulaire

Page 2: Audit formulaire

- Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com

2

• II.AuditergonomiqueKelAssur:formulaire.

• L’objectifdecetterecommandationestdeprésenternospropositionsd’optimisationdesformulaires.

• Exemplesétudiés:lesformulairesAUTO,lapagedeprésentationdesrésultats.

Page 3: Audit formulaire

- Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com

3

Problématique

Recommandation

Élément Densité d’affichage. Disposition des éléments dans les fenêtres

° Difficulté d’analyse du formulaire. ° Augmentation du temps de remplissage. ° Dilution de l’information.

° Rapprocher Les différents éléments d’interaction entre eux. ° Supprimer toute pollution visuel. ° Aligner les libellés à droite. ° Augmenter la taille des textes et des champs d’interaction. ° Réserver l’habillage graphique pour le reste de la page.

Parcour d’action

Page 4: Audit formulaire

- Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com

4

Problématique

Recommandation

Élément

° Aligner les libellés du formulaire à droite.

Alignement des champs et des libellés

° Optimiser l’organisation visuelle du formulaire. ° Optimiser la liaison libellés champs.

Distance entre la fin du libéllé et la zone d’action (Parcour occulométrique simplifié)

Page 5: Audit formulaire

- Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com

5

Problématique

Recommandation

Élément

° Les boutons d’action doivent être dans un format les détachant clairement du fond. ° Leur surface cliquable doivent être étendues. ° Utiliser plutôt des verbes, éviter les libellés trop longs. ° Il faut Éviter les boutons composés uniquement d’une icône.

° Réduire l’analyse de la page. ° Permettre un apprentissage interne. ° Définir une logique d’utilisation.

Visibilité du bouton d’action principale.

Page 6: Audit formulaire

- Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com

6

Problématique

Recommandation

Élément

° Respecter les conventions et normes.° Les utilisateurs ont l’habitude de remplir ces informations dans cette ordre. Ils liront moins les libellés.

° Optimiser le temps de remplissage d’analyse du formulaire. ° Miser sur les conventions et apprentissage extérieure.

Ordre des champs.

Nom :

Prénom :

Adresse postal :

Code postal :

Ville :

Tel :

Adresse mail :

Page 7: Audit formulaire

- Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com

7

Problématique

Recommandation

Élément

° Mettre les étapes en évidence. ° Il faut que cela devienne un repaire pour l’utilisateur. ° Plus il saura où il en est plus il acceptera de rester cohérent avec son action de départ.

° Vue d’ensemble du processus de navigation dans lequel l’utilisateur est : tâche effectués et restantes

Navigation dans le formulaire

Page 8: Audit formulaire

- Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com

8

Problématique

Recommandation

Élément

° Prévoir un gabarit type pour l’ensemble des formulaires° Laisser la navigation principale sur l’ensemble du site formulaire et tableau de comparaison compris.° C’est l’utilisateur qui à le contrôle.

° Cohérence sur les différentes pages du site. ° Faciliter la familiarisation.

Présence du menu de navigation sur un formulaire,absent sur d’autre....

(plus généralement le site propose différente mise en page...)

Architecture du site.

page 1

page 2

page 3

page 1

page 2

Page 9: Audit formulaire

- Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com

9

Problématique

Recommandation

Élément

° Utiliser au maximum l’affichage standard, miser sur les conventions et normes. ° Utiliser les boutons par défaut du navigateur, les slides par défaut et supprimer les images non nécessaires.

Les temps de chargement sont beaucoup trop longs. Trop d’éléments à charger en plus des webservices. Trop de script en local, trop de fichier non minifié trop d’images.

Vitesse de chargement / pollution visuel

Page 10: Audit formulaire

- Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com

10

Problématique

Recommandation

Élément

° Choisir les informations à mettre en avant en fonction des objectifs et de l’utilisateur. ° Miser sur l’apprentissage externe et utiliser les styles par défauts des éléments du tableau. (bouton, slides, case à cocher...) ° Griser les cellules dont les options ne sont pas inclues.) ° Aérer le texte et les cellules.

° Limiter le temps d’analyse du tableau. ° Optimiser la compréhension.Trop d’éléments inutiles, trop d’habillage graphique. Trop de pollution visuel.

Interprétation des tableaux

Page 11: Audit formulaire

- Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com

11

Problématique

Recommandation

Élément

° Remplacer les boutons radio par des menus déroulants.° Cette recommandation n’est pas à appliquer sur les opt-in partenaire qui eux nécessite un aspect différent.

Prend beaucoup de place à l’écran et complique la lecture du formulaire.

Le bouton radio

Page 12: Audit formulaire

- Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com

12

Problématique

Recommandation

Élément

Problème d’interprétation. Facilité la lecture du format demandé et optimiser la vitesse de remplissage.

° Faciliter le remplissage. ° Donner un exemple qui s’efface lors que l’on clique sur-le-champ. ° Interndire les lettres ou tout autres caractères non nécessaire. ° Valider à la volée. ° Interdire les dates non valide (antérieures à la date du jour pour le libellé de l’exemple).

Les dates

Page 13: Audit formulaire

- Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com

13

Problématique

Élément

Faciliter le remplissage, guider l’utilisateur.

Comportement des champs de saisis

ex : 01/10/2013

ex : 01/10/2013

ex : 01/10/2013

01/10

Non sélectionné Pas de contour

Pas de contour

Contour 1px

Contour 1px

Sélectionné. l’aide passe à 50%d’opacité

L’aide disparait

Après suppressiondu contenu,le champ retrouve son aspect d’origine

Page 14: Audit formulaire

- Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com

14

Problématique

Recommandation

Élément

° Modifier le focus par défaut afin de rendre bien plus visible l’objet sélectionné. ° Modifier la couleur de fond de chaque cellule d’une ligne au survole de la souris.

° Situer rapidement l’emplacement du champ sélectionné. ° Faciliter la mise en avant.

Comportement des zones sélectionnées et / ou survolées.

Page 15: Audit formulaire

- Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com

15

Problématique

Élément

° Autoriser le type de données en fonction du champ. ° Autoriser l’emploi des chiffres pour la date, mais pas des caractères alphabétique. ° Ne pas proposer de rentrer une date 2012 via le calendrier s’il n’est pas possible de débuter un contrat avant la date actuel. ° Autoriser uniquement les chiffres pour le code postal...

Recommandation

° Limiter en amont les erreurs potentielles.

Protection contre les erreurs

Page 16: Audit formulaire

- Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com

16

Problématique

Recommandation

Élément

° L’indiquer visiblement en début de formulaire et non à la fin. ° Si il le sont tous, l’indiquer. ° Si c’est seulement certain, l’indiquer en expliquant comme les différencier.

° Prévenir l’utilisateur des champs optionnels et des champs obligatoires.

Champ obligatoire VS optionnel

Cas1:Tousleschampsobligatoires:

Tous les champs sont obligatoires

Cas2:Seulementquelqueschampsoptionnelsetunetrèsgrandemajoritédechampsobligatoires:

Indiquez uniquement les champs optionnels par un texte (Optionnel) ou (Facultatif)

Page 17: Audit formulaire

- Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com

17

Problématique

Élément

Recommandation ° Être flexible sur la détection des erreurs et la validation en temps réel. ° Une sur-validation risque d’énerver l’utilisateur... ° Exemple autoriser l’utilisation de caractères comme + et () pour le champ téléphone.

Ne pas survalider le formulaire.

La pop-up revient tout le temps même après l’avoir fermée.

Détection des erreurs

Page 18: Audit formulaire

- Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com

18

Problématique

Élément

Recommandation ° Afficher l’explication en rouge et en gras, sous le champ concerné. ° Mise en valeur du fond du champ mal renseigné pour attirer l’attention de l’utilisateur.° Éviter les pop up.

° Lister toutes les erreurs en même temps.

Qu’affiche-t-on dans les messages d’erreur et comment affiche-t-on ces messages ? Aider l’utilisateur.

Affichage des messages d’erreur et aide à la correction

Page 19: Audit formulaire

- Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com

19

Naviguersansperdrelenord.

• Regrouper les items selon une logique attendue par l’utilisateur (tri de carte)

• Lesitemsdoiventêtre:

• signifiant• complémentaire • exclusifs.

• Toujours indiquer ou l’utilisateur se situe dans le formulaire et dans le site. • Eviter de répéter les demandes de saisis. • Éviter l’ouverture de pop-up• Modifier la couleur de fond de chaque cellule au survole de la souris.

Page 20: Audit formulaire

- Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com

20

Faciliterlatâchederenseignement:

• Limiter le nombre de données demandées au strict nécessaire.• Permettre le passage de champ en champ à l’aide de la touche TAB• Permettre à l’utilisateur de voir l’ensemble des données qu’il a saisis dans un formulaire.• Ordonner des champs selon une logique attendue par l’utilisateur (Nom puis prénom puis Adresse ...)• Fournir des aides et légendes. • Les libellés doivent être cliquables aussi bien que les champs. • Le bouton d’action principale doit-être visible et suffisamment près du formulaire.

Page 21: Audit formulaire

- Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com

21

Aiderl’utilisateuràéviteretàcorrigerseserreurs.

• Indiquer le format de renseignement attendu.• Certaines données peuvent être validées à la volée. • Toutes les erreurs sont traitées en une seule fois.

• Soignerlesmessagesd’erreur:

• L’apparence des messages d’erreurs doivent attirer l’attention. • Fournir un message spécifique, contextuel à chaque champ mal renseigné.• Mettre en valeur visuellement les champs mal renseignés.• Expliquer l’erreur et proposer une piste de résolution.