analyse comparateur assurance

- Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com

1

Objectif

Recommandation

Critère

Audit ergonomiqueHP


2

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. Maquettes

- Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 16/01/2013

Objectif

Recommandation

Critère

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.

Lisibilité


4

Objectif

Recommandation

Critère Retro-zoning.

Identifier les zones perçus en premier. Zone foncé = perçus en premier.

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.

Deuxblocidentifiés, aucune différence

entre les boutons et images. Contenu utile noyé par

l’habillage graphique et

contenu informatif.


5

Objectif

Recommandation

Critère Utilisation des espaces blancs.

Permettre au visiteurs d’appréhender plus facilement la page.

Utiliser les blancs, aérer les informations, faciliter l’activité de balayage visuel et mental.


6

Objectif

Recommandation

Critère Bien distinguer les différents espace de la page.

Faciliter les processus de la perception. Une zone = une information. Faciliter le processus d’apprentissage.

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...)


7

Objectif

Recommandation

Critère Organisation de la page

Optimiser les blocs utiles

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.


8

Objectif

Recommandation

Critère Visibilité des ccontenuslorsque les feuilles de styles ou les images sont désactivées (css)

Faciliter la lecture des textes, les rendre visibles.

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 htmlpour 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.


9

Objectif

Recommandation

Critère Le contraste entre la couleur du texte et la couleur de son arrière-plan.

Faciliter la lecture (optimiser la mise en avant d’information.)

Accentuer le contrast entre chaque couleur de texte et son arrière-plan. (ref:Contrast Checker)


10

Objectif

Recommandation

Critère Espace entre les lignes et les paragraphes.

Facilité la lecture.

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 :

body { font-size:12px line-height: 18px; } 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..

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..

• Identificationdesportesdesortie;• Faciliter l’utilisation;• clarté de l’objectif, des fonctionnalités et des informations;

Navigation


12

Objectif

Recommandation

Critère Retour à la page d’accueil depuis toutes les pages.

Permettre aux utilisateurs de revenir sur la page d’accueil en cas de désorientation.

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

DevisMutuelle


13

Objectif

Recommandation

Critère

Faire ressortir les actions importante (plus facilement repérables,inciter à l’interactivité).

L’affordance des éléments.

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.

Un site web, fonctionne lorsqu’il fournit des réponses à ses utilisateurs et qu’il retranscrit les objectifs de communication de ses concepteurs. Les informations doivent être présentées de manière directement exploitable pour l’utilisateur et organisées en fonction de ses attentes.

Contenus


15

Objectif

Recommandation

Critère La taille des polices.

Facilité la lecture et la recherche d’information.

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)

16px avec la règle vu précédement, cela nous fait un interlignage de 16*1.5 : 24 px.

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..


16

Objectif

Recommandation

Critère Largeur des blocs de texte.

Facilité la lecture assidue et la lecture fuyante, la recherche d’information.

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 à notre comparateur !

DevisMutuelle.com leader français des comparateurs d’assurance santé. Nous recensons une quarantaine d’offres.

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..

Le 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 les menus.

Hyperliens


18

Objectif

Recommandation

Critère

Permettre aux utilisateurs d’indentifier facilement les liens au fil du texte ainsi que les blocs de navigation

Différenciés les hyperliens du reste du contenu.

Les hyperliens sont différenciés à l’aide des propriétés css de couleur de texte, de couleur d’arrière plan, 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.


19

Objectif

Recommandation

Critère

Faciliter l’identification des contenus déjà visités. Inciter à la navigation sur de nouvelle page.

Liens visités et non visités.

En dehors des menus de navigations, ne pas appliquer les même style css par défaut pour les liens non visités(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.

L’être humain n’aime pas attendre et encore moins l’internaute car il se sert d’internet pour gagner du temps. Lorsque la page n’apparaîtpassufisammentvite,il«zappe»etpassesurunautresite.

Serveur & Performance.


21

Objectif

Recommandation

Critère

Améliorer les performances.

Optimiser les styles (script css, javascript)

• 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.


22

Objectif

Recommandation

Critère

Laisser à l’utilisateur le contrôle des animations lors de la consultation du contenu. Ne pas perturber l’attentionen imposant des éléments pouvant gêner celle-ci. Permettre la consultation pas à pas des animations.

Contrôle des animations.

Soit supprimer cette animation. Soit doter systématiquement l’objet multimédia des moyens de contrôle nécessaire: démarrage, arrêt...


23

Objectif

Recommandation

Critère

Optimiser le temps de chargement des images.

Tailles des images.

Utiliser des images aux bonne dimensions.

dimension réèlle de l’image : 180px par 250

dimension côté client : 65px par 90px.

Recommandations ergonomique

- Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 16/01/2013

25

Objectif

Recommandation

Critère

analyse comparateur assurance

Documents