Le cauchemar Instagram partie 1 : pour les non-inscrits

Instagram compte plus d’un milliard d’utilisateurs. Un chiffre énorme… mais qui reste largement inférieur aux six milliards et demi de personnes qui ne l’utilisent pas.

Voici à quoi ressemble une page Instagram vue sur smartphone pour tous les gens qui n’ont pas de compte.

Instagram vu par un non-inscrit sur un smartphone

Un avertissement relatif à la collecte d’informations et aux cookies qu’il est impossible de refuser (ce n’est pas conforme au RGPD, mais quand on s’appelle Facebook – propriétaire d’Instagram, trop de gens l’ignorent encore – on s’en fiche probablement pas mal), et un second bandeau Passez sur l’app.

Une fois qu’on a masqué tout ça, on obtient ceci (je passe sur desktop pour améliorer la lisibilité) :

Instagram - page de garde du compte un_bon_chien

Je remarque plusieurs points problématiques plus ou moins importants. Le contraste du moteur de recherche est trop faible, par exemple. Mais le plus gênant ne se voit pas sur la copie d’écran : tous les contenus cliquables sont bloqués. Un clic sur
• le nombre de publications
• le nombre d’abonnés
• le nombre d’abonnements
• l’image de profil
• l’image en dessous
• le lien IDENTIFIÉ(E)
• … ou une publication (les photos en bas, probablement l’objet de la visite) fera apparaître la fenêtre suivante :

Instagram - modale d'inscription

Circulez, il n’y a rien à voir. Ou plutôt « Abonnez-vous, vous n’êtes pas sur internet ici, vous êtes chez nous et seuls les membres sont autorisés à en savoir plus ». (Cette idée de « ne pas être sur internet » est très importante, j’y reviendrai plus tard.)

Si je scrolle un peu pour voir le contenu de la page, une fenêtre quasiment identique apparait :

Instagram - modale d'inscription bloquante
Cette modale représente probablement ce que l’on peut faire de pire sur internet : une fois qu’elle est apparue, le site est littéralement figé. Il n’est pas possible de fermer cette fenêtre (contrairement à la précédente : la croix en haut à droite a disparu), il n’est plus possible de scroller, bref je me trouve devant un mur. Le bouton page précédente me fait quitter le site ; la seule possibilité pour revenir sur la page que je consultais est donc de rafraîchir la page.

Cela étant dit, il est tout de même possible de consulter le détail d’une publication si vous avez son lien direct. Comme ici par exemple :

Instagram - détail d'une publication

Là les choses deviennent plus complexes. Par exemple, seul un œil exercé verra que cette publication est une succession de sept images grâce aux microscopiques points en bas de l’image, et que l’on peut passer de l’une à l’autre via la minuscule flèche gris clair sur fond blanc. Mais si, c’est là :

Instagram - détail d'une publication (légendé)

J’apprécie également les pictos non légendés. Je veux bien admettre que le cœur et le phylactère soient compréhensibles ; le fanion, à la limite ; mais l’avion en papier pose problème : ici il permet de partager le contenu avec un tiers (via Facebook, Twitter etc.), alors qu’en haut de la page d’un utilisateur connecté le même picto renvoie vers les messages privés ! De toute façon, à quoi bon afficher tous ces pictos puisqu’ici encore, tous les clics (sauf l’avion en papier, bizarrement) renvoient vers la modale d’inscription au site…

Note : cliquer sur le nombre de J’aime fera s’afficher la modale bloquante. Impossible de savoir pourquoi celle-ci plutôt que l’autre.

Cela étant dit, je pense que ce sont les publications sous forme de vidéo qui me plaisent le plus. Là, on atteint vraiment le sommet de l’enfer.

Instagram - détail d'une publication en vidéo

Cette vidéo a un bouton lecture… et c’est tout. Pas de barre de temps (donc  impossible de se déplacer dans la vidéo… où même simplement de connaître sa durée totale), pas de contrôle du volume sonore, pas d’agrandissement de la fenêtre, rien qu’un bouton lecture.

Pire : si je consulte un autre onglet du navigateur pendant la lecture de la vidéo, cette dernière s’arrête et reprendra au début lorsque je retournerai sur l’onglet.

Bizarrement, certaines vidéos ont des commandes de lecture, comme ici par exemple :

Instagram - détail d'une publication en vidéo avec lecteur

Ça ne résout pas le problème du bloquage lorsque l’on va sur un autre onglet, mais au moins on a des commandes de lecture et l’affichage de la durée de la vidéo.

Je m’arrête là pour Instagram vu par un non-inscrit. Malheureusement il reste encore tant à dire… Je ne vous ai pas parlé des commentaires ? De la qualité des images ? De l’impossibilité de mettre des liens (la *base* d’internet en somme) ? Ce sera pour plus tard.

Vidéos de publicité : lesnumeriques ont perdu la tête

Je n’utilise pas de navigateur desktop sans bloqueur de publicité ; à vrai dire je me demande comment on peut s’en passer. Sur mobile c’est plus compliqué : je n’ai pas bien compris comment fonctionnent les apps qui bloquent la publicité du coup je n’en ai pas encore installé.

La semaine dernière j’ai eu besoin de consulter le site lesnumeriques sur mon smartphone. La visite n’a pas été très agréable.

Voici la page d’accueil :

Accueil du site lesnumeriques sur smartphone

Plus d’un tiers de la surface de l’écran est occupé par une publicité pour une voiture. Cette publicité :
• passe devant le contenu ;
• ne peut pas être masquée ;
• ne peut pas être mise en pause ;
• tourne en boucle.

Si je tourne mon smartphone le résultat est encore plus impressionnant :

Accueil du site lesnumeriques sur smartphone en mode portrait

La vidéo et le bandeau de publicité en haut occupent l’intégralité de l’espace disponible. Autrement dit : comme il est impossible de masquer la vidéo, je ne peux tout simplement pas consulter le site. 

Je clique sur un article pour le consulter. Voici la page qui s’ouvre :

Page de test du site lesnumeriques

Ici aussi une vidéo occupe une bonne partie de l’espace disponible. Quelques remarques :
• il ne s’agit pas d’une publicité mais d’un test en vidéo (bien entendu, ce test devrait être précédé d’une publicité, mais elle ne s’est apparemment pas lancée cette fois) ;
• il s’agit d’une vidéo de brosse à dents électrique alors que je consulte un test d’objectif d’appareil photo ;
• une croix me permet cette fois de masquer la vidéo.

L’expérience est si désagréable que je me dis qu’il doit y avoir un problème.

Je me rends une nouvelle fois sur le site ce matin avec un autre smartphone. Je suis accueilli par cet écran :

Gestion des données personnelles par Quantcast

L’insupportable système de gestion des données personnelles par Quantcast (si vous voulez en savoir plus sur la gestion de vos données personnelles par lesnumeriques, je vous conseille de jeter un œil à cette note d’edasfr).

Je quitte cet écran avec beaucoup de peine et j’atteins enfin la page d’accueil :

Accueil du site lesnumeriques sur un autre smartphone

La vidéo occupe le tiers inférieur du site… mais cette fois je peux la fermer. Ouf ! La vidéo de la voiture que l’on ne pouvait pas masquer était un bug ! En fait… C’est difficile à dire, puisqu’une fois sur la page d’un article :

Page de test du site lesnumeriques sur un autre smartphone

…je me retrouve devant une nouvelle vidéo de publicité impossible à cacher.

Le meilleur pour la fin ? les vidéos se lancent sur absolument toutes les pages de contenu du sites. Si je refais mon parcours de ce matin sur le site, ça donne :

  1. page d’accueil : publicité vidéo pour Microsoft qui se lance automatiquement
  2. une actualité à propos de photo : test vidéo d’un laptop qui se lance automatiquement
  3. retour en page d’accueil via le bouton page précédente : la pub Microsoft se relance automatiquement
  4. un article : publicité pour Intermarché qui ne peut être masquée, suivie du test vidéo d’un laptop alors que je consulte un article qui parle d’un casque audio.

Dites lesnumeriques, vous êtes sérieux là ? 

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.