• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Audit formulaire
 

Audit formulaire

on

  • 593 views

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.

Statistics

Views

Total Views
593
Views on SlideShare
526
Embed Views
67

Actions

Likes
0
Downloads
2
Comments
0

2 Embeds 67

http://www.laurent-chastrusse.fr 59
http://laurent-chastrusse.fr 8

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Audit formulaire Audit formulaire Presentation Transcript

    • Audit ergonomiqueformulaire
    • - 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
    • - 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.
    • - 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
    • - 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
    • - 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
    • - 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
    • - 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
    • - 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
    • - 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.
    • - 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
    • - 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).
    • - 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
    • - 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
    • - 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
    • - 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
    • - 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
    • - 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
    • - 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
    • - 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
    • - 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