Un peu de design web : l’art de mettre en valeur son produit

J’ai lu avec intérêt l’interview publiée sur capitaine-commerce (décidément) des créateurs de madein33.com, ainsi que la première note qui avait été consacrée à ce site.

Madein33.com propose aux particuliers et aux professionnels des coffrets cadeaux dont les produits sont issus du terroir girondin. Cette spécificité géographique distingue le site des leaders du marché que sont smartbox et wonderbox par exemple.

On retrouve cette volonté d’exclusivité dans le design du site, visuellement très éloigné des concurrents précédemment cités.

Design web - madein33.com

En terme d’expérience utilisateur, de nombreux points me semblent à revoir. En vrac : l’excès de contenu, le manque d’organisation des messages, les encarts sociaux un peu partout, le panier peu visible, les champs texte en jaune sur fond jaune, le bouton « power » pour créer un compte (?)… Je pense que plusieurs choses pourraient être améliorées, mais ce n’est pas cet aspect qui a motivé ce billet.

Les commentaires de l’article montrent que le look du site a plu aux lecteurs, c’est un point très important. Personnellement, je suis assez réservé.

Le site déborde de codes graphiques. Quelques illustrations (des ballons, des rubans utilisés pour un peu n’importe quoi, des nœuds, un coffret, des cadeaux), plusieurs éléments d’interface (le fond matière, les pictos du panier, du compte client et des réseaux sociaux – 4 pour Facebook !), une police non-système très grasse… On dirait un exercice de Photoshop pour webdesigner ! Pris indépendamment ces éléments ne posent pas de problème, mais mis tous ensemble ils dégradent la lisibilité du site.

Ce manque de lisibilité nuit énormément à la visibilité du produit. Le petit carrousel, au centre de la page, semble perdu au milieu d’une masse jaune/verte. Les visuels affichés étant relativement chargés (difficile de faire rentrer plusieurs produits sur une seule photo), ils ne ressortent plus du tout. L’interface du site devrait mettre en valeur le produit, pas l’écraser !

Démonstration :

Design web - steinway.com

Bien sûr les sites n’ont rien à voir, bien sûr le site de Steinway n’est pas exempt de défauts, mais une fois encore ce n’est pas ce qui m’intéresse. Ce qui m’intéresse, c’est la mise en valeur du produit.

Sur le site de Steinway, le carrousel en met plein la vue. De nombreuses astuces permettent aux pianos de « jaillir » de l’écran : la taille de l’image bien sûr, mais aussi le bandeau d’arrière-plan galbé, le motif et la luminosité dudit bandeau, le contraste entre les couleurs du piano et celles du site, les extrémités supérieures et inférieures de l’instrument qui empiètent légèrement sur le header et le menu du dessous… Tous ces trucs de designer mettent le produit en avant.

Autre exemple :

Design web - fruute.com

Bien sûr les sites n’ont rien à voir, bien sûr le site de Früute n’est pas exempt de défauts… Je me répète. Ici aussi, le carrousel en met plein la vue. La recette est en partie la même : visuels produits de grande taille et de bonne qualité + interface légère et franchement en retrait.

J’aurais aimé trouver ce genre de mise en valeur sur madein33.com, plutôt qu’une interface chargée et des produits peu visibles.

Changement de mot de passe : Amazon lit dans mes pensées !

Mise à jour : comme le signale très justement Rémi dans les commentaires, le problème ne vient pas directement d’Amazon mais de Firefox, qui pré-remplit un champ de façon assez cavalière…

Après avoir effectué une commande sur amazon.fr, je me suis rendu sur mon compte client afin de supprimer la carte de paiement mémorisée sur le site (une fonctionnalité d’Amazon dont je ne suis pas très fan : si quelqu’un trouve mon mot de passe, il peut commander et se faire livrer tout ce qui lui passe par la tête.) J’en profite pour changer de mot de passe.

Une fois sur mon espace client, je clique sur le lien « nom, adresse e-mail et mot de passe » de la catégorie « paramètres du compte ». Je suis redirigé sur une page me permettant de changer chacun de ces paramètres.

Amazon : nom, adresse e-mail et mot de passe

Note : les étoiles affichées ici en tant que mot de passe n’ont à première vue pas grand intérêt : le mot de passe n’est pas visible, le nombre de caractères n’est même pas correct… Cela dit, ces étoiles permettent de conserver une mise en page claire (une colonne <nom-du-paramètre>, une colonne <paramètre> et une colonne <modifier-le-paramètre>) et ne perturbent pas la lecture. Elles peuvent même servir à rassurer le visiteur (« chez Amazon, mon mot de passe est bien crypté »). A la limite, un utilisateur dont le mot de passe contient 20 caractères pourrait être surpris de ne voir que 8 étoiles affichées, mais il s’agit là d’un cas assez particulier je pense.

Je clique sur le bouton « modifier » en face du mot de passe et le site me renvoie sur la page correspondante. Surprise : mon nouveau mot de passe est déjà saisi !

Amazon : nouveau mot de passe

Amazon a sélectionné un mot de passe pour moi et l’a pré-rempli. Très fort ! Dommage qu’il ne soit pas lisible…

Plus sérieusement je suppose qu’il s’agit d’un bug et que c’est le champ « mot de passe actuel » qui aurait dû être pré-rempli. C’est toutefois assez surprenant de la part d’Amazon.

Je suis également étonné de trouver un captcha sur cette page. Quel est son intérêt dans le cas présent ? Il doit y en avoir un mais je n’arrive pas à le comprendre. Ce dont je suis sûr en revanche, c’est qu’il s’agit d’une étape pénible pour de nombreux utilisateurs.

J’entre mon nouveau mot de passe deux fois, je saisis mon mot de passe actuel, je recopie le captcha et je valide. La page se recharge et un message m’indique que j’ai fait une erreur.

Amazon : problème de changement de mot de passe

Ce message est malheureusement peu compréhensible : comment peut-il y avoir « une erreur de combinaison E-mail/Mot de passe » alors qu’aucun champ e-mail n’est présent sur la page ? Les champs problématiques n’étant pas mis en valeur, je n’en saurais pas plus. Le nouveau mot de passe, quant à lui, est à nouveau pré-rempli…

Une petite question pour finir : le message publicitaire en haut à droite du site, tout le monde a droit au même ? Je suis assez surpris (décidément) qu’on me propose une offre spéciale sur des couches…

Google WDYL (What do you love), à quoi ça sert ?

J’ai découvert récemment via différentes sources la mise en ligne d’un nouveau site (à moins qu’il ne s’agisse d’un service ?) Google : « What do you love ? » (WDYL en abrégé). J’ai trouvé beaucoup d’articles à ce sujet, via Google justement, mais presque aucun n’a répondu à cette simple question : à quoi ça sert ?

La page d’accueil du site, minimaliste, ressemble beaucoup à celle de google.fr : un titre, un champ de recherche et un bouton.

WDYL - comparaison des pages d'accueil de Google et de WDYL

Les résultats d’une recherche, présentés ici sous forme de petits blocs, n’ont en revanche rien à voir. Et pour cause : WDYL n’effectue pas de recherche sur internet (du moins pas directement) mais sur les propres sites de Google.

WDYL - comparaison des pages de résultats de Google et de WDYL

Chaque bloc correspond à un service de Google. Leurs emplacements ne semblent pas suivre d’ordre particulier : les services les plus populaires (Youtube, maps) se retrouvent ainsi mêlés aux plus obscurs (patent search, moderator).

Les blocs sont tous bâtis sur le même modèle : un picto, un titre reprenant le terme ou l’expression recherchée, le nom du service illustré, le résultat de la recherche via ce service et un bouton « aller voir les résultats directement sur ce service » (dont l’intitulé manque de précision).

Une élégante scrollbar (invisible en 1024×768) a également été ajoutée à gauche de la colonne des résultats. Amusant mais pas très utile, en tout cas avec une souris dotée d’une molette de défilement. Peut-être sur d’autres types de terminaux ?

WDYL - scrollbar spéciale

Cette présentation très tendance sous forme de blocs et de colonnes manque clairement de lisibilité, mais ce n’est pas ce qui m’intéresse aujourd’hui. Je reviens donc à ma question initiale : à quoi ça sert ? La réponse est évidente : WDYL sert à faire de la promotion pour les services de Google.

Question plus intéressante : qui va s’en servir ? Après un peu d’ego surfing pour les plus geek, qui reviendra sur le site et dans quel but ?

Pour répondre à cette question, j’ai besoin de comprendre ce qu’un utilisateur peut retirer de ce site. C’est sans doute là qu’un problème se pose : les services de Google ne sont pas adaptés à toutes les requêtes. En d’autres termes, les résultats fournis par WDYL manquent souvent de pertinence, voire tout simplement de sens.

Quel est l’intérêt du service « traduction » lorsque je recherche le terme « iMac » ? Du service « voice » (téléphone) lorsque je recherche « Dinosaur » ? Du service « maps » lorsque je recherche « Super Mario Bros » ? Je ne vais pas multiplier les exemples, ceux-ci me semblent assez parlants. On pourrait presque créer un tumblr dédié aux résultats les plus farfelus…

WDYL - résultats non pertinents ou insensés (montage)

L’intérêt même de la présence de certains services est discutable : les blocs « Chrome », « mobile », « Gmail » par exemple n’apportent pas grand chose à l’utilisateur ayant fait une recherche (le résultat n’a pour ainsi dire aucune incidence sur leur contenu). Pour Google c’est une vitrine intéressante (encore que…), pour l’utilisateur… Un moyen de découvrir de nouveaux services ? Ce n’est peut-être pas la meilleure façon de procéder.

Bonus

Le résultat de la recherche « Google WDYL » fourni par le service « trends » (outil qui « mesure l’intérêt que le monde porte aux choses que vous aimez » selon Google) n’est pas très flatteur : la popularité de cette expression est passée de 100 (sur une échelle de 100) début juillet à… 0 fin août. Sacré gadin.

Un petit bonus supplémentaire ? L’excellent tumblr littlebigdetails a rapporté il y a quelques jours une astuce mise en place sur WDYL : si vous recherchez un terme un peu trop osé (« sex », par exemple), WDYL affichera les résultats relatifs à la recherche du mot… « Kittens », avec un fond d’écran de toute beauté. Note : il est également question de cette astuce ici.

WDYL - résultats d'une recherche "osée"