Your SlideShare is downloading. ×
0
Audit formulaire
Audit formulaire
Audit formulaire
Audit formulaire
Audit formulaire
Audit formulaire
Audit formulaire
Audit formulaire
Audit formulaire
Audit formulaire
Audit formulaire
Audit formulaire
Audit formulaire
Audit formulaire
Audit formulaire
Audit formulaire
Audit formulaire
Audit formulaire
Audit formulaire
Audit formulaire
Audit formulaire
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Audit formulaire

702

Published on

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

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

Published in: Lifestyle
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
702
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Audit ergonomiqueformulaire
  • 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êtresProblé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 formulaireProblé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 visuelProblé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 radioProblé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 saisisProblé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 erreursProblé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 erreursProblé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.comNaviguer 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.comAider 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

×