C’est bien sûr un éternel débat : comment faire un beau site (ah oui, je sais, c’est une notion très subjective) qui innove par sa mise en page sans se planter dans l’usabilité ? On est tous d’accord : confier la conception du design d’interface uniquement à un designer risque de vous emmener loin dans l’innovation au risque souvent de pas mal d’élucubrations ergonomiques. Alors, hein, surveillez vos graphistes et passez toujours leur oeuvre à la moulinette des tests utilisateurs (Et si, ne dites pas le contraire, vous en avez forcément les moyens).
Je voudrais dire ici que j’ai découvert un site très agréable, fait par des gens que je connais (c’est toujours là que ça devient dur de critiquer), mais entaché par un certain nombre de défauts d’usabilité qui viennent gâcher quelque peu l’efficacité commerciale de l’ensemble.
Un bien beau site entaché de défauts d’utilisabilité
Alors voilà, il s’agit du nouveau site de LeBourget. Un site de bas et de collants avec tout plein de photos de jolies jambes. Et d’ailleurs, moi même, en tant que porteur de collants, je me sens parfaitement solidaire de toutes ces femmes qui vivent l’angoisse du collant ou du bas filé. Qu’elles se rassurent, avec Internet, elles auront toujours à un clic de souris la possibilité d’aller se réachalander sur le Web (et pour les mecs qui aiment les collants, vous pouvez aller là).
Comme vous le verrez, LeBourget.com a misé sur des très beaux et très grands visuels qui donnent tout son style au site. Je trouve que c’est une très bonne idée : pour moi, dans la mesure du possible, le design du site doit toujours savoir s’effacer au profit du produit. Alors quand vous avez de belles photos, profitez-en, mettez-les pleine page et gavez-en les yeux de vos visiteurs. De ce point de vue, le site est très réussi, mais je me permettrais de mettre un premier bémol : les photos sont parfois trop compressées. C’est dommage, car ça gâche le plaisir qu’on a à les regarder et bien sûr, c’est en contradiction avec le standard du site et de la marque qui est « haut-de-gamme ».
Mais quand on a des parti-pris aussi forts que ceux pris par les créateurs du site, il faut ensuite faire attention à ne pas commettre d’erreurs d’usabilité. C’est un risque qui croît forcément en fonction de l’audace de l’architecture d’information, ce qui est le cas ici.
Exemple : Mettre des grandes photos produits en fond de page, c’est classe, mais dans ce cas, faites attention à ne pas écrire du texte dessus de la même couleur. Texte sombre sur fond sombre, ça ne marche pas (voir la photo ci-dessous).
Texte noir sur fond sombre. C'est pas une bonne idée. Quand vous faites-ça, "faisez" gaffe.
Autre petit exemple : le sélecteur de couleur. C’est sympa de pouvoir cliquer sur des vignettes pour choisir sa couleur, mais alors ne le faites pas en « métamorphosant » le composant de sélection à la volée. 1) on a un menu déroulant 2) on a ensuite une palette de couleur qui s’affiche quand on clique sur le menu 3) s’il n’y a qu’une couleur de disponible, il faut quand même cocher un bouton radio pour la sélectionner. Tout ça part d’une volonté de faire original, mais c’est bien trop compliqué et lourd.
Un clic sur le menu déroulant "La Couleur" à gauche ouvre un panneau de sélection de couleurs. Déroutant.
Je ne vais pas m’étendre en long et en large sur les autres soucis que j’ai pu déceler, mais je ne peux que constater une chose : dans un site comme celui, l’oeil d’un expert en merchandising et un petit test utilisateur auraient sans doute permis d’éviter ces erreurs. Deuxièmement, ce n’est pas parce que, à priori, tous ces défauts ne sont « pas bien grave » qu’ils ne vont pas avoir un impact sur l’utilisabilité du site, puis sur son efficacité commerciale. Au contraire, c’est bien l’accumulation de petits riens qui constituent le plus grand danger pour le taux de transfo.
Alors moi, je suis surtout scotché par le site des collants pour homme, et en plus une marque qui s’appelle « gerbe »… Non, sérieusement en quelle circonstance un gars va mettre des collants avec son bermuda ?
Pour Le Bourget, je trouve effectivement le principe de la photo pleine page excellent mais je suis un peu déçu du coup de la qualité des photos.
Le diable se cache dans les détails = « retail is detail » (c’est bien la seule chose que j’ai retenu d’un certain patron…). Je suis très perplexe sur le header dans le footer.
@Franck : on m’avait parlé de Gerbe lorsque je cherchais (vraiment) des collants pour euh… enfin… bon… voilà…
@Sylvain : j’ai beau le dire et le répéter souvent, c’est toujours l’accumulation des petits défauts (« Pas graves ») qui font une mauvaise utilisabilité. Alors évidemment, on peut continuer à s’en fiche perpétuellement, mais lorsqu’on fait des tests utilisateurs, on voit bien que ces petits défauts sont comme autant d’épines de cactus dans le pied. Une, deux, trois, on peut supporter, mais quand c’est 10 ou 20, on a franchement envie de les retirer (traduction en ecommerce : « d’abondonner son panier »). Le drame, c’est après un parcours difficile, on a un formulaire de commande un peu récalcitrant et là, ça ne pardonne pas, l’abandon arrive rapidement.
Pour en revenir à LeBourget.com, on est dans le cas d’un site neuf qui, je le crains, va se traîner ses défauts de naissance ad vitam aeternam jusqu’à ce qu’un jour on se rende compte que le site est impraticable (à force de le faire évoluer un peu au hasard) et qu’on doive dégainer un gros budget pour le « nettoyer » alors qu’une démarche plus progressive, presque homéopathique, serait bien meilleure et moins onéreuse. Mais, encore une fois, c’est une pathologie fréquente dans le ecommerce et LeBourget.com reste malgré tout un site innovant. Saurat-t-il plaire à sa cible ? Là est la question
@Sylvain : « le header dans le footer ». On doit plus l’appeler le header, alors
Ouch ca pique les yeux… Pas du tout d’accord avec leurs choix… De grandes photos, c’est bien, mais avec des zones ‘informations’ et ‘consommation’ completement fouillie. Faut qu’ils redressent la barre les vendeurs de collants, sinon ca sent vraiment pas bon pour leur taux de transfo.
PS : allez faire un tour avez IE7 … la qualité des images est…comment dire… pire ?
Merci à http://www.saguez-and-partners.com/raymond-interactive de propulser des sites de cette qualité, ca fait doucement rêver
La compression ‘est pas trop en cause mais c’est surtout l’upscaling en fonction de la taille de la fenêtre qui est en cause.
C’est sure qu’une image en 800×600 etirée sur un ecran 22 ou 24″ ca bave un peu.
Le menu en pied de page est un peu déconcertant au début (je me suis demandé si le site avait été testé sous Chrome en arrivant dessus lol) mais il se révèle plutôt intéressant et agréable avec les grosses photos en pleine page (si seulement elle n’étaient pas pixellisées… il semblerait que le site soit fait pour les basses résolutions)
Autres remarques en sus de celles du capitaines… les vignettes non cliquables dans « vous aimerez aussi ». :-/
Bonjour,
Tu relèves des erreurs de conception dans l’interface du site sans les citer, c’est très louable. Moi aussi je laisserai à chacun le soin d’évaluer l’emplacement du logo, celui de la nav, et la pertinence des carrousels. Hein ? Mais non je n’ai rien dit !
Juste un point de vue sur la direction artistique du site maintenant : J’ai travaillé il y a une 10aine d’année sur l’image de cette marque. Ils avaient le souhait de se positionner au moins dans leur image comme une marque luxueuse, et de reprendre les codes visuels du secteur.
Ici, la page d’accueil du site annonce les soldes avec des gros lettrages en Arial Black rose fushia bien saturé et criard, on y annonce des promos et on y offre les frais de port…
Le choix iconographique se porte aussi sur des visuels de produits détourés de blancs. On ne retrouve pas les codes du luxe qui utilisent plutôt des visuels présentant des univers chargés d’émotion(s) ou la mise en valeur de la marque est privilégiée que la présentation des produits. Ici, c’est du premier degré un peu lourdaud.
Clairement, on est là dans un positionnement visuel qui rapproche plus l’image de la marque du « prêt-à-porter de grande surface à pas cher » que du luxe. J’espère juste pour eux que ce positionnement visuel est calculé, conscientisé et validé.
Au final, un site de conception honnête mais un peu fadouille et vide de sens, comme les agences en produisent souvent à la chaine lorsque les budgets sont serrés.
@Laurent : sur le design, j’aurais plus de mal à me prononcer, mais je trouve que le positionnement est plutôt haut de gamme (cela dit, c’est une marque que je ne connais que par la notoriété et pas par ses produits, donc je me trompe peut-être). En tout cas, la volonté de casser les codes du ecommerce est assez typique du luxe. Encore une fois, nous n’avons pas tous les paramètres en main et il est toujours difficile de juger un site sans en connaître tous les tenants et aboutissants.
[...] This post was mentioned on Twitter by Camille Jourdain, Capitaine Commerce, analyse_web, Soraya Ben Hadj, Gregory Moignard and others. Gregory Moignard said: #ecommerce 2 articles la même semaine sur le site du lebourget.com : http://tinyurl.com/ycj8zdv et http://bit.ly/83bvxN [...]
Quand on veut ainsi adopter un positionnement graphique particulier et donc ergonomiquement original, il faut bien entendu éviter les écueils décrit par le boss. Mais comme ce n’est pas toujours simple sur des wireframes ou des maquettes chartées d’envisager certaines surprises comme celle des écritures sur fonds sombres et autres effets inattendus comme les rendus par taille d’écran, le mieux est de faire une maquette fonctionnelle statique.
Mais ça rallonge le budget, ça rallonge le calendrier de prod et ça engendre des corrections qui représentent des coûts inattendus.
Donc, personne ne le fait, et on préfère envoyer le bouzin comme ça, puis corriger en live, quand c’est encore possible.
Aussi, lors de la conception, il est important de bien doser la proportion entre originalité et réalisme/pragmatisme commercial à l’aune du temps et du budget que l’on souhaite y consacrer, car quand on a pas les moyens de ses ambitions, voici au final ce qu’il advient …
@Sylvain/Capitaine C’est donc un Footdear ??!… ;o)
@ Christophe
Je partage l’avis sur les moyens des ambitions.
Dans le même ordre de comparaison, je serai curieux de connaître le nombre d’étapes de conception (et de tests) du module de panier de Crate & Barrel. Athypique également,mais pour le coup très bon en usabilité !
D’accord avec Laurent et Christophe.
On est loin du luxe et loin de l’original. En fait, ce qui est génant est le titre de l’article.