Archives des scrollbar

4 novembre 201122 février 2019

Dior.com, suite et fin de l’exploration

Je poursuis ma visite du nouveau site de Dior (voir la première note). Je me rends cette fois dans la partie « Mode et accessoires », rubrique femme.

Le carrousel qui m’accueille ici risque de dérouter de nombreux utilisateurs.
• Les minuscules puces (façon iPhone, déjà vues sur le site de Dolce&Gabbana entre autre) permettant de passer d’un élément à un autre sont quasiment invisibles ;
• le contenu défile en permanence sans qu’il soit possible de l’arrêter, même en cliquant sur l’une des puces ;
• le contenu défile de droite à gauche de façon infinie, ce qui empêche le visiteur de cerner l’ensemble des éléments du carrousel.

L’apparence des liens présents sur cette page (header, footer, carrousel… en fait, tous les liens du site !) risque également de perturber la consultation : les polices utilisées sont très petites (les textes du footer en 8pt, sincèrement…) et les liens manquent vraiment de contraste.

J’ouvre le menu en passant sur le lien « Haute couture » et je clique sur « Découvrir ».

Je suis surpris par le look de la page qui s’affiche alors. Peu de texte, pas de lien visible… C’est en passant le pointeur un peu partout que j’ai découvert que les 2 pavés de textes « Silhouettes légendaires » et « Le savoir-faire haute couture » étaient cliquables !

Un mot au sujet du comportement du menu, assez étrange. Lorsque je place le pointeur sur un élément (par exemple « Haute couture »), un bandeau blanc se déroule du haut vers le bas. Une fois le point le plus bas atteint, les liens s’affichent. Problème : si je déplace mon curseur dans le bandeau blanc avant que les liens ne soient affichés, le menu se referme. En vidéo :

Dior.com – menu from uxui on Vimeo.

Autre petite surprise concernant le menu : le premier élément (le mot « femme ») est suivi d’une flèche qui incite au clic… mais qui n’est pas cliquable. Le mot « femme » l’est, en revanche, mais il nous redirige… sur la page actuelle, ce qui ne présente pas un grand intérêt.

Je clique sur le lien « L’inspiration » de la catégorie « Collection automne hiver 2011 ».

La scrollbar permettant de faire défiler le texte de droite mesure 1 pixel de large ! De nombreux visiteurs risquent de ne pas comprendre que le texte est plus long qu’il n’y paraît, d’autant que le paragraphe se termine proprement (il n’y a pas de ligne tronquée horizontalement permettant de comprendre qu’il reste du texte à lire.)

Et que dire de la lisibilité des liens du bas de la page ?

Retour au menu : je clique sur le lien « les silhouettes », toujours dans la catégorie « Collection automne hiver 2011 ».

Le look de ce carrousel rappelle celui du mur des vidéos vu dans l’article précédent (il est d’ailleurs plutôt long à se charger, lui aussi). Il fonctionne de la même manière : le déplacement du pointeur sur l’axe horizontal fait défiler les silhouettes.

Petit bug au passage : si j’ouvre le menu et que j’essaie de cliquer sur le lien de gauche « voir le défilé automne hiver 2011 » , rien ne se passe (alors que le lien fonctionne lorsque l’on se trouve dans d’autres parties du site.)

Je place mon pointeur sur la première silhouette : une infobulle s’affiche et m’indique en quelques mots quels sont les vêtements portés par le mannequin. Je clique.

Changement de méthode de défilement : ici ce n’est plus le déplacement du pointeur qui fait défiler le contenu, mais sa position. Si le visiteur le place en bas de l’image (dans une zone dont les limites ne sont pas visibles), la photo va se décaler vers le bas. Pourquoi changer de méthode ? C’est une drôle d’idée, d’autant que l’arrêt du défilement (si le visiteur positionne son curseur au milieu de l’image), assez abrupt, manque un peu d’élégance.

Les deux flèches du petit menu de droite permettent de passer d’une silhouette à l’autre sans revenir au carrousel. C’est une bonne nouvelle, chaque retour au carrousel impliquant un rechargement complet de l’ensemble des silhouettes (comme pour les vignettes du mur des vidéos, donc.)

Je clique sur le bouton « détail » de ce petit menu.

Une seule ligne de texte (un texte déjà visible en infobulle sur la page du carrousel) pour présenter les créations de Dior, vraiment ?

Au final difficile d’être séduit par l’expérience proposée par ce nouveau site. Mon opinion rejoint en partie (je n’ai pas traité les mêmes sujets) celle de Fred Cavazza : il y avait vraiment mieux à faire, en particulier lorsque l’on travaille sur la vitrine web d’une enseigne aussi prestigieuse. Une autre fois peut-être ?

Bilan

élément qui incite au clic non cliquable
lien vers page en cours
description des silhouettes
comportement du menu
rechargements inutiles
soucis liés au carrousel (début de la note)
lisibilité (taille, contraste) des liens
navigation invisible
scrollbar invisible
bug

26 octobre 20114 mars 2019

Dior.com : un site à voir, une expérience à revoir

Je consulte à l’instant deux articles traitant du nouveau site de Dior. Le premier, publié sur richcommerce.fr, parle de « choix de conception […] anachroniques » et de « mauvais traitement infligé aux internautes ». De son côté, l’analyse de Web&luxe évoque une « navigation simple » et un « site […] bien fait ». J’ai donc tenté de me faire ma propre « opinion orientée utilisateur ».

Je tape l’adresse du site et je valide. Une photo, de qualité plutôt moyenne (très compressée), s’affiche alors.

Une photo, et c’est tout. Pour accéder au véritable contenu, je dois cliquer sur le bouton « entrer » situé en bas de la page. Je me range du côté du premier article : des spash pages de ce genre, on n’en voit (presque…) plus et c’est tant mieux ! Puisque son livre est sur mon bureau, voici ce que dit Jakob Nielsen à propos de ce genre de page :

Criardes, surchargées, les pages d’introduction sont peu pratiques et arrogantes. Faire attendre les utilisateurs pour leur infliger des animations inutiles à télécharger et à regarder revient tout simplement à leur dire « Nous sommes en train de vous imposer un spectacle dont nous savons pertinemment que vous ne voulez pas mais nous allons quand même le faire. »

Il n’y a heureusement pas d’animation Flash sur cette splash page, mais le principe est le même.

Je clique sur le bouton « Entrer » pour accéder au véritable contenu de la page. Un élégant menu s’affiche.

Détail amusant : le bouton « Entrer » se transforme ici en bouton « Fermer ». Peut-être est-il destiné aux personnes qui auraient cliqué par erreur sur « Entrer » et qui souhaiteraient visualiser à nouveau la photo…

Autre « détail » : la mise en page que l’on voit sur l’image ci-dessus n’est pas correcte : la partie haute de la page (le menu « Les univers Dior ») devrait être centrée, comme la partie basse (« Les actualités Dior »). Il se centre lorsque je redimensionne la fenêtre de mon navigateur. Étrange.

Je note également que la catégorie « Événements by Dior » présente 3 liens… suivis d’une petite flèche, qui permet d’afficher plus de contenu. La maquette est ainsi plus élégante, toutes les catégories ont le même nombre d’éléments. Oui mais… Était-il vraiment nécessaire d’afficher cette flèche pour… 1 seul lien supplémentaire ?

Je poursuis mon exploration, je clique sur le premier lien, « La maison Dior en vidéo ».

Le grand mur de vidéos façon Cooliris ou iTunes (selon l’article) met un certain temps à se charger. Le déplacement du pointeur de la souris permet (sans cliquer) de faire défiler les vignettes sur l’axe horizontal. Il s’agit d’un comportement que l’on voit de plus en plus sur Internet mais qui n’est pas toujours facile à appréhender pour les personnes les moins à l’aise avec l’outil informatique. Et ce n’est pas la minuscule et invisible scrollbar du bas de page qui les aidera à naviguer.

Le mur occupe tout l’espace de la fenêtre. En d’autres termes, le menu de la page précédente n’est plus affiché et il n’est donc plus possible d’accéder aux autres parties du site. Heureusement le bouton « précédent » du navigateur fonctionne, il fonctionne même très bien puisqu’il me ramène sur la page précédente, menu ouvert (ce qui m’évite d’avoir à cliquer sur « Entrer » à chaque fois que je reviens en arrière.) Le lien « Dior.com » en revanche, situé en haut à gauche du mur des vidéos, me renvoie sur la page précédente, menu fermé. Pénible.

En réalité, le menu de la page précédente est bien présent sur le mur des vidéos, il est simplement introuvable (c’est un concept étonnant : il faut deviner l’emplacement de la navigation). Je suis tombé dessus par hasard, en cliquant sur le logo Dior en haut de la page. À ce moment-là, le menu s’est à nouveau affiché… Enfin la moitié supérieure du menu, le reste n’étant apparemment plus accessible ici.

Retour au mur. Le nombre de vidéos étant franchement élevé, les concepteurs du site ont pensé à ajouter un système d’affinage. Malheureusement, ils ont jugé bon de le rendre aussi peu visible que possible. C’est ainsi qu’un bouton blanc sur fond blanc (il n’y a pas d’erreur), situé au pied du mur, permet au visiteur de sélectionner une catégorie de vidéos. J’ajoute que le texte du bouton est en… gris très clair.

Le comportement de ce menu est assez étrange. Lorsque je clique dessus, un menu s’ouvre. Lorsque je clique sur un élément du menu, certaines vidéos sont mises en valeur… L’espace d’une ou deux secondes, durée que met la page suivante à se charger. Cette mise en valeur aurait été plus intéressante en rollover.

Cette page d’affinage me présente une sélection de vidéos (troisième image de la capture ci-dessus). Le bouton blanc-sur-fond-blanc m’indique dans quelle catégorie je me trouve, et je peux revenir au mur en cliquant sur la minuscule croix située à gauche du bouton… ou en utilisant le bouton « page précédente » de mon navigateur, décidément bien géré.

Ce retour au mur des vidéos me permet de constater un défaut particulièrement pénible du site : les vignettes se rechargent à chaque fois que l’on arrive sur la page. Et comme les vidéos sont nombreuses, le temps de chargement est notoirement élevé.

Je clique sur une vidéo pour lancer la lecture.

Le film occupe tout l’espace de la fenêtre, un choix élégant qui a de nombreuses conséquences sur l’interface de visionnage. Le lecteur est ainsi masqué par défaut (il apparaît quand le pointeur se trouve dans la zone inférieure), ce qui le rend plus difficile à appréhender.

Plusieurs liens sont affichés en surimpression en bas à droite (la lisibilité n’est pas le point fort du site), dont un surprenant bouton « partager » qui ne fonctionne tout simplement pas. Je note également que la vidéo tourne en boucle mais semble se recharger à chaque visionnage.

Un autre bug pour terminer ce premier aperçu du site. Lorsque j’affiche le lecteur et que je clique sur le bouton « contenus associés », je suis redirigé sur une page d’erreur qui m’indique que « la page n’est pas disponible dans cette langue » et que je vais « être redirigé sur la page d’accueil du site ». Je suis bien redirigé quelques secondes après, mais… sur une page entièrement blanche.

Je reviendrai sur d’autres parties du site dans une prochaine note.

Bilan

mise en page fluctuante
lecteur vidéo
splash page
temps de chargement parfois très élevés, rechargement inutiles d’éléments
scrollbar invisible
contenu variable du menu
lisibilité de certains éléments
affinage invisible
menu introuvable
fonction de partage inopérante
contenus associés inaccessibles
redirection non fonctionnelle

30 août 201120 février 2018

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.

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.

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 ?

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…

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.