Baromètre INRIA, un « nouveau monde numérique » peu clair (1/2)

Une amie m’a transmis hier via Twitter un lien intitulé « Les français et le nouveau monde du numérique ». Je me suis rendu sur le site et j’ai noté quelques points qui pourraient être améliorés.

Baromètre Inria - splashpage

Plusieurs choses me perturbent dès la première page.

• On y trouve de nombreux éléments peu hiérarchisés. Le titre « Les Français et le Nouveau Monde numérique » (avec toutes ces majuscules, oui oui) est heureusement mis en avant ; le reste du contenu ressemble à un assemblage hétérogène de logos et de blocs.

Son intérêt m’échappe. Je comprends qu’il soit important de mettre en avant les partenaires de l’opération, mais est-ce une bonne façon de faire ? Quelles informations le visiteur peut-il tirer de cette page, que je qualifierais de simple splashpage ? N’aurait-il pas été intéressant d’utiliser cet espace pour présenter le site et expliquer clairement de quoi il retourne ?

Note : Cette explication existe mais n’est pas vraiment mise en valeur (elle se cache derrière le lien « À propos du baromètre » situé dans le footer.)

Le gros bouton permettant de passer à la page suivante manque réellement de contraste. Ce problème est d’autant plus important qu’il s’agit du seul élément offrant l’accès au véritable contenu du site : il serait dommage de passer à côté ! Même souci pour son contenu : une flèche blanche dans un bouton gris clair, le tout sur un fond gris clair, est-ce vraiment une bonne idée ?

Globalement, cette entrée en matière manque un peu d’intérêt et de clarté.
Je clique sur le gros bouton gris pour accéder à la page suivante.

Baromètre Inria - choix

Deux possibilités : à gauche découvrir les résultats de l’enquête, à droite faire le test.

Ici aussi les boutons permettant d’accéder au contenu manquent de contraste. Par ailleurs, ils portent tous les deux le même libellé peu informatif « Commencer ». N’aurait-il pas été plus intéressant de rendre les légendes « Découvrez… » et « Faites le test » cliquables ?

Je constate également que le logo Inria a été modifié : sa taille a été réduite afin de permettre l’ajout d’éléments « sociaux » (bouton Twitter). Je ne sais pas si c’est à cet endroit que les visiteurs s’attendent à trouver ce type de contenu ; ce que je sais c’est qu’ils risquent de passer à côté.

Au sujet du choix des mots : le second bouton est intitulé « Et vous, quel voyageur êtes-vous ? » Je comprends l’image « nouveau monde numérique / voyageur », mais ce genre de figure de style n’a pas vraiment sa place ici. Remplacer « voyageur » par « internaute » me semble plus approprié.

Un dernier point pour finir : il n’est pas possible de revenir à la page précédente. Le bouton « page précédente » de mon navigateur me renvoie au site précédemment consulté.

Je préfère commencer par faire le test, je clique sur le second bouton.

Baromètre Inria - test

La structure de cette nouvelle page me surprend : la question se trouve à droite, les réponses à gauche. Les occidentaux lisent de gauche à droite, il me semble donc plus logique de commencer par la question plutôt que par les choix proposés comme c’est le cas ici. La question est fortement mise en valeur dans un bloc rouge, peut-être pour pallier cette présentation inversée.

Le formulaire utilise des éléments d’interface relookés (les cases à cocher, en rouge). C’est plus élégant… mais moins clair. Lorsque je clique sur l’une de ces cases, un carré rouge apparaît à l’intérieur pour me signaler que la case est cochée. Rouge sur fond rouge, encore un choix qui dégrade la lisibilité.

Toujours au sujet des choix : les libellés ne sont pas cliquables. Encore une fois ce n’est pas très grave, mais ça aurait amélioré l’expérience.

Un bouton gris en haut de la page me permet d’accéder aux résultats de l’enquête. Bon point : si je veux jeter un œil aux résultats et revenir au test ensuite, je n’aurai pas à répondre à nouveau aux questions auxquelles j’ai déjà répondu. Mauvais point : si je clique sur le logo Inria (cliquable ici alors qu’il ne l’était pas avant), je retourne à la splashpage et mes choix ne sont pas mémorisés. En d’autres termes : je devrai répondre à nouveau à toutes les questions auxquelles j’ai déjà répondu.

Note : le message d’erreur « Réponse obligatoire » pourrait être davantage mis en avant (il y a de la place). Mieux : la mention « Toutes les réponses sont obligatoires » (puisque c’est le cas) pourrait figurer sur le questionnaire.

Après avoir répondu aux 18 questions, je suis redirigé sur une page de résultat.

Baromètre Inria - résultat

Là encore, beaucoup de contenu peu hiérarchisé. Le titre « Vous êtes plutôt parmi » est bien visible, à l’inverse du nom de la catégorie « Les grands explorateurs », quasiment invisible. Il s’agit pourtant d’un élément très important, j’ai répondu à 18 questions pour en arriver là ! La page, très chargée en couleurs / blocs / textes / pictos / illustrations, manque vraiment de lisibilité.

Bonne idée : je peux connaître les autres profils d’internautes. Je note toutefois que si je clique sur un picto (dont il faut deviner la signification puisqu’il ne sont pas légendés), le texte et l’illustration changent… mais pas le titre « Vous êtes plutôt parmi ». Pas très cohérent.

Baromètre Inria - autre profil

Mauvaise idée : si je quitte cette page, il me sera impossible de revenir dessus autrement qu’en refaisant tout le test !

Je terminerai ma visite du site dans les prochains jours, avec deux points qui m’ont particulièrement ennuyé.

Bonus

En cliquant sur le menu du haut, j’ai fini par arriver sur cet écran.

Baromètre Inria - bug

Pour reproduire ce bug (Firefox & Safari), il faut se placer sur la page « Faire le test », cliquer 2 fois sur l’intitulé « Faire le test » puis une fois sur « Les résultats de l’enquête ». Rien de grave bien sûr, mais c’est la conséquence d’autres choix plus gênants.

Bilan

libellés peu clairs
structure de certaines pages
éléments de formulaires revus
bug
manque de hiérarchie
manque de lisibilité
pictos non légendés
splashpage
boutons gris très peu visibles
modification d’éléments d’interface au fil du site
bouton page précédente non fonctionnel
choix non mémorisés si retour à la splashpage
impossible de revenir sur la page du résultat du test

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.

Dior.com - splash page

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.

Dior.com - menu principal

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 ».

Dior.com - mur de vidéos

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.

Dior.com - menu tronqué en surimpression

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.

Dior.com - fonctionnement de l'affinage

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é.

Dior.com - chargement des vidéos

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

Dior.com - lecture d'une vidéo

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.

Dior.com - page d'erreur

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

Bershka, un lookbook à améliorer

Je poursuis mon exploration du nouveau site e-commerce de Bershka (voir la note précédente). Je m’attarde cette fois sur le lookbook, accessible depuis le menu supérieur du site.

Bershka - lookbook homme

Un clic sur ce lien « Lookbook » me renvoie sur une page élégante, à l’aspect très épuré… mais au contenu difficilement déchiffrable. Les textes et pictogrammes affichés au dessus du visuel de fond manquent vraiment de lisibilité.

Les 3 liens du menu de gauche, aux intitulés pas franchement explicites (je suppose que « Bershka » = femme et que « BSK » = adolescente), sont en gris, ce qui ne me permet pas de distinguer la rubrique actuellement consultée. Je déduis du visuel qu’il s’agit de la partie « Homme ».

Je remarque 2 petites flèches en dessous du texte « Lookbook ». Lorsque je clique sur celle de droite, il ne se passe rien. Lorsque je clique sur celle de gauche, il ne se passe rien non plus… Ah si : il faut attendre quelques secondes pour que le contenu se charge. Je me trouve désormais sur le lookbook de septembre, mais apparemment plus dans la rubrique « homme ». J’ai été automatiquement redirigé vers une autre partie (la femme ou l’adolescente, difficile à dire).

Bershka - lookbook de septembre

J’utilise le bouton « page précédente » de mon navigateur pour revenir sur le lookbook d’octobre : je suis redirigé sur la page d’accueil du site. Il n’est donc pas possible de naviguer à travers le lookbook en utilisant les boutons de mon navigateur.

Je retourne sur la page de garde du lookbook et clique sur « BSK ».

Bershka - lookbook BSK

L’utilisation d’un visuel principal sur fond blanc rend certains textes (blancs eux aussi) totalement invisibles ! Quelqu’un a-t-il consulté ce lookbook avant de le mettre en ligne ?

Note : ce problème est apparemment récurrent : on le retrouve dans les rubriques « BSK » et « Homme » du lookbook de septembre.

Je clique sur le lien « Bershka ».

Bershka - lookbook Bershka (femme)

Les éléments du menu, ici sur fond pastel, sont cette fois un peu plus lisibles.

Je m’attarde un instant sur la silhouette principale. Lorsque je passe mon curseur sur le visuel, le texte « voir l’information » (encore une traduction intéressante…) apparaît. Le lookbook permet donc d’accéder directement aux fiches produits ! C’est une très bonne chose, mais une fois encore, pourquoi ne pas mettre cette fonctionnalité plus en avant ?

Je clique sur la silhouette et un nouveau menu apparaît.

Bershka - lookbook Bershka (femme) avec menu

Si j’en crois la première ligne de ce nouveau menu, je me trouve sur le look 3. Étrange, je ne me souviens pas avoir consulté d’autres looks.

Je constate que le premier article que l’on me propose est une paire de chaussures. Le premier… Et le seul en réalité, puisque les petites flèches à gauche et à droite du visuel produit sont ici inactives (pire, elles ont l’air actives mais ne le sont pas). Je refais le test sur la silhouette suivante (intitulé « look 2 », bizarre) : heureusement, deux produits sont cette fois disponibles.

Ce test me permet de trouver un bug (Firefox 7, Safari 5) dans l’affichage des articles de ce petit menu :
• je vais sur le look 2 ;
• je clique sur « voir l’information » ;
• je clique sur la flèche droite pour afficher le second produit ;
• je retourne sur le look 3 en utilisant la flèche à gauche de la page ;
• je clique sur « voir l’information ».
À ce moment-là, plus aucun produit n’est affiché dans le petit menu.

Un dernier commentaire à propos du lien « afficher tout » situé en bas du menu de gauche : comme son nom l’indique, il permet au visiteur d’afficher l’ensemble des silhouettes du lookbook sur une seule page. Malheureusement, aucun lien « retour » n’est présent pour revenir à la page précédente. La fonctionnalité existe, mais elle est cachée : il faut passer son curseur dans les marges (à gauche ou à droite des silhouettes) pour voir apparaître le texte « Volver » (« retour » en espagnol).

Bershka - lookbook "afficher tout"

Note : avec une résolution d’affichage de 1024 x 768 pixels, traditionnellement utilisée comme standard pour la création de sites internet, ces marges sont à peine visibles.