-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
1
Objectif
Recommandation
Critère
...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
2
Objectif
Recommandation
Critère
...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
3
Objectif
Recommandation
Critère
...
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...
Grille d’analyse ergonomique DevisMutuelle
Voir fichier excel «Grille d’analyse»
La première partie de la grille fût rempl...
6
Navigation 5.3
%
zone de connexion
1.65 %
Identification du
site 6.81 %
Contenu informatif
27.46 %
Habillage graphique
1...
7
Rétro-zonning.
Zone foncé = identifiées en premier
Deux bloc son identifiés, cependant aucune différence entre les bouto...
Objectif
Recommandation
Critère
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
9
Objectif
Recommandation
Critère
...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
10
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
11
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
12
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
13
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
14
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
15
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
16
Objectif
Recommandation
Critère...
Sur le web, si un site et difficile à utiliser, les gens partent. Si la page
d’attérissage, ne parvient pas à énoncer clai...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
18
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
19
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
20
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
21
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
22
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
23
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
24
Objectif
Recommandation
Critère...
Un site web, fonctionne lorsqu’il fournit des réponses à ses utilisateurs
et qu’il retranscrit les objectifs de communicat...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
26
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
27
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
28
Objectif
Recommandation
Critère...
Le formulaire est l’un des moyens pour l’utilisateur d’envoyer des
données, alors que son comportement classique sur le we...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
30
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
31
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
32
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
33
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
34
Objectif
Recommandation
Critère...
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...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
36
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
37
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
38
Objectif
Recommandation
Critère...
L’être humain n’aime pas attendre et encore moins l’internaute
car il se sert d’internet pour gagner du temps. Lorsque la ...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
40
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
41
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
42
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
43
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
44
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
45
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
46
Objectif
Recommandation
Critère...
-Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012
47
Objectif
Recommandation
Critère...
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 navigat...
51
Organisation visuelle
Le site est bien rangé
•	 Zoning 	
•	 Fixe dès le départ les informations à faire ressortir.
•	Li...
Cohérence	
Le site capitalise sur l’apprentissage interne
•	 Localisation cohérentes.	
•	 Le vocabulaire cohérent (même ch...
53
Conventions
Le site capitalise sur l’apprentissage
externe
•	Conventions générales du Web :	
•	 Localisation.
•	 Vocabu...
Information
Le site informe l’utilisateur et lui répond
•	Le site informe et prévient l’utilisateur :	
•	 Bulles d’aides (...
55
Assistance
Le site aide et dirige l’internaute
•	Aide implicite.	
•	Diriger l’utilisateur grâce à :
•	 L’organisation e...
56
Gestion des erreurs
Le site prévoit que l’utilisateur se trompe
•	Aider l’utilisateur à :	
•	 Repérer et comprendre ses...
57
Rapidité
L’utilisateur ne perd pas son temps
•	 Optimiser le temps de chargement des pages.
•	 Optimiser la navigation....
Liberté
C’est l’utilisateur qui commande.
•	 Flexibilité des actions utilisateur :Optimiser la navigation.
•	 Donner la po...
59
Accessibilité
Le site est accessible pour tous
•	 Tous handicapés !
•	 Accès aux données, captation des données.
•	 Acc...
Satisfaction
L’utilisateur est satisfait de son expérience.
Tâche réalisée
aisement
au moindre coût
qui atteint l’objectif...
61
62
63
64
Prochain SlideShare
Chargement dans…5
×

Analyse comparateur assurance

1 456 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

Publié dans : Design
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 456
Sur SlideShare
0
Issues des intégrations
0
Intégrations
267
Actions
Partages
0
Téléchargements
36
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.com 05/12/2012 1 Objectif Recommandation Critère Audit ergonomique Pôle créa.
  2. 2. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 2 Objectif Recommandation Critère Version Modifié Par Action 0.1 05/12/2012 Fredéric Meunier & Laurent chastrusse Évaluation
  3. 3. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 4. 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.
  5. 5. 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. 6. 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. 7. 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.
  8. 8. Objectif Recommandation Critère
  9. 9. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 10. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 11. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 12. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 13. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 14. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 15. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 16. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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.. 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é
  17. 17. 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. 18. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 19. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 20. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 21. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 22. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 23. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 24. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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
  25. 25. 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. 26. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 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.. Contenus
  27. 27. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 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.. Contenus
  28. 28. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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.
  29. 29. 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. 30. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 31. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 32. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 33. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 34. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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.
  35. 35. 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. 36. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 37. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 38. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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>
  39. 39. 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. 40. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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 Éléments concernés 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. 41. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 42. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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 Éléments concernés <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. 43. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. Éléments concernés <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. 44. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 45. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 46. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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. 47. -Rapport d’audit ergonomique de la page «DevisMutuelle» du site KelAssur.com 05/12/2012 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;}
  48. 48. Recommandations ergonomique Pôle créa.
  49. 49. Les 12 règles de l’ergonomie Web Référentiel d’ergonomie Web
  50. 50. 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. 51. 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.
  52. 52. 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. 53. 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.
  54. 54. 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. 55. 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. 56. 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. 57. 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 (efficience) : • Éviter les doubles saisies. • Éviter les actions inutiles.
  58. 58. 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. 59. 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.
  60. 60. 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 --->
  61. 61. 61
  62. 62. 62
  63. 63. 63
  64. 64. 64

×