Upload
uxclaurent
View
732
Download
3
Embed Size (px)
DESCRIPTION
L’objectif de cette recommandation est de présenter nos propositions d’optimisation des formulaires.
Citation preview
Audit ergonomique 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.
- 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
- 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é)
- 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.
- 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 :
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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.
- 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
- 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)
- 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
- 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
- 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.
- 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.
- 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.