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

1. Audit ergonomique
formulaire

2. - Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com
• II. Audit ergonomique KelAssur : formulaire.
• L’objectif de cette recommandation est de présenter nos propositions d’optimisation des
formulaires.
• Exemples étudiés : les formulaires AUTO, la page de présentation des résultats.
2

3. - Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com
Élément Densité d’affichage. Disposition des éléments dans les fenêtres
Problématique ° Difficulté d’analyse du formulaire. ° Augmentation du temps de remplissage. ° Dilution de l’information.
Parcour d’action
° Rapprocher Les différents éléments d’interaction entre eux.
Recommandation
° Supprimer toute pollution visuel.
° Aligner les libellés à droite.
° Augmenter la taille des textes et des champs d’interaction. 3
° Réserver l’habillage graphique pour le reste de la page.

4. - Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com
Élément Alignement des champs et des libellés
Problématique ° 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é)
Recommandation ° Aligner les libellés du formulaire à droite.
4

5. - Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com
Élément Visibilité du bouton d’action principale.
Problématique ° Réduire l’analyse de la page. ° Permettre un apprentissage interne. ° Définir une logique d’utilisation.
° Les boutons d’action doivent être dans un format les détachant clairement du fond.
Recommandation
° 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. 5

6. - Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com
Élément Ordre des champs.
Problématique ° Optimiser le temps de remplissage d’analyse du formulaire.
° Miser sur les conventions et apprentissage extérieure.
Nom :
Prénom :
Adresse postal :
Code postal :
Ville :
Tel :
Adresse mail :
Recommandation ° Respecter les conventions et normes.
° Les utilisateurs ont l’habitude de remplir ces informations dans cette ordre. Ils liront moins les libellés.
6

7. - Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com
Élément Navigation dans le formulaire
Problématique ° Vue d’ensemble du processus de navigation dans lequel l’utilisateur est : tâche effectués et restantes
° Mettre les étapes en évidence.
Recommandation
° 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.
7

8. - Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com
Élément Architecture du site.
Problématique ° Cohérence sur les différentes pages du site. ° Faciliter la familiarisation.
page 1 page 1
page 2
page 2
page 3
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...)
° Prévoir un gabarit type pour l’ensemble des formulaires
Recommandation
° Laisser la navigation principale sur l’ensemble du site formulaire et tableau de comparaison compris.
° C’est l’utilisateur qui à le contrôle.
8

9. - Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com
Élément Vitesse de chargement / pollution visuel
Problématique 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.
Recommandation ° 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.
9

10. - Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com
Élément Interprétation des tableaux
Problématique ° Limiter le temps d’analyse du tableau. ° Optimiser la compréhension.
Trop d’éléments inutiles, trop d’habillage graphique. Trop de pollution visuel.
° Choisir les informations à mettre en avant en fonction des objectifs et de l’utilisateur.
Recommandation
° Miser sur l’apprentissage externe et utiliser les styles par défauts des éléments du tableau. (bouton, slides,
case à cocher...)
10 ° Griser les cellules dont les options ne sont pas inclues.)
° Aérer le texte et les cellules.

11. - Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com
Élément Le bouton radio
Problématique Prend beaucoup de place à l’écran et complique la lecture du formulaire.
Recommandation ° 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.
11

12. - Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com
Élément Les dates
Problématique Problème d’interprétation. Facilité la lecture du format demandé et optimiser la vitesse de remplissage.
° Faciliter le remplissage.
Recommandation
° 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.
12 ° Valider à la volée.
° Interdire les dates non valide (antérieures à la date du jour pour le libellé de l’exemple).

13. - Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com
Élément Comportement des champs de saisis
Problématique Faciliter le remplissage, guider l’utilisateur.
Non sélectionné ex : 01/10/2013 Pas de contour
Sélectionné.
l’aide passe à 50% ex : 01/10/2013 Contour 1px
d’opacité
L’aide disparait 01/10 Contour 1px
Après suppression
du contenu,le champ ex : 01/10/2013 Pas de contour
retrouve son aspect
d’origine
13

14. - Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com
Élément Comportement des zones sélectionnées et / ou survolées.
Problématique ° Situer rapidement l’emplacement du champ sélectionné. ° Faciliter la mise en avant.
Recommandation ° 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.
14

15. - Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com
Élément Protection contre les erreurs
Problématique ° Limiter en amont les erreurs potentielles.
° Autoriser le type de données en fonction du champ.
Recommandation ° 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...
15

16. - Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com
Élément Champ obligatoire VS optionnel
Problématique ° Prévenir l’utilisateur des champs optionnels et des champs obligatoires.
Cas 1: Tous les champs obligatoires :
Tous les champs sont obligatoires
Cas 2: Seulement quelques champs optionnels et une très grande majorité de champs obligatoires :
Indiquez uniquement les champs optionnels par un texte (Optionnel) ou (Facultatif)
° L’indiquer visiblement en début de formulaire et non à la fin.
Recommandation
° Si il le sont tous, l’indiquer.
° Si c’est seulement certain, l’indiquer en expliquant comme les différencier.
16

17. - Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com
Élément Détection des erreurs
Problématique Ne pas survalider le formulaire.
La pop-up revient tout le temps même après l’avoir fermée.
° Être flexible sur la détection des erreurs et la validation en temps réel.
Recommandation
° Une sur-validation risque d’énerver l’utilisateur...
° Exemple autoriser l’utilisation de caractères comme + et () pour le champ téléphone.
17

18. - Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com
Élément Affichage des messages d’erreur et aide à la correction
Problématique Qu’affiche-t-on dans les messages d’erreur et comment affiche-t-on ces messages ?
Aider l’utilisateur.
° Afficher l’explication en rouge et en gras, sous le champ concerné.
Recommandation
° 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.
18

19. - Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com
Naviguer sans perdre le nord.
• Regrouper les items selon une logique attendue par l’utilisateur (tri de carte)
• Les items doivent ê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.
19

20. - Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com
Faciliter la tâche de renseignement :
• 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.
20

21. - Rapport d’audit ergonomique des tunnels de conversions du site KelAssur.com
Aider l’utilisateur à éviter et à corriger ses erreurs.
• 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.
• Soigner les messages d’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.
21