Revue UX #2

Guillaume Tarsiguel
10 min readSep 18, 2017

--

Septembre 2017 — semaine 38

Bonjour et bienvenue dans la deuxième édition de ma revue UX ! Je suis Guillaume Tarsiguel, UX designer chez Bloomin, et, chaque semaine — à peu près — , je vous partage, ma vision sur l’actualité et les tendances du design UX, sur l’Internet et au-delà.
Au menu de cette semaine : nouvelle interface pour le géant YouTube, des applications qui nous font délibérément perdre du temps, et une pépite bien cachée made in Amazon. C’est parti pour la revue UX #2 !

📰 L’actualité de la semaine

Retour sur la mise à jour de l’interface Youtube de cet été

Depuis plus de 10 ans d’existence, YouTube a vécu beaucoup de transformations, qui reflètent l’évolution et la maturation du web dans son ensemble. L’actu de la semaine est donc la nouvelle mise à jour de l’interface de ce site emblématique ! Le communiqué officiel est disponible ici — en anglais.

Évolution de l’interface de Youtube ces 10 dernières années (source Youtube)

Véritable adaptation à l’usage mobile

La vidéo de présentation de la nouvelle interface montre une volonté forte de la part de YouTube de suivre l’évolution des nouveaux usages mobiles.

Vidéo de présentation de la nouvelle interface (source Youtube)

On remarque l’apparition d’options de navigation simplifiée entre les vidéos, et aussi au sein même de la vidéo, avec des fonctionnalités — un peu gadgets — de ralenti et saut dans le temps de plus ou moins 10 secondes. Non, la grande nouveauté est ici la reconnaissance et l’intégration d’un système de vidéo en format vertical, ou portrait.

La norme des vidéos sur Internet a toujours été le format horizontal, ou paysage. C’est tout simplement l’héritage du cinéma et son format 16/9, perpétué à l’ère du numérique par les nouvelles générations d’appareils photo et caméscopes.

C’est avec l’arrivée des smartphones que le format de vidéo vertical s’est répandu. Non sans réticences, d’ailleurs ; les grands hébergeurs de vidéo comme YouTube, Dailymotion, ou Vimeo ont longtemps persisté dans un format de visionnage exclusivement horizontal. Les vidéos verticales y apparaissaient alors plus petites, avec des vilaines bandes noires sur les côtés. C’était alors souvent le vidéaste lui-même que l’on blâmait de n’avoir pas filmé dans le bon format — la lutte contre le vertical video syndrom était né. Il faut reconnaître que ces vidéos verticales étaient souvent celles de vidéastes très amateurs, peu technophiles.

Une guérison express d’un cas de Vertical vidéo syndrom

Depuis, les choses ont bien changé. La démocratisation du smartphone a développé la création de formats verticaux. Certaines sociétés ont finalement compris que, lorsque l’utilisateur invente un usage non-prévu initialement, il est souvent absurde de l’en empêcher ; il vaut mieux l’accepter, l’encourager ! Pourquoi aller contre le sens du courant, quand on peut surfer la vague ? C’est ce qu’on appelle une ligne de désir (desire path en anglais), où l’usage réel diverge de ce qui était prévu lors de la conception.

Une ligne de désir (ou desire path) ; l’utilisateur forge son propre usage, hors du cadre du design initial (source)

Des appli mobiles comme Vine, et surtout Snapchat, ont donc joué à fond le jeu de l’usage mobile : vidéos courtes, personnalisables, et… format vertical ! Le succès fulgurant de ces applications ont permis une vrai démocratisation et reconnaissance des vidéos en format portrait.

Une application française, nommée très justement Vertical, propose également, depuis cet été, une plateforme de visionnage de vidéos exclusivement en format portrait. Cet article de Konbini à son sujet résume assez bien les enjeux de ce nouveau format, terreau tout neuf de créativité et de possibilités inexplorées pour les vidéastes de demain.

Alors, oui, il aura tout de même fallu attendre 2017 pour que YouTube se décide à intégrer le format portrait à sa plateforme. J’y vois tout de même le symbole une grande plateforme qui écoute — enfin ? — les usages réels de ses utilisateurs, et c’est assez encourageant.

Reste à voir ce que les internautes sauront faire de ce nouveau format !

Épuration globale

D’une manière générale, l’interface Youtube sur ordinateur change assez peu quand on la compare aux anciennes versions. L’évolution principale est une adaptation aux codes du Material Design, avec une épuration appréciable de l’interface.

Évolution de la page d’accueil (source des images Arstenica)
Évolution de la page visionnage (source des images Arstenica)

Les changements en quelques points :

  • Moins de cadres et de délimitations superflues
  • Des textes harmonisés ; les éléments de texte pouvaient jadis avoir de nombreuses couleurs différentes : rouge, bleu, noir, blanc, et diverses nuances de gris… Désormais, la gamme de couleurs et de gras des textes est réduite, toujours dans un souci de simplicité et de lisibilité.
L’épuration du texte s’étend jusqu’au logo, où une police monochrome est désormais utilisée
  • Les éléments redondants sont retirés ; voir le menu de navigation “Home — — Trending — subscription”, déjà présent dans le menu latéral, qui disparaît du sommet de page

Les changements sont à la fois simples, discrets, et de bon aloi. Il se dégage de l’ensemble une impression de plus grande respiration, de contenu mieux mis en avant. YouTube s’aligne donc avec les graphismes de sa maison-mère Google, justement créatrice des normes du Material Design…

L’ajout d’un mode “sombre”

Youtube offre désormais la possibilité d’opter entre deux thèmes graphiques ; le classique, sur fond blanc, et le mode sombre, avec du texte blanc sur fond noir.

Youtube en thème sombre

Si cette fonctionnalité peut paraître gadget au premier abord, elle a fait son chemin dans les normes du web ces dernières années. Plus tôt dans l’année, c’est Twitter qui ajoutait un Mode Nuit à sa plateforme.

L’usage de ce mode sombre ne se résume pas, comme on pourrait le croire, à un usage de nuit, ou dans un environnement obscur... En réalité, certains usagers, comme moi, préfèrent tout simplement ce mode sombre par défaut, qu’ils trouvent moins fatigant pour l’œil.

A vrai dire, l’usage de texte blanc sur fond noir, ou de texte noir sur fond blanc est au cœur d’un débat ; lequel des deux modes est le plus lisible, le plus reposant pour les yeux ? Après tout, si la norme du HTML / CSS est texte blanc sur fond noir, c’est tout l’inverse en ce qui concerne les terminaux et invites de commande… Si vous voulez poussez plus loin la réflexion, je vous invite à lire cette question posée sur le forum stackexchange (en anglais), et notamment la réponse mise en avant, à la fois complète et concise.

En quelques mots, retenons que le fond noir est plus reposant pour les yeux, mais que la lecture est facilitée quand le texte est noir sur fond blanc.

En règle générale, je pense donc qu’un fond sombre est le mieux adapté dans le cas de pages webs où le texte est limité (comme Youtube, ou Twitter à la limite). Bien sûr, tout dépend de l’usage ; pour qui aime lire et répondre aux commentaires sur Youtube, le fond blanc est sans doute préférable.

Je suis donc personnellement ravi de cette nouvelle fonctionnalité. L’usage de normes non-justifiées, comme l’usage d’un fond blanc sur un site web, se fait trop souvent au détriment de l’expérience utilisateur. Fond blanc ou fond noir; YouTube prend la bonne décision en laissant le choix à ses utilisateurs.

Mise à jour pertinente, mais…

La mise à jour de l’interface YouTube me semble indiscutablement pertinente. Elle indique une véritable écoute envers des usages de plus en plus mobiles, ainsi qu’envers des utilisateurs en demande d’interfaces épurées, orientées sur le contenu.

On peut néanmoins regretter le manque d’envergure de cette mise à jour. En effet, des voix s’élèvent depuis quelques mois contre YouTube, par rapport à des problèmes de censure, et de bugs dans le nouveau système d’abonnements et de notifications. Cette mise à jour apparaît alors, aux yeux de certains, comme une touche de cosmétique qui ne résout pas des problèmes plus profonds…

L’avenir nous dira si YouTube est également sensible à ces voix-là !

📊 La statistique de la semaine

Un taux d’erreur record pour un distributeur de tickets

D’après une étude de l’ORR (Office of Rail and Road) au Royaume-Uni, près d’ 1 voyageur sur 5 n’achète pas le bon ticket pour son trajet auprès des distributeurs automatiques. Seuls 80% des utilisateurs parviennent à régler le prix correct, les autres payent soit trop, soit pas assez — risquant ainsi une amende.

En 2017, près de 20% des usagers n’ont pas acheté le ticket adéquat pour leur trajet (source The Guardian)

Dans l’article de The Guardian qui lui est consacré, cette statistique saisissante s’accompagne de nombreux problèmes d’utilisation desdits distributeurs. On imagine bien une conception dépourvue de réels tests utilisateurs, pourtant tout à fait essentiels dans le cadre d’un outil destiné au grand public !

On peut au moins espérer que ce constat servira d’électrochoc, et incitera l’ORR à davantage intégrer ses usagers dans la conception d’outils qui, leurs sont justement destinés…

📄L’article de la semaine

Des interfaces au service des entreprises plutôt qu’à celui des utilisateurs…

L’article de cette semaine n’est pas le plus récent puisqu’il date de 2016. Si j’ai décidé de vous le partager tout de même, c’est parce qu’il offre un éclairage inédit et toujours d’actualité sur nos usages de la technologie. Par ailleurs, la question de l’éthique dans l’UX me tient à cœur et mériterait à mon goût d’être davantage traitée.

Tristan Harris est un ancien ingénieur de Google, qui a travaillé dans la multinationale en tant que “philosophe produit” (hé oui, c’est un métier !). Dans cette interview du Nouvel Obs, il nous explique comment les entreprises de la Silicon Vally nous manipulent pour nous faire perdre le maximum de temps sur leurs interfaces — et ce au lieu de nous aider à obtenir ce que nous voulons.

Il détaille ces méthodes de prestidigitation avec de nombreux exemples très parlant dans cet article en anglais. Si vous avez 15 minutes devant vous, je vous conseille fortement cet article tout simplement passionnant (en anglais) :

Voici quelques morceaux choisis qui me semblent particulièrement évocateur :

Businesses naturally want to make the choices they want you to make easier, and the choices they don’t want you to make harder.

“Les entreprises vont naturellement vous rendre plus accessibles les choix qu’elles veulent, et vous compliquer ceux qu’elles ne veulent pas.”

Imagine millions of people getting interrupted like this throughout their day, running around like chickens with their heads cut off, reciprocating each other — all designed by companies who profit from it. […] In other words, interruption is good for business.

“Imaginez des millions de personnes, interrompues comme ça tout au long de la journée, courant dans tous les sens comme des poules décapitées qui se rentrent les unes dans les autres — tout ça conçu par des entreprises qui en tirent profit. […] En d’autres termes, l’interruption permanente est bonne pour les affaires.”

Sans adhérer à 100% au point de vue de Tristan Harris, notamment sur les solutions qu’il propose, je trouve ses idées très intéressantes. Sa démarche de sonneur d’alerte est par ailleurs cruciale à un moment où l’on voit trop souvent dans un smartphone un assistant docile et bienveillant… Tristan Harris est sans nul doute une personnalité à suivre de près !

💎 La pépite de la semaine

Un menu déroulant à tiroir intelligent — enfin !

Comportement très frustrant des menus déroulants !

Les menus déroulants à rallonge, qui se rétractent quand vous bougez le curseur un millimètre trop bas… vous connaissez ? J’y ai lâché plus d’un juron…

Alors, quand Amazon se frotte au problème, il le résout avec brio ! Entre autres astuces, le site utilise un cône prédictif de déplacement du curseur pour éviter que les sous-menus ne se rétractent de manière intempestive.

Si vous déplacez le curseur dans cette zone, le sous-menu ne change pas pendant un certain temps

Vous trouverez le détail de la solution d’Amazon sur le blog de Ben Kamens dans cet article. Et, comble du bonheur, il y met également à disposition un plugin pour reproduire facilement le même comportement sur vos interfaces ! ❤️

J’ai toujours considéré Amazon comme un OVNI dans le monde de l’UX. Le site crée ses propres règles, parfois en dépit des bonnes pratiques ou du bon sens — et ça fonctionne ! Cet article nous rappelle que, derrière l’apparente maladresse de l’interface d’Amazon, se cachent en réalité des détails et des astuces très pointues.

Si, comme on le dit, “le diable est dans les détails”, alors Amazon est parfaitement diabolique !

📂 La ressource de la semaine

Dessine moi une charte graphique

(partagé par David)

Un collègue m’a partagé ce site simple et assez étonnant : Brand Colors. Vous y trouverez une vaste base de données regroupant les chartes graphiques de grandes marques dans le monde.

Intéressant de comparer le nombre de couleurs dans les différentes chartes — tantôt 8 couleurs, tantôt une seule — , ainsi que les émotions que suscite chacune des palettes nous évoque…

Je vous laisse explorer tout ça, et je vous donne rendez-vous très vite pour la revue UX #3 !

--

--

Guillaume Tarsiguel

UX designer • interested in ethics in design, human-computer interaction, and emoji cryptology 👽• www.guillaumetarsiguel.fr