Étiquette : structure

Publié le

Codeshoes : ne pas oublier les fondamentaux

Présenter des sélections de produits, proposer de nombreuses fonctionnalités et mettre en avant ses services, c’est bien… tant que ça ne dégrade pas l’expérience utilisateur.

Sur le site de codeshoes, les pages listes regorgent de contenu : messages commerciaux (parfois redondants, cf. les frais de ports offerts), module de recherche (plutôt exhaustif mais apparemment buggé*), encarts dédiés aux services (plutôt difficiles à distinguer des encarts commerciaux)… Cet excès d’information ne constitue pas nécessairement un problème. Cela dit, dans le cas présent, ce contenu occupe beaucoup de place, au détriment d’éléments fondamentaux de la page liste : les produits.


Les photos des articles affichés ne mesurent que 120 pixels de large (environ, la taille est variable), ce qui est relativement petit. Et cette taille ne se justifie pas par un nombre important de produits par ligne (ce qui n’est pas forcément un bon choix, mais ce n’est pas l’objet de ce billet), comme sur le site de jefchaussures par exemple.

Les produits présentés sur la homepage, dont le nombre (par ligne) est plus important que ceux de la page liste, ont également droit à de plus grandes photos. L’affichage de nombreux articles n’est pourtant pas (sauf exception) la fonction principale d’une page d’accueil.

Ce passage par la homepage permet de mieux comprendre les raisons de la structure des pages listes : la colonne de droite est manifestement présente sur un grand nombre de pages.

Ne serait-il pas intéressant de la supprimer des pages listes et de les restructurer en tenant compte de leur fonction principale ?

Bonus

Un encart situé en bas de cette colonne de droite permet d’afficher la liste de toutes les marques proposées par le site. Lorsque je clique dessus, un layer apparaît et me présente les marques classées par ordre alphabétique.

Le bouton « fermer » ne se trouve pas en haut à droite du layer, mais en bas. Le problème, c’est que lorsque je scrolle pour y accéder, le layer scrolle également, m’empêchant de l’atteindre ! Il scrolle même à l’infini, ce qui fait gentiment bugger le site…

* Si je me rends sur la page « chaussures hommes », que je choisis une fourchette de prix entre 386€ et 461€, le site me retourne un seul résultat, une paire de bottines à lacets Heschung noire. Si ensuite je clique sur le bouton « réinitialiser votre recherche », la page se rafraichît automatiquement et semble être revenue à son état initial. Si je déplace ensuite le curseur des pointures, sur 42 par exemple, le site ne me retournera à nouveau qu’un seul résultat : la bottine à lacets Heschung. Je doute que cette référence soit la seule paire de chaussures disponible dans cette taille…
Testé sur Firefox 5 et Safari 5.

Publié le

Vanessa Bruno pour La Redoute : un mini-site élégant mais perfectible

L’arrivée de produits Vanessa Bruno (attention : redimensionnement automatique du navigateur) sur le site de La Redoute a été largement commentée sur les sites et blogs spécialisés. Il y a quelques jours, c’est sur Facebook que j’ai trouvé le lien menant au mini-site dédié à cette collection. Je m’y rends pour jeter un œil.

Ma première impression est très positive : l’aspect franchement épuré de l’ensemble convient parfaitement à un créateur de mode (je lis ici que « ses créations sont épurées, sobres, parfois même minimalistes. Elle porte une attention toute particulière aux pastels chauds : pêche, chair, jaune claire sont des teintes qui colorent une majorité de ses pièces »).

Certains choix viennent cependant dégrader l’expérience utilisateur du visiteur, à commencer par la taille et la couleur de la police sélectionnée : les liens sont en Garamond 11pt gris clair sur fond blanc. Ce choix typographique, bien que cohérent, perturbe la navigation. Il est pourtant possible d’utiliser des textes un peu plus grands et plus contrastés sans remettre en cause l’aspect minimaliste de l’ensemble.

Autre problème, lié à la présentation sur 3 colonnes de cette homepage : le visiteur risque au premier coup d’œil d’associer chaque photo avec le texte qui le surmonte. Les titres et liens situés au dessus des images ne sont pourtant pas leurs légendes, il s’agit bien d’éléments distincts.

Je clique sur l’image de droite, une photo de femme donc, et je suis redirigé vers une page « Maison » (c’est le très -trop- léger contraste du lien du menu qui me l’indique). L’élément important de la photo (la couette, qui rappelle le linge de maison) aurait sans doute gagné à être mis en valeur.

Une fois encore, la page sur laquelle je me trouve désormais est très élégante. Une fois encore, les textes de la page sont trop petits et peu lisibles. Bizarrement, 2 des 7 produits mis en scène sur la photo sont des vêtements. Les clientes n’auront pas forcément l’idée d’aller les chercher dans la catégorie « Maison » du mini-site.

Je clique sur la taie d’oreiller afin d’afficher la description du produit. La structure de la page qui s’ouvre alors gagnerait à être revue : un bon tiers de l’espace disponible est inutilisé. Le titre du produit, cette fois bien lisible (police plus grande, en noir sur fond clair), se retrouve collé tout en bas de la page, surmontant une courte description difficilement déchiffrable. La taille de la fenêtre de zoom, affichée au survol, laisse songeur. Quant au bouton de retour à la page précédente, je vous laisse le soin de le trouver…

La plus grande déception de cette page vient toutefois du bouton « voir la fiche produit » : il n’est donc pas possible de commander directement via ce mini-site.

Je clique sur le lien « Tous les produits maison », pensant être redirigé vers la page « Maison » que j’ai consultée il y a quelques instants. Ce n’est pas le cas : je me trouve maintenant sur une page présentant les 8 produits de la collection. Le défilement automatique des articles permet de mieux distinguer la présence d’une scrollbar en bas de la page. Cette dernière est malheureusement beaucoup trop fine pour être utilisée facilement.

Étrangement, je retrouve dans cette liste un produit que j’ai vu sur la photo mais qu’il n’était pas possible d’acheter jusqu’à maintenant : la housse de couette. Je clique dessus, puis sur le bouton « Voir la fiche produit ».

Je suis alors basculé vers une fiche produit classique du site de La Redoute. Cette sortie brutale de la boutique dédiée, à la fois déroutante et peu élégante, est la source d’un problème gênant  : il n’est pas possible de revenir à la page précédente. Pire : si j’utilise le bouton « Page précédente » de mon navigateur, je suis renvoyé vers la homepage du mini-site et je dois me débrouiller pour revenir sur la page qui m’intéresse.

Un coup d’œil au breadcrumb en haut de la page me permet de constater que je ne me trouve pas au cœur d’une sélection de produits « Vanessa Bruno » mais dans la partie « housse de couette fantaisie » du site de La Redoute. Il ne me sera donc pas possible de retrouver tous les produits Maison par ce biais.

En dernier recours, je clique sur le logo « Vanessa Bruno » en haut à gauche : je suis redirigé vers une page présentant toutes les housses de couette fantaisie du site. Pas très logique.

Bonus

Retrouver la boutique Vanessa Bruno au milieu du site de La Redoute n’est pas chose facile, surtout en cette période de soldes. Un petit bandeau est présent en bas de la page des marques, mais le moyen le plus simple reste de taper « Vanessa Bruno » dans le moteur de recherche. Le visiteur est alors automatiquement redirigé sur le mini-site dédié.

Cette redirection instantanée peut être déroutante pour certains clients, qui s’attendent à l’affichage d’une liste de produits classique. Il est toutefois possible d’accéder à une liste de produits Vanessa Bruno : il suffit de ne taper que « Vanessa » dans le moteur de recherche.

Bilan

textes trop petits et peu lisibles
structures de certaines pages
sortie du mini-site pour commander
éléments d’interface à revoir (bouton précédent, scrollbar, zoom)
certains liens ne renvoient pas vers le bon contenu
bouton « page précédente » inutilisable

Publié le

Quelques points à revoir sur sohome.fr

Je viens de lire l’article de Capitaine commerce 3 bonnes idées à piquer sur Sohome.fr. Si certains points évoqués me semblent intéressants (l’utilisation récurrente d’une mini-fiche produit par exemple), d’autres éléments du site m’ont davantage interpellé, en particulier sur la homepage.

Comme sur de nombreux sites e-commerce, la surface dédiée aux opérations commerciales est très importante. Sur cette page d’accueil, les 3 encarts promotionnels représentent près de la moitié de l’espace occupé. Malheureusement, dans ce cas précis, les marges qui séparent les 3 blocs sont trop fines, ce qui engendre une impression de confusion : il sera très difficile pour le client d’envisager ces 3 encarts comme des éléments différents d’un seul coup d’œil.

Le contenu même de ces encarts pourraient être amélioré. L’animation principale est très chargée : un titre (2 couleurs de texte, 3 tailles, de l’italique, c’est déjà énorme !), un bouton, un ensemble description + prix, un message commercial (la livraison gratuite, message redondant par ailleurs), un titre de tendance et plusieurs éléments de navigation au sein du carrousel (flèches & vignettes). Ce n’est pas forcément trop en soi, mais sur une zone de cette taille, animée (trop rapidement pour lire tous les textes) et peu lisible (placer les textes au dessus d’images si denses est élégant mais rend l’ensemble très confus), le risque de saturation est grand.

Les encarts secondaires souffrent eux aussi d’un problème de lisibilité : le prix du drap « Hello Kitty » et le lien « Draps de plage » sont quasiment invisibles. Toutefois, une structure se dégage de ces 2 blocs, avec un gros titre à gauche et une illustration à droite (ce n’était pas le cas la semaine dernière…). C’est un bon point : la répétition de cette structure va simplifier la consultation de la page, mais je crains que ce ne soit pas suffisant pour donner une chance à ces 2 opérations commerciales.

(Dans le même ordre d’idée je découvre à l’instant que l’encart de gauche me propose une réduction de -20%. C’est une information qui mériterait d’être davantage mise en avant.)

J’en viens au reste de cette homepage. Je distingue plusieurs choses qui pourraient être retravaillées rapidement afin d’améliorer la consultation de la page :
• plusieurs textes sont trop petits. La baseline du logo, l’exemple de recherche, le texte « Bienvenue » (à quoi sert-il ?)…
• Au sujet du header : le formulaire de recherche n’est pas centré mais légèrement décalé vers la gauche, ce qui déséquilibre la page et renforce l’effet de flottement des éléments du header, qui manque de structure. Le « ok » ne ressemble pas du tout à un bouton.
• De nombreux éléments manquent de contraste. C’est pour moi le problème le plus gênant : les messages situés dans les 2 barres grises sont bien peu lisibles. Est-ce pour cette raison que ces messages sont répétés plusieurs fois sur la page ? La livraison gratuite est évoquée 2 fois, l’inscription à la newsletter aussi.

Une dernière remarque au sujet du bloc fixe « So news », collé à gauche de l’écran. Premier soucis : sur les écrans d’ordinateurs les plus petits, ce bloc peut se retrouver superposé à la flèche gauche de l’animation principale.

Second soucis : après avoir rentré mes coordonnées, on me propose de « recevoir les offres So Home par email » et de « recevoir les offres des partenaires par email ». Or, il est possible de répondre « non » à ces 2 choix. Dans ce cas, à quoi serais-je inscrit ?

On me souffle à l’oreille qu’il est possible que ces choix soient « en plus » de l’inscription à une newsletter. Dans ce cas, il me semble plus compréhensible de rajouter le mot « aussi » aux 2 propositions (« Je souhaite aussi recevoir… »).

L’utilité du bouton « Annuler » reste quant à elle toujours à démontrer.

Bilan

Textes trop petits
Manque de contraste de certains éléments
Superpositions d’éléments de navigation
Lisibilité des opérations commerciales