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.

Vendre ses newsletters via le pire de l’UX sur monster.fr

Je me rends sur le site de monster.fr pour consulter les offres d’emploi. J’entre un mot-clé, un lieu, je valide et je suis redirigé vers les résultats de ma recherche.

Monster.fr - résultats de la recherche

Ce n’est pas cette page qui a motivé la rédaction de cette note, mais je m’y attarde tout de même quelques minutes.

Je me trouve sur un site d’emploi, je suis vraisemblablement à la recherche d’un poste, et la page des résultats m’en présente… deux. (Allez, trois si on compte le titre tout en bas de la page.) Bien sûr la résolution de ma copie d’écran est assez basse (c’est un équivalent au 1024 x 768, façon iPad), mais peu importe : l’espace qu’occupe les résultats de ma recherche reste particulièrement limité.

Que trouve-t-on autour ?

• Des publicités. L’emplacement du premier “résultat” de ma recherche, c’est-à-dire la zone la plus chaude de la page, est d’ailleurs occupé par une annonce pour un salon de recrutement. En bas à droite, on a même droit à une vidéo. Je devrais être heureux qu’elle ne se lance pas automatiquement, mais ce n’est qu’une petite consolation : il s’agit en réalité d’un carrousel de trois vidéos, qui tourne en permanence. Un vrai bonheur lorsque l’on essaie de se concentrer sur le contenu de la page.

• Un gros encart dédié à la réception d’offres via newsletter. Ce bloc occupe à peu près autant d’espace que les résultats de ma recherche… Il s’agit d’une fonctionnalité très pratique et j’imagine très appréciée des utilisateurs, mais je ne m’y trompe pas, elle “rapporte” surtout beaucoup à Monster.

• Un accès recruteur, qui lui aussi rapporte sûrement plus à Monster que les résultats de ma recherche.

Voilà pour la liste des éléments qui ressortent de cette page. Au milieu, on retrouve donc les résultats de ma recherche, ainsi qu’une colonne dédiée au filtrage. Ouf !

J’ajoute que malheureusement, le contenu de cette page est noyé dans un fond blanc omniprésent qui nuit à la lisibilité de l’ensemble. De nombreux textes manquent de contraste (pas facile de distinguer le nombre de résultats par exemple) et le visiteur risque d’avoir du mal à cerner les différents blocs qui composent les résultats.
Le problème est d’ailleurs amplifié sur un écran à la résolution supérieure.

Je clique sur le premier résultat.

Monster.fr - offre d'emploi

Sur cette page, je vais devoir faire quelques suppositions.
Je suppose que la taille du logo est une erreur.
Je suppose que le site est en cours de refonte, car les éléments qui composent la page n’ont plus rien à voir avec ceux de la page précédente : le header est différent, les polices, leurs tailles sont différentes bref en dehors du logo les pages n’ont rien à voir.

Je constate encore une fois la prépondérance de l’encart dédié à la réception d’offres via newsletter. Il s’agit du premier élément de la page, juste en dessous du header – sa visibilité semble clairement disproportionnée sur une page comme celle-ci.

Il y aurait encore beaucoup de choses à dire sur cette page, probablement plutôt ancienne, mais ce n’est pas non plus ce qui a motivé la rédaction de cette note.

Je décide de revenir à la page précédente pour consulter les autres résultats de ma recherche. Malheureusement, Monster ne compte pas me laisser faire.

Monster.fr - alerte du navigateur

« Et là, c’est le drame. »
Monster m’envoie un message d’alerte via le navigateur, qui me demande si je souhaite vraiment quitter cette page. Un message d’alerte ? Sérieusement ?!

Et que dit la petite ligne située sous le message ? « Intéressé par des offres similaires par e-mail ? Restez sur cette page. » Mais vous voulez bien arrêter de pousser vos newsletters et me laisser naviguer sur votre site ?!

Pour être tout à fait honnête je ne pensais pas que des sites sérieux (= pas du warez ou du porno) utilisaient encore ce genre de subtilités.

Bonus : l’affichage de cette alerte est systématique, quel que soit mon comportement. En d’autres termes, si je quitte le site voire si je ferme l’onglet de mon navigateur, j’y aurai également droit. Cerise sur le gâteau, cette foutue alerte a planté mon Firefox deux fois pendant mes tests.

J’ai envie de me faire du mal, je clique donc sur le bouton Rester sur la page. Le message d’alerte disparaît… et est remplacé par un layer, tout aussi inopportun mais beaucoup plus classique, malheureusement.

Monster.fr - abonnement à la newsletter

Je crois qu’il est inutile que je revienne sur le contenu du layer (un indice : il est question de newsletter). En revanche, un détail mérite que je m’attarde un peu : il est impossible de fermer cette fenêtre. Pas de croix ni de bouton fermer ; lorsque je clique en dehors du layer il ne se passe rien ; même résultat en appuyant sur la touche Escape de mon clavier.

C’est là que l’histoire devient presque comique. J’ai signalé ce problème sur Twitter il y a deux jours, et j’ai reçu une réponse le lendemain. La voici :

Conversation sur Twitter

Sur Chrome, il faut cliquer en haut à droite de la popup: la souris-flèche devient une main qui vous permet de fermer le layer ;)

(Au passage les copies d’écran ont été faites avec Safari, pas avec Chrome…)
Qu’est-ce que ça veut dire ? Tout simplement que le bouton de fermeture est bien présent en haut à droite de la fenêtre, mais qu’il est invisible. Et que Monster le sait. Et que Monster semble trouver ça normal.

En bref, la crème de l’expérience utilisateur en quelques clics.

Flipboard : une désinscription aux newsletters bien conçue, mais…

Hier j’ai décidé de ne plus recevoir les newsletters de Flipboard. Je jette un œil au dernier e-mail reçu, inspecte l’entête puis le pied de la news et trouve finalement un lien de bonne taille vers une page de désinscription. Son contraste pourrait être amélioré, mais rien de trop grave.

Newsletter de Flipboard : lien de désinscription

Après avoir cliqué sur le lien, je suis redirigé vers une page qui m’indique via un layer que mon désabonnement a bien été pris en compte.

Flipboard : layer de confirmation de désabonnement

L’utilisation d’un layer n’est pas forcément la meilleure idée qui soit en terme d’utilisabilité, mais rien de trop grave ici aussi.
Un message me propose ensuite de « visiter le gestionnaire des courriels pour nous dire quels genres de courriels vous voudriez voir dans votre boîte de réception. » Je clique sur le bouton, seul moyen de fermer le layer, et j’accède au gestionnaire.

Flipboard : gestionnaire de courriels

Je peux ici facilement me désabonner de chacune des news individuellement. Le contraste des liens pourrait être meilleur, le bouton de désinscription à toutes les news pourrait être plus visible, mais rien de trop grave une fois encore. J’ajoute que positionner ici les pictos relatifs aux réseaux sociaux sur lesquels Flipboard est présent me semble être une idée pertinente.

En un mot j’ai trouvé ce système de désabonnement plutôt bien conçu. Une seule chose me gêne, une chose que je n’ai pas évoquée pour le moment : comment se fait-il que je sois inscrit à toutes ces news alors que je ne l’ai pas demandé ? La réponse est tristement simple : comme beaucoup trop d’autres services, l’abonnement aux newsletters (et elles sont nombreuses ici !) est imposé lors de la création du compte. Il n’y a pas de case à cocher ni même de case à décocher, c’est imposé, point final — en tout cas sur la version mobile, je n’ai pas testé l’inscription au site depuis la nouvelle version desktop.

Le titre du gestionnaire de courriels est « Nous voulons seulement vous envoyer les courriels que vous aimez. » Il faudrait peut-être envisager d’ajouter « mais nous allons vous envoyer tous nos courriels, dans le doute, hein, vous savez ? »