Analyse du site : Maison & Déco

Le groupe Lagardère vient de sortir son nouveau portail tout frais nommé Maison & Déco. Il rassemble les différents magazines tels que : ‘Art & Décoration’, ‘Maison & Travaux’ etc…  Découvrez comment l’expérience utilisateur peut être améliorée pour rendre la lecture plus agréable en utilisant l’ergonomie et quelques modifications.

Au premier coup d’œil ce magazine en ligne dégage une ambiance chaude et féminine assez sympathique. Les teintes orangées-rosées et les nombreux visuels contribuent à cette ambiance. Découvrons les points forts et les points faibles de ce site.

Le Header.

Le header prend un place importante sur la page, et est assez chargé. On peut y trouver 2 barres de liens, 7 logos sur le milieu et 2 champs d’action. Ça fait beaucoup de monde dans une zone principalement dédiée à la navigation.

fauveaux mathieu analyse maison et deco

Difficile de choisir le bon logo du portail au milieu des 6 autres logos des magazines. Seule sa taille plus importante le met en avant, ce qui n’est peut-être pas évident pour l’utilisateur. Conventionnellement il est préférable de placer le logo d’un site à gauche dans le header, même pour un site de contenu. Rendre difficile d’accès, ou rapidement compréhensible la navigation peut vous faire perdre des utilisateurs.

Un mot sur le menu, qui est « mega menu ». Ce type de menu est intéressant puisque l’on peut y glisser du contenu, des visuels, du marketing etc.. c’est son côté positif. Son côté négatif peut passer inaperçu pour une majorité des utilisateurs, sa taille. Dans une résolution de 800 x 600 px, si votre utilisateur ne scroll pas vers le bas il ne verra pas la fin du menu et c’est bien dommage.

Le champ de recherche

Le champ de recherche avec son fond marron et une écriture crème à l’intérieur n’est pas  rapidement repérable. Le bouton d’action ne facilite pas la vie à l’internaute de part sa taille réduite, et son texte peu précis sur l’action qui va suivre. En dessous 2 options sont possibles, faire une recherche sur tout le site, ou sur Dékio. Dekio.fr est développé par Exalead, il référence 2.000 sites, parmi lesquels ceux de petits artisans. ( source )

Dans les bonnes pratiques pour le moteur de recherche, il faudrait laisser l’intérieur du champ blanc. Placer un fond foncé, permet en plus de créer un contraste intéressant pour un repérage plus rapide de utilisateur.

Le moteur de recherche est souvent une roue de secours à une navigation difficile, ou pour accéder rapidement un contenu précis ( exemple une référence précise sur un site d’électroménager ). Prenez le temps d’étudier vos statistiques pour voir les mots clés utilisés, et le comportement avant / après une recherche.

Taux de contraste

Je reviens sur la difficulté à repérer les zones d’écriture comme le champ de recherche, l’inscription à la newsletter etc.. alors pourquoi ?

Dans l’idéal ces champs devraient avoir un fond blanc pour suivre un standard établi sur internet. La meilleure des situations pour un champ de recherche par exemple est de placer ce dernier avec à l’intérieur une couleur blanche et derrière un fond au contraste le plus fort possible. Le repérage ne sera que meilleur.

L’écriture à l’intérieur est bien pour indiquer des informations/recommandations, mais doit rester assez discrètes.

Un autre détail gêne le repérage rapide de ces zones, les couleurs des polices. Si l’on prend le cas du sélecteur d’adresse, la couleur de police a un contraste ainsi qu’une luminosité trop faible par rapport au fond. Le  W3C a fixé des normes dans ce domaine pour rendre accessible la lecture des informations à la plus grande majorité d’entre nous. Pensez aux personnes dont la vue est faible, ou aux écrans mal calibrés.

En testant les couleurs sur le site de snook.ca, le résultat est sans appel, la validation du W3C est refusée. La valeur de la luminosité est deux fois inférieure à la normale, et le contraste est encore moins bon avec 168 pour une norme à 500.

 Analyse site maison et deco contraste couleur fauveaux mathieu

Pour finir, j’émets un doute quant à la position de ce bloc dans le header. Vaut-il une mise en avant si prononcée ?

L’inscription à la newsletter n’est pas mise en avant, et on doit presque fouiller le site pour donner son adresse email, est-ce une volonté du site ?

Le Contenu.

Le flash n’est pas mort

Quelque chose m’a tout de suite choqué en arrivant sur ce portail : le slideshow. Pas n’importe quel slideshow, il est en flash ! A l’ouverture du site, un chargement apparaît et il peut vite devenir très long si vous avez une mauvaise connexion ou utilisez un appareil mobile.  Pour un site de contenu comme celui-ci,  je ne vois pas d’intérêt à utiliser un slide en flash. La navigation sur une tablette style Ipad, ou un notebook ne doit pas être des plus fluides. Alors pourquoi Maison & Déco a choisi ce slideshow ? Alors certes cette présentation est originale mais, est-elle vraiment pratique pour la lecture? ou pour visualiser les photos ? ou pour aller tourner le slide ? L’écriture est étiré d’un côté et surtout l’ensemble bouge toujours un peu.

slideshow maison et deco analyse fauveaux mathieu

La publicité

L’encart de publicité est lui aussi gênant à cause de son animation. Pour un utilisateur avec une résolution de 1024, sa première impression est un menu assez chargé et du contenu animé. La concentration n’est pas facile et rend difficile la lecture des informations. La plupart du temps les encarts animés ne sont que de la publicité et certaines études montrent que les internautes ont appris à ignorer ces bannières animés.

L’abonnement

L’offre d’abonnement à -50% est visible dès l’ouverture du site, et pour toutes les résolutions. Elle pourrait l’être davantage avec des couleurs moins ton-sur-ton.

L’agenda

agenda maison et deco analyse par mathieu fauveauxPassons à l’agenda sur la droite qui est bien pratique pour voir les évènements importants. Cet outil a 2 petits défauts pour moi. Le premier est qu’il affiche les événements au survol d’une date. Si vous avez tendance à balader votre souris partout sur la page, vous risquez vite d’ouvrir l’onglet d’événements. Pas très pratique me direz-vous, et pour le fermer il faudra trouver la petite croix en haut à droite. Il n’est pas possible de le fermer en cliquant hors de cet onglet, dommage.

Deuxième point gênant, dans le cas d’un ordinateur avec une résolution assez faible mais pourtant courante de 1024. Si vous dépliez l’onglet d’événement en survolant une date, vous ne pourriez peut-être pas voir tous les événements liés à cette date. En effet, le nombre d’événements s’affiche toujours par 5. L’affichage ne s’adapte pas en fonction de la résolution. On pourrait très bien en voir davantage sur un grand écran, et moins sur un petit.

Pour finir dans cette partie, un petit « bug » sûrement dû à la jeunesse du site dans l’affichage de cette liste.

Footer.

Le footer est assez simple, on y retrouve les différents logos des autres magazines. C’est une bonne idée pour retrouver les différents univers.

L’ensemble de liens plus bas présente les différentes marques du groupe Lagardère. La liste n’utilise pas toute la largeur disponible ce qui est bien dommage. Comme pour le header la couleur de la police a un contraste et une luminosité toujours trop faible par rapport au fond.

Conclusion.

Ce magazine en ligne a encore quelques erreurs de jeunesse, mais qui devraient vite disparaître. A l’heure des tablettes, certains choix techniques sont surprenants comme l’utilisation de flash ou la non utilisation du responsive webdesign. La mise en place de cette tecnhique sur un site de contenu de ce type reste accessible.

Partager sur facebook
Facebook
Partager sur pocket
Pocket
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn

Articles en relation :

Newsletter

Recevez les 10 meilleures actualités autour du CRO tous les mois: articles, process, outils, conférences, ...

Vous voulez savoir où et comment démarrer l'optimisation de votre site ?

Je peux détecter vos opportunités d'optimisation et vous délivrer les recommandations à appliquer, mais êtes-vous prêt ?

0 Comments

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.