Analyse comparateur assurance

1 141 vues

Publié le

L’objectif de cette recommandation est de présenter des propositions d’optimisation des 2 homepages :

http://www.kelassur.com/
http://www.devismutuelle.com/

Exemple étudié :
le site www.devismutuelle.com

La recommandation va porter sur les 3 points clés de l’analyse ergonomique d’un site Internet :

La Visibilité de l’objectif du site (la comparaison d’assurances)
L’accessibilité (mise en avant des contenus essentiels aux utilisateurs)
L’architecture de l’information (cohérence de la navigation)

Ces points seront juger au travers des différents critères d’analyse :

Lisibilité
Navigation
Contenus & hyperliens
Autres points

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 141
Sur SlideShare
0
Issues des intégrations
0
Intégrations
96
Actions
Partages
0
Téléchargements
30
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Analyse comparateur assurance

  1. 1. - Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.comCritèreObjectifRecommandation Audit ergonomique HP 1
  2. 2. - Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com I. Audit ergonomique KelAssur : Home page. L’objectif de cette recommandation est de présenter nos propositions d’optimisation des 2 homepages : http://www.kelassur.com/ http://www.devismutuelle.com/ Exemple étudié : le site www.devismutuelle.com Notre recommandation va porter sur les 3 points clés de l’analyse ergonomique d’un site Internet : • La Visibilité de l’objectif du site (la comparaison d’assurances) • L’accessibilité (mise en avant des contenus essentiels aux utilisateurs) • L’architecture de l’information (cohérence de la navigation) Ces points seront juger au travers des différents critères d’analyse : 1. Lisibilité 2. Navigation 3. Contenus & hyperliens 4. Autres points 5. Maquettes2
  3. 3. - Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 16/01/2013CritèreObjectifRecommandation Lisibilité La façon dont les fontionnalités sont oganisées détermine quand et où seront présentées les informations et les fonctions dont l’utilisateur a besoin. Cette organisation et le point déterminant de l’utilisabilité d’un système intéractif.
  4. 4. - Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com Critère Retro-zoning. Objectif Identifier les zones perçus en premier. Zone foncé = perçus en premier. Recommandation Bien différencier les différents espace de la page (barre de navigation, colonnes de contenu, info complémentaires, etc.) En démarquant clairement les zones. Deux bloc identifiés, aucune différence entre les boutons et images. Contenu utile noyé par l’habillage graphique et contenu informatif.4
  5. 5. - Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.comCritère Utilisation des espaces blancs.Objectif Permettre au visiteurs d’appréhender plus facilement la page.Recommandation Utiliser les blancs, aérer les informations, faciliter l’activité de balayage visuel et mental. 5
  6. 6. - Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com Critère Bien distinguer les différents espace de la page. Objectif Faciliter les processus de la perception. Une zone = une information. Faciliter le processus d’apprentissage. Recommandation Bien différencier les différents espace de la page (barre de navigation, colonnes de contenu, info complémentaires, etc.) En démarquant clairement les zones. S’appuyer si nécessaire sur Les lois de Gestalt (La loi de proximité, La loi de similitude...)6
  7. 7. - Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.comCritère Organisation de la pageObjectif Optimiser les blocs utilesRecommandation Supprimer les visuels polluant, les foncitonnalités inutiles. Épurer les contenus. L’information principale et bien plus visible en supprimant tout le texte inutile et éléments perturbateur. 7
  8. 8. - Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com Critère Visibilité des ccontenuslorsque les feuilles de styles ou les images sont désactivées (css) Objectif Faciliter la lecture des textes, les rendre visibles. Recommandation S’assurer que le contenu est correctement restitués et que l’information n’est pas invisible en cas d’absence d’image et de feuille de style. Sans image le niveau d’information est nul. voir invisible. Aucun éléments n’a d’affordance. Utiliser au maximum le css et les attributs html pour restituer la pertinence et l’utiliter de chaque éléments. Toujours mettre un fond de couleur contrastant avec le texte si les images ne sont pas activées. Renseigner les attribut Alt de manière à ce qu’il retranscrive la fonctionnalité des éléments. Au lieu de «Assurance mutuelle jeune» préférer «Comparer les assurance mutuelle jeune qui est plus explicite.8
  9. 9. - Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.comCritère Le contraste entre la couleur du texte et la couleur de son arrière-plan.Objectif Faciliter la lecture (optimiser la mise en avant d’information.)Recommandation Accentuer le contrast entre chaque couleur de texte et son arrière-plan. (ref:Contrast Checker) 9
  10. 10. - Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com Critère Espace entre les lignes et les paragraphes. Objectif Facilité la lecture. Recommandation Déterminer dans le css l’interlignage en fonction du corp de la police. L’interlignage idéal sur le web ce calcule ainsi : Auteur de la police x par 1.5 Exemple pour calculer l’interlignage idéal : Economisez sur votre mutuelle santé grâce à notre comparateur ! body { DevisMutuelle.com est le leader français des sites comparateurs spécialisés dans l’assurance font-size:12px complémentaire santé. Vous souhaitez souscrire un contrat au meilleur prix pour vous ou votre famille ? line-height: 18px; Notre comparateur en ligne recense une quarantaine d’assurances et mutuelles parmi les plus grandes } marques. Que vous recherchiez une mutuelle optique ou dentaire, quelques secondes suffisent.. 12*1.5 = 18px Economisez sur votre mutuelle santé grâce à notre comparateur ! DevisMutuelle.com est le leader français des sites comparateurs spécialisés dans l’assurance complémentaire santé. Vous souhaitez souscrire un contrat au meilleur prix pour vous ou votre famille ? Notre comparateur en ligne recense une quarantaine d’assurances et mutuelles parmi les plus grandes marques. Que vous recherchiez une mutuelle optique ou dentaire, quelques secondes suffisent..10
  11. 11. Navigation • Identification des portes de sortie; • Faciliter l’utilisation; • clarté de l’objectif, des fonctionnalités et des informations;
  12. 12. - Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com Critère Retour à la page d’accueil depuis toutes les pages. Objectif Permettre aux utilisateurs de revenir sur la page d’accueil en cas de désorientation. Recommandation Placer ce lien dans le menu de navigation principal en première position à gauche. Le nommer «Accueil» pour l’identifier facilement. L’accompagner si nécessaire d’un picto. Sur la version actuelle du site, deux entitées coéxistent... Kelassur et DevisMutuelle, seulement l’utilisateur n’a pas à fournir un effort supplémentaire pour savoir que la page d’accueil par lauquelle il est arrivé ne s’appel pas accueil mais Comparateur Kelassur. Pour lui la première page et la page d’accueil, autant lui donner ce qu’il cherche facilement. Kelassur DevisMutuelle12
  13. 13. - Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com Critère L’affordance des éléments. Objectif Faire ressortir les actions importante (plus facilement repérables,inciter à l’interactivité). Recommandation Adapter un niveau de visibilité proportionnelle à l’importance des objectifs (traitement graphique reconnaissable,un bouton ressemble à un bouton.Les boutons ne sont pas assez détaché et différencier du reste des visuels. Leur affordance et nul. 13
  14. 14. ContenusUn site web, fonctionne lorsqu’il fournit des réponses à ses utilisateurset qu’il retranscrit les objectifs de communication de ses concepteurs.Les informations doivent être présentées de manière directementexploitable pour l’utilisateur et organisées en fonction de ses attentes.
  15. 15. - Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com Critère La taille des polices. Objectif Facilité la lecture et la recherche d’information. Recommandation Idéalement préférer un corp 16px pour le corp de texte. 13 ou 14px pour la moyenne des site (de moins en moins vrai avec les nouveaux ratio de pixel (ipad, iphone... tablette)Economisez sur votre mutuelle santé grâce à notre comparateur !DevisMutuelle.com est le leader français des sites comparateurs spécialisés dans l’assurancecomplémentaire santé. Vous souhaitez souscrire un contrat au meilleur prix pour vous ou votre famille ?Notre comparateur en ligne recense une quarantaine d’assurances et mutuelles parmi les plus grandesmarques. Que vous recherchiez une mutuelle optique ou dentaire, quelques secondes suffisent..16px avec la règle vu précédement, cela nous fait un interlignage de 16*1.5 : 24 px. 15
  16. 16. - Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com Critère Largeur des blocs de texte. Objectif Facilité la lecture assidue et la lecture fuyante, la recherche d’information. Recommandation Aller à l’essentiel, faire des phrases courte et incitative. Une idée par paragraphe. Ne pas faire des lignes trop longue ou trop courte. De 52 à 80 caractères par ligne. 65 caractères étant considéré comme idéal. Economisez sur votre mutuelle santé grâce à notre comparateur ! DevisMutuelle.com est le leader français des sites comparateurs spécialisés dans l’assurance complémentaire santé. Vous souhaitez souscrire un contrat au meilleur prix pour vous ou votre famille ? Notre comparateur en ligne recense une quarantaine d’assurances et mutuelles parmi les plus grandes marques. Que vous recherchiez une mutuelle optique ou dentaire, quelques secondes suffisent.. Economisez à notre comparateur ! DevisMutuelle.com leader français des comparateurs d’assurance santé. Nous recensons une quarantaine d’offres.16
  17. 17. HyperliensLe lien est le composant de base de la navigation web. Il permetà l’internaute de se déplacer dans le site au même titre que lesmenus.
  18. 18. - Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com Différenciés les hyperliens du reste du contenu. Critère Permettre aux utilisateurs d’indentifier facilement les liens au fil du texte ainsi que les blocs de navigation Objectif Les hyperliens sont différenciés à l’aide des propriétés css de couleur de texte, de couleur d’arrière plan, Recommandation de soulignements, de mise en gras, de bordures ... police... Ils sont affordant. Qui comprendrait facilement que les éléments entouré de rouges sont cliquable. Il ne sont pas assez différents du contenu.18
  19. 19. - Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.comCritère Liens visités et non visités.Objectif Faciliter l’identification des contenus déjà visités. Inciter à la navigation sur de nouvelle page. En dehors des menus de navigations, ne pas appliquer les même style css par défaut pour les liens non visitésRecommandation (sélecteurs a ou a: link) et pour les liens visités (a : visited). Laisser le style par défaut du navigateur qui gère nativement cela. 19
  20. 20. Serveur & Performance.L’être humain n’aime pas attendre et encore moins l’internautecar il se sert d’internet pour gagner du temps. Lorsque la pagen’apparaît pas sufisamment vite, il «zappe» et passe sur un autresite.
  21. 21. - Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.comCritère Optimiser les styles (script css, javascript)Objectif Améliorer les performances.Recommandation • Supprimer les espaces non nécessaire et les commentaires dans les fichiers script (css, javascript) (ref : compressor) • Placer les appels aux script en fin de code. • Placer les fonctions de scripts dans des fichiers externes. 21
  22. 22. - Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com Critère Contrôle des animations. Objectif Laisser à l’utilisateur le contrôle des animations lors de la consultation du contenu. Ne pas perturber l’attention en imposant des éléments pouvant gêner celle-ci. Permettre la consultation pas à pas des animations. Recommandation Soit supprimer cette animation. Soit doter systématiquement l’objet multimédia des moyens de contrôle nécessaire: démarrage, arrêt...22
  23. 23. - Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.comCritère Tailles des images. Optimiser le temps de chargement des images.ObjectifRecommandation Utiliser des images aux bonne dimensions. dimension réèlle de l’image : 180px par 250 dimension côté client : 65px par 90px. 23
  24. 24. Recommandationsergonomique
  25. 25. - Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 16/01/2013CritèreObjectifRecommandation 25
  26. 26. 26
  27. 27. 27
  28. 28. 28

×