{"id":7955,"date":"2021-07-27T07:00:22","date_gmt":"2021-07-27T05:00:22","guid":{"rendered":"https:\/\/stephaniewalter.design\/fr\/?p=7955"},"modified":"2021-09-05T14:34:13","modified_gmt":"2021-09-05T12:34:13","slug":"bien-concevoir-ses-composants-les-bases-dun-design-system-evolutif","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/bien-concevoir-ses-composants-les-bases-dun-design-system-evolutif\/","title":{"rendered":"Bien concevoir ses composants, les bases d&rsquo;un design system \u00e9volutif"},"content":{"rendered":"<div class=\"juiz-outdated-message jodpm-top\">Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 3 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div><p>Comment concevoir des syst\u00e8mes de composants flexibles r\u00e9utilisables et modulaires ? Des composants qui s\u2019adaptent \u00e0 la taille du navigateur ou leur contexte d\u2019affichages ? Des composants qui s\u2019adaptent au vrai contenu \u201cnon id\u00e9al\u201ds ? Des composants qui s\u2019adaptent aux diff\u00e9rents cas d\u2019usage des utilisatrices et utilisateurs ? Je vous propose aujourd\u2019hui un gros aper\u00e7u de mon processus de conception pour d\u00e9signer des syst\u00e8mes modulaires qui s\u2019adaptent \u00e0 la r\u00e9alit\u00e9 d\u2019un produit, aussi complexe soit elle. Cet article est tir\u00e9 d\u2019une conf\u00e9rence du m\u00eame nom dont vous trouverez la vid\u00e9o \u00e0 la fin.<\/p>\n<h2>Sommaire<\/h2>\n<p>L\u2019article en long, vous pouvez naviguer plus rapidement dans les sections ici :<\/p>\n<ul>\n<li><a href=index.html#composants-reutilisables\">Design de composants r\u00e9utilisables<\/a><\/li>\n<li><a href=index.html#variation-densite\">Variations et adaptations \u00e0 diff\u00e9rentes densit\u00e9s de contenus<\/a><\/li>\n<li><a href=index.html#variations-interactivite-usage\">Variations et adaptations li\u00e9es \u00e0 l\u2019interactivit\u00e9 et au contexte d\u2019usage<\/a><\/li>\n<li><a href=index.html#resume\">En r\u00e9sum\u00e9, le <span lang=\"en\">TL;DNR<\/span><\/a><\/li>\n<li><a href=index.html#video\">La vid\u00e9o de la conf\u00e9rence<\/a><\/li>\n<\/ul>\n<p><small><em>J\u2019en profite pour vous rappeler que le contenu de cet article, les images et le design des slides ne sont pas libres de droits. Vous n\u2019avez normalement pas le droit de les r\u00e9utiliser sans mon autorisation. Donc soyez sympa, si vous voulez utilisez ce contenu, demandez-moi avant et citez cet article comme source. Merci.<\/em><\/small><\/p>\n<h2 id=\"composants-reutilisables\">Design de composants r\u00e9utilisables<\/h2>\n<p>Pour d\u00e9signer un syst\u00e8me \u00e9volutif, on veut tout d\u2019abord cr\u00e9er des composants r\u00e9utilisables. Pour cela, tout commence pour moi par <strong>l\u2019architecture d\u2019information<\/strong>\u2026 Au fil du temps, de mes lectures et travaux, j\u2019ai affin\u00e9 la fa\u00e7on dont je travaille qui est un m\u00e9lange de diff\u00e9rentes lectures et workshops, incluant :<\/p>\n<ul>\n<li>Un workshop de strat\u00e9gie mobile et responsive en 2015 donn\u00e9 par <span lang=\"en\">Karen McGrane<\/span> auquel j\u2019ai eu la chance d\u2019assister et son livre <a lang=\"en\" href=_-76.html hreflang=\"en\">Content Strategy for Mobile<\/a><\/li>\n<li>Le livre <a lang=\"en\" href=_-77.html hreflang=\"en\">How to make sense of any mess<\/a> de Abby Covert<\/li>\n<li>Le livre <a href=_-78.html><span lang=\"en\">Content Everywhere, Strategy and Structure for Future-Ready Content<\/span><\/a> de Sara Wachter-Boettcher<\/li>\n<li>Le livre <a lang=\"en\" href=index-283.html#lisa\" hreflang=\"en\">Everyday Information Architecture<\/a> de Lisa Maria Marquis<\/li>\n<li>L\u2019article <a lang=\"en\" href=_-79.html hreflang=\"en\">Content Modelling<\/a> par <span lang=\"en\">Rachel Lovinger<\/span><\/li>\n<li>L\u2019article de <a href=_-80.html hreflang=\"en\">OOUX par Sophia V. Prater<\/a> pour la partie m\u00e9ta-donn\u00e9es. Je trouve la nouvelle version renomm\u00e9e ORCA trop compliqu\u00e9e pour mes besoins au final<\/li>\n<\/ul>\n<h3>0. Faire sa recherche utilisateur<\/h3>\n<p>L\u2019\u00e9tape z\u00e9ro de tout bon design pour moi est de faire sa recherche utilisateur en amont (oui, je sais, parfois ce n\u2019est pas toujours facile).<\/p>\n<p>Quand la recherche utilisateur est bien faite, elle permet d\u2019extraire des besoins et des patterns du c\u00f4t\u00e9 des utilisatrices et utilisateurs. <strong>La recherche va donc permettre de guider ce qui sera dans vos pages et vos composants. <\/strong>Cela permettra \u00e9galement de vous aider \u00e0 faire des arbitrages en termes d\u2019importance sur la page ou dans le parcours de tel ou tel contenu (on y revient dans l\u2019\u00e9tape 2. sur la priorisation).<\/p>\n<p>Comment faire sa recherche est en dehors du p\u00e9rim\u00e8tre de cet article, mais voil\u00e0 quelques pistes de questions \u00e0 vous poser pour vous guider :<\/p>\n<ul>\n<li>Quelle(s) t\u00e2che(s) et activit\u00e9(s) la personne qui utilise mon interface essaie d\u2019accomplir ?<\/li>\n<li>De quoi a-t-elle besoin pour accomplir ces t\u00e2ches ?<\/li>\n<li>Qu\u2019est-ce qui, quels contenus ou types de contenus pourraient la freiner ?<\/li>\n<li>Qu\u2019est-ce qui, quels contenus ou types de contenus pourraient l\u2019aider ?<\/li>\n<li>Quand estime-t-on que la t\u00e2che soit accomplie ? Quand est-ce un \u00e9chec ?<\/li>\n<li>Etc.<\/li>\n<\/ul>\n<p><a href=_-81.html>Pour plus de questions \u201ctype\u201d, notamment lorsque vous faites des entretiens utilisateurs, vous pouvez consulter mon aide m\u00e9moire<\/a>.<\/p>\n<p>C\u2019est l\u00e0 o\u00f9 une collaboration entre les \u00e9quipes de design plut\u00f4t c\u00f4t\u00e9 UI et les \u00e9quipes de recherche est tr\u00e8s importante.<\/p>\n<h3>1. Travailler l&rsquo;architecture d\u2019information et le un mod\u00e8le de contenu<\/h3>\n<p>Je suis une grande fan du <a href=index-283.html#abby\" hreflang=\"en\">livre de Abby Covert <span lang=\"en\">\u201cHow to make sense of any mess\u201d<\/span><\/a>. En g\u00e9n\u00e9ral, <strong>face \u00e0 un probl\u00e8me compliqu\u00e9, je commence par le d\u00e9couper en petits morceaux et tout mettre \u00e0 plat<\/strong>. Dans mon m\u00e9tier on appelle \u00e7a \u00ab\u00a0travailler <strong>l&rsquo;architecture d&rsquo;information\u00a0\u00bb<\/strong>. Et pour des composants, ces petits morceaux sont souvent les diff\u00e9rents types de contenus et de contenus dont je vais avoir besoin. Avant de designer le moindre composant, je commence donc par mod\u00e9liser les types de contenus dont je vais avoir besoin dans l\u2019interface au niveau des pages et de mes composants.<\/p>\n<p>Au d\u00e9but, je faisais \u00e7a sous forme d\u2019une longue colonne de Post-it sur un mur, m\u00e9thode inspir\u00e9e de l\u2019atelier que <span lang=\"en\">Karen McGrane<\/span>. Comme je suis pass\u00e9e en remote \u00e0 plein temps depuis un an et demi, en ce moment c\u2019est sur miro. Mais le fond reste le m\u00eame :<\/p>\n<ul>\n<li>Je liste les <strong>types de contenus principaux<\/strong> et \/ ou <strong>type de pages<\/strong> dont je vais avoir besoin sur ce site \/ interface. Ce qui va m\u2019aider ici, c\u2019est la recherche utilisateur. Et sur un site existant, toutes les m\u00e9thodes d\u2019analyse de contenu (voir le livre \u201c<span lang=\"en\">Everyday Information Architecture<\/span>\u201d de Lisa Maria Marquis) . <em>Par exemple, sur un site de recette de cuisine, je vais avoir des recettes, sans doute des auteurs, des ingr\u00e9dients, etc. Pour un site qui classe des films je vais avoir des films, des auteures, des r\u00e9alisatrices, etc.<\/em><\/li>\n<li>Je liste ensuite <strong>de quoi est compos\u00e9 ce contenu<\/strong>. En g\u00e9n\u00e9ral, les diff\u00e9rents articles et livres qui parlent d\u2019architecture d\u2019information et de contenus ont tendance \u00e0 appeler \u00e7a des <a href=_-79.html><strong>attributs<\/strong><\/a>. <em>Une recette de cuisine a par exemple un titre, une photo, des \u00e9tapes, un sommaire, des ingr\u00e9dients, une note, un nombre d\u2019avis, etc.<\/em><\/li>\n<\/ul>\n<p>Petite note : le mod\u00e8le de contenu m\u2019aide \u00e0 designer mes pages et composants. Mais il aide aussi en g\u00e9n\u00e9ral les \u00e9quipes de d\u00e9veloppement \u00e0 designer le back-end, les APIs et la structure de la base de donn\u00e9es. N\u2019h\u00e9sitez donc pas \u00e0 le partager.<\/p>\n<p>Sur des composants plus compliqu\u00e9s, je vais parfois aussi lister les <strong>interactions<\/strong>. Ces interactions vont parfois cr\u00e9er des variantes des composants (mode lecture seule, \u00e9dition, etc.).<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-7979 size-full\" src=_-82.html alt=\"De quoi ce type de contenu sera compos\u00e9 ? Quelles seront les interactions ?\" width=\"1373\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composants-modele-de-contenu-1-1.jpg 1373w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composants-modele-de-contenu-1-1-768x294.jpg 768w\" sizes=\"(max-width: 1373px) 100vw, 1373px\" \/><\/p>\n<p>Quand le mod\u00e8le est long, je tague parfois certains attributs comme \u00e9tant des <strong>m\u00e9tadonn\u00e9es<\/strong>. Ce sont des attributs particuliers dont on se sert souvent pour classer, faire des listes, des recherches, des filtres, etc. <em>Sur un site de recette de cuisine, on pense aux cat\u00e9gories, au co\u00fbt, au temps de pr\u00e9paration, etc.<\/em><\/p>\n<h3>2. Tris de cartes pour classer et prioriser<\/h3>\n<p>Une fois que j\u2019ai ma liste d\u2019ingr\u00e9dients (haha) de ce dont est compos\u00e9 ce type de contenu, en g\u00e9n\u00e9ral je m\u2019int\u00e9resse \u00e0 la priorit\u00e9 des \u00e9l\u00e9ments qui le composent.<\/p>\n<h4><strong>Un mod\u00e8le R\u00e9sum\u00e9 &gt; D\u00e9tail<\/strong><\/h4>\n<p>Quand on creuse un peu, on se rend compte qu\u2019une grosse partie de nos sites fonctionne sur un mod\u00e8le <strong>r\u00e9sum\u00e9 &gt; d\u00e9tail<\/strong>. Et qu\u2019une grande partie des pages sont soit des listes de r\u00e9sum\u00e9s, soit des pages de d\u00e9tails. Quelques exemples :<\/p>\n<ul>\n<li>Un blog: une liste de r\u00e9sum\u00e9 d\u2019articles qui m\u00e8nent \u00e0 un article (d\u00e9tail)<\/li>\n<li>Un site e-commerce: une liste de r\u00e9sum\u00e9s de produits qui m\u00e8nent \u00e0 une fiche produit (on pourrait argumenter que le panier est \u00e9galement une liste de r\u00e9sum\u00e9s)<\/li>\n<li>Une application d\u2019e-mail: une liste de r\u00e9sum\u00e9s qui m\u00e8nent au mail complet d\u00e9taill\u00e9<\/li>\n<\/ul>\n<p>Ai-je besoin de continuer ?<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-7980 size-full\" src=_-83.html alt=\"Un vignette &quot;overview&quot; \u00e0 une &quot;liste d'overviews&quot; \u00e0 un page de d\u00e9tail\" width=\"1373\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-liste-details-1.jpg 1373w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-liste-details-1-768x294.jpg 768w\" sizes=\"(max-width: 1373px) 100vw, 1373px\" \/><\/p>\n<p>En g\u00e9n\u00e9ral je priorise les \u00e9l\u00e9ments \u00e0 l\u2019int\u00e9rieur de mon type de contenu du plus important en haut au moins important en bas. C\u2019est l\u00e0 o\u00f9 le faire sur un mur \u00e9tait pratique<\/p>\n<p>\u00c0 partir de l\u00e0 j\u2019ai une bonne base pour :<\/p>\n<ul>\n<li>Extraire des <strong>minis composants de type \u201cr\u00e9sum\u00e9\u201d <\/strong>en utilisant surtout ce qui se trouve en haut de ma liste puisque c\u2019est ce qui permettra \u00e0 la personne de d\u00e9terminer si elle veut cliquer ou non sur la miniature \/ carte<\/li>\n<li>Cr\u00e9er la structure d\u2019une <strong>page d\u00e9taill\u00e9e<\/strong>, encore une fois avec les contenus les plus importants en haut de page.<\/li>\n<li>Quand on a beaucoup d\u2019attributs, on finit parfois \u00e0 partir de cette liste par cr\u00e9er <strong>plusieurs pages d\u00e9taill\u00e9es<\/strong> sur plusieurs niveaux. Du coup on peut m\u00eame cr\u00e9er des \u201csous\u201d types de contenus parfois sur des projets tr\u00e8s complexes en termes de donn\u00e9es.<\/li>\n<li>Prioriser sur <strong>du responsive<\/strong> puisque souvent sur mobile on a une seule colonne avec encore une fois les contenus les plus importants vers le haut.<\/li>\n<\/ul>\n<div id=\"attachment_7982\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-7982\" class=\"size-full wp-image-7982\" src=_-84.html alt=\"\" width=\"1189\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-modele-responsive-2.jpg 1189w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-modele-responsive-2-768x339.jpg 768w\" sizes=\"(max-width: 1189px) 100vw, 1189px\" \/><p id=\"caption-attachment-7982\" class=\"wp-caption-text\">D&rsquo;une colonne de contenu class\u00e9 par priorit\u00e9 on peut cr\u00e9er des petits composants de \u00ab\u00a0r\u00e9sum\u00e9\u00a0\u00bb, des plus gros, voir une page enti\u00e8re<\/p><\/div>\n<h4><strong>Utilisez votre recherche utilisateur !<\/strong><\/h4>\n<p>\u00c0 ce stade vous devez sans doute vous demander \u201cmais comment on d\u00e9cide ce qui est important ou pas?\u201d. On ne d\u00e9cide pas arbitrairement. On le fait en fonction des donn\u00e9es collect\u00e9es lors de <strong>la recherche utilisateur<\/strong> faite en amont (souvenez-vous, \u00e9tape 0).<\/p>\n<p>Et s\u2019il y a des \u00e9l\u00e9ments pour lesquels l\u2019\u00e9quipe ne s&rsquo;accorde pas sur la priorit\u00e9, c\u2019est souvent l\u00e0 qu&rsquo;on ira <strong>creuser avec plus de recherche<\/strong>. Cela permet de mieux comprendre ce qui va impacter les d\u00e9cisions des utilisatrices et utilisateurs et leurs besoins.<\/p>\n<h4><strong>Exemple sur un vrai projet<\/strong><\/h4>\n<p>Si je prends un exemple concret sur un projet un poil plus complexe que des sites de recette de cuisine\u2026 J\u2019ai un site avec des op\u00e9rations financi\u00e8res. Nous avons la page d\u00e9taill\u00e9e d&rsquo;une op\u00e9ration. Mais nous avons aussi besoin de composants de \u201cnavigation\u201d qu\u2019on appelle \u201c<span lang=\"en\">entity link item<\/span>\u201d qui permettra de lister les op\u00e9rations \u00e0 diff\u00e9rents endroits de l\u2019interface. Le mod\u00e8le de contenu de l&rsquo;op\u00e9ration est tr\u00e8s compliqu\u00e9, car il va contenir beaucoup d\u2019\u00e9l\u00e9ments. Tellement compliqu\u00e9 qu\u2019au final, on va structurer et r\u00e9partir ces attributs de contenus en \u201csous types\u201d sur plusieurs pages de d\u00e9tails.<\/p>\n<div id=\"attachment_8033\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-8033\" class=\"wp-image-8033 size-full\" src=_-85.html alt=\"\" width=\"1373\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-list-01-2.jpg 1373w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-list-01-2-768x294.jpg 768w\" sizes=\"(max-width: 1373px) 100vw, 1373px\" \/><p id=\"caption-attachment-8033\" class=\"wp-caption-text\">Du mod\u00e8le de contenu complet, au mod\u00e8le du composant, au composant.<\/p><\/div>\n<p>\u00c0\u00a0partir de ma priorisation de contenus, je peux <strong>\u201cgarder\u201d la partie du mod\u00e8le de contenu<\/strong> qui va aider l\u2019utilisatrice \u00e0 d\u00e9cider de cliquer ou non sur cet \u00e9l\u00e9ment (ici c\u2019est la partie qui identifie l&rsquo;op\u00e9ration) pour cr\u00e9er ce composant de liste \/ navigation qu\u2019on appelle chez nous \u201c<span lang=\"en\">entity list item<\/span>\u201d.<\/p>\n<h3>3. Identifier les variations et composants similaires<\/h3>\n<p>En g\u00e9n\u00e9ral, on essaie de r\u00e9utiliser un maximum nos composants quand c\u2019est possible. Identifier o\u00f9 et comment pour factoriser les utilisations peut permettre de faire gagner par mal de temps aux \u00e9quipes<\/p>\n<p>\u00c0 partir de l\u00e0 je me pose souvent la question de \u201cExiste-t-il des variations qui pourraient utiliser le m\u00eame composant ?\u201d. On peut imaginer diff\u00e9rents types de variations<\/p>\n<ul>\n<li>Le m\u00eame composant en <strong>\u00e9dition<\/strong> vs <strong>lecture seule<\/strong>.<\/li>\n<li>Le m\u00eame composant dont certains attributs changent en fonction du <strong>type d\u2019utilisatrice et de ses droits<\/strong>.<\/li>\n<li>Le m\u00eame composant qui change en fonction de l\u00e0 o\u00f9 se trouve la personne dans le parcours (j\u2019y reviens dans la derni\u00e8re partie)<\/li>\n<li>Le m\u00eame composant avec diff\u00e9rents \u00e9tats (j\u2019y reviens dans la derni\u00e8re partie)<\/li>\n<li>Etc.<\/li>\n<\/ul>\n<p>La liste peut \u00eatre longue, ce ne sont que quelques exemples ici (plus d\u2019exemples dans la derni\u00e8re partie). \u00c0 vous d\u2019<strong>identifier les petites variations<\/strong> qui permettent de cr\u00e9er <strong>\u201cpresque\u201d le m\u00eame composant<\/strong> \u00e0 quelques d\u00e9tails pr\u00e8s et voir du coup si un composant g\u00e9n\u00e9rique avec des options peut fonctionner, plut\u00f4t que plusieurs composants. En g\u00e9n\u00e9ral, jeter un \u0153il au mod\u00e8le de contenu aide \u00e0 identifier ces cas.<\/p>\n<div id=\"attachment_7984\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-7984\" class=\"wp-image-7984 size-full\" src=_-86.html alt=\"\" width=\"1373\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-list-02-1.jpg 1373w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-list-02-1-768x294.jpg 768w\" sizes=\"(max-width: 1373px) 100vw, 1373px\" \/><p id=\"caption-attachment-7984\" class=\"wp-caption-text\">Des mod\u00e8les pour les 4 types de contenus aux variantes de composants<\/p><\/div>\n<p>Dans mon interface j\u2019ai en fait 4 types de contenus li\u00e9s qui vont avoir besoin d\u2019un composant lien : op\u00e9rations, contrats, contreparties et documents. Si on regarde le mod\u00e8le de contenu de ces diff\u00e9rents types, on se rend compte qu\u2019il y a pas mal de similitudes.<\/p>\n<p>Au final on pourrait utiliser le m\u00eame composant, avec des variations.<\/p>\n<h3>4. Identifier les contextes de r\u00e9utilisation<\/h3>\n<p>Au-del\u00e0 des variations du composant li\u00e9es \u00e0 ses attributs et types de contenus, on peut aussi identifier que <strong>certains composants seront utilis\u00e9s dans diff\u00e9rents contextes<\/strong>. Par exemple, un composant de lien peut \u00eatre utilis\u00e9 dans une liste, mais peut-\u00eatre aussi dans des r\u00e9sultats de recherche. Le m\u00eame composant qui peut exister sur une appli web mais aussi sur App native mobile (donc optimisation au touch), sur un Google Nest Hub, Google TV, etc.<\/p>\n<p>Sur mon site, il y a pleins d\u2019endroits o\u00f9 on va utiliser ce composant de navigation vers un type d\u2019entit\u00e9:<\/p>\n<ul>\n<li>Sur la page d\u2019accueil on a des listes de favoris<\/li>\n<li>\u00c0 l\u2019int\u00e9rieur de certaines pages pour faire du maillage interne,<\/li>\n<li>Dans la recherche du site<\/li>\n<\/ul>\n<p>C\u2019est l\u00e0 o\u00f9 \u00e7a commence \u00e0 devenir fun : la recherche sur mon site existe dans une taille moyenne sur la page d\u2019accueil. Mais elle existe aussi dans une version \u201cpetite\u201d \u00e0 l\u2019int\u00e9rieur du site sur chaque page. Pour mon \u201c<span lang=\"en\">entity link<\/span>\u201d, du coup j\u2019ai donc d\u00e9sormais non seulement 4 \u201cvariations\u201d mais \u00e9galement 2 tailles<\/p>\n<div id=\"attachment_7987\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-7987\" class=\"wp-image-7987 size-full\" src=_-87.html alt=\"\" width=\"948\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-list-04-1.jpg 948w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-list-04-1-768x425.jpg 768w\" sizes=\"(max-width: 948px) 100vw, 948px\" \/><p id=\"caption-attachment-7987\" class=\"wp-caption-text\">4 variations du composant et deux tailles (moyen et petit)<\/p><\/div>\n<h4><strong>Variations et similarit\u00e9s : \u2028same player, play again !<\/strong><\/h4>\n<p>Je d\u00e9cris tout cela dans la conf\u00e9rence et cet article de mani\u00e8re lin\u00e9aire. Mais sur un projet ce n\u2019est pas le cas. Souvent c\u2019est <strong>un processus it\u00e9ratif<\/strong> o\u00f9 on r\u00e9fl\u00e9chit \u00e0 plusieurs fois variations et similarit\u00e9s en m\u00eame temps.<\/p>\n<p>Mon composant \u201c<span lang=\"en\">entity link<\/span>\u201d pourrait \u00eatre r\u00e9utilis\u00e9 pour la page de r\u00e9sultats de recherche. Mais nous nous sommes rendu compte qu\u2019en termes de priorit\u00e9 utilisateur, pour les r\u00e9sultats de recherche, il nous fallait afficher un peu plus d\u2019informations que la version par d\u00e9faut. C\u2019est li\u00e9 au fait que ce composant dans les r\u00e9sultats de recherche peut \u00eatre filtr\u00e9. Il nous faut donc un peu plus d\u2019informations.<\/p>\n<p>Nous avons <strong>\u00e9tendu le mod\u00e8le <\/strong>pour y inclure plus d\u2019\u00e9l\u00e9ments qui \u00e9taient consid\u00e9r\u00e9s comme priorit\u00e9 plus basse pour cr\u00e9er une variante.<\/p>\n<div id=\"attachment_7988\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-7988\" class=\"wp-image-7988 size-full\" src=_-88.html alt=\"\" width=\"1078\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-list-05-1.jpg 1078w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-list-05-1-768x374.jpg 768w\" sizes=\"(max-width: 1078px) 100vw, 1078px\" \/><p id=\"caption-attachment-7988\" class=\"wp-caption-text\">\u00c9tendre la priorit\u00e9 du mod\u00e8le sur des variations en ajoutant des attributs de la liste<\/p><\/div>\n<p>Dans notre design syst\u00e8me, nous avons maintenant une variante qui affiche un peu plus d\u2019informations que la version par d\u00e9faut et qui est utilis\u00e9e pour les r\u00e9sultats de recherche.<\/p>\n<div id=\"attachment_7989\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-7989\" class=\"size-full wp-image-7989\" src=_-89.html alt=\"\" width=\"1252\" height=\"501\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-variations-1.jpg 1252w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-variations-1-768x307.jpg 768w\" sizes=\"(max-width: 1252px) 100vw, 1252px\" \/><p id=\"caption-attachment-7989\" class=\"wp-caption-text\">4 variations du composant de base, et 4 nouvelles variations pour les r\u00e9sultats de recherche<\/p><\/div>\n<p>Bon je m\u2019arr\u00eate l\u00e0 pour les exemples, mais sur le projet ce composant a encore quelques variations possibles.<\/p>\n<p>Le principe reste le m\u00eame :<\/p>\n<ul>\n<li><strong>Mod\u00e8le de contenu<\/strong><\/li>\n<li><strong>Tris et Priorit\u00e9<\/strong><\/li>\n<li>Comprendre les <strong>similitudes<\/strong> et ce qui est peut-\u00eatre r\u00e9utilis\u00e9<\/li>\n<\/ul>\n<h3>Du mod\u00e8le de contenu aux zonings<\/h3>\n<p>Aujourd\u2019hui avec le design syst\u00e8me en place sur mon projet, je ne fais plus vraiment beaucoup de wireframes d\u00e9taill\u00e9s des composants. J\u2019ai plut\u00f4t tendance \u00e0 <strong>faire l\u2019inventaire et prioriser<\/strong>. Ensuite, je reprends les attributs sur miro pour cr\u00e9er des zonings tr\u00e8s basse fid\u00e9lit\u00e9 de ce qui sera dans le composant. Puis je passe au design dans Sketch.<\/p>\n<p>J\u2019ai volontairement simplifi\u00e9 les exemples ci-dessus pour mettre l\u2019accent sur le processus. L\u2019\u00e9tape \u201ctechnique\u201d entre est celle du \u201czoning\u201d. Elle est assez minimaliste sur ce composant tr\u00e8s simple et ressemble un peu \u00e0 \u00e7a:<\/p>\n<div id=\"attachment_7990\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-7990\" class=\"wp-image-7990 size-full\" src=_-90.html alt=\"\" width=\"1373\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-modele-wireframe-1.jpg 1373w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-modele-wireframe-1-768x294.jpg 768w\" sizes=\"(max-width: 1373px) 100vw, 1373px\" \/><p id=\"caption-attachment-7990\" class=\"wp-caption-text\">Du mod\u00e8le de contenu, au zoning au composant final<\/p><\/div>\n<p>On peut aussi utiliser ce mod\u00e8le de contenu pour d\u00e9signer des <strong>pages de d\u00e9tails en responsive par exemple<\/strong>. On arrive \u00e0 un zoning pr\u00e9cis qui permet ensuite souvent de passer assez rapidement \u00e0 l\u2019UI dans Sketch, surtout si on a une grosse partie des composants d\u00e9j\u00e0 dans le syst\u00e8me :<\/p>\n<div id=\"attachment_7991\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-7991\" class=\"wp-image-7991 size-full\" src=_-91.html alt=\"\" width=\"1373\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-wireframe-responsive-1.jpg 1373w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-wireframe-responsive-1-768x294.jpg 768w\" sizes=\"(max-width: 1373px) 100vw, 1373px\" \/><p id=\"caption-attachment-7991\" class=\"wp-caption-text\">De la priorisation de contenu au zoning de 2 pages, une page de d\u00e9tails et une page de \u00ab\u00a0liste\u00a0\u00bb<\/p><\/div>\n<p>D\u2019ailleurs c\u2019est une partie des m\u00e9thodes que j\u2019enseigne dans ma formation responsive \u00e0 mes \u00e9tudiantes et en workshop en petit comit\u00e9. Si vous \u00eates int\u00e9ress\u00e9s par ce type d\u2019enseignement pour votre conf\u00e9rence ou master class, <a href=index.html#contact\">envoyez-moi un e-mail<\/a>.<\/p>\n<h3>Documentation et relation avec l\u2019\u00e9quipe de d\u00e9veloppement<\/h3>\n<p>Bien s\u00fbr, ce travail ne se fait pas en silo mais est en collaboration avec mon \u00e9quipe de d\u00e9veloppement. Nous <strong>discutons pas mal avec l\u2019\u00e9quipe de d\u00e9veloppement<\/strong> pour ce type de composants, que ce soit sur le contenu ou la faisabilit\u00e9 technique.<\/p>\n<p>Mais ce qui est clair aujourd\u2019hui dans ma t\u00eate (et celle de mon \u00e9quipe) ne le sera pas forc\u00e9ment dans 3 semaines ou un mois quand on va commencer vraiment le d\u00e9veloppement. Je documente donc beaucoup de choses pour ces composants :<\/p>\n<ul>\n<li>La version par <strong>d\u00e9faut<\/strong><\/li>\n<li>Les <strong>variations<\/strong><\/li>\n<li>Et j\u2019ajoute le <strong>mod\u00e8le de contenu<\/strong> \u00e0 ma documentation pour les aider \u00e0 avoir une visualisation des similitudes et diff\u00e9rences<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone wp-image-7992 size-full\" src=_-92.html alt=\"Exemple de documentation de composant dans Sketch\" width=\"1115\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-documenter-1.jpg 1115w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-documenter-1-768x362.jpg 768w\" sizes=\"(max-width: 1115px) 100vw, 1115px\" \/><\/p>\n<p>Apr\u00e8s tout ce travail sur le mod\u00e8le de contenu et les variations, le r\u00e9sultat final est un seul et unique composant, avec diff\u00e9rentes options qui permet de g\u00e9rer tous ces cas. Toute la complexit\u00e9 du composant a pu \u00eatre r\u00e9sum\u00e9e en 4 grosses zones que l\u2019on remplit en fonction des options.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-7993 size-full\" src=_-93.html alt=\"Zoning et composant final\" width=\"972\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-dev-1.jpg 972w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-dev-1-768x415.jpg 768w\" sizes=\"(max-width: 972px) 100vw, 972px\" \/><\/p>\n<h3>G\u00e9rer les variations d\u2019un point de vue technique<\/h3>\n<p>Dans mon exemple, j\u2019ai 2 versions : medium et small du composant. Pour la version small, on peut la faire en utilisant des techniques de <strong>responsive web design<\/strong>: utiliser des <strong>media queries<\/strong> pour g\u00e9rer des variations de composant en fonction de la taille du viewport.<\/p>\n<p>Le truc vraiment sympa et tout nouveau qui va permettre de pousser la modularit\u00e9 un cran plus loin avec les <strong>container queries.<\/strong>Au lieu d\u2019adapter en fonction de la taille du viewport (media queries), on va pouvoir adapter le composant en fonction de la <strong>taille du container <\/strong>dans lequel on va le mettre. La bonne nouvelle c\u2019est que<a href=_-94.html hreflang=\"en\"> cette spec arrive bient\u00f4t dans le navigateur!!<\/a> Si vous n\u2019avez pas la patience d\u2019attendre, il est possible de<a href=_-95.html hreflang=\"en\"> les simuler avec beaucoup de JS<\/a> (ce que nous faisons actuellement sur mon projet en attendant que les navigateurs impl\u00e9mentent Container queries.)<\/p>\n<div id=\"attachment_7995\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-7995\" class=\"size-full wp-image-7995\" src=_-96.html alt=\"\" width=\"1373\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-mediaqueries-containerqueries.jpg 1373w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-mediaqueries-containerqueries-768x294.jpg 768w\" sizes=\"(max-width: 1373px) 100vw, 1373px\" \/><p id=\"caption-attachment-7995\" class=\"wp-caption-text\">\u00c0 gauche les media queries, permettent de modifier un composant en fonction de la taille du viewport. \u00c0 droite, les container queries, permettent de modifier le composant en fonction de la taille de son parent \/ contenaire<\/p><\/div>\n<p>Mais container queries n\u2019est pas la seule chose qui permet de cr\u00e9er des composants capables de s\u2019adapter tout seul en fonction de l\u2019espace disponible. Pas mal de propri\u00e9t\u00e9s CSS plut\u00f4t bien support\u00e9es permettent d\u2019aller tr\u00e8s loin aujourd\u2019hui dans la modularit\u00e9: <code lang=\"en\">flexbox<\/code>, <code lang=\"en\">grid<\/code>, <code lang=\"en\">clamp()<\/code>, etc.<\/p>\n<p>D\u2019ailleurs, en 2018 d\u00e9j\u00e0, <a href=_-97.html hreflang=\"en\">Jen Simmons<\/a> dans sa conf\u00e9rence \u201c<span lang=\"en\"><a href=watcha1b2.html>Everything You Know About Web Design Just Changed<\/a><\/span>\u201d pr\u00e9sentait d\u00e9j\u00e0 la notion de <span lang=\"en\"><strong>Intrinsic Web Design<\/strong><\/span>. Au lieu de changer de style en fonction de la taille du navigateur, elle propose de cr\u00e9er des composants dont la mise en page s&rsquo;adapte automatiquement aux conditions id\u00e9ales du navigateur. Elle y parle entre autres de <code lang=\"en\">grid layout<\/code>.<\/p>\n<p>Si je reprends mon exemple de site de restaurant, je pourrai avoir un composant \u201ccarte\u201d qui est capable de s\u2019adapter de mani\u00e8re horizontale ou verticale, \u00e0 l\u2019espace qui lui est d\u00e9di\u00e9 gr\u00e2ce \u00e0 <code lang=\"en\">flexbox<\/code> et <code lang=\"en\">clamp()<\/code> (aucune media queries ici). Et si vous \u00eates curieuses de comment \u00e7a fonctionne techniquement, Geoffrey Crofte a fait un article d\u00e9taill\u00e9 :<a href=_-98.html hreflang=\"en\"><span lang=\"en\">How to Make a Media Query-less Card Component<\/span><\/a><\/p>\n<p class='codepen'  data-height='750' data-theme-id='1' data-slug-hash='OJMaMxa' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\n<br \/>\n1<\/p>\n<script async src=_-99.html><\/script>\n<p>Ressources pour aller plus loin<\/p>\n<ul>\n<li><a href=_-100.html hreflang=\"en\"><span lang=\"en\">Container Queries Explainer &amp; Proposal<\/span><\/a><\/li>\n<li><span lang=\"en\"><a href=_-101.html>A Cornucopia of Container Queries<\/a><\/span> rassemble en anglais pas mal d\u2019articles et ressources sur les container queries<\/li>\n<li><a href=_-102.html hreflang=\"en\"><span lang=\"en\">CSS Container Queries For Designers<\/span><\/a> et <a href=_-103.html hreflang=\"en\"><span lang=\"en\">Say Hello To CSS Container Queries<\/span><\/a><\/li>\n<li><span lang=\"en\"><a href=_-104.html hreflang=\"en\">The new responsive: Web design in a component-driven world<\/a><\/span><\/li>\n<li><span lang=\"en\"><a href=_-105.html hreflang=\"en\">Container Queries are actually coming<\/a><\/span><\/li>\n<li><a href=_-106.html hreflang=\"en\"><span lang=\"en\">Flexible layouts without media queries<\/span><\/a><\/li>\n<li><span lang=\"en\"><a href=_-107.html hreflang=\"en\">Look Ma, No Media Queries! Responsive Layouts Using CSS Grid<\/a><\/span><\/li>\n<li><span lang=\"en\"><a href=_-108.html hreflang=\"en\">Create a responsive grid layout with no media queries, using CSS Grid<\/a><\/span><\/li>\n<li><a href=_-109.html hreflang=\"en\"><span lang=\"en\">Responsive CSS Layouts WITHOUT Media Queries<\/span><\/a><\/li>\n<\/ul>\n<h4>Designer dans les outils, \u2028D\u00e9cider dans le navigateur !<\/h4>\n<p>Pour moi, si on veut arriver \u00e0 cr\u00e9er des composants r\u00e9utilisables, il faut sortir de l\u2019obsession du \u201cpixel perfect\u201d et accepter la flexibilit\u00e9 des navigateurs. \u2028\u2028Designer dans les outils, \u2028D\u00e9cider dans le navigateur !<img decoding=\"async\" class=\"alignnone wp-image-7996 size-full\" src=_-110.html alt=\"\" width=\"1373\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-pixel-perfectjpg.jpg 1373w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-pixel-perfectjpg-768x294.jpg 768w\" sizes=\"(max-width: 1373px) 100vw, 1373px\" \/>Mon travail en tant que designer est de designer ces composants dans leurs \u201cmise en page id\u00e9ale\u201d. Mes \u00e9quipes de d\u00e9veloppement se chargent ensuite de fournir au navigateur les guidelines CSS pour se rapprocher autant que possible. Mais l\u2019impl\u00e9mentation finale reste \u00e0 la discr\u00e9tion du navigateur.<\/p>\n<p>C\u2019est pour \u00e7a que je pr\u00e9f\u00e8re voir le r\u00e9sultat final le plus t\u00f4t possible dans un navigateur, quitte \u00e0 revenir sur mon design si besoin si des choses ne fonctionnent pas visuellement.<\/p>\n<p>La derni\u00e8re \u00e9tape pour moi est donc cruciale : un retour ensemble en <strong>peer review avec les \u00e9quipes de d\u00e9veloppement et de design<\/strong> pour discuter et voir le comportement r\u00e9el du composant dans le navigateur. Et ajuster si besoin.<\/p>\n<p>En temps normal c\u2019est en face \u00e0 face qu\u2019on faisait \u00e7a. Mais avec la situation sanitaire, nous faisons \u00e7a via partage d\u2019\u00e9cran et <span lang=\"en\">Skype<\/span>. Parfois j\u2019adapte l\u00e9g\u00e8rement le design en fonction des retours des \u00e9quipes de d\u00e9veloppement. Parfois on change directement certains paddings ou tailles dans le navigateur.<\/p>\n<p>Au final c\u2019est une <strong>collaboration<\/strong> o\u00f9 le composant <span lang=\"en\">Sketch<\/span> sert surtout de r\u00e9f\u00e9rence. Mais ce qui compte, c\u2019est son impl\u00e9mentation finale, d\u2019un commun accord, dans le navigateur.<\/p>\n<h2 id=\"variation-densite\">Variations et adaptations \u00e0 diff\u00e9rentes densit\u00e9s de contenus<\/h2>\n<p>Pour m\u2019assurer que mes composants sont \u00e9volutifs, je fais non seulement attention \u00e0 leur r\u00e9utilisabilit\u00e9, mais \u00e9galement au fait qu\u2019ils vont pouvoir <strong>s\u2019adapter \u00e0 diff\u00e9rentes densit\u00e9s de contenu<\/strong> si n\u00e9cessaire.<\/p>\n<h3>Attributs de contenus manquants<\/h3>\n<p>Quand le contenu est g\u00e9n\u00e9r\u00e9 par des utilisatrices et utilisateurs, certains attributs peuvent parfois ne <strong>pas \u00eatre remplis<\/strong>, <strong>manquants<\/strong> ou ne pas exister pour certaines variantes.<\/p>\n<p>Comment mon composant de \u201ccarte de recette de cuisine\u201d va-t-il se comporter s\u2019il n\u2019y a par exemple pas d\u2019image ?<\/p>\n<ul>\n<li>On affiche une image de remplacement (le logo par exemple)?<\/li>\n<li>On supprime l\u2019image et le reste du contenu prend tout l\u2019espace disponible ?<\/li>\n<\/ul>\n<p>Quelle que soit la d\u00e9cision de design, mon \u00e9quipe de d\u00e9veloppement va sans doute me poser la question. Cela leur permet d&rsquo;anticiper et de construire un HTML\/CSS flexible pour le composant.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-7998\" src=_-111.html alt=\"Pas encore d'image ? Deux exemples de ce qui est expliqu\u00e9 plus haut\" width=\"1128\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-pas-image.jpg 1128w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-pas-image-768x357.jpg 768w\" sizes=\"(max-width: 1128px) 100vw, 1128px\" \/>Sur ce m\u00eame composant, que se passe-t-il s&rsquo;il n&rsquo;y a <strong>pas (encore) de valeur<\/strong> pour les votes ?<\/p>\n<p>Une note de 0 parce que personne n&rsquo;a \u00e9mis d&rsquo;avis sur la recette n&rsquo;est PAS la m\u00eame chose qu&rsquo;une note de 0 parce que tout le monde d\u00e9teste la recette ! Que fait-on ?<\/p>\n<ul>\n<li>Afficher la valeur \u201c0 votes\u201d pourrait fonctionner visuellement. Mais cela donne une fausse impression que la recette n\u2019est pas bonne<\/li>\n<li>On pourrait changer ce composant pour afficher \u00ab\u00a0pas encore de votes\u00a0\u00bb \u00e0 la place<\/li>\n<li>On pourrait aussi ne pas du tout afficher cette partie du contenu, mais l\u00e0 encore, \u00e7a pourrait porter \u00e0 confusion.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-7999\" src=_-112.html alt=\"Illustration de 3 images qui montrent les 3 case d\u00e9crits au dessus\" width=\"1128\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-pasnotes.jpg 1128w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-pasnotes-768x357.jpg 768w\" sizes=\"(max-width: 1128px) 100vw, 1128px\" \/><\/p>\n<p>La r\u00e9ponse d\u00e9pend de pleins de crit\u00e8res. Mais c\u2019est le genre de chose que l\u2019on va devoir anticiper pour cr\u00e9er des composants r\u00e9utilisables qui peuvent s\u2019adapter \u00e0 tout type de contenus.<\/p>\n<h3>Plus de contenu qu\u2019initialement pr\u00e9vu<\/h3>\n<p>Je viens de vous donner des exemples de \u201cpas\u201d ou \u201cpas assez\u201d de contenus. Une autre question que j\u2019ai tendance \u00e0 me poser est : que se passe-t-il s\u2019il y a <strong>plus, ou trop de contenu<\/strong>?<\/p>\n<p>Par exemple, si mon composant de \u201cListe de favoris\u201d \u00e0 40 \u00e9l\u00e9ments, on fait quoi ?<\/p>\n<ul>\n<li>Pagination et on affiche les N premiers ?<\/li>\n<li>On fixe la hauteur et on scroll ?<\/li>\n<li>On ne fixe rien du tout et la carte s\u2019\u00e9tend en hauteur ?<\/li>\n<\/ul>\n<p>L\u00e0 encore, \u00e7a d\u00e9pend de pleins de choses, mais il faut le pr\u00e9voir.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8000\" src=_-113.html alt=\"Illustration des 4 cas d\u00e9crits plus haut\" width=\"1128\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-densite-contenu.jpg 1128w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-densite-contenu-768x357.jpg 768w\" sizes=\"(max-width: 1128px) 100vw, 1128px\" \/><\/p>\n<h3>Des attributs de contenu plus longs que pr\u00e9vu<\/h3>\n<p>Parfois, il faut \u00e9galement <strong>g\u00e9rer la densit\u00e9 du contenu \u00e0 l\u2019int\u00e9rieur du composant<\/strong>.<\/p>\n<p>Si je reprends mon exemple de recette de cuisine, que doit-on faire si le titre a besoin de 2 lignes. Il prend 2 lignes. Okay, jusque-l\u00e0 \u00e7a parait \u00e9vident. Mais comment le reste du composant va-t-il se comporter ?<\/p>\n<ul>\n<li>Que faisons-nous du recadrage de l&rsquo;image ?<\/li>\n<li>Qu&rsquo;advient-il des m\u00e9tadonn\u00e9es de droite ? On les aligne en haut ? Au centre ?<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8001\" src=_-114.html alt=\"Illustration du contenu plus long sur le titre\" width=\"1373\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-plusieurs-lignes.jpg 1373w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-plusieurs-lignes-768x294.jpg 768w\" sizes=\"(max-width: 1373px) 100vw, 1373px\" \/><\/p>\n<p>Des exemples comme \u00e7a, j\u2019en ai pleins dans mon design syst\u00e8me<\/p>\n<ul>\n<li>Comment s\u2019alignent les cellules de tableau si le contenu prend 2 lignes ? En haut ? Centr\u00e9 ?<\/li>\n<li>Il se passe quoi quand la description fait plus de 300 caract\u00e8res, on a quand m\u00eame 10% des entr\u00e9es dans la base de donn\u00e9es pour lesquelles c\u2019est le cas ! (on a mis un \u201clire la suite\u201d pour ces 10%)<\/li>\n<li>etc.<\/li>\n<\/ul>\n<h3>Comment anticiper le contenu flexible<\/h3>\n<p>Voici quelques conseils pour vous aider \u00e0 anticiper ces cas. On en revient tr\u00e8s souvent \u00e0 la m\u00eame chose : la discussion entre \u00e9quipes de design et de d\u00e9veloppement.<\/p>\n<ul>\n<li>\u00c9vitez le \u201clorem ipsum\u201d et autres faux contenus. Si vous ne pouvez pas l\u2019\u00e9viter, assurez-vous que la structure soit aussi proche que possible du vrai contenu.<\/li>\n<li>Discutez avec votre \u00e9quipement de d\u00e9veloppement pour savoir quelles sont les limites dans la base de donn\u00e9es. Demandez la <strong>longueur minimale, maximale et surtout la taille moyenne du contenu.<\/strong><\/li>\n<li>Soyez <strong>pragmatiques<\/strong> : si la taille moyenne est de 300 caract\u00e8res mais que 10% des cas ont 1000 caract\u00e8res, d\u00e9signez pour les 300 caract\u00e8res et pr\u00e9voyez une adaptation pour les 1000 (lien lire la suite, etc.)<\/li>\n<li>Pour les \u00e9quipes de dev : si quelque chose manque, <strong>demandez<\/strong> \u00e0 l\u2019\u00e9quipe de design comment le composant doit se comporter.<\/li>\n<li>Pour les <strong>traductions<\/strong> : essayez de savoir d\u00e8s le d\u00e9part si vous avez besoin d&rsquo;autres langues, lesquelles, et le ratio de traduction<\/li>\n<\/ul>\n<p>Finalement, ce qui est \u00e0 retenir : Je n&rsquo;ai pas besoin de les \u00ab\u00a0designer\u00a0\u00bb tous, mais surtout de \u00ab\u00a0d\u00e9cider\u00a0\u00bb de ce qui va se passer et de le communiquer \u00e0 l&rsquo;\u00e9quipe de d\u00e9veloppement.<img decoding=\"async\" class=\"alignnone size-full wp-image-8002\" src=_-115.html alt=\"\" width=\"1373\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-design-decide.jpg 1373w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-design-decide-768x294.jpg 768w\" sizes=\"(max-width: 1373px) 100vw, 1373px\" \/><\/p>\n<h3>Chargement, population de donn\u00e9es, erreurs et l&rsquo;absence de donn\u00e9es<\/h3>\n<p>Une grosse partie de notre interface sont des cartes dans lesquelles sont charg\u00e9s diff\u00e9rents types de contenus. J\u2019ai donc en plus, plusieurs \u00e9tats de \u201cpopulation de donn\u00e9es\u201d : <strong>chargement<\/strong>, <strong>pas de donn\u00e9es<\/strong> (\u00e9tat vide), <strong>erreur<\/strong>. Ces \u00e9tats sont \u201cg\u00e9n\u00e9riques\u201d et les m\u00eames quel que soit le contenu. Je n\u2019ai pas besoin, pour chaque nouvelle carte, de \u201credesigner\u201d ces \u00e9tats.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8003\" src=_-116.html alt=\"Exemple dans le styleguide et example de la checklist\" width=\"1373\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-donnes-chargement.jpg 1373w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-donnes-chargement-768x294.jpg 768w\" sizes=\"(max-width: 1373px) 100vw, 1373px\" \/>J&rsquo;essaie g\u00e9n\u00e9ralement de <strong>documenter la fa\u00e7on dont les composants sont cens\u00e9s fonctionner \u00e0 un niveau g\u00e9n\u00e9rique dans notre \u201cstyleguide\u201d<\/strong> (sur <span lang=\"en\">Sketch<\/span>). Les messages d\u2019erreur et cas vide quant \u00e0 eux sont document\u00e9s au cas par cas dans le ticket Jira. Nous avons \u00e9galement maintenant une checklist pour ne pas oublier des \u00e9tats quand on r\u00e9dige les tickets techniques Jira.<\/p>\n<h2 id=\"variations-interactivite-usage\">Variations et adaptations li\u00e9es \u00e0 l\u2019interactivit\u00e9 et au contexte d\u2019usage<\/h2>\n<p>Pour le moment j&rsquo;ai surtout parl\u00e9 de composants \u201cstatiques\u201d avec peu d\u2019interactions. Mais bon nombre de composants d\u2019un syst\u00e8me sont des composants de navigation, de recherche, de formulaire avec bien plus d\u2019interactions que juste un clic sur une carte.<\/p>\n<p>Ces composants vont souvent avoir plusieurs \u00e9tats qu\u2019il va falloir pr\u00e9voir en fonction de diff\u00e9rents contextes<\/p>\n<h3>Pensez \u00e0 diff\u00e9rents \u00e9tats interactifs<\/h3>\n<p>La 1e chose \u00e0 laquelle on pense, quand on dit \u201cinteraction\u201d\u2019 c\u2019est les interactions avec les \u00e9l\u00e9ments de formulaire. Un \u201csimple\u201d composant de champ texte n\u2019est au final jamais aussi simple, puisqu\u2019on va devoir pr\u00e9voir beaucoup d\u2019\u00e9tats diff\u00e9rents. Par exemple :<\/p>\n<ul>\n<li>Par d\u00e9faut, rempli et non rempli<\/li>\n<li>Au survol, rempli et non rempli<\/li>\n<li>Au focus clavier, rempli et non rempli<\/li>\n<li>Avec \/ sans placeholder.<\/li>\n<\/ul>\n<p>Et puis on va avoir les \u00e9tats de validation, par exemple<\/p>\n<ul>\n<li>Information<\/li>\n<li>Erreur<\/li>\n<li>Warning<\/li>\n<li>Succes<\/li>\n<\/ul>\n<p>Tout cela, multipli\u00e9 par le nombre de composants de formulaires, \u00e7a commence \u00e0 faire pas mal de choses \u00e0 ne pas oublier.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8007\" src=_-117.html alt=\"Exemple de diff\u00e9rents \u00e9tats pour un champ de formulaire\" width=\"1373\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-interactifs.jpg 1373w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-interactifs-768x294.jpg 768w\" sizes=\"(max-width: 1373px) 100vw, 1373px\" \/><\/p>\n<p>Et plus le composant sera compliqu\u00e9, plus on aura d\u2019interactions \u00e0 pr\u00e9voir.<\/p>\n<h3>Pensez \u00e0 la navigation clavier, touch et autres interactions<\/h3>\n<p>Et n\u2019oubliez pas <strong>la navigation au clavier<\/strong>, tr\u00e8s utile pour des questions d\u2019accessibilit\u00e9 mais \u00e9galement souvent pour des utilisatrices avanc\u00e9es.<\/p>\n<p>Voici un exemple, sur un composant de menu d\u00e9roulant :<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8008\" src=_-118.html alt=\"Exemple de documentation de navigation au clavier sur un menu d\u00e9roulant\" width=\"1373\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-navigation-clavier.jpg 1373w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-navigation-clavier-768x294.jpg 768w\" sizes=\"(max-width: 1373px) 100vw, 1373px\" \/>Souvent, c\u2019est encore une fois une collaboration avec les \u00e9quipes de d\u00e9veloppement, car l\u2019impl\u00e9mentation n\u2019est pas toujours facile.<\/p>\n<p>Il en est de m\u00eame pour les <strong>interactions au toucher<\/strong>. Parfois elles peuvent \u00eatre diff\u00e9rentes d\u2019une interaction classique. Par exemple : le carrousel d\u2019images doit-il fonctionner au swipe ? L\u00e0 encore, pas mal de choses \u00e0 discuter avec les \u00e9quipes de dev.<\/p>\n<h3>Les \u201clivrables\u201d UX pour communiquer les interactions aux \u00e9quipes de d\u00e9veloppement<\/h3>\n<p>Une grosse partie de nos outils de conception nous obligent encore \u00e0 concevoir des images statiques de \u00ab\u00a0ce \u00e0 quoi le produit ressemblera\u201d. Cela rend parfois la communication d\u2019\u00e9tats tr\u00e8s interactifs un peu compliqu\u00e9e. \u00c7a avance un peu (avec certaines mises \u00e0 jour de <span lang=\"en\">Figma<\/span>), on va vers plus en plus d\u2019interactivit\u00e9.<\/p>\n<p>Certains de nos livrables \u201cUX\u201d peuvent \u00e9galement servir aux \u00e9quipes de d\u00e9veloppement pour communiquer les interactions.<\/p>\n<p>C\u2019est le cas par exemple de tout ce qui est <strong>task flow et user flows <\/strong>(qu\u2019on transforme en screenflow quand on y ajoute les \u00e9crans). Ils permettent aux \u00e9quipes de dev et \u00e0 mon testeur de mieux comprendre comment vont se comporter les composants, vont s\u2019enchainer les vues et \u00e9crans, etc.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8009\" src=_-119.html alt=\"Exemple d'un user flow et wireflow\" width=\"1128\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-livrablesUX.jpg 1128w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-livrablesUX-768x357.jpg 768w\" sizes=\"(max-width: 1128px) 100vw, 1128px\" \/>Je suis \u00e9galement une grande fan de la philosophie<strong>\u00ab\u00a0<span lang=\"en\">show don&rsquo;t tell<\/span>\u00a0\u00bb <\/strong>(montrer plut\u00f4t que raconter). Je cr\u00e9e souvent des <strong>prototypes interactifs pour les tests utilisateur<\/strong>. J\u2019attache ces prototypes aux stories dans Jira car ce sont des d\u00e9mos pr\u00e9cieuses de \u201ccomment l\u2019App est cens\u00e9e fonctionner\u201d, \u201ccomment les \u00e9crans s&rsquo;encha\u00eenent\u00a0\u00bb, etc.<\/p>\n<p>Sur du mobile par exemple, cela m\u2019aide \u00e0 <strong>communiquer les animations <\/strong>entre les \u00e9crans. \u00c7a me permet aussi de simuler tout ce qui est navigation <span lang=\"en\">sticky<\/span>, etc.<\/p>\n<div style=\"width: 740px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]-->\n<video class=\"wp-video-shortcode\" id=\"video-7955-1\" width=\"740\" height=\"412\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=axuredemo6dcf.html \/><a href=_-120.html>https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2021\/07\/axuredemo.mp4<\/a><\/video><\/div>\n<p>Je pr\u00e9f\u00e8re Axure parce qu&rsquo;il est puissant en termes d\u2019interactions (puisque \u00e7a g\u00e9n\u00e8re du HTML\/CSS\/JS). Mais <span lang=\"en\">Figma<\/span> commence \u00e0 proposer des options int\u00e9ressantes aussi. Pas mal d\u2019outils existent pour cr\u00e9er des animations et interactions, \u00e0 vous d\u2019explorer ce qui fonctionne pour VOS besoins. Un outil reste un outil.<\/p>\n<h3>Variations en fonction de l\u2019\u00e9tat du syst\u00e8me<\/h3>\n<p>Je vous ai parl\u00e9 de l&rsquo;identification des variations plus haut. Je vous ai parl\u00e9 des \u00e9tats de certains composants (formulaires) en fonction des interactions avec les utilisatrices.<\/p>\n<p>Certains composants peuvent \u00e9galement avoir des <strong>variations en fonction de l\u2019\u00e9tat du syst\u00e8me<\/strong>.<\/p>\n<p>Par exemple, si on propose de la synchronisation \u201chors ligne\u201d en t\u00e2che de fond (sur une App native mais \u00e7a arrive sur le web), d\u2019un coup il va falloir penser \u00e0 de nouveaux \u00e9tats pour le composant :<\/p>\n<ul>\n<li>\u00c9tat id\u00e9al (tout va bien c\u2019est synchronis\u00e9)<\/li>\n<li>\u00c9tat \u201cperte de synchronisation\u201d<\/li>\n<li>\u00c9tat \u201csynchronisation en cours\u201d<\/li>\n<li>\u00c9tat de \u201csucc\u00e8s de synchronisation\u201d<\/li>\n<li>Combien de temps reste-il avant de retourner \u00e0 l\u2019\u00e9tat id\u00e9al ?<img decoding=\"async\" class=\"alignnone size-full wp-image-8012\" src=_-121.html alt=\"Exemple du composant aux diff\u00e9rents \u00e9tats de synchronisation\" width=\"1373\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-etat-system.jpg 1373w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-etat-system-768x294.jpg 768w\" sizes=\"(max-width: 1373px) 100vw, 1373px\" \/><\/li>\n<li>On va \u00e9galement sans doute vouloir ajouter des notifications au syst\u00e8me pour informer la personne au moins de l&rsquo;\u00e9chec (ou succ\u00e8s) de la synchronisation.<\/li>\n<\/ul>\n<h3>Variations en fonction de l\u2019\u00e9tape du parcours<\/h3>\n<p>On pourrait aussi avoir<strong>des variations en fonction de l\u2019\u00e9tape du parcours<\/strong>. On peut par exemple penser aux \u00e9tats \u201cvides\u201d de certains composants d\u2019application ou de Dashboard : \u00e0 quoi ressemble le composant quand la personne est au d\u00e9but de son parcours et n\u2019a pas (encore) cr\u00e9\u00e9 (ou re\u00e7u) de contenus ? Je vous avait \u00e9galement donn\u00e9 l\u2019exemple plus haut d\u2019un composant qui peut-\u00eatre, en fonction de l\u2019\u00e9tape du parcours, en lecture seule ou en \u00e9dition. \u00c7a aussi, il va falloir le pr\u00e9voir.<\/p>\n<p>Certains parcours suivent un chemin lin\u00e9aire de type \u201c\u00e9tape par \u00e9tape\u201d. Voici, par exemple, une application pour d\u00e9poser sa voiture au garage en dehors des horaires d\u2019ouvertures (j\u2019ai chang\u00e9 les couleurs de la charte ici pour des raisons de confidentialit\u00e9 du client). Les composants sont g\u00e9n\u00e9riques mais on va devoir pr\u00e9voir des adaptations en fonction de l\u2019\u00e9tape dans le parcours.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8013\" src=_-122.html alt=\"Exemple du m\u00eame composant \u00e0 diff\u00e9rents \u00e9tats du parcours\" width=\"1373\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-variations-parcours.jpg 1373w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-variations-parcours-768x294.jpg 768w\" sizes=\"(max-width: 1373px) 100vw, 1373px\" \/><\/p>\n<p>Pareil pour les applications de e-commerce (Amazon) dans la partie \u201csuivi du colis\u201d, en fonction de l\u2019\u00e9tape dans le processus, les composants peuvent changer de forme.<\/p>\n<p>Un outil tr\u00e8s utile pour comprendre les diff\u00e9rentes \u00e9tapes d\u2019un parcours utilisateur est la cr\u00e9ation d\u2019un user journey map \u00e0 partir des donn\u00e9es r\u00e9colt\u00e9es durant la recherche utilisateur. Je vous renvoie \u00e0 mon article et template \u201c<a href=_-123.html>Introduction aux \u00ab <span lang=\"en\">User Journey Maps<\/span> \u00bb + mod\u00e8les PDF \u00e0 t\u00e9l\u00e9charger<\/a>\u201d<\/p>\n<h3>S\u2019adapter aux pr\u00e9f\u00e9rences utilisateur<\/h3>\n<p>D\u00e8s qu\u2019on commence \u00e0 creuser un peu dans les capacit\u00e9s techniques de nos appareils et navigateurs, on se rend compte que l\u2019on peut faire pleins de <strong>micro-adaptations pour suivre les pr\u00e9f\u00e9rences utilisateur<\/strong>.<\/p>\n<p>Nos appareils proposent presque tous un mode jour \/ nuit (dark\/light mode). On pourrait donc imaginer adapter ses composants \u00e9galement en fonction de ces pr\u00e9f\u00e9rences.<\/p>\n<p>Par contre, attention, cr\u00e9er un th\u00e8me \u201csombre\u201d n\u2019est pas simple et prend beaucoup de temps. On ne peut pas juste inverser les couleurs. Je vous renvoie \u00e0 \u201c<span lang=\"en\"><a href=_-124.html hreflang=\"en\">Dark Isn\u2019t Just a Mode<\/a><\/span>\u201d pour plus de d\u00e9tails sur le sujet.<\/p>\n<p>Si on combine cela \u00e0 certaines APIs qui permettent de r\u00e9cup\u00e9rer par exemple la position de l\u2019utilisatrice (GPS) et la luminosit\u00e9 dans l\u2019habitacle d\u2019une voiture, on peut cr\u00e9er des applications de GPS dont les composants changent automatiquement en mode sombre si on d\u00e9tecte que la personne est dans un tunnel. Avi dans son article <span lang=\"en\"><a href=_-125.html hreflang=\"en\">Creating An Adaptive System To Enhance UX<\/a><\/span> imaginait d\u00e9j\u00e0 en 2012 comment on pourrait cr\u00e9er des syst\u00e8mes plus \u201cadaptatifs\u201d.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8014\" src=_-126.html alt=\"Exemple de dark \/ light mode et du GPS qui passe en mode nuit dans un tunel\" width=\"1373\" height=\"525\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-adaptations-dark-automatique.jpg 1373w, https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/composant-adaptations-dark-automatique-768x294.jpg 768w\" sizes=\"(max-width: 1373px) 100vw, 1373px\" \/><\/p>\n<p>Attention, dans tous les cas, si vous adaptez vos interfaces et composants automatiquement en fonction de certains crit\u00e8res, <strong>laissez les gens d\u00e9sactiver les fonctions d\u2019adaptation automatiques au besoin<\/strong>. Cela permet d\u2019\u00e9viter de cr\u00e9er des interfaces qui font des choix qui ne conviennent parfois pas. Quand je fais du v\u00e9lo, Google Maps passe son temps \u00e0 essayer de me remettre sur la route que l\u2019App pr\u00e9f\u00e8re (car la moins \u201clongue\u201d en termes de temps). Le souci est que cette route est dangereuse. Merci Gmaps, mais non merci. Je sais mieux quelle route je veux prendre. J\u2019ai juste besoin du GPS dans les petites ruelles \u00e0 cause des sens uniques. Pourtant sur mon dernier trajet, malgr\u00e9 le fait que j\u2019ai re-selectionn\u00e9 \u00e0 la main la route souhait\u00e9e, Gmaps m\u2019a remis sur sa pr\u00e9f\u00e9r\u00e9e 3 fois de suite. C\u2019est tr\u00e8s exasp\u00e9rant. Donc faites attention avec tout ce qui est adaptatif.<\/p>\n<p>Enfin, notez qu&rsquo;au-del\u00e0 du dark mode, il existe plusieurs autres pr\u00e9f\u00e9rences utilisateur auxquelles vous pouvez adapter vos composants. Je vous explique notamment comment adapter vos animations aux pr\u00e9f\u00e9rences \u201cprefers-reduced-motion\u201d dans<a href=index-280.html#accessibility\"> mon article sur les animations CSS et l\u2019experience utilisateur (en anglais)<\/a>. Pour plus d\u2019id\u00e9es d\u2019adaptations, je vous renvoie \u00e0 \u201c<a href=_-124.html hreflang=\"en\"><span lang=\"en\">Beyond screen sizes: responsive design in 2020<\/span><\/a>\u201d.<\/p>\n<h3>Faites votre recherche et tests utilisateurs !<\/h3>\n<p>Vous \u00eates arriv\u00e9s presque \u00e0 la fin de l\u2019article. Merci d\u2019avoir lu jusque-l\u00e0. Mais vous devez sans doute vous demander, quel est le secret au final, pour designer du coup tous ces composants de la meilleure fa\u00e7on, avec le bon contenu, pour qu\u2019ils s\u2019adaptent correctement aux besoins ? Eh bien, il n\u2019y a pas de recette magique, on en revient toujours \u00e0 la m\u00eame chose : <strong>faites votre recherche utilisateur<\/strong>. <strong>Faites des tests<\/strong>. <strong>It\u00e9rez<\/strong>. Trompez-vous, recommencez.<\/p>\n<p>C\u2019est ce qu\u2019on a mis en place sur notre design syst\u00e8me. On ne va pas forc\u00e9ment tester les composants un par un, mais ils seront test\u00e9s soit durant des tests utilisateurs, soit durant des sessions en beta, en les utilisant en contexte dans les pages que l\u2019on va construire. Et on les travaille au besoin en fonction des retours.<\/p>\n<p><em>La partie recherche et tests est en dehors du cadre de cet article, mais abonnez-vous au blog en anglais car je vais essayer de d\u00e9tailler un peu plus cette partie dans les mois \u00e0 venir dans une s\u00e9rie d\u2019articles d\u00e9di\u00e9s \u00e0 la recherche utilisateur sur des produits internes.<\/em><\/p>\n<h2 id=\"resume\">En r\u00e9sum\u00e9, le TL;DNR<\/h2>\n<p>En r\u00e9sum\u00e9, ce qu\u2019il faut retenir si on veut cr\u00e9er des composants qui sont \u00e9volutifs et r\u00e9utilisables :<\/p>\n<ul>\n<li>Faire sa <strong>recherche utilisateur<\/strong> en amont<\/li>\n<li>Partir du <strong>mod\u00e8le de contenus<\/strong> et travailler son <strong>architecture d\u2019information<\/strong><\/li>\n<li>Identifier les <strong>variantes<\/strong> et <strong>similarit\u00e9s<\/strong><\/li>\n<li><strong>Anticiper la flexibilit\u00e9<\/strong> du contenus et <strong>\u00e9tats<\/strong> de chargement<\/li>\n<li>Anticiper diff\u00e9rentes <strong>interactions<\/strong> avec les composants, qu\u2019elles soient humaines ou machines<\/li>\n<li><strong>Tester<\/strong> les composants, <strong>it\u00e9rer<\/strong>, <strong>adapter<\/strong><\/li>\n<li>Il s&rsquo;agit d&rsquo;un <strong>processus de collaboration<\/strong> avec votre \u00e9quipe de d\u00e9veloppement !<\/li>\n<\/ul>\n<p><small><em>Et merci\u00e0 <a href=_-127.html>Audrey Hacq<\/a> pour les retours sur la conf\u00e9renc et \u00e0 <a href=_-128.html>Fabien Rassinier<\/a> pour les feedback sur l&rsquo;article :)<\/em><\/small><\/p>\n<h2 id=\"video\">La vid\u00e9o de la conf\u00e9rence<\/h2>\n<p>La derni\u00e8re version de cette conf\u00e9rence a \u00e9t\u00e9 au Design Summit 2021. Vous pouvez consulter la vid\u00e9o ci-dessous (l\u2019article est un peu plus d\u00e9taill\u00e9 que la vid\u00e9o).<\/p>\n<div class=\"videoWrapper\"><iframe loading=\"lazy\" title=\"YouTube video player\" src=_-129.html width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Comment concevoir des syst\u00e8mes de composants flexibles r\u00e9utilisables qui s&rsquo;adaptent \u00e0 diff\u00e9rents besoins utilisateur ? Je vous propose aujourd\u2019hui un gros aper\u00e7u de mon processus de conception pour d\u00e9signer des syst\u00e8mes modulaires qui s\u2019adaptent \u00e0 la r\u00e9alit\u00e9 d\u2019un produit, aussi complexe soit elle.<\/p>\n","protected":false},"author":3,"featured_media":8020,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[55],"tags":[],"class_list":["post-7955","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-ui-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Bien concevoir ses composants, les bases d&#039;un design system \u00e9volutif - par St\u00e9phanie Walter - UX Researcher &amp; Designer<\/title>\n<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
<meta name=\"description\" content=\"Un aper\u00e7u de mon processus pour des syst\u00e8mes de composants flexibles, r\u00e9utilisables qui s&#039;adaptent \u00e0 diff\u00e9rents besoins utilisateur.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=_-130.html \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bien concevoir ses composants, les bases d&#039;un design system \u00e9volutif - par St\u00e9phanie Walter - UX Researcher &amp; Designer\" \/>\n<meta property=\"og:description\" content=\"Un aper\u00e7u de mon processus pour des syst\u00e8mes de composants flexibles, r\u00e9utilisables qui s&#039;adaptent \u00e0 diff\u00e9rents besoins utilisateur.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/bien-concevoir-ses-composants-les-bases-dun-design-system-evolutif\/\" \/>\n<meta property=\"og:site_name\" content=\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-27T05:00:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-05T12:34:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2021\/07\/design-system-evolutif@2x.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1700\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"St\u00e9phanie Walter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:site\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"St\u00e9phanie Walter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"31 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/bien-concevoir-ses-composants-les-bases-dun-design-system-evolutif\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/bien-concevoir-ses-composants-les-bases-dun-design-system-evolutif\/\",\"name\":\"Bien concevoir ses composants, les bases d'un design system \u00e9volutif - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/bien-concevoir-ses-composants-les-bases-dun-design-system-evolutif\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/bien-concevoir-ses-composants-les-bases-dun-design-system-evolutif\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/design-system-evolutif@2x.jpg\",\"datePublished\":\"2021-07-27T05:00:22+00:00\",\"dateModified\":\"2021-09-05T12:34:13+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Un aper\u00e7u de mon processus pour des syst\u00e8mes de composants flexibles, r\u00e9utilisables qui s'adaptent \u00e0 diff\u00e9rents besoins utilisateur.\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/bien-concevoir-ses-composants-les-bases-dun-design-system-evolutif\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/bien-concevoir-ses-composants-les-bases-dun-design-system-evolutif\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/design-system-evolutif@2x.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/design-system-evolutif@2x.jpg\",\"width\":1700,\"height\":700},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/\",\"name\":\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\",\"description\":\"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l&#039;utilisabilit\u00e9 et l&#039;accessibilit\u00e9.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\",\"name\":\"St\u00e9phanie Walter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"caption\":\"St\u00e9phanie Walter\"},\"description\":\"UX Researcher &amp; Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)\",\"sameAs\":[\"https:\/\/stephaniewalter.design\/\",\"https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/\",\"https:\/\/x.com\/walterstephanie\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bien concevoir ses composants, les bases d'un design system \u00e9volutif - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Un aper\u00e7u de mon processus pour des syst\u00e8mes de composants flexibles, r\u00e9utilisables qui s'adaptent \u00e0 diff\u00e9rents besoins utilisateur.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/stephaniewalter.design\/fr\/blog\/bien-concevoir-ses-composants-les-bases-dun-design-system-evolutif\/","og_locale":"fr_FR","og_type":"article","og_title":"Bien concevoir ses composants, les bases d'un design system \u00e9volutif - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Un aper\u00e7u de mon processus pour des syst\u00e8mes de composants flexibles, r\u00e9utilisables qui s'adaptent \u00e0 diff\u00e9rents besoins utilisateur.","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/bien-concevoir-ses-composants-les-bases-dun-design-system-evolutif\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2021-07-27T05:00:22+00:00","article_modified_time":"2021-09-05T12:34:13+00:00","og_image":[{"width":1700,"height":700,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2021\/07\/design-system-evolutif@2x.jpg","type":"image\/jpeg"}],"author":"St\u00e9phanie Walter","twitter_card":"summary_large_image","twitter_creator":"@walterstephanie","twitter_site":"@walterstephanie","twitter_misc":{"\u00c9crit par":"St\u00e9phanie Walter","Dur\u00e9e de lecture estim\u00e9e":"31 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/bien-concevoir-ses-composants-les-bases-dun-design-system-evolutif\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/bien-concevoir-ses-composants-les-bases-dun-design-system-evolutif\/","name":"Bien concevoir ses composants, les bases d'un design system \u00e9volutif - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/bien-concevoir-ses-composants-les-bases-dun-design-system-evolutif\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/bien-concevoir-ses-composants-les-bases-dun-design-system-evolutif\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/design-system-evolutif@2x.jpg","datePublished":"2021-07-27T05:00:22+00:00","dateModified":"2021-09-05T12:34:13+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Un aper\u00e7u de mon processus pour des syst\u00e8mes de composants flexibles, r\u00e9utilisables qui s'adaptent \u00e0 diff\u00e9rents besoins utilisateur.","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/bien-concevoir-ses-composants-les-bases-dun-design-system-evolutif\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/bien-concevoir-ses-composants-les-bases-dun-design-system-evolutif\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/design-system-evolutif@2x.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2021\/07\/design-system-evolutif@2x.jpg","width":1700,"height":700},{"@type":"WebSite","@id":"https:\/\/stephaniewalter.design\/fr\/#website","url":"https:\/\/stephaniewalter.design\/fr\/","name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","description":"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l&#039;utilisabilit\u00e9 et l&#039;accessibilit\u00e9.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf","name":"St\u00e9phanie Walter","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","caption":"St\u00e9phanie Walter"},"description":"UX Researcher &amp; Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)","sameAs":["https:\/\/stephaniewalter.design\/","https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/","https:\/\/x.com\/walterstephanie"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/7955"}],"collection":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/comments?post=7955"}],"version-history":[{"count":10,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/7955\/revisions"}],"predecessor-version":[{"id":8039,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/7955\/revisions\/8039"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/8020"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=7955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=7955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=7955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}