Google Core Web Vitals, logos produits, et autres pensées « UX »

Pas mal de bruit autour des décisions de Google en ce moment, entre les Core Web Vitals qui se veulent mesurer l’UX de votre site web pour estimer votre position dans les résultats de recherche, et les nombreux produits de Google qui se voient attribuer de nouveaux logos. Parlons-en…

Cet article répond notamment à pas mal d’interrogations de personnes diverses et variées, ou de questions qu’on m’a posé directement sur la toile ci et là, ou en direct.

Google Core Web Vitals et logos de leurs produits : rien à voir, me direz-vous. Et vous auriez parfaitement raison, mais les deux semblent toucher à un domaine toujours aussi incompris : le design.

Quand Google annonce un redesign de ses logos produit, tout le monde devient designer et a un avis critique dessus. Par contre quand Google annonce prendre en considération l’UX dans son algorithme de ranking, là tout le monde s’inquiète de devoir refaire son site et personne ne critique. Pourquoi ? (un début de réponse plus loin dans cet article)

Et comme Google ne mérite pas plus de présence que cela sur mon blog, je fais un seul et unique article découpé en deux pour essayer de présenter mon point de vue sur le sujet.

Note : attention, je suis totalement pour un système de mesure de performance à la Core Web Vitals, ainsi que sur la critique des logos produit de Google. Ma critique vient sur l’absence de recul de l’adoption et la communication autour du premier, et l’absence de vision globale du « design » du deuxième.

Google Core Web Vitals – Mesure UX de votre site

Je ne sais pas quelles connaissances vous avez des Core Web Vitals annoncées par Google, ni de la notion d’UX Design. Je vais donc essayer de vous présenter les 2 très rapidement, avec mes mots.

Les Core Web Vitals

Les Core Web Vitals sont des indicateurs arbitrairement proposés par Google pour mesurer la qualité d’un site web via 4 indicateurs assez précis qui sont :

LCP (Largest Contentful Paint)

Il s’agit de la notion de chargement. Plus précisément, a quel vitesse est-ce que le plus gros élément visible de votre première vue se charge complètement. Pour simplifier, si vous avec une bannière de site web avec un gros titre, Google va mesurer à quel vitesse votre titre s’affiche complètement, avec son image de fond s’il y en a une. Aujourd’hui, en-dessous de 2,5 secondes, c’est considéré comme bon par Google.

FID (First Input Delay)

Il s’agit ici de la notion d’interactivité. Un peu particulier à comprendre car un poil technique, cet indicateur est mesuré par le délai entre le début de chargement et la première possibilité d’interaction avec votre interface, typiquement : défiler la page, cliquer un lien, etc. Un bon délai pour Google est de 100 ms.

CLS (Cumulative Layout Shift)

Il s’agit de la notion de stabilité visuelle. Google tente ici de mesurer les changements visuels cumulés sur une page web afin d’estimer le dérangement pour les utilisatrices et utilisateur. Un indicateur qui fait peur à plein de personne et pour cause : où va-t-on mettre toutes ces publicités qui bougent et popup de conversion dégueulasses ? Google estime qu’un CLS en dessous de 0.1 est bon. C’est une unité un peu obscure, mais vous pouvez faire des tests sur layoutstability.rocks

FCP (First Contentful Paint)

En voici un quatrième mais Google semble l’avoir mis de côté dans sa présentation des Core Vitals. Il s’agit de la notion de réactivité et d’attente. Afficher rapidement un contenu sur la page pour ne pas faire attendre l’utilisateur. Cet indicateur est encore pris en compte dans les outils d’analyse sur le sujet.

Cet ensemble d’indicateurs très chiffrés et arbitraires serait donc un moyen pour Google de calculer l’UX de votre site web…

Pour chacune des mesures ci-dessus, afin de vous assurer que vous atteignez l’objectif recommandé pour la plupart de vos utilisateurs, un bon seuil à mesurer est le 75e percentile de chargement des pages, segmenté entre les appareils mobiles et de bureau.

Complète Google dans la documentation sur ce sujet. On est donc encore une fois sur un indicateur très chiffré avec une priorisation plutôt arbitraire.

La notion d’UX Design

J’avais tenté une définition de l’UX Design dans l’article « Il n’y a pas de Mythes sur l’accessibilité des couleurs » mise en parallèle avec l’accessibilité numérique. Je vous la reprends ici :

L’expérience de l’utilisateur est l’ensemble des actions, tentatives, sentiments, réussites, frustrations, etc. qu’une personne a d’un produit ou d’un service. Selon l’objectif que vous souhaitez atteindre, cette expérience peut être bonne ou mauvaise. Même dans l’idée d’atteindre une mauvaise expérience, elle peut être totalement voulue par le concepteur de cette expérience. Souvent, en tant que designer, vous avez tendance à fournir une expérience mémorable positive pour que vos utilisateurs et utilisatrices comprennent, utilisent et aiment le produit ou l’interface. Rendre les interfaces utilisables implique la nécessité de comprendre un groupe spécifique de personnes afin de les aider à accomplir une tâche précise avec efficacité, efficience et satisfaction.

Il y a pas mal de notions complexes dans cette définition, mais si vous arrivez à en comprendre le sens, vous commencez certainement déjà à voir le problème que pose les Core Web Vitals.

Indicateur de Google VS réalité

Avec ces deux définitions, vous voyez bien qu’il y a un problème quelque part, tout du moins je l’espère. Dans la définition de l’UX Design que je vous ai donné, il y a des notions de sentiments, des notions de satisfaction, mais aussi des notions d’objectifs.

Du coup je vous pose la question : Comment Google peut-il mesurer si j’ai bien atteint mon objectif, en tant que designer de produit numérique, s’il ne les connait pas ? Comment Google peut mesurer le sentiment de mon utilisateur ou utilisatrice ? Comment Google peut-il se permettre de déclasser mon site web si l’objectif d’enquiquiner mes visiteurs était bien atteint, dans le cadre de mon site web qui vise à sensibiliser par l’action ? (je déconne à moitié puisque c’est l’objectif de doisjeutiliser.fr par exemple)

Ici Google ne mesure aucunement l’UX de votre site, mais un ensemble de paramètres totalement arbitraires qui sont censés améliorer l’expérience de l’utilisateur sur votre site web. Ces indicateurs sont principalement des indicateurs de performance : en combien de temps le plus gros contenu visible de ma page se charge, en combien de temps je peux commencer à interagir, y a-t-il beaucoup de changements sur la page dans un temps réduit.

Laissez-moi démonter ces indicateurs un par un avec 3 solutions qui permettent de proposer une expérience déplorable, et avoir de bons résultats selon Google :

• LCP — pour faire en sorte que le premier élément le plus gros de la page soit affiché rapidement, rien de plus simple affichez une énorme en-tête blanche ou colorée avec un gros titre, sans aucune fonte exotiques. Absolument pas intéressant pour l’utilisateur, ça n’apporte rien à votre business ni au sien, mais Google sera heureux !
• FID — celui-là est moins évident, mais si vous ne chargez aucun CSS ou JS bloquants ça devrait bien se passer. Pensez à mettre plein de styles en ligne ou utiliser le module Apache de Google pour que ça se fasse tout seul. Très sincèrement, 100ms pour une première interaction, votre utilisateur est vraiment pressé. Et surtout, le LCP est à 2,5 s là où le FID est à 100ms : votre utilisateur est censé interagir avec un site web qu’il ne voit pas encore ? 🙄
• CLS — celui-là est moins facile à démonter car il mesure les changements dans le temps. Cependant, Google prendrait en compte le fait que certaines propriétés CSS ne provoqueraient pas de changement de score, notamment celles ne provoquant pas de re-paint. (appelée Composite) Bien, il suffit d’utiliser ces propriétés donc, et le problème de stabilité visuelle sera toujours présent.

Voilà, il ne suffit de pas grand chose pour se rendre compte que, premièrement, ces indicateurs sont tout sauf des indicateurs d’une bonne expérience utilisateur, deuxièmement, ils sont arbitraires et plutôt facile à contourner, sans pour autant améliorer l’expérience que les gens auront sur votre site web.

Ha, c’est bonus : l’expérience utilisateur ne s’arrête pas à votre site web… mais ça Google ne peut ni le savoir (quoique…), ni le mesurer.

Les nouveaux logo produits de Google

Je fais principalement référence aux nombreuses critiques liées aux décisions de design des icônes/logo produit autour de Google Workspace, notamment ces icônes de Gmail, Calendar, Drive, Document et Hangout/Meet.

Une des critiques la plus commune que j’ai beaucoup vu circuler ces derniers temps se résume en une seule image, que voici :

cette image vient d’un post Reddit qui se veut critique vis à vis de la décision de Google sur l’orientation de prennent les logos des produits Google.

Le problème du « mauvais design »

Dans l’absolu, qu’on soit d’accord, je trouve les choix graphiques totalement discutables : le(s) designer(s) semble(nt) avoir confondu cohérence graphique et ressemblance graphique. La ressemblance étant facile à mettre en œuvre mais peut mener à la confusion, la cohérence étant plus difficile mais permet de différentier tout en gardant une identité globale propre.

Cependant, quelque chose me gêne dans cette critique un peu facile à base de « Google propose des icônes avec un mauvais design ». En fait le design, ce n’est pas uniquement l’apparence qu’ont ces icônes, c’est également la stratégie produit qui se cache derrière. Google parle de Workspace désormais, personnellement je m’attends à une grosse fusion des outils avec un seul logo, un peu comme ce que Microsoft tente de faire avec Office 360. L’idée de faire s’effacer les produits et mettre en avance le service (workspace) offert par Google me semble être une stratégie de design produit cohérent, même si ça n’est pas mon domaine de prédilection. Du coup parler de design, et omettre la stratégie qui se trouve derrière me semble être un peu réducteur. Pour moi c’est omettre tout le contexte (qu’on ne connait pas nécessairement) derrière la refonte de ces icônes, et potentiellement de tous les services/produits derrière.

Ce qui me gêne avec la critique actuelle, c’est l’absence de contexte, voire le retrait volontaire de contexte :

• sur mes interfaces Gmail ou Calendar, je me moque du logo, je reconnais l’interface, elle est différente pour chaque outil.
• sur un onglet de navigateur, j’ai du texte qui accompagne mon onglet. Je vous entends déjà me dire que vous avez trop d’onglets ouverts, ou que vous avez en paramètre « cacher le texte » de vos onglets. C’est votre décision… 😀
• sur mobile ou en PWA je vais également avoir du texte pour accompagner ces logos.

Oui je sais, je me fais l’avocat du diable pour ouvrir mon esprit critique.

Je ne vais pas revenir sur le détail de ces critiques faites, les notions de forme et couleurs sont abordées par Techcrunch déjà. Par contre ça me fait penser à un domaine intéressant qui est l’accessibilité du numérique.

Problème d’accessibilité – Tout le monde concerné ?

Ce qui est intéressant avec cette refonte de logo, c’est que pour une fois tout le monde est un peu dérangé par une décision de design graphique : ressemblance, proximité des formes, problème de distinction par la couleur. Ce sont des problématiques que rencontrent au quotidien des millions de personnes atteintes de certains types de handicaps relativement communs comme : dyslexie, daltonisme, et bien d’autres problèmes sur les spectres des handicaps visuels et cognitifs.

Par exemple, pour reconnaître les nombreux logos de la suite Adobe, vous avez intérêt à ne pas avoir de trouble de l’attention, de problème de perception des couleurs, ou être dyslexique.

Ils ne sont pas les seuls bien sûr. Si on prend Microsoft par exemple, pour ne citer que des « gros », il n’est pas commun de voir des set d’icônes bien trop proches visuellement.

Office et Bing par exemple proposent un effet d’icône relativement proches : des éléments simples géométriquement, mais qui pourrait perturber des personnes « dys » et/ou daltoniennes.

Concernant la suite Microsoft, je ne vous fait pas de dessin ni d’explications, je pense que vous avez compris l’idée.

Ok ! Donc maintenant que vous êtes gênés comme toute personne porteuse de handicap, est-ce qu’on peut parler accessibilité du numérique en essayent de respecter ces quelques régles en matière de design ?

• distinction par la forme : les formes trop proches visuellement peuvent être dérangeante pour des personnes ayant des problèmes cognitifs. Évitez, dans vos design, de vous reposer uniquement sur des icônes, car leur compréhension n’est pas homogène. Utilisez des verbes d’action pour les accompagner, et dans tous les cas utilisez des mots, la représentation graphique seule ne suffit pas.
• distinction par la couleur : faites attention à vos contrastes de couleurs. Si vous faites des icônes de produit comme Google ou Adobe, faites en sorte d’avoir des contrastes suffisant permettant de différencier vos produits. (utilisé les simulateurs de daltonisme à votre disposition) Dans tous les cas, ne vous reposez pas uniquement sur les couleurs pour faire passer des messages : pour certains types de daltonisme le rouge et le vert sont très proches visuellement, dommage car ce sont aussi les couleurs que l’on aime utiliser pour distingue un succès d’un échec dans l’interface. Trouvez donc autre chose pour les distinguer (texte + icône par exemple)
• partez du principe que vous ne savez pas : de manière générale, facilitez la vie de votre utilisateurs et utilisatrices en respectant un processus de tests, comme par exemple, dézoomer (25%) sur vos designs pour voir si les éléments se distinguent bien, zoomer sur vos designs (200%) pour voir si « la partie » reste cohérente, certaines personnes testent en louchant légèrement pour ajouter un effet flou à leur vision. Faites tester vos designs par les personnes concernées pour obtenir du feedback sur l’utilisabilité et la compréhension de vos contenus ou votre produit.

Petite pensée sur le Design (UX)

Ces deux aspects et réactions totalement opposées des gens qui observent et, parfois, critiquent des décisions de design sans vraiment avoir de contexte m’ont amené à me demander « pourquoi ? »

Mon point de vue est que les gens pensent que le design est visuel : tout le monde a des yeux, donc tout le monde peut critiquer une décision de design. (voire devenir designer ?)
Sauf que derrière une décision de design il y a plusieurs heures, voire jours de recherches techniques, graphiques, ergonomiques et stratégiques (parfois politiques, juridiques, sociales, etc.) qui dépassent souvent une vision étriquée qu’un non designer sur un produit peut avoir de ce produit. Et c’est normal, vous manquez de contexte. Et le design, c’est principalement ça : concevoir pour un objectif précis, avec un contexte précis.

Concernant l’algo de Google : l’UX ne sera pas pris en compte par Google dans leur algorithme. l’UX ne peut pas être mesurée quantitativement donc il ne le sera jamais. Il s’agit juste d’indicateurs qui permettent de mesurer des changements à l’écran, un temps de chargement et un temps de première interaction avec l’interface. Rien à voir avec l’UX donc, mais plus particulièrement avec un « temps de réponse et d’interaction optimal » qui sont un point d’attention pour une bonne expérience utilisateur, mais qui ne la mesure aucunement.

L’UX c’est bien plus que ça, et je pense qu’en lisant cet article vous l’aurez compris.