Analyse comparateur assurance

-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
1
Objectif
Recommandation
Critère
Audit ergonomique
Pôle créa.

2
Objectif
Recommandation
Critère
Version Modifié Par Action
0.1 05/12/2012
Fredéric Meunier & Laurent
chastrusse
Évaluation

3
Objectif
Recommandation
Critère
1. AUDIT ERGONOMIQUE PAGE DEVISMUTUELLE.COM
1.1 SYNTHÈSE................................................................................................4
1.3 LISIBILITÉ...............................................................................................9
1.4 NAVIGATION...........................................................................................17
1.5 CONTENUS...............................................................................................26
1.7 FORMULAIRE...........................................................................................30
1.9 CODE.......................................................................................................34
1.10 HYPERLIENS..........................................................................................36
1.11 SERVEUR & PERFORMANCE....................................................................40
1.6 FICHIER MULTIMÉDIA.............................................................................46
1.8 ALTERNATIVE..........................................................................................47
1.9 PRÉSENTATION.......................................................................................48
2 RECOMMANDATIONS
2.1 RECOMMANDATIONS ERGONOMIQUES....................................................49

4
1.1 synthèse
Aujourd’hui le site manque :
• De visibilité sur l’objectif du site et sur la valeur ajoutée comparée à ces concurrents.
• D’accessibilité, les contenus essentiels aux utilisateurs ne sont pas assez mis en avant.
Trop d’images, trop de contenu informatif, trop d’éléments à classifier pour l’utilisateur.
• D’une architecture de l’information optimisée. Les utilisateurs passent d’une page à
une autre sans pour autant qu’elles ne se ressemblent. Il est difficile de se situer dans le
site. Difficile de trouver les informations utiles.
Le site manque de cohérence (blocs absent sur certaines pages, présent sur d’autre. Style
graphique différent d’une page à une autre...) Et les temps de chargement sont beaucoup
trop longs.
Actuellement le site est principalement optimisé pour le référencement naturel au détriment de
l’utilisateur, notamment dans sa perception de l’information.

Grille d’analyse ergonomique DevisMutuelle
Voir fichier excel «Grille d’analyse»
La première partie de la grille fût rempli par une personne extérieure à assu2000 :
L’URL est-elle simple et explicite ? (réponse oui)
L’activité de kelassur est-elle aisément identifiable ? (Oui
après des titres)
Le contenu du site est-il facilement identifiable ? (non)
L’objectif du site est-il clair ? (non)
Accessibilité : 1,9 /10 Navigation : 2,6 /10 Lisibilité : 0,6 /10

6
Navigation 5.3
%
zone de connexion
1.65 %
Identification du
site 6.81 %
Contenu informatif
27.46 %
Habillage graphique
16.37 %
Call to Action
6.57%
espace blanc
19.63 %
Répartition selon la nature des éléments, Architecture de
l’information bottom up. Effort principale sur :
Référencement
( 27.46%)
Contenu utile
(13.38%)

7
Rétro-zonning.
Zone foncé = identifiées en premier
Deux bloc son identifiés, cependant aucune différence entre les boutons et image.
Le bloc de droite ne fait ressortir aucunes informations car les textes ne sont pas lisible.
Contenu utile noyé par l’habillage graphique et contenu informatif.

Objectif
Recommandation
Critère

9
Objectif
Recommandation
Critère
La façon dont les foncionnalités sont oganisées détermine quand
et où seront présenté 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é

10
Objectif
Recommandation
Critère La page ne possède pas de Scroll stopper.
Ne pas donner l’impression que la page est terminée alors qu’elle ne l’est pas.
Éviter les grands espaces vide, d’autant plus s’il court sur toutes la largeur de la page.
Couper un élément du design au niveau de la ligne de flottaison pour inciter à scroller.
Le design ne montre pas de façon explicite que du contenu se trouve en dessous de ce qui est visible.
Le fond gris accentue cette idée de pied de page.
LIsibilité

11
Objectif
Recommandation
Critère La page utilise le blanc pour aéré la page.
Permettre au visiteurs d’appréhender mentalement plus facilement la page.
Attention à ne pas l’employer à outrance : limiter le blanc facilite l’activité de balayage visuel et mental.
Lisibilité

12
Objectif
Recommandation
Critère Bien distinguer les différents espace de la page.
Faciliter les processus de la perception et de la représentation mentale. Une zone égale 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 faisant varier les formats de présentation et en démarquant clairement les zones.
S’appuyer si nécessaire sur Les lois de Gestalt (La loi de proximité, La loi de similitude...)
LIsibilité

13
Objectif
Recommandation
Critère La page web est bien organisé.
Plus une page web contient d’objets, plus elle sera difficile à intégrer.
Supprimer tout ce qui est inutile.
L’information principale et bien plus visible en supprimant tout le
texte inutile et éléments perturbateur.
Lisibilité

14
Objectif
Recommandation
Critère Dans chaque page Web, le contenu visible reste-t-il présent lorsque les feuilles de styles ou les images
sont désactivées ?
Faciliter la lecture des textes, les rendre visibles. Même en cas de connexion ralentit, faible.
Réduire le temps de chargement. éviter de rendre des informations importantes invisible
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. (connexion lente apparition des images tardivement.)
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.
LIsibilité

15
Objectif
Recommandation
Critère Dans chaque page Web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il
suffisamment élevé ?
Faciliter la lecture à l’écran, la recherche et la mise en avant d’information.
Vérifier le contrast entre chaque couleur de texte et son arrière-plan à l’aide de l’outil Contrast Checker.
Le niveau AA permet un contrast valide en terme d’accessibilité et d’aide à la lecture.
Lisibilité

16
Objectif
Recommandation
Critère Pour chaque page Web, l’espace entre les lignes et les paragraphes est-il suffisant ?
Facilité la lecture et la recherche d’information.
Construire le design sur une grille horizontale.
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..
LIsibilité

Sur le web, si un site et difficile à utiliser, les gens partent. Si la page
d’attérissage, ne parvient pas à énoncer clairement ce qu’elle est
censée proposer et ce que les utilisateurs peuvent faire sur le site, les
gens partent. Si l’utilisateur se perd, il part. Si les informations d’un
site web sont difficiles à lire ou ne répondent pas aux questions des
utlisateurs cibles, il partent.
Navigation

18
Objectif
Recommandation
Critère Il est possible de revenir à la page d’accueil depuis toutes les pages.
Permettre aux utilisateurs de revenir en page d’accueil en cas de désorientation. Identifier le lien principal
permettant d’accéder au site.
Placer ce lien dans la menu de navigation principal en première position à gauche. Le nommer «Accueil»
car facilement identifiable. L’accompagner si nécessaire d’un icon graphique.
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.
Navigation

19
Objectif
Recommandation
Critère Chaque page affiche une information permettant de connaître son emplacement dans l’arborescence du site.
Permettre à l’utilisateur de déterminer son emplacement dans le site. Faciliter la navigation dans l’arborscence
des contenus.
Fournir un fil d’Ariane au début de la zone de contenu principal de la page.
Le fil d’ariane est le moyen le plus commun et le plus familier aux utilisateurs pour se situer
rapidement dans l’organisation des contenus. Il commence par un lien vers la page d’accueil, suivi des
liens menant aux rubriques et sous-rubriques éventuelles où se trouve la page et se termine par la
page elle-même. Il est préférable de s’en tenir à une forme courante de fil d’ariane, utilisant de simple
signes de supériorité en guise de séparateurs. Chaque item présent dans le fil d’ariane est un lien vers
la page de niveau correspondant, à l’exception du dernier élément qui reproduit simplement le titre de
la page.
Navigation

20
Objectif
Recommandation
Critère La navigation sur le site ne provoque pas l’ouverture de nouvelles fenêtres.
Fournir aux utilisateurs une continuité dans la navigation. Éviter les changements de contexte suceptible de
désorienter des utilisateur d’aide technique.
Ne pas recourir aux techniques Javascript ou HTML (attribut target) forçant l’ouverture d’un lien dans une nouvelle
fenêtre du navigateur.
Éléments concernés :
<a href=»http://www.facebook.com/kelassur» title=»Suivez-nous sur Facebook» target=»_blank» class=»Facebook»> </a>
<a href=»http://twitter.com/kelassur» title=»Suivez-nous sur Twitter» target=»_blank» class=»Twitter»> </a>
Navigation

21
Objectif
Recommandation
Critère L’utilisateur est averti des ouvertures de nouvelles fenêtres.
Permettre à l’utilisateur d’anticiper le résultat de l’activation d’un lien. Permettre l’utilisation de la fonction backup
du clavier et de l’agent utilisateur pour revenir sur le site.
Ajouter une mention du type «nouvelle fenêtre» soit directement dans le libellé du lien, soit dans son attribut title
qui doit alores reprendre et compléter le libellé. Soit l’indiquer plus explicitement sur le titre.
Ouvrir le lien dans la même fenêtre si elles pointent vers d’autres pages internes du site : Les
utilisateurs ont pris pour habitude d’utiliser le bouton retour du navigateur pour revenir à l’endroit où ils
étaient. Or quand une nouvelle fenêtre s’ouvre, il n’y a pas de page précédente où ils peuvent aller. Cela
provoque la frustration et la désorientation de la plupart des utilisateurs.
Indiquer si un lien pointe vers un site externe (cc petit icone)
Navigation

22
Objectif
Recommandation
Critère Le menu de navigation doit ressortir visuellement
Le distinguer du reste de la page car élément le plus important du site. Facilité le repérage et la navigation
dans le site.
Attention toutefois à ne pas en faire un élément hors site.
PLacé comme tel avec le contrast actuellement le menu de navigation n’est pas l’une des première chose que l’internaute repère.
Navigation
Le menu se distingue très bien du reste, le contrast avc l’arrière plan est idéal. l’utilisateur repère très facilement la navigation
principale.
A noter que le menu de navigation n’est pas identique sur l’ensemble du site.... Hors il ne faut jamais modifier l’emplacement
ou l’apparence de la navigation principale au risque de pertuerber l’utilisateur.

23
Objectif
Recommandation
Critère
Navigation
&éviter les erreurs 404en cours de navigation. Faciliter un accés rapide à tous les contenus.
Tous les hyper liens internes de la page sont valide.
S’assurer que l’outil utilisé pour la rédaction des contenus possède une gestion satisfaisonte et cohérente des
hyperliens internes.
La vérification peut-être automatiqée, à l’aide d’un outil tel que le validateur de liens du w3c. Ou encore
grâce à l’outil Xenu’s Link Sleuth.
Lien concerné :

24
Objectif
Recommandation
Critère
Faire ressortir les actions importante. Augmenter l’affordance des boutons important pour les rendres plus
facilement repérables et inciter à l’interactivité.
L’affordance des éléments est proportionnelle à leur importance.
Adapter un niveau de visibilité proportionnellement à leur importance et prévoir un format spécifique
(inactif, survolé, cliqué et relaché) un bouton ressemble à un bouton.
Les boutons ne sont pas assez détaché et différencier du reste des visuels. Leur affordance et nul.
Navigation

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

26
Objectif
Recommandation
Critère La taille des polices est suffisamment élevée!
Facilité la lecture et la recherche d’information.
Idéalement préférer un corp 16px pour le corp de texte.
Taille par défaut pour les navigateurs (mis d’accord) sur 16px, cela constitue la taille optimale de lecture pour la plupart
des humains.
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.
Contenus

27
Objectif
Recommandation
Critère Pour chaque page Web, les blocs de texte ont-ils une largeur idéal ?
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.
Longueur de ligne = 30 multiplié par la taille du texte.
Sur mobile c’est environ 50 caractères par ligne.
25 fois la taille du texte.
Economisez à notre comparateur !
DevisMutuelle.com leader français des comparateurs d’assurance santé.
Nous recensons une quarantaine d’offres.
Contenus

28
Objectif
Recommandation
Critère
Contenus
Permettre aux utilisateurs d’indentifier immédiatement l site dans les onglets, les favories, dans la fenêtre
du navigateur ou encore dans les lecteurs d’écran.
Le titre de chaque page permet d’identifier le site.
Rédiger le contenu de l’élément title de chaque page de manière à y indiquer le nom du site et dans le cas présents
la fonction du site.

Le formulaire est l’un des moyens pour l’utilisateur d’envoyer des
données, alors que son comportement classique sur le web consiste
plutôt à recevoir des informations. Une mise en forme peu soignée des
formulaires désarçonne les utilisateurs.
Formulaire

30
Objectif
Recommandation
Critère
Formulaire
Permettre aux utilisateur d’identifier sans ambiguité les champs de formulaire et la nature des
informations à saisir. Faciliter et accélérer l’usage du formulaire. Prévenir les erreurs de saisie.
Chaque étiquette de formulaire est visuellement rattachée au champ qu’elle décrit.
La proximité immédiate est une mesure à préciser selon le contexte mais elle est de l’ordre d’une trentaine
de pixels pour une étiquette placée à gauche du champs, d’un interligne pour une étiquette au-dessus...
En se référent au critère concernant le contrast, nous pouvons également dire que le texte est illisible...
À quoi correspond le second champ ? le point d’intérrogation est la pour quoi ? pour créer un compte ?
pour me rappeler mon adresse mail ? En l’abscence d’image le point d’intérrogation ne propose aucune
alternative.
Après vérification il ne s’agit pas d’un mot de
passe, mais d’un code d’accès.... RAISON DE
PLUS POUR METTRE UN LIBELLÉ
L’utilisateur n’est pas devin

31
Objectif
Recommandation
Critère
Formulaire
Faciliter la compréhension des données attendus dans les formualires. Faciliter la saisie en permettant de
sélectionner le champ via un clic sur son étiquette aussi bien que sur le champs lui-même (case à cocher)
Chaque champs de formulaire est associé dans le code source à une étiquette qui lui est propre.
Donner un champ de formulaire une étiquette qui lui est explicitement associée.
Au moins un INPUT de type PASSWORD sans LABEL et sans TITLE, au moins un INPUT de type TEXT sans LABEL
et sans TITLE.
Éléments concernés
‹input name="ctl00$Connexion$tbxPassword" maxlength="50" id="ctl00_Connexion_tbxPassword" class="Identifiants"
type="password"›
‹input name="ctl00$Connexion$tbxUserName» value=»e-mail" maxlength="50" id="ctl00_Connexion_tbxUserName"
class="Identifiants» onfocus="if(this.value==’e-mail’) {this.value=’’;};" onblur="if(this.va
Reco :
Donner à chaque champ de formulaire une étiquette qui lui soit eplicitement associé :
Si l’étiquette est visible, sous la forme d’un éléments label doté d’un attribut for reprenant la valeur de l’attribut id affecté
au champ, par exemple :
‹label for="nom1"› nom de famille : ‹/label›
‹input id="nom1" type="text" name="nom"›

Si l’affichage de l’étiquette n’est pas souhaité, sous la forme d’un attribut title du champ lui-même

32
Objectif
Recommandation
Critère
Formulaire
Donner un retour à l’utilisateur sur l’action qu’il vient d’effectuer? Guider l’utilisateur directement vers les
éléments sur lesquels il doit agir.
En cas de rejet des données saisis dans le formulaire, les champs contenant les données rejetées sont indiqués
à l’utilisateur
Indiquer explicitement dans l’étiquette de chaque champs conerné qu’il doit être corriger. Laisser le terme éronné
dans le champ, cela permet à l’utilisateur de pouvoir se relire si nécessaire (à éviter pour un mot de passe)
adresse mail non valide Code d’accés non renseigné
Donc mon adresse mail est valide ?
La petite étoile signifie ?

33
Objectif
Recommandation
Critère
Code
Permettre aux machines et aus outils d’indexation d’extraire le plan de chaque page. Améilorer le référencement
en facilitant l’interprétation du contenu par les robots d’indéxation.
Le contenu de chaque page est organisé selon une structure de titres et sous-titres hiérar-
chisée.
Structurer le document en titres et sous-titres à l’aide des éléments html h1 à h6. Veiller à ce que la structure
ne comporte pas de «trou», un h2 ne doit pas être suivis d’un h4.Veiller à ce que chaque page possède au moins
un h1
Le titre h3 et manquant. La structure n’est pas
hiérarchisée correctement.

34
Objectif
Recommandation
Critère
Code
Les styles ne sont pas utilisés pour générer du contenu.
Ne pas utiliser les propriétés css background, background-image ou content ni les pseudos-éléments :
before et after pour générer une information qui est abscente du contenu html.
Garantir l’accès au contenu indépendamment de la prise en compte de la couche de mise en forme CSS.
Assurer une sémantique des contenus suffisante pour favoriser notamment leur indexation.
Certain bouton essentiel
deviennent invisible...
Le bouton de connexion,
les boutons pour les compa-
raeurs... le bouton pour voir
toutes les marques... Les
étapes pour comparer...
l’accés direct au comprateurs
sur la droit....
les liens vers les réseaux sont
également invisibles.

Le liens 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 me-
nus.
Hyperliens

36
Objectif
Recommandation
Critère
Hyperlien
Permettre aux utilisateurs d’indentifier facilement les liens au fil du texte ainsi que les blocs de naviagation
Les hyperliens sont visuellement différenciés 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.

37
Objectif
Recommandation
Critère
Hyperliens
Faciliter l’identification des contenus déjà visités. Faciliter l’identification des contenus restant à découvrir.
Inciter à la navigation sur de nouvelle page.
Le style appliqué aux liens visités et non visités ne sont pas les même
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.
Aucun style ne distingue le lien visité «le
comparateur de mutuelle» du lien pas
encore visité « le comparateur de prix»

38
Objectif
Recommandation
Critère
Hyperliens
éviter aux utilisateurs d’avoir uniquement une URL peu compréhensible en guise de libellé.
éviter les liens qui deviennt invisibles lorsque les styles css ou images d’arrière plan ne sont pas pris en compte.
Chaque lien est doté d’un intitulé dans le code source.
Donner à chaque libellé textuel (entre les balises ouvrantes et fermantes de l’éléments a) ou, si nécessaire, via
l’alternative textuelle d’un élément img ou object.
éléments concernés :
<a href=»http://auto.kelassur.com/assurance-auto-profil.aspx» title=»Comparez les assurances auto» id=»LiensEncartAuto»
class=»LiensEncartHover»></a>
<a href=»http://assurance.habitation.kelassur.com/devis-comparatif-assurances-logement.aspx» title=»Comparez les assu-
rances habitation» id=»LiensEncartHabitation» class=»LiensEncartHover»></a>
<a href=»http://assurance.moto.kelassur.com/devis-comparatif-prix-deux-roues.aspx» title=»Comparez les assurances moto»
id=»LiensEncartMoto» class=»LiensEncartHover»></a>
<a href=»http://assurance.pret.kelassur.com/devis-emprunteur-credit.aspx» title=»Comparez les assurances de prêt»
id=»LiensEncartEmprunteur» class=»LiensEncartHover»></a>

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ît pas sufisamment vite, il «zappe» et passe sur un autre
site.
Serveur & Performance.

40
Objectif
Recommandation
Critère
Serveur &
Performance
Minimiser la quantité de données à télécharger par l’utilisateur. Améliorer les performances.
Les informatiosn de styme sont minifiées.
Supprimer les espaces non nécessaire et les commentaires dans les fichiers css, à l’aide d’outil comme
compressor.
30 background qui pourraient être combinés dans un sprite css.
Au moins une CSS avec des espaces inutiles
http://www.devismutuelle.com/themes-assurance/ThemeKA_V4.1/ThemeKA_V4.1.css
http://www.devismutuelle.com/App_Themes/ThemeKA_V4.1/ThemeKA_V4.1_Specifique_Sante.css

41
Objectif
Recommandation
Critère
Serveur &
Perfor-
mance
Permettre aux outils d’indexation et aux moteurs de recherche de connaitre la ou les langues du public
auquel est destinée la page et d’adresser aux utilisateurs le contenu répondant à leur choix de langue exprimés
dans leurs recherche.
Le serveur envoi l’indication de la langue principale du contenu.
L’en-tête HTTP content-Language est renseigné selon la ou les langues du public cible du document sous la forme
Content-Language : fr, en ...
La page devisMutuelle ne renseigne pas la langue utiliser

42
Objectif
Recommandation
Critère
Serveur &
Performance
Permettre le chargement prioritaire des contenus
Les appels aux script sont placés après le contenu.
Placer les appels aux script en fin de code, juste avant la fermeture de l’éléments body
<script src=»http://www.google-analytics.com/ga.js» async=»» type=»text/javascript»></script>
<script src=»/scripts/jquery-latest.js» type=»text/javascript»></script>
<script src=»/scripts/jquery.bxSlider.min.js» type=»text/javascript»></script>
<script type=»text/javascript»> $(document).ready(function () { $(‘#carousel’).bxSlider({ ticker: true, displaySlideQty: 7, tickerHover: true, tickerSpeed: 10000,
captions: true }); });&l
<script language=»javascript» type=»text/javascript» src=»/KA/Scripts/scripts.js»></script>
<script language=»javascript» type=»text/javascript» src=»/scripts/urchin.js»></script>
<script type=»text/javascript»> var _gaq = _gaq || []; _gaq.push([‘_setAccount’, ‘UA-1438313-4’]); _gaq.push([‘_trackPageview’]); (function() { var ga = docu-
ment.createElement
<script type=»text/javascript»> var bir_id = 3715; var bir_ignore = [‘devismutuelle.com’]; var bir_id2 = «0»; var bir_protocol = («https:» == document.location.
protocol) ? «https» :
<script src=»http://t3715.trafiz.net/js.php?i=3715&u=http://www.devismutuelle.com/» type=»text/javascript»></script>
<script type=»text/javascript»> add_tag_trafic(); </script>
‹script type=»text/javascript»› //‹![CDATA[ var Page_ValidationActive = false; if (typeof(ValidatorOnLoad) == «function») { ValidatorOnLoad(); } function Validato-
rOnSubmit() { if (P
‹script type=»text/javascript»› /* ‹![CDATA[ */ var google_conversion_id = 1070899521; var google_conversion_language = «en»; var google_conversion_format
= «3»; var google_conversion_co

43
Objectif
Recommandation
Critère
Serveur &
Performance
Minimiser la quantité de données à télécharger par l’utilisateur. Améliorer les performances.
Les fonctions de scipts sont placées dans des fichiers externes.
Utiliser le contenu script que pour renseigner des variables ou initialiser un script et déporte les fonctions
dans un fichier Javascript externes.
<script type=»text/javascript»> $(document).ready(function () { $(‘#carousel’).bxSlider({ ticker: true, displaySlideQty: 7, tickerHover: true, tickerSpeed: 10000,
captions: true }); });&l...
<script type=»text/javascript»> var _gaq = _gaq || []; _gaq.push([‘_setAccount’, ‘UA-1438313-4’]); _gaq.push([‘_trackPageview’]); (function() { var ga = docu-
ment.createElement...
<script type=»text/javascript»> var bir_id = 3715; var bir_ignore = [‘devismutuelle.com’]; var bir_id2 = «0»; var bir_protocol = («https:» == document.location.
protocol) ? «https» :...
<script type=»text/javascript»> add_tag_trafic(); </script>
<script type=»text/javascript»> //<![CDATA[ var theForm = document.forms[‘aspnetForm’]; if (!theForm) { theForm = document.aspnetForm; } function __
doPostBack(eventTarget, eventArgument)....
<script type=»text/javascript»> //<![CDATA[ function WebForm_OnSubmit() { if (typeof(ValidatorOnSubmit) == «function» && ValidatorOnSubmit() == false)
return false; return true; } //]]> &l....
<script type=»text/javascript»> //<![CDATA[ var Page_Validators = new Array(document.getElementById(«ctl00_Connexion_UserNameValidator»), document.
getElementById(«ctl00_Connexion_PasswordVal....
<script type=»text/javascript»> //<![CDATA[ var ctl00_Connexion_UserNameValidator = document.all ? document.all[«ctl00_Connexion_UserNameValidator»]
: document.getElementById(«ctl00_Connexion...
<script type=»text/javascript»> //<![CDATA[ var Page_ValidationActive = false; if (typeof(ValidatorOnLoad) == «function») { ValidatorOnLoad(); } function Valida-
torOnSubmit() { if (P...
<script type=»text/javascript»> /* <![CDATA[ */ var google_conversion_id = 1070899521; var google_conversion_language = «en»; var google_conversion_for-
mat = «3»; var google_conversion_co...

44
Objectif
Recommandation
Critère
Serveur &
Performance
Accélérer la vitesse d’affichagedes pages, améliorer les performances. Et diminuer la quantitié
de données à télécharger.
Les script sont minifiés.
Supprimer les espaces non nécessaires ainsi que les commentaires dans les fichires javascript, en recourant à
des outils comme Compressor ou JSmin
<script src=»/scripts/jquery-latest.js» type=»text/javascript»></script>
<script type=»text/javascript»> //<![CDATA[ var Page_ValidationActive = false; if (typeof(ValidatorOnLoad) == «function») { ValidatorOnLoad(); }
function ValidatorOnSubmit() { if (P...

45
Objectif
Recommandation
Critèrefichier
multimédia
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.
les animations peuvent être mis en pause.
Soit supprimer cette animation. Soit doter systématiquement l’objet multimédia des moyens de contrôle
nécessaire: démarrage, arrêt...

46
Objectif
Recommandation
Critère
Alternative
éviter le téléchargement de données inutiles pour permettre la consultation immédiate du contenu.
Améliorer les performences.
Les vignettes ne sont pas des images de taille supérieure redimensionnées côté
client.
Utiliser, pour les vignettes de prévisualisation d’images, des versions spécifiques de celles-ci non les
images
originales redimensionnées via leurs attributs html ou leur propriétés css
dimension réèl de l’image : 180px par 250
dimensio côté client : 65px par 90px.

47
Objectif
Recommandation
Critère
Présentation
Permettre aux utilisateurs de gérer l’agrandissement des polices sans difficultés.
Indiquer la taille des polices en utilisant une unité proportionnelle aux réglages de l’utilisateur
(em, ex, %...)
La taille des polices destinées à l’affichage écran est exprimée en taille variable et non
en taille fixe.
éléments concernés :
http://www.devismutuelle.com/themes-assurance/ThemeKA_V4.1/ThemeKA_V4.1.css (ligne 14) : body {font-size: 12px;}
http://www.devismutuelle.com/themes-assurance/ThemeKA_V4.1/ThemeKA_V4.1.css (ligne 67) : div.ComparateursAssurance {font-size: 11px;}
http://www.devismutuelle.com/themes-assurance/ThemeKA_V4.1/ThemeKA_V4.1.css (ligne 205) : p.IntroSite {font-size: 11px;}
http://www.devismutuelle.com/themes-assurance/ThemeKA_V4.1/ThemeKA_V4.1.css (ligne 228) : div.TitreSite h1 {font-size: 18px;}
http://www.devismutuelle.com/themes-assurance/ThemeKA_V4.1/ThemeKA_V4.1.css (ligne 294) : div#EncartDroit div.AutresAccesForm h2
{font-size: 14px;}
http://www.devismutuelle.com/themes-assurance/ThemeKA_V4.1/ThemeKA_V4.1.css (ligne 330) : div#EncartDroit p.Devis2Min {font-size: 14px;}
http://www.devismutuelle.com/themes-assurance/ThemeKA_V4.1/ThemeKA_V4.1.css (ligne 348) : div#EncartDroit p.Devis2Min strong
{font-size: 18px;}
http://www.devismutuelle.com/themes-assurance/ThemeKA_V4.1/ThemeKA_V4.1.css (ligne 367) : div#AutresDomaines p {font-size: 11px;}
http://www.devismutuelle.com/themes-assurance/ThemeKA_V4.1/ThemeKA_V4.1.css (ligne 398) : div#AutresDomaines span {font-size: 12px;}
http://www.devismutuelle.com/themes-assurance/ThemeKA_V4.1/ThemeKA_V4.1.css (ligne 419) : div#EncartDroit div.ComparateurSocial
{font-size: 14px;}

Recommandations
ergonomique Pôle créa.

Les 12 règles
de l’ergonomie Web
Référentiel d’ergonomie Web

Architecture
Le site est bien rangé
• Regroupement logiques : Cohérence.
• Mise en avant des contenus clés.
• La navigation aide l’utilisateur :
• Les intitulés de menu sont :
• Signifiant
• Complémentaire
• Exclusifs.

51
Organisation visuelle
Le site est bien rangé
• Zoning
• Fixe dès le départ les informations à faire ressortir.
• Lisibilité du contenu :
• L’espace blanc.
• La typographie.
• Éviter la surcharge informationnelle :
• Typographies, couleurs, fonds ect.
• N’afficher que les principaux éléments de navigation
:
• N’afficher les optionnel que si nécessaire.
• Supprimez les éléments d’interaction inutiles.

Cohérence
Le site capitalise sur l’apprentissage interne
• Localisation cohérentes.
• Le vocabulaire cohérent (même champs sémantique).
• Les interactions sont cohérentes
• Théorie de Gestalt sur les proximités et similarités respectée.
• La typographie.

53
Conventions
Le site capitalise sur l’apprentissage
externe
• Conventions générales du Web :
• Localisation.
• Vocabulaire.
• Interactions.
• Présentation.
• Conventions socio-culturelles :
• Culture, dans la vie réelle, des cibles.

Information
Le site informe l’utilisateur et lui répond
• Le site informe et prévient l’utilisateur :
• Bulles d’aides (Tool Tip).
• Mis en évidence des champs de formulaire utilisé.
• Indiquer des états ou des interactions (feedback) :
• Icônes.
• Textes additionnels.
• Le site répond aux actions de l’utilisateur :
• Feedback des actions (au survol des liens, à la
soumission de formulaire, etc.).

55
Assistance
Le site aide et dirige l’internaute
• Aide implicite.
• Diriger l’utilisateur grâce à :
• L’organisation et la lisibilité.
• Des clics logiques.
• Les affordances.
• L’aspect conatif.
• Attention à ne pas diriger de façon érronée.

56
Gestion des erreurs
Le site prévoit que l’utilisateur se trompe
• Aider l’utilisateur à :
• Repérer et comprendre ses erreurs.
• Corriger ses erreurs :
• Indiquer et expliquer les erreurs commises.

57
Rapidité
L’utilisateur ne perd pas son temps
• Optimiser le temps de chargement des pages.
• Optimiser la navigation.
• Optimiser le NetLinking interne.
• Faciliter les interactions (efﬁcience) :
• Éviter les doubles saisies.
• Éviter les actions inutiles.

Liberté
C’est l’utilisateur qui commande.
• Flexibilité des actions utilisateur :Optimiser la navigation.
• Donner la possibilité à l’utilisateur de contourner le système et
d’agir dessus.
• La navigation est omniprésente : pas de cul-de-sac !
• Le système est non intrusif :
• Pop-up.
• Pub (iAB).
• Pas de mouvement de contenu.
• Pas de démarrages automatiques (multimédia).

59
Accessibilité
Le site est accessible pour tous
• Tous handicapés !
• Accès aux données, captation des données.
• Accessibilité physique et cognitive.
• Contexte d’utilisation.

Satisfaction
L’utilisateur est satisfait de son expérience.
Tâche réalisée
aisement
au moindre coût
qui atteint l’objectif
complètement
et contente l’utilisateur
Efficacité --->
Facilité --->
Efficience --->
Pertinence --->
Qualification --->
Satisfaction --->

Analyse comparateur assurance

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

En vedette

En vedette (20)

Similaire à Analyse comparateur assurance

Similaire à Analyse comparateur assurance (20)

Analyse comparateur assurance