{"id":7664,"date":"2020-11-27T13:37:04","date_gmt":"2020-11-27T12:37:04","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=7664"},"modified":"2021-01-05T01:23:13","modified_gmt":"2021-01-05T00:23:13","slug":"google-core-web-vitals-logos-produits-workspace","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/ux-experience-utilisateur\/google-core-web-vitals-logos-produits-workspace","title":{"rendered":"Google Core Web Vitals, logos produits, et autres pens\u00e9es \u00ab\u00a0UX\u00a0\u00bb"},"content":{"rendered":"<p>Pas mal de bruit autour des d\u00e9cisions de Google en ce moment, entre les Core Web Vitals qui se veulent mesurer l&rsquo;UX de votre site web pour estimer votre position dans les r\u00e9sultats de recherche, et les nombreux produits de Google qui se voient attribuer de nouveaux logos. Parlons-en\u2026<\/p>\n<p><!--more--><\/p>\n<p class=\"message\">Cet article r\u00e9pond notamment \u00e0 pas mal d&rsquo;interrogations de personnes diverses et vari\u00e9es, ou de questions qu&rsquo;on m&rsquo;a pos\u00e9 directement sur la toile ci et l\u00e0, ou en direct.<\/p>\n<p>Google Core Web Vitals et logos de leurs produits : rien \u00e0 voir, me direz-vous. Et vous auriez parfaitement raison, mais les deux semblent toucher \u00e0 un domaine toujours aussi incompris : le design.<\/p>\n<p>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\u00e9ration l&rsquo;UX dans son algorithme de <span lang=\"en\"><em>ranking<\/em><\/span>, l\u00e0 tout le monde s&rsquo;inqui\u00e8te de devoir refaire son site et personne ne critique. Pourquoi ? (un d\u00e9but de r\u00e9ponse plus loin dans cet article)<\/p>\n<p>Et comme Google ne m\u00e9rite pas plus de pr\u00e9sence que cela sur mon blog, je fais un seul et unique article d\u00e9coup\u00e9 en deux pour essayer de pr\u00e9senter mon point de vue sur le sujet.<\/p>\n<p class=\"message remember\"><strong>Note : <\/strong>attention, je suis totalement pour un syst\u00e8me de mesure de performance \u00e0 la Core Web Vitals, ainsi que sur la critique des logos produit de Google. Ma critique vient sur l&rsquo;absence de recul de l&rsquo;adoption et la communication autour du premier, et l&rsquo;absence de vision globale du \u00ab\u00a0design\u00a0\u00bb du deuxi\u00e8me.<\/p>\n<h2>Google Core Web Vitals &#8211; Mesure UX de votre site<\/h2>\n<p>Je ne sais pas quelles connaissances vous avez des <a href=\"https:\/\/web.dev\/vitals\/\">Core Web Vitals<\/a> annonc\u00e9es par Google, ni de la notion d&rsquo;UX Design. Je vais donc essayer de vous pr\u00e9senter les 2 tr\u00e8s rapidement, avec mes mots.<\/p>\n<h3>Les Core Web Vitals<\/h3>\n<p>Les Core Web Vitals sont des indicateurs arbitrairement propos\u00e9s par Google pour mesurer la qualit\u00e9 d&rsquo;un site web via 4 indicateurs assez pr\u00e9cis qui sont :<\/p>\n<dl>\n<dt lang=\"en\"><a href=\"https:\/\/web.dev\/lcp\/\" hreflang=\"en\">LCP<\/a> (Largest Contentful Paint)<\/dt>\n<dd>Il s&rsquo;agit de la notion de chargement. Plus pr\u00e9cis\u00e9ment, a quel vitesse est-ce que le plus gros \u00e9l\u00e9ment visible de votre premi\u00e8re vue se charge compl\u00e8tement. Pour simplifier, si vous avec une banni\u00e8re de site web avec un gros titre, Google va mesurer \u00e0 quel vitesse votre titre s&rsquo;affiche compl\u00e8tement, avec son image de fond s&rsquo;il y en a une. Aujourd&rsquo;hui, en-dessous de 2,5 secondes, c&rsquo;est consid\u00e9r\u00e9 comme bon par Google.<\/dd>\n<dt lang=\"en\"><a href=\"https:\/\/web.dev\/fid\/\" hreflang=\"en\">FID<\/a> (First Input Delay)<\/dt>\n<dd>Il s&rsquo;agit ici de la notion d&rsquo;interactivit\u00e9. Un peu particulier \u00e0 comprendre car un poil technique, cet indicateur est mesur\u00e9 par le d\u00e9lai entre le d\u00e9but de chargement et la premi\u00e8re possibilit\u00e9 d&rsquo;interaction avec votre interface, typiquement : d\u00e9filer la page, cliquer un lien, etc. Un bon d\u00e9lai pour Google est de 100 ms.<\/dd>\n<dt lang=\"en\"><a href=\"https:\/\/web.dev\/cls\/\" hreflang=\"en\">CLS<\/a> (Cumulative Layout Shift)<\/dt>\n<dd>Il s&rsquo;agit de la notion de stabilit\u00e9 visuelle. Google tente ici de mesurer les changements visuels cumul\u00e9s sur une page web afin d&rsquo;estimer le d\u00e9rangement pour les utilisatrices et utilisateur. Un indicateur qui fait peur \u00e0 plein de personne et pour cause : o\u00f9 va-t-on mettre toutes ces publicit\u00e9s qui bougent et popup de conversion d\u00e9gueulasses ? Google estime qu&rsquo;un CLS en dessous de 0.1 est bon. C&rsquo;est une unit\u00e9 un peu obscure, mais vous pouvez faire des tests sur <a href=\"https:\/\/layoutstability.rocks\/\">layoutstability.rocks<\/a><\/dd>\n<dt lang=\"en\"><a href=\"https:\/\/web.dev\/fcp\/\" hreflang=\"en\">FCP<\/a> (First Contentful Paint)<\/dt>\n<dd>En voici un quatri\u00e8me mais <strong>Google semble l&rsquo;avoir mis de c\u00f4t\u00e9<\/strong> dans sa pr\u00e9sentation des Core Vitals. Il s&rsquo;agit de la notion de r\u00e9activit\u00e9 et d&rsquo;attente. Afficher rapidement un contenu sur la page pour ne pas faire attendre l&rsquo;utilisateur. Cet indicateur est encore pris en compte dans les outils d&rsquo;analyse sur le sujet.<\/dd>\n<\/dl>\n<p>Cet ensemble d&rsquo;indicateurs tr\u00e8s chiffr\u00e9s et arbitraires serait donc un moyen pour Google de calculer l&rsquo;UX de votre site web\u2026<\/p>\n<blockquote><p>Pour chacune des mesures ci-dessus, afin de vous assurer que vous atteignez l&rsquo;objectif recommand\u00e9 pour la plupart de vos utilisateurs, un bon seuil \u00e0 mesurer est le 75e percentile de chargement des pages, segment\u00e9 entre les appareils mobiles et de bureau.<\/p><\/blockquote>\n<p>Compl\u00e8te Google dans la documentation sur ce sujet. On est donc encore une fois sur un indicateur tr\u00e8s chiffr\u00e9 avec une priorisation plut\u00f4t arbitraire.<\/p>\n<h3>La notion d&rsquo;UX Design<\/h3>\n<p>J&rsquo;avais tent\u00e9 une d\u00e9finition de l&rsquo;UX Design dans l&rsquo;article \u00ab\u00a0<a href=\"https:\/\/www.creativejuiz.fr\/blog\/ux-experience-utilisateur\/mythes-accessibilite-couleurs-constraste-wcag\">Il n&rsquo;y a pas de Mythes sur l&rsquo;accessibilit\u00e9 des couleurs<\/a>\u00a0\u00bb mise en parall\u00e8le avec l&rsquo;accessibilit\u00e9 num\u00e9rique. Je vous la reprends ici :<\/p>\n<p>L&rsquo;<strong>exp\u00e9rience de l&rsquo;utilisateur<\/strong> est l&rsquo;ensemble des actions, tentatives, sentiments, r\u00e9ussites, frustrations, etc. qu&rsquo;une personne a d&rsquo;un produit ou d&rsquo;un service. Selon l&rsquo;objectif que vous souhaitez atteindre, cette exp\u00e9rience peut \u00eatre bonne ou mauvaise. M\u00eame dans l&rsquo;id\u00e9e d&rsquo;atteindre une mauvaise exp\u00e9rience, elle peut \u00eatre totalement voulue par le concepteur de cette exp\u00e9rience. Souvent, en tant que designer, vous avez tendance \u00e0 fournir une exp\u00e9rience m\u00e9morable positive pour que vos utilisateurs et utilisatrices comprennent, utilisent et aiment le produit ou l&rsquo;interface. Rendre les interfaces utilisables implique la n\u00e9cessit\u00e9 de <strong>comprendre un groupe sp\u00e9cifique de personnes<\/strong> afin de les aider \u00e0 accomplir une t\u00e2che pr\u00e9cise avec efficacit\u00e9, efficience et satisfaction.<\/p>\n<p>Il y a pas mal de notions complexes dans cette d\u00e9finition, mais si vous arrivez \u00e0 en comprendre le sens, vous commencez certainement d\u00e9j\u00e0 \u00e0 voir le probl\u00e8me que pose les Core Web Vitals.<\/p>\n<h3>Indicateur de Google VS r\u00e9alit\u00e9<\/h3>\n<p>Avec ces deux d\u00e9finitions, vous voyez bien qu&rsquo;il y a un probl\u00e8me quelque part, tout du moins je l&rsquo;esp\u00e8re. Dans la d\u00e9finition de l&rsquo;UX Design que je vous ai donn\u00e9, il y a des notions de sentiments, des notions de satisfaction, mais aussi des notions d&rsquo;objectifs.<\/p>\n<p>Du coup je vous pose la question : Comment Google peut-il mesurer si j&rsquo;ai bien atteint mon objectif, en tant que designer de produit num\u00e9rique, s&rsquo;il ne les connait pas ? Comment Google peut mesurer le sentiment de mon utilisateur ou utilisatrice ? Comment Google peut-il se permettre de d\u00e9classer mon site web si l&rsquo;objectif d&rsquo;enquiquiner mes visiteurs \u00e9tait bien atteint, dans le cadre de mon site web qui vise \u00e0 sensibiliser par l&rsquo;action ? (je d\u00e9conne \u00e0 moiti\u00e9 puisque c&rsquo;est l&rsquo;objectif de <a href=\"https:\/\/doisjeutiliser.fr\">doisjeutiliser.fr<\/a> par exemple)<\/p>\n<p>Ici Google ne mesure aucunement l&rsquo;UX de votre site, mais un ensemble de param\u00e8tres totalement arbitraires qui sont cens\u00e9s am\u00e9liorer l&rsquo;exp\u00e9rience de l&rsquo;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 \u00e0 interagir, y a-t-il beaucoup de changements sur la page dans un temps r\u00e9duit.<\/p>\n<p>Laissez-moi d\u00e9monter ces indicateurs un par un avec 3 solutions qui permettent de proposer une exp\u00e9rience d\u00e9plorable, et avoir de bons r\u00e9sultats selon Google :<\/p>\n<ul>\n<li><strong>LCP<\/strong> \u2014 pour faire en sorte que le premier \u00e9l\u00e9ment le plus gros de la page soit affich\u00e9 rapidement, rien de plus simple affichez une \u00e9norme en-t\u00eate blanche ou color\u00e9e avec un gros titre, sans aucune fonte exotiques. Absolument pas int\u00e9ressant pour l&rsquo;utilisateur, \u00e7a n&rsquo;apporte rien \u00e0 votre business ni au sien, mais Google sera heureux !<\/li>\n<li><strong>FID<\/strong> \u2014 celui-l\u00e0 est moins \u00e9vident, mais si vous ne chargez aucun <a href=\"https:\/\/fr.docs.wp-rocket.me\/article\/230-javascript-et-css-bloquant-le-rendu-pagespeed\">CSS ou JS bloquants<\/a> \u00e7a devrait bien se passer. Pensez \u00e0 mettre plein de styles en ligne ou utiliser le module Apache de Google pour que \u00e7a se fasse tout seul. Tr\u00e8s sinc\u00e8rement, 100ms pour une premi\u00e8re interaction, votre utilisateur est vraiment press\u00e9. Et surtout, le LCP est \u00e0 2,5 s l\u00e0 o\u00f9 le FID est \u00e0 100ms : votre utilisateur est cens\u00e9 interagir avec un site web qu&rsquo;il ne voit pas encore ? \ud83d\ude44<\/li>\n<li><strong>CLS<\/strong> \u2014 celui-l\u00e0 est moins facile \u00e0 d\u00e9monter car il mesure les changements dans le temps. Cependant, Google prendrait en compte le fait que certaines propri\u00e9t\u00e9s CSS ne provoqueraient pas de changement de score, notamment celles ne provoquant pas de re-paint. (<a href=\"https:\/\/csstriggers.com\/\">appel\u00e9e Composite<\/a>) Bien, il suffit d&rsquo;utiliser ces propri\u00e9t\u00e9s donc, et le probl\u00e8me de stabilit\u00e9 visuelle sera toujours pr\u00e9sent.<\/li>\n<\/ul>\n<p>Voil\u00e0, il ne suffit de pas grand chose pour se rendre compte que, premi\u00e8rement, ces indicateurs sont tout sauf des indicateurs d&rsquo;une bonne exp\u00e9rience utilisateur, deuxi\u00e8mement, ils sont arbitraires et plut\u00f4t facile \u00e0 contourner, sans pour autant am\u00e9liorer l&rsquo;exp\u00e9rience que les gens auront sur votre site web.<\/p>\n<p>Ha, c&rsquo;est bonus : l&rsquo;exp\u00e9rience utilisateur ne s&rsquo;arr\u00eate pas \u00e0 votre site web\u2026 mais \u00e7a Google ne peut ni le savoir (quoique\u2026), ni le mesurer.<\/p>\n<h2>Les nouveaux logo produits de Google<\/h2>\n<p>Je fais principalement r\u00e9f\u00e9rence aux nombreuses critiques li\u00e9es aux d\u00e9cisions de design des ic\u00f4nes\/logo produit autour de Google Workspace, notamment ces ic\u00f4nes de Gmail, Calendar, Drive, Document et Hangout\/Meet.<\/p>\n<figure id=\"attachment_7667\" aria-labelledby=\"figcaption_attachment_7667\" class=\"wp-caption alignnone\" style=\"width: 1398px\"><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/google-product-logo-workspace-redesign.png\"><img decoding=\"async\" class=\"wp-image-7667 size-full\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/google-product-logo-workspace-redesign.png\" alt=\"\" width=\"1388\" height=\"589\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/google-product-logo-workspace-redesign.png 1388w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/google-product-logo-workspace-redesign-300x127.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/google-product-logo-workspace-redesign-600x255.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/google-product-logo-workspace-redesign-768x326.png 768w\" sizes=\"(max-width: 1388px) 100vw, 1388px\" \/><\/a><figcaption id=\"figcaption_attachment_7667\" class=\"wp-caption-text\">Les logos\/ic\u00f4nes produits de Google, avant au-dessus, apr\u00e8s redesign en dessous.<\/figcaption><\/figure>\n<p>Une des critiques la plus commune que j&rsquo;ai beaucoup vu circuler ces derniers temps se r\u00e9sume en une seule image, que voici :<\/p>\n<figure id=\"attachment_7669\" aria-labelledby=\"figcaption_attachment_7669\" class=\"wp-caption alignnone\" style=\"width: 1210px\"><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/what-google-see-what-i-see.png\"><img decoding=\"async\" class=\"size-full wp-image-7669\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/what-google-see-what-i-see.png\" alt=\"\" width=\"1200\" height=\"900\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/what-google-see-what-i-see.png 1200w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/what-google-see-what-i-see-300x225.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/what-google-see-what-i-see-600x450.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/what-google-see-what-i-see-768x576.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/a><figcaption id=\"figcaption_attachment_7669\" class=\"wp-caption-text\">\u00ab\u00a0Ce que Google voit \/ Ce que je vois.\u00a0\u00bb<\/figcaption><\/figure>\n<p>cette image vient d&rsquo;un <a href=\"https:\/\/www.reddit.com\/r\/google\/comments\/jie6b7\/for_opening_home_instead_of_drive_gang\/\">post Reddit<\/a> qui se veut critique vis \u00e0 vis de la d\u00e9cision de Google sur l&rsquo;orientation de prennent les logos des produits Google.<\/p>\n<h3>Le probl\u00e8me du \u00ab\u00a0mauvais design\u00a0\u00bb<\/h3>\n<p>Dans l&rsquo;absolu, qu&rsquo;on soit d&rsquo;accord, je trouve les choix graphiques totalement discutables : le(s) designer(s) semble(nt) avoir confondu coh\u00e9rence graphique et ressemblance graphique. La ressemblance \u00e9tant facile \u00e0 mettre en \u0153uvre mais peut mener \u00e0 la confusion, la coh\u00e9rence \u00e9tant plus difficile mais permet de diff\u00e9rentier tout en gardant une identit\u00e9 globale propre.<\/p>\n<p>Cependant, quelque chose me g\u00eane dans cette critique un peu facile \u00e0 base de \u00ab\u00a0Google propose des ic\u00f4nes avec un <strong>mauvais<\/strong> design\u00a0\u00bb. En fait le design, ce n&rsquo;est pas uniquement l&rsquo;apparence qu&rsquo;ont ces ic\u00f4nes, c&rsquo;est \u00e9galement la strat\u00e9gie produit qui se cache derri\u00e8re. Google parle de Workspace d\u00e9sormais, personnellement je m&rsquo;attends \u00e0 une grosse fusion des outils avec un seul logo, un peu comme ce que Microsoft tente de faire avec Office 360. L&rsquo;id\u00e9e de faire s&rsquo;effacer les produits et mettre en avance le service (workspace) offert par Google me semble \u00eatre une strat\u00e9gie de design produit coh\u00e9rent, m\u00eame si \u00e7a n&rsquo;est pas mon domaine de pr\u00e9dilection. Du coup parler de design, et omettre la strat\u00e9gie qui se trouve derri\u00e8re me semble \u00eatre un peu r\u00e9ducteur. Pour moi c&rsquo;est omettre tout le contexte (qu&rsquo;on ne connait pas n\u00e9cessairement) derri\u00e8re la refonte de ces ic\u00f4nes, et potentiellement de tous les services\/produits derri\u00e8re.<\/p>\n<p>Ce qui me g\u00eane avec la critique actuelle, c&rsquo;est l&rsquo;absence de contexte, voire le retrait volontaire de contexte :<\/p>\n<ul>\n<li>sur mes interfaces Gmail ou Calendar, je me moque du logo, je reconnais l&rsquo;interface, elle est diff\u00e9rente pour chaque outil.<\/li>\n<li>sur un onglet de navigateur, j&rsquo;ai du texte qui accompagne mon onglet. Je vous entends d\u00e9j\u00e0 me dire que vous avez trop d&rsquo;onglets ouverts, ou que vous avez en param\u00e8tre \u00ab\u00a0cacher le texte\u00a0\u00bb de vos onglets. C&rsquo;est votre d\u00e9cision\u2026 \ud83d\ude00<\/li>\n<li>sur mobile ou en PWA je vais \u00e9galement avoir du texte pour accompagner ces logos.<\/li>\n<\/ul>\n<p>Oui je sais, je me fais l&rsquo;avocat du diable pour ouvrir mon esprit critique.<\/p>\n<p>Je ne vais pas revenir sur le d\u00e9tail de ces critiques faites, les notions de forme et couleurs sont abord\u00e9es par <a href=\"https:\/\/techcrunch.com\/2020\/10\/06\/googles-new-logos-are-bad\/\">Techcrunch<\/a> d\u00e9j\u00e0. Par contre \u00e7a me fait penser \u00e0 un domaine int\u00e9ressant qui est l&rsquo;accessibilit\u00e9 du num\u00e9rique.<\/p>\n<h3>Probl\u00e8me d&rsquo;accessibilit\u00e9 &#8211; Tout le monde concern\u00e9 ?<\/h3>\n<p>Ce qui est int\u00e9ressant avec cette refonte de logo, c&rsquo;est que pour une fois tout le monde est un peu d\u00e9rang\u00e9 par une d\u00e9cision de design graphique : ressemblance, proximit\u00e9 des formes, probl\u00e8me de distinction par la couleur. Ce sont des probl\u00e9matiques que rencontrent au quotidien des millions de personnes atteintes de certains types de handicaps relativement communs comme : dyslexie, daltonisme, et bien d&rsquo;autres probl\u00e8mes sur les spectres des handicaps visuels et cognitifs.<\/p>\n<p>Par exemple, pour reconna\u00eetre les nombreux logos de la suite Adobe, vous avez int\u00e9r\u00eat \u00e0 ne pas avoir de trouble de l&rsquo;attention, de probl\u00e8me de perception des couleurs, ou \u00eatre dyslexique.<\/p>\n<figure id=\"attachment_7672\" aria-labelledby=\"figcaption_attachment_7672\" class=\"wp-caption aligncenter\" style=\"width: 541px\"><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/adobe-logo-tableau-periodique.png\"><img decoding=\"async\" class=\"wp-image-7672\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/adobe-logo-tableau-periodique.png\" alt=\"\" width=\"531\" height=\"354\" \/><\/a><figcaption id=\"figcaption_attachment_7672\" class=\"wp-caption-text\">Les nombreuses ic\u00f4nes de la suite Adobe.<\/figcaption><\/figure>\n<p>Ils ne sont pas les seuls bien s\u00fbr. Si on prend Microsoft par exemple, pour ne citer que des \u00ab\u00a0gros\u00a0\u00bb, il n&rsquo;est pas commun de voir des set d&rsquo;ic\u00f4nes bien trop proches visuellement.<\/p>\n<figure id=\"attachment_7674\" aria-labelledby=\"figcaption_attachment_7674\" class=\"wp-caption alignnone\" style=\"width: 1158px\"><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/bing-office-logos.png\"><img decoding=\"async\" class=\"size-full wp-image-7674\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/bing-office-logos.png\" alt=\"\" width=\"1148\" height=\"570\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/bing-office-logos.png 1148w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/bing-office-logos-300x149.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/bing-office-logos-600x298.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/bing-office-logos-768x381.png 768w\" sizes=\"(max-width: 1148px) 100vw, 1148px\" \/><\/a><figcaption id=\"figcaption_attachment_7674\" class=\"wp-caption-text\">Office et Bing qui propose des formes tr\u00e8s proches.<\/figcaption><\/figure>\n<p>Office et Bing par exemple proposent un effet d&rsquo;ic\u00f4ne relativement proches : des \u00e9l\u00e9ments simples g\u00e9om\u00e9triquement, mais qui pourrait perturber des personnes \u00ab\u00a0dys\u00a0\u00bb et\/ou daltoniennes.<\/p>\n<figure id=\"attachment_7676\" aria-labelledby=\"figcaption_attachment_7676\" class=\"wp-caption alignnone\" style=\"width: 1810px\"><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/suite-office-logos.png\"><img decoding=\"async\" class=\"size-full wp-image-7676\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/suite-office-logos.png\" alt=\"\" width=\"1800\" height=\"202\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/suite-office-logos.png 1800w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/suite-office-logos-300x34.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/suite-office-logos-600x67.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/suite-office-logos-768x86.png 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/11\/suite-office-logos-1536x172.png 1536w\" sizes=\"(max-width: 1800px) 100vw, 1800px\" \/><\/a><figcaption id=\"figcaption_attachment_7676\" class=\"wp-caption-text\">La suite Microsoft proposant plein d&rsquo;ic\u00f4nes bien trop semblables.<\/figcaption><\/figure>\n<p>Concernant la suite Microsoft, je ne vous fait pas de dessin ni d&rsquo;explications, je pense que vous avez compris l&rsquo;id\u00e9e.<\/p>\n<p>Ok ! Donc maintenant que vous \u00eates g\u00ean\u00e9s comme toute personne porteuse de handicap, est-ce qu&rsquo;on peut parler accessibilit\u00e9 du num\u00e9rique en essayent de respecter ces quelques r\u00e9gles en mati\u00e8re de design ?<\/p>\n<ul>\n<li><strong>distinction par la forme<\/strong> : les formes trop proches visuellement peuvent \u00eatre d\u00e9rangeante pour des personnes ayant des probl\u00e8mes cognitifs. \u00c9vitez, dans vos design, de vous reposer uniquement sur des ic\u00f4nes, car leur compr\u00e9hension n&rsquo;est pas homog\u00e8ne. Utilisez des verbes d&rsquo;action pour les accompagner, et dans tous les cas utilisez des mots, la repr\u00e9sentation graphique seule ne suffit pas.<\/li>\n<li><strong>distinction par la couleur<\/strong> : faites attention \u00e0 vos contrastes de couleurs. Si vous faites des ic\u00f4nes de produit comme Google ou Adobe, faites en sorte d&rsquo;avoir des contrastes suffisant permettant de diff\u00e9rencier vos produits. (utilis\u00e9 <a href=\"https:\/\/pilestone.com\/pages\/color-blindness-simulator-1\">les simulateurs de daltonisme<\/a> \u00e0 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\u00e8s proches visuellement, dommage car ce sont aussi les couleurs que l&rsquo;on aime utiliser pour distingue un succ\u00e8s d&rsquo;un \u00e9chec dans l&rsquo;interface. Trouvez donc autre chose pour les distinguer (texte + ic\u00f4ne par exemple)<\/li>\n<li>partez du principe que vous ne savez pas : de mani\u00e8re g\u00e9n\u00e9rale, facilitez la vie de votre utilisateurs et utilisatrices en respectant <strong>un processus de tests<\/strong>, comme par exemple, d\u00e9zoomer (25%) sur vos designs pour voir si les \u00e9l\u00e9ments se distinguent bien, zoomer sur vos designs (200%) pour voir si \u00ab\u00a0la partie\u00a0\u00bb reste coh\u00e9rente, certaines personnes testent en louchant l\u00e9g\u00e8rement pour ajouter un effet flou \u00e0 leur vision. Faites tester vos designs par les personnes concern\u00e9es pour obtenir du feedback sur l&rsquo;utilisabilit\u00e9 et la compr\u00e9hension de vos contenus ou votre produit.<\/li>\n<\/ul>\n<h2>Petite pens\u00e9e sur le Design (UX)<\/h2>\n<p>Ces deux aspects et r\u00e9actions totalement oppos\u00e9es des gens qui observent et, parfois, critiquent des d\u00e9cisions de design sans vraiment avoir de contexte m&rsquo;ont amen\u00e9 \u00e0 me demander <em>\u00ab\u00a0pourquoi ?\u00a0\u00bb<\/em><\/p>\n<p><span id=\"ember1326\" class=\"ember-view\">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\u00e9cision de design. (voire devenir designer ?)<br \/>\n<\/span><span id=\"ember1326\" class=\"ember-view\">Sauf que derri\u00e8re une d\u00e9cision de design il y a plusieurs heures, voire jours de recherches techniques, graphiques, ergonomiques et strat\u00e9giques (parfois politiques, juridiques, sociales, etc.) qui d\u00e9passent souvent une vision \u00e9triqu\u00e9e qu&rsquo;un non designer sur un produit peut avoir de ce produit. <strong>Et c&rsquo;est normal, vous manquez de contexte.<\/strong> Et le design, c&rsquo;est principalement \u00e7a : concevoir pour un objectif pr\u00e9cis, avec un contexte pr\u00e9cis.<strong><br \/>\n<\/strong><\/span><\/p>\n<p><span id=\"ember1326\" class=\"ember-view\">Concernant l&rsquo;algo de Google : l&rsquo;UX ne sera pas pris en compte par Google dans leur algorithme. l&rsquo;UX ne peut pas \u00eatre mesur\u00e9e quantitativement donc il ne le sera jamais. <\/span><span id=\"ember1326\" class=\"ember-view\">Il s&rsquo;agit juste d&rsquo;indicateurs qui permettent de mesurer des changements \u00e0 l&rsquo;\u00e9cran, un temps de chargement et un temps de premi\u00e8re interaction avec l&rsquo;interface. Rien \u00e0 voir avec l&rsquo;UX donc, mais plus particuli\u00e8rement avec un \u00ab\u00a0temps de r\u00e9ponse et d&rsquo;interaction optimal\u00a0\u00bb qui sont un point d&rsquo;attention pour une bonne exp\u00e9rience utilisateur, mais qui ne la mesure aucunement.<\/span><\/p>\n<p><span id=\"ember1326\" class=\"ember-view\">L&rsquo;UX c&rsquo;est bien plus que \u00e7a, et je pense qu&rsquo;en lisant cet article vous l&rsquo;aurez compris.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pas mal de bruit autour des d\u00e9cisions de Google en ce moment, entre les Core Web Vitals qui se veulent mesurer l&rsquo;UX de votre site web pour estimer votre position dans les r\u00e9sultats de recherche, et les nombreux produits de Google qui se voient attribuer de nouveaux logos. Parlons-en\u2026<\/p>\n","protected":false},"author":4,"featured_media":7678,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[875],"tags":[910,24,91,25,899],"coauthors":[597],"class_list":["post-7664","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-experience-utilisateur","tag-coup-de-gueule","tag-google","tag-logo","tag-referencement","tag-web-core-vitals"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/7664","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=7664"}],"version-history":[{"count":3,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/7664\/revisions"}],"predecessor-version":[{"id":7680,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/7664\/revisions\/7680"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/7678"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=7664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=7664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=7664"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=7664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}