Rolandgarros.fr, tous les défauts des sites à la mode

Nous sommes fin mai, Roland Garros a commencé. Je cherche le palmarès de Roger Federer en grand chelem, je vais donc jeter un œil au site, qui a apparemment été intégralement retravaillé.

Voici la page d’accueil que l’on me propose.

01-roland-garros-accueil

Honnêtement, je ne sais pas trop par quoi commencer. Je vais faire une liste, c’est plus facile à lire.

1. Le site est en anglais. L’URL que j’ai saisie est bien « http://www.rolandgarros.fr », l’URL affichée est bien « http://www.rolandgarros.fr », mais le site est en anglais. Et surtout, je ne trouve aucun moyen de changer la langue : sur la version du site « très large » trois drapeaux en haut à droite permettent de modifier la langue affichée, mais ces drapeaux disparaissent sur la version « large mais pas trop ». Le site s’adapte à la résolution du terminal d’affichage c’est intéressant, mais pas si certaines fonctions importantes doivent disparaître (d’autant que ma résolution ici est relativement élevée, et qu’il y a bien de la place dans la barre supérieure !)

2. Le message principal de cette page, celui qui prend le plus de place à l’écran en dehors du nom du tournoi, c’est… le bandeau d’avertissement au sujet des cookies. Certes c’est un problème que l’on rencontre sur une grande partie des sites internet aujourd’hui, mais n’était-il pas possible de diminuer la taille de ce bloc ?

3. Cela ne se voit pas sur la copie d’écran, mais l’image de fond a mis un temps fou à se charger. Et c’est normal, puisqu’elle pèse 1,6Mo. Je détaille un peu : cette image de terre battue, qui ne donne aucun renseignement si ce n’est le nom (il y a le logo pour ça) et le jour du tournoi, pèse 1,6Mo. Il semble que les concepteurs n’aient pas envisagé le tournoi comme un événement mondial, un événement susceptible d’intéresser des gens qui n’ont pas une connexion de type fibre à 100Mb. Heureusement cette image ne s’affiche pas sur mon mobile…
Petit bonus : le texte de l’image n’est pas en texte mais en image. En terme d’accessibilité, c’est très mauvais.

4. Le menu principal se cache derrière un minuscule picto hamburger, quelle que soit la résolution de la machine qui affiche le site. J’ai un écran qui peut afficher 1920 pixels en largeur, mais les concepteurs ont estimé que le menu principal, autrement dit « les liens », autrement dit (bis) le principe même de la navigation sur internet, devait être caché derrière un petit picto en haut à gauche.

5. À l’image des drapeaux permettant de changer la langue, le bouton de recherche n’est visible que sur la version du site « très large ». Les concepteurs ont dû considérer qu’il ne s’agissait pas d’une fonctionnalité importante. Et parce qu’il n’était pas question d’utiliser un banal champ texte visible en permanence, le champ est masqué par défaut et ne s’affiche qu’au clic sur le picto loupe. Pourquoi faire simple quand on peut faire tendance ?

6. Qu’est-ce qu’on trouve d’autre sur cette page d’accueil ? Des sponsors en affichage permanent dans la barre du haut (IBM) et dans la barre du bas (FFT, BNP, Fedex, Engie… parfois en gif animé !) Deux belles bandes horizontales qui réduisent considérablement la surface utile d’affichage.

Je parle de site à la mode dans le titre de la note, je vais donc mettre des points : un point pour l’image énorme et inutile, un point pour le menu hamburger pénible et inutile, un point pour la recherche cachée, un point pour les barres horizontales en affichage permanent. Belle performance… et ce n’est pas terminé !

Je poursuis mon exploration de cette page d’accueil.

02-roland-garros-match

Les matchs du jour. Enfin un peu de contenu potentiellement intéressant ! Pour être bien à la mode (un point de plus), les concepteurs ont pensé à ajouter un genre de « match de tweet » : le joueur dont le hashtag est le plus twitté gagne, il a droit à un petit rond bleu derrière sa photo. (Note : sur Firefox le rond entoure une photo ronde, ce qui est beaucoup plus élégant que sur ma capture réalisée avec Safari.) Je ne comprends pas l’intérêt, je ne comprends pas non plus le pourcentage affiché au dessus du nom du joueur, mais je pense que je ne suis simplement pas dans la cible. (Pourtant j’utilise Twitter ?)

Après les deux matchs du jour, nouvelle image lourde et inutile :

03-roland-garros-image-lourde-inutile

…Puis on passe à un mur d’actualités, sous forme de tuiles pour être à la mode (encore un point de glané). C’est moins lisible que sur une grille classique, mais c’est beaucoup plus tendance ! Je note que chaque tuile présente un petit picto réseaux sociaux (un point de plus), associé à un chiffre plus ou moins grand dont on ne sait absolument pas ce qu’il représente : un article sur Federer (pas sur mes captures d’écran) est associé au chiffre 1.3K, alors qu’il a été partagé 6 fois sur Facebook et 96 fois sur Twitter. Que peut-on en conclure ? L’article a été lu 1300 fois ? Il a touché 1300 personnes ?

Je teste l’affichage d’une vidéo (en haut à droite sur la capture ci-dessous.)

04-roland-garros-news

Pas de chance : sur mon navigateur la vidéo ne se lance pas, du coup l’écran se grise et… il ne se passe rien. Petit bonus : impossible de masquer ce halo gris puisque le lecteur vidéo, qui contient le bouton fermer, ne s’affiche pas. Je rencontre ce bug avec Safari ; sur Firefox la vidéo ne se lance pas mais au moins le bouton fermer s’affiche ! Cela dit après avoir masqué la vidéo impossible d’essayer de relancer une autre vidéo, le clic est désormais inactif. Ça fait pas mal de bugs.

05-roland-garros-news-video-bug

Après ces jolies tuiles je repasse sur une image lourde et inutile, sur la rubrique In the stadium, puis sur une dernière image lourde et inutile, et enfin sur la rubrique RG across the world. Les informations de ces deux dernières rubriques sont affichées sous forme de grille classique, ce qui les rend plus agréable à scanner (mais moins élégantes, j’imagine).

J’en profite pour ajouter un problème que l’on évoque pas très souvent : l’incompatibilité des extensions avec les sites internet complexes que l’on voit de plus en plus (coucou Tumblr !). Sur mes navigateurs, de nombreux éléments ne fonctionnent tout simplement pas : impossible d’afficher la recherche (!), le menu principal (!!), etc. Bien sûr, les concepteurs ne peuvent pas tout tester, surtout pas les extensions, mais il est si simple de ne pas rencontrer ce genre de souci ! Il suffit… d’afficher le menu et la recherche par défaut, et pas au clic. Cette solution n’a que des avantages, mais elle est peut-être moins tendance…

À la fin je teste un simple enregistrer la page sous, pour avoir une idée du poids de l’ensemble : 10Mo avec Safari, 4Mo avec Firefox, 5Mo avec Chromium (je ne sais pas précisément pourquoi le poids n’est pas le même, mais une chose est sûre, il est beaucoup trop élevé). J’hésite : est-ce que j’ajoute un point à la mode pour cette dernière horreur ? Le chargement de ce site sur ma (modeste ?) connexion 4Mb est interminable. C’est un travail lamentable.

Bref, cette page d’accueil me déçoit. Le site avait besoin d’un vrai rafraichissement c’est sûr, mais je ne pense pas que les concepteurs aient pris le bon chemin. Cette version à la mode peut séduire esthétiquement mais elle risque d’énerver sur bien des points. Et surtout, elle a à mon avis un gros souci : quand on est à la mode, on est très vite dépassé. Faudra-t-il la refaire dans deux ans parce que les codes <menu hamburger>, <images pleine page> et <réseaux sociaux partout> ne sont plus tendance ?

Une dernière remarque, au sujet de l’expérience utilisateur de ce site. J’ai fait relire rapidement cette note à madame, qui m’a fait remarquer ceci : « le pire, c’est que personnellement c’est pour voir le tennis que je viens sur ce site, et je n’ai même pas trouvé comment regarder un match ! » En effet, il n’y a apparemment aucun lien vers le direct, seul l’affichage des scores est possible. J’imagine que c’est une histoire de droits, et que seul France Télévisions a la possibilité de diffuser les matchs. Mais pour les visiteurs, c’est un réel problème.

J’en profite au passage pour louer le travail des intégrateurs, au sens large. En rédigeant cette note j’ai testé la page avec plusieurs machines, plusieurs navigateurs, plusieurs résolutions etc. Je n’ai pas le temps d’en faire plus (ce qui rend ma liste de remarque bien peu exhaustive), mais je me rends compte du travail de fou que ça représente.

Déclaration de vol de mobile sur le site de SFR : contactez plutôt le service client

Un proche (que je nommerai Serge — aucun lien) me téléphone à l’instant pour me demander de l’aide : il vient de se faire voler son téléphone mobile et n’arrive pas à contacter le service client pour le signaler. Je me rends donc avec lui sur le site de SFR afin de trouver le moyen de déclarer l’incident.

Une fois arrivé sur la page d’accueil, je saisis « vol de mobile » dans le moteur de recherche.

Vol de mobile chez SFR - 01 - Accueil

La saisie semi-automatique me suggère « vol de mobile », je sélectionne ce résultat. Je suis redirigé sur la page suivante :

Vol de mobile chez SFR - 02 - résultats de la recherche

Mon regard se porte immédiatement sur les deux premiers résultats de recherche (mis en valeur à l’aide de vignettes) : des vidéos de l’émission « 66 minutes ». Ce n’est pas tout à fait ce que j’attendais… Le troisième est déjà un peu plus proche : « SFR mobile perdu ». C’est en m’attardant un peu plus sur cette page que je trouverai le lien qui m’intéresse : il se trouve en fait dans le bloc « Nos suggestions » situé au dessus des résultats de la recherche. Ce type de bloc étant utilisé par Google pour insérer des liens publicitaires, je ne suis pas certain que ce soit la présentation idéale pour un résultat de ce type.

Je clique sur le lien « Abonnés SFR : comment déclarer le vol ou la perte de votre mobile ».

Vol de mobile chez SFR - 03 - déclarer perte ou vol

Le titre de la page m’indique que je me trouve au bon endroit. Premier élément proposé : une vidéo explicative (intitulée « découvrez les procédure d’urgence », belle faute d’orthographe). Les vidéos ça met du temps à se charger, ça ne fonctionne pas toujours et surtout c’est beaucoup plus long qu’un simple texte : je passe à la suite.

Plus bas dans la page, je trouve « les démarches à effectuer en cas de vol ou de perte ». Parfait. « Suspendez votre ligne […] vous pouvez le faire vous-même en vous rendant sur la page suivante ». Je clique.

Vol de mobile chez SFR - 04 - actes d'urgence

Pour suspendre ma ligne, il me faut apparemment ma dernière facture SFR ou connaitre mes identifiants. Ce n’est pas le cas de Serge, je passe donc à la suite. « Vous n’avez pas votre dernière facture et ne connaissez pas votre mot de passe : [cliquez ici pour] récupérer votre mot de passe ». Je clique.

Vol de mobile chez SFR - 05 - saisir identifiant

Sur cette nouvelle page, on me demande de saisir mon identifiant (le numéro de téléphone du portable, dans ce cas précis), puis de recopier un code. Cette seconde étape peut sembler anodine aux internautes « chevronnés » qui me lisent, mais pour Serge, impossible de recopier ce code. Pour quelle raison ? Serge m’explique qu’il n’a pas ces lettres, sur son clavier. Je ne comprends pas, je lui demande plus de détails : en fait Serge ne sait pas comment faire des grandes, des moyennes et des petites lettres, et il ne sait pas non plus comment faire de l’italique. (« Dans Word OK, mais là je ne sais pas »).

Les captcha posent de nombreux problèmes ; personnellement j’avoue que je n’avais jamais songé à celui-ci.

Je m’occupe de saisir son identifiant, j’entre le captcha moi-même et je valide. Je suis redirigé sur cette page :

Vol de mobile chez SFR - 06 - Attention, ne pas continuer !

Premier message, tout en haut, en rouge avec un point d’exclamation : « Attention, si vous venez de vous faire voler votre mobile ou si vous l’avez perdu, nous vous conseillons de ne pas continuer et de contacter le service client ». C’est une blague ?! Je suis toute la procédure « officielle » pour m’entendre dire au dernier moment « attention surtout n’allez pas plus loin ! » ? Je n’ai jamais vu une chose pareille. (Serge non plus, par ailleurs.)

Je laisse donc tomber et je clique sur « tous les moyens de contacter le service client ».

Vol de mobile chez SFR - 07 - contact

Je clique sur « Téléphonie mobile ».

Vol de mobile chez SFR - 08 - contact par téléphone

« Votre service client est joignable du lundi au samedi de 8h à 22h ». Et quand on se fait voler son mobile le dimanche, on fait comment ?

De façon amusante, c’est en rédigeant cette note que j’ai trouvé la solution. Elle est présente sur l’une des copies d’écran du site. Le premier qui trouve peut l’indiquer en commentaire, il y a un petit livre à gagner.

Livre concours

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