{"id":7154,"date":"2018-12-20T08:00:36","date_gmt":"2018-12-20T07:00:36","guid":{"rendered":"https:\/\/stephaniewalter.design\/fr\/?p=7154"},"modified":"2024-07-11T20:56:10","modified_gmt":"2024-07-11T18:56:10","slug":"experience-utilisateur-templates-frameworks-ui-partie-2-remettre-lhumain-au-centre-du-processus-de-conception","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/experience-utilisateur-templates-frameworks-ui-partie-2-remettre-lhumain-au-centre-du-processus-de-conception\/","title":{"rendered":"Exp\u00e9rience utilisateur Templates \/ Frameworks UI \u2013 partie 2\u00a0: remettre l\u2019humain au centre du processus de conception."},"content":{"rendered":"<div class=\"juiz-outdated-message jodpm-top\">Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 6 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div><p>Le premier article faisait un constat, un peu d\u00e9faitiste je vous l\u2019accorde. Dans tout ce mic mac de composants, j\u2019ai un peu l\u2019impression que l\u2019on a oubli\u00e9 un d\u00e9tail important : <strong>nos interfaces seront utilis\u00e9es par des humains <\/strong>(sauf si vous designez une application iPad pour les chats). Si vous l&rsquo;avez loup\u00e9 :<\/p>\n<p class=\"cta text-center\"><a href=_-606.html class=\"button is-accentuated has-icon\"><span>Lire la partie 1 - le constat <svg aria-hidden=\"true\" role=\"presentation\" class=\"icon icon-arrow-right\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><use xlink:href=index.html#icon-arrow-right\"><\/use><\/svg><\/span><\/a><\/p>\n<p>La question est donc de savoir comment \u00e9viter le fiasco de mon client du d\u00e9but. Comment est-ce que je <strong>remets les utilisatrices et utilisateurs au c\u0153ur de mon processus de conception<\/strong> tout en continuant d\u2019utiliser des th\u00e8mes et des frameworks UI pour des questions de gain de temps et de budget ?<\/p>\n<p>Je n\u2019ai <strong>pas de r\u00e9ponse magique<\/strong>, il n\u2019y a <strong>pas de solution miracle<\/strong>. Par contre, je peux\u00a0 <strong>vous expliquer comment JE proc\u00e8de<\/strong> pour proposer une exp\u00e9rience utilisateur agr\u00e9able, un design de qualit\u00e9 tout en travaillant sur des projets dont les frameworks sont souvent impos\u00e9s. Comment faire, en r\u00e9sum\u00e9 ? Ne pas oublier ou supprimer les phases de <strong>recherche utilisateur<\/strong> pour comprendre leur besoins, construire un <strong>user flow<\/strong> et une <strong>navigation<\/strong> solide,\u00a0 travailler en<strong> collaboration<\/strong> sur les phases de conception entre \u00e9quipes de d\u00e9veloppement et de design, se familiariser avec les composants du framework, documenter les d\u00e9cisions de design et de composants, tester, tester, tester, it\u00e9rer, communiquer, recommencer.<\/p>\n<p><em>Le m\u00e9thodes d\u00e9crites dans cet article sont une partie des m\u00e9thodes UX et Design que je peux mettre en place pour mes clients. Je ne vais pas forc\u00e9ment rentrer dans le d\u00e9tail de chaque m\u00e9thode, mais je vous mets des liens pour approfondir pour chacune d\u2019entre elle.<\/em><\/p>\n<h2>Faire ses devoirs, faire sa recherche utilisateur.<\/h2>\n<p>Que le framework soit d\u00e9j\u00e0 choisi, impos\u00e9 par le client ou non, il est <strong>difficile de concevoir un produit<\/strong>, un service, une interface <strong>sans comprendre les besoins des personnes pour qui on con\u00e7oit.\u00a0<\/strong> Une premi\u00e8re phase de recherche est donc primordiale pour remettre l\u2019humain au centre de nos processus de conception.<\/p>\n<p>Bon, ok, ce n\u2019est pas toujours facile, en g\u00e9n\u00e9ral car on ADORE <strong>se trouver des excuses. <\/strong><\/p>\n<ul>\n<li>Mais\u2026 on a pas de UX designeuse<\/li>\n<li>Mais\u2026 on a pas le temps<\/li>\n<li>Mais\u2026 on a pas le budget<\/li>\n<\/ul>\n<p>Mais\u2026\u00a0 Au final, <strong>ne pas faire de recherche utilisateur va vous co\u00fbter bien plus cher plus tard dans le proje<\/strong>t que si vous l\u2019aviez fait au d\u00e9but. Parce que prendre de mauvaises d\u00e9cisions d\u00e8s le d\u00e9part et devoir reconstruire une partie du produit, \u00e7a peut tr\u00e8s vite devenir tr\u00e8s co\u00fbteux. \u00a0Bonjour la <strong>refactorisation du code<\/strong> et le <strong>re-d\u00e9veloppement\u00a0de fonctionnalit\u00e9s<\/strong> compl\u00e8tes.<\/p>\n<p>Attention, je ne dis pas que faire de la recherche utilisateur va vous \u00e9viter tout re-d\u00e9veloppements. Les produits \u00e9voluent, les besoins aussi. Mais \u00e7a permettra de grandement le minimiser sur beaucoup de phases de projet.<\/p>\n<h3>L\u2019exp\u00e9rience utilisateur est une comp\u00e9tence pluridisciplinaire<\/h3>\n<p>Tout d\u2019abord, au risque de me tirer une balle dans le pied, l\u2019eXp\u00e9rience Utilisateur est une<strong> comp\u00e9tence pluridisciplinaire, <\/strong>pas une juste une description de poste. Les <strong>int\u00e9gratrices<\/strong> sont garantes de l\u2019exp\u00e9rience\u00a0: une animation CSS rat\u00e9e, mal coordonn\u00e9e, bouton non fonctionnel vont d\u00e9grader l\u2019exp\u00e9rience. Vos d\u00e9veloppeuses sont garantes de l\u2019exp\u00e9rience : recracher la base de donn\u00e9es sous forme de \u201ccl\u00e9 \/ valeur\u201d dans des formulaires va grandement d\u00e9grader l\u2019exp\u00e9rience. Mon amie Myriam qui est SEO et Web Marketeuse utilise nos m\u00e9thodes UX depuis des ann\u00e9es. Bref vous l\u2019aurez compris, toute votre \u00e9quipe est garante de la qualit\u00e9 du produit et de son exp\u00e9rience. M\u00eame quand on n\u2019a pas de designers, il faut pouvoir \u00eatre r\u00e9actifs sur un march\u00e9, faire des modifications et remonter des besoins client<\/p>\n<p>Il existe diff\u00e9rentes mani\u00e8res de recueillir les retours de vos utilisatrices et utilisateurs \u00e0 moindre co\u00fbt.<\/p>\n<h3>R\u00e9colter des donn\u00e9es utilisateur gr\u00e2ce au support et aux \u00e9quipes de vente<\/h3>\n<p>Vos <strong>\u00e9quipes de support<\/strong>, de <strong>vente<\/strong> ou de <strong>formation<\/strong> sont aux premiers rangs. Ce sont ces \u00e9quipes qui recueillent les retours des utilisatrices pas contentes, qui recueillent les demandes de fonctionnalit\u00e9s des clients. Elles ont des donn\u00e9es, demandez-les-leur. Fouillez les<strong> logs de support, d\u00e9nichez, les choses \u00e0 am\u00e9liorer. <\/strong>Sur mon projet actuel, c\u2019est une simple boite mail partag\u00e9e.\u00a0 Je travaille \u00e9galement en ce moment pour un projet europ\u00e9en sous Bootstrap, si mon client europ\u00e9en peut me fournir les logs du support, les v\u00f4tres aussi (vous avez le droit de me citer).<\/p>\n<h3>Les retours utilisateurs sur les forums, r\u00e9seaux sociaux et avis en ligne (stores)<\/h3>\n<p>Une autre fa\u00e7on de r\u00e9colter des donn\u00e9es est de regarder ce qui se passe en ligne, <strong>que disent les gens de votre produit<\/strong> ? Sur les forums ? Sur les r\u00e9seaux sociaux ? Sur les stores et les sites d\u2019avis en ligne ? Ces endroits sont une mine d\u2019or pour comprendre \u00e0 moindre co\u00fbt ce qui fonctionne, ne fonctionne pas sur vos produits, identifier les points de friction et proposer ensuite des am\u00e9liorations.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-7170 size-full alignnone\" src=_-943.html alt=\"Android market, les avis sur l'application mobile de Leboncoin\" width=\"1542\" height=\"760\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/store-rating.jpg 1542w, https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/store-rating-768x379.jpg 768w\" sizes=\"(max-width: 1542px) 100vw, 1542px\" \/><\/p>\n<p>Vous lancez un produit ? Encore mieux, <strong>que disent les gens du produit concurrent<\/strong>, qu\u2019est qui fonctionne et surtout qu\u2019est ce qui ne fonctionne pas\u00a0? Vous voulez innovez, <strong>ne suivez pas vos concurrents, devancez-les\u00a0! <\/strong>Proposer PLUS, r\u00e9solvez les probl\u00e9matiques de leurs utilisatrices et utilisateurs avant eux.<\/p>\n<h3>R\u00e9colter des donn\u00e9es gr\u00e2ce aux outils d\u2019analyse<\/h3>\n<p>Si vous \u00eates s\u00fbre une <strong>refonte<\/strong>, ouvrir votre<strong> outil d\u2019analytiques <\/strong>peut d\u00e9j\u00e0 vous donner quelques informations et pr\u00e9cieuses pistes. Google Analytics propose par exemple des statistiques d\u00e9mographiques et de suivre <strong>les parcours et flux de comportement <\/strong>de vos utilisatrices. Il permet aussi de comprendre <strong>les pages les plus vues.<\/strong><\/p>\n<p><img decoding=\"async\" class=\"wp-image-7156 size-full alignnone\" src=_-944.html alt=\"Flux de comportement dans Google Analytics\" width=\"1542\" height=\"760\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/analytics.jpg 1542w, https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/analytics-768x379.jpg 768w\" sizes=\"(max-width: 1542px) 100vw, 1542px\" \/><\/p>\n<p>Les outils d\u2019analytiques vous donnent \u00e9galement de pr\u00e9cieux retours sur les appareils utilis\u00e9s. \u00c7a vous \u00e9vitera par exemple de d\u00e9velopper une version du Dashboard en utilisant des c<strong>omposants UI non responsive alors qu\u2019une grosse partie du trafic vient des tablettes.<\/strong><\/p>\n<p>Si vous souhaitez aller un cran plus loin, <strong>Google Tag Manager<\/strong> vous permet m\u00eame de \u201ctaguer\u201d des boutons et d\u2019analyser de mani\u00e8re tr\u00e8s fine des parcours et bien plus.<\/p>\n<p>Savoir si un bouton est souvent cliqu\u00e9 ou non peut vous donner de pr\u00e9cieuses informations sur l\u2019utilisation d\u2019une fonctionnalit\u00e9 par exemple. Potentiellement une fonctionnalit\u00e9 non utilis\u00e9e est soit inutile, soit incomprise, soit vos utilisatrices ne l\u2019ont pas trouv\u00e9. Ce genre de retours permet de faire le m\u00e9nage de temps en temps sur des syst\u00e8mes o\u00f9 on a fini par ajouter 150 boutons dans tous les sens au fur et \u00e0 mesure du d\u00e9veloppement au point d\u2019en faire une usine \u00e0 gaz.<\/p>\n<h3>Les questionnaires en ligne, des donn\u00e9es quantitatives \u00e0 moindre co\u00fbt<\/h3>\n<p>Si vous lancez un produit ou une nouvelle fonctionnalit\u00e9, c\u2019est difficile d\u2019avoir des donn\u00e9es d\u2019analytiques.\u00a0Un <strong>questionnaire en ligne<\/strong> est une bonne solution pour avoir <strong>rapidement de la donn\u00e9e quantitative \u00e0 moindre co\u00fbt<\/strong>. Coordonnez-vous avec les \u00e9quipes d marketing, parfois, elles ont d\u00e9j\u00e0 fait des \u00e9tudes au pr\u00e9alable.<\/p>\n<p>Sur un de nos projets, nous souhaitons lancer une <strong>application TV<\/strong>. Dans cette application, nous avons plusieurs filtres de recherche. L\u2019utilisation de la t\u00e9l\u00e9commande force les utilisatrices \u00e0 passer les filtres dans l\u2019ordre, de gauche \u00e0 droite. L\u2019ordre des filtres est important. Nous avons donc lanc\u00e9 un <strong>questionnaire en ligne pour nous assurer que l\u2019ordre affich\u00e9 correspondait \u00e0 l\u2019attente de nos utilisatrices et utilisateurs<\/strong>.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-7165 alignnone\" src=_-945.html alt=\"Exemple de questionnaire en ligne\" width=\"1542\" height=\"760\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/form.jpg 1542w, https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/form-768x379.jpg 768w\" sizes=\"(max-width: 1542px) 100vw, 1542px\" \/><\/p>\n<p>Au final nous en avons aussi profit\u00e9 pour savoir s\u2019il y avait une demande pour cette application. Dans l\u2019absolu, pas vraiment (ce qui \u00e9tait pr\u00e9visible vu le cas tr\u00e8s sp\u00e9cifique d\u2019utilisation de notre application). Par contre, les chiffres r\u00e9colt\u00e9s ont montr\u00e9 un fort int\u00e9r\u00eat pour une application tablette. Savoir tout cela <strong>a confirm\u00e9 le choix technique du Framework React Native<\/strong>, qui nous permettra de porter plus facilement l\u2019application sur iPad plus tard.<\/p>\n<h3>Observation et \u201cStreet Gu\u00e9rilla\u201d, la rencontre de ses utilisatrices sur le terrain<\/h3>\n<p>On parle souvent de test utilisateurs sur les coll\u00e8gues quand on n\u2019a pas trop de budget. Mais vos utilisatrices ne sont pas forc\u00e9ment vos coll\u00e8gues. Il est cependant possible, en fonction de votre projet, de <strong>les rencontrer l\u00e0 o\u00f9 elles se trouvent.<\/strong><\/p>\n<p>Par exemple une banque \u00e0 Luxembourg a lanc\u00e9 <strong>un apr\u00e8s-midi de questionnaire gu\u00e9rilla<\/strong> pour mieux conna\u00eetre les attentes. Durant une apr\u00e8s-midi, plusieurs personnes de leur \u00e9quipe (pas forc\u00e9ment designeuses), sont aller rencontrer des personnes dans l\u2019entr\u00e9e du cin\u00e9ma pour leurs poser plusieurs questions sur l\u2019utilisation des applications bancaires.<\/p>\n<p>Figurez-vous qu\u2019une des fonctionnalit\u00e9s la plus demand\u00e9e, \u00e0 cot\u00e9 de laquelle \u00e9tait compl\u00e8tement pass\u00e9 leurs \u00e9quipes \u00e9tait de pouvoir baisser le plafond de la carte bancaire. Il \u00e9tait possible de le monter, personne lors de l\u2019analyse fonctionnelle n\u2019a pens\u00e9 \u00e0 proposer de le baisser.<\/p>\n<p>Une apr\u00e8s-midi de recherche, c\u2019est peu cher pay\u00e9 pour s\u2019assurer qu\u2019on a les bonnes fonctionnalit\u00e9s au lancement dans son produit\u00a0!<\/p>\n<h3>Entretiens \u00e0 distance ou par mail<\/h3>\n<p>Enfin, si vous d\u00e9placer n\u2019est pas possible, envisagez des <strong>entretiens \u00e0 distance<\/strong>.\u00a0C\u2019est possible par<strong> e-mail<\/strong>. Dans ce cas-l\u00e0, l\u2019entretien se passe question par question sous <strong>forme d\u2019une discussion asynchrone<\/strong> pour pouvoir <strong>relancer sur certains sujets. <\/strong><\/p>\n<p>Vous pouvez \u00e9galement proposer des entretiens en <strong>visioconf\u00e9rence<\/strong>. L\u00e0 encore, le co\u00fbt est franchement minime.\u00a0 Envisagez \u00e9galement des entretiens asynchrones via WhatsApp par exemple si les conditions de connexion de vos utilisatrices et utilisateurs sont mauvaises. C\u2019est par exemple ce que <a href=_-946.html>Damien a fait quand ielle interviewait des utilisatrices et utilisateurs en Afrique<\/a>.<\/p>\n<h3>Ressources<\/h3>\n<p>Voici quelques ressources pour aller plus loin\u00a0sur les m\u00e9thodes de recherche UX guerilla \u00e0 moindre co\u00fbt :<\/p>\n<ul>\n<li><a href=watch4274.html>Gu\u00e9rilla UX, \u00ab\u00a0quick\u00a0\u00bb mais pas \u00ab\u00a0dirty\u00a0\u00bb &#8211; Carine LALLEMAND &#8211; video<\/a><\/li>\n<li><a href=_-947.html>User Research When You Can\u2019t Talk to Your Users<\/a><\/li>\n<li><a href=_-948.html>Guerrilla Research Tactics and Tools<\/a><\/li>\n<li><a href=_-949.html>Going Guerrilla: How to Fit UX Research into Any Timeframe<\/a><\/li>\n<li><a href=_-950.html>Getting Started with Popular Guerrilla UX Research Methods<\/a><\/li>\n<li><a href=_-951.html>Guerrilla UX Research in 5 Minutes<\/a><\/li>\n<li><a href=_-952.html>Getting Guerrilla With It<\/a><\/li>\n<\/ul>\n<h2>Construire un plan et une vision globale : parcours et navigation<\/h2>\n<p>Une fois la recherche effectu\u00e9e, on peut commencer le plan de bataille. Que votre framework UI ou Template soit d\u00e9j\u00e0 choisis, impos\u00e9s ou non, savoir o\u00f9 vous souhaitez aller dans les grandes lignes va vous aider dans vos choix, de framework, ou de composants.<\/p>\n<h3>D\u00e9finition du parcours utilisateur en amont<\/h3>\n<p>Construire des <strong>parcours utilisateur solides<\/strong> permet de<strong> s\u2019assurer de la continuit\u00e9 de l\u2019exp\u00e9rience<\/strong>. Ils permettent de <strong>ne pas oublier des pages, des \u00e9tapes ou des vues.\u00a0<\/strong>Parce que le plus joli des templates ne vous sauvera pas si vos utilisatrices finissent dans des boucles infinies et des impasses.\u00a0Il est possible d\u00e8s cette phase de tester les parcours avec des utilisatrices et utilisateurs, en testant par exemple des parcours en post-its.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-7175 alignnone\" src=_-953.html alt=\"Exemple de parcours utilisateur complexe\" width=\"1542\" height=\"760\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/userflow.jpg 1542w, https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/userflow-768x379.jpg 768w\" sizes=\"(max-width: 1542px) 100vw, 1542px\" \/><\/p>\n<p>En voyant l\u2019aspect visuel et global de vos parcours, vous pouvez d\u00e9j\u00e0<strong> commencer \u00e0 choisir le bon type de gabarits de navigation<\/strong>.\u00a0Dans cet exemple\u00a0:<\/p>\n<ul>\n<li>le premier serait plut\u00f4t un Template de type wizards, une page apr\u00e8s l\u2019autre,<\/li>\n<li>le second correspond plus \u00e0 des onglets sur une application mobile ou un dashboard sur du web,<\/li>\n<li>le troisi\u00e8me \u00e0 un mod\u00e8le en ma\u00eetre -&gt; d\u00e9tail.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"size-full wp-image-7174 alignnone\" src=_-954.html alt=\"\" width=\"1542\" height=\"760\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/userflow-example.jpg 1542w, https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/userflow-example-768x379.jpg 768w\" sizes=\"(max-width: 1542px) 100vw, 1542px\" \/><\/p>\n<p>Si votre framework a d\u00e9j\u00e0 \u00e9t\u00e9 choisi, vous pouvez donc d\u00e9j\u00e0 commencer \u00e0 prendre des d\u00e9cisions \u00e9clair\u00e9es sur les diff\u00e9rents composants de gabarits de page \u00e0 utiliser.<\/p>\n<p>Quelques ressources pour aller plus loin\u00a0sur les parcours utilisateur. :<\/p>\n<ul>\n<li><a href=_-394.html>Customer Journey Map, cartographie du parcours client<\/a><\/li>\n<li><a href=_-955.html>UX Glossary: Task Flows, User Flows, Flowcharts and some new-ish\u00a0stuff<\/a><\/li>\n<li><a href=_-956.html>Creating Excellent UX Flow\u00a0Charts<\/a><\/li>\n<li><a href=_-957.html>The biggest WTF in design right\u00a0now<\/a><\/li>\n<li><a href=_-958.html>User flow is the new wireframe<\/a><\/li>\n<li><a href=_-959.html>User Journey Maps or User Flows, what to do\u00a0first?<\/a><\/li>\n<li><a href=_-960.html>Canva propose un outil gratuit de cr\u00e9ation de sch\u00e9mas fonctionnels<\/a><\/li>\n<\/ul>\n<h3>Architecture d\u2019information solide gr\u00e2ce au tri de carte<\/h3>\n<p>Il n\u2019y a rien de plus d\u00e9sagr\u00e9able que de ne pas trouver ce que l\u2019on cherche sur un site.\u00a0Proposer une <strong>navigation claire et intuitive<\/strong>, surtout si vous \u00eates sur des sites tr\u00e8s profonds ou du e-commerce peut s\u2019av\u00e9rer complexe. Et encore une fois, vous ou vos \u00e9quipes n\u2019\u00eates peut-\u00eatre pas les utilisateurs et utilisatrices de votre produit.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-7157 alignnone\" src=_-961.html alt=\"Tris de carte \u00e0 l'universit\u00e9\" width=\"1542\" height=\"760\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/card-sorting.jpg 1542w, https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/card-sorting-768x379.jpg 768w\" sizes=\"(max-width: 1542px) 100vw, 1542px\" \/><\/p>\n<p>Pour construire une <strong>navigation fonctionnelle et une architecture d\u2019information solide<\/strong>, une m\u00e9thode \u00e0 moindre co\u00fbt consiste \u00e0 lancer <strong>un tri de cartes.\u00a0<\/strong><\/p>\n<ul>\n<li>Listez tous les contenus du site et mettez-les \u00e0 plat.<\/li>\n<li>Faites-les regrouper par les utilisatrices cible. Soit en donnant des cat\u00e9gories et leur demandant de mettre les contenus dans les cat\u00e9gories (tri ferm\u00e9), soit en les laissant faire leurs groupes et leur demandant \u00e0 la fin de les nommer (tri ouvert)<\/li>\n<li>Une alternative consiste \u00e0 faire trier un groupe, puis donner ce tri \u00e0 un second, puis un 3e jusqu\u2019\u00e0 ce qu\u2019il n\u2019y ait plus de modifications<\/li>\n<\/ul>\n<p>Quelques ressources pour aller plus loin\u00a0sur le tri de cartes :<\/p>\n<ul>\n<li><a href=_-962.html>Tri par cartes, une m\u00e9thode d\u2019organisation des pages d\u2019un site web<\/a><\/li>\n<li><a href=_-963.html>Tri de cartes : l\u2019architecture de l\u2019information construite par les utilisateurs<\/a><\/li>\n<li><a href=_-964.html>R\u00e9aliser un tri par cartes en ligne (\u00a0Card sorting\u00a0).<\/a><\/li>\n<li><a href=_-965.html>Card sorting &#8211; Ne perdez plus vos utilisateurs !<\/a><\/li>\n<li><a href=_-966.html>Card Sorting<\/a><\/li>\n<li><a href=_-967.html>Card Sort<\/a><\/li>\n<li><a href=_-968.html>Card Sorting: Uncover Users&rsquo; Mental Models for Better Information Architecture<\/a><\/li>\n<\/ul>\n<h3>Un choix avis\u00e9 des gabarits du th\u00e8me et de la navigation<\/h3>\n<p>Si vous avez d\u00e9j\u00e0 choisi un th\u00e8me ou un framework UI pour votre site, vous pouvez <strong>utiliser les parcours et le tri pour construire et choisir les gabarits de page et la navigation<\/strong>. Parce qu\u2019il n\u2019y a RIEN de pire que de choisir un composant de navigation dans son framework en amont et se rendre compte qu\u2019au final avec le \u00ab\u00a0vrai contenu\u00a0\u00bb, \u00e7a ne rentre pas.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-7169 alignnone\" src=_-969.html alt=\"Trop d'onglets qui d\u00e9bordent sur 3 lignes sur une interface\" width=\"1542\" height=\"760\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/navicenption.jpg 1542w, https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/navicenption-768x379.jpg 768w\" sizes=\"(max-width: 1542px) 100vw, 1542px\" \/><\/p>\n<p>Ici par exemple, le composant \u201conglet\u201d a \u00e9t\u00e9 choisi en amont dans Bootstrap. Mais sur la version finale fini avec 9 onglets, la navigation devient complexe voire impossible.<\/p>\n<p>Pr\u00e9voyez donc \u00e9galement de pouvoir ajouter des \u00e9l\u00e9ments de menu, on ne sait jamais, un jour, si le site et fonctionnalit\u00e9s \u00e9volue.<\/p>\n<p>En g\u00e9n\u00e9ral, si le framework n\u2019est pas encore choisi, avoir des parcours bien d\u00e9finis en amont et une navigation claire et structur\u00e9e va vous permettre de faire le bon choix de framework UI.<\/p>\n<h2>Composants, wireframes et prototypes \u00e0 tester<\/h2>\n<p>A ce stade l\u00e0, vous avez normalement la vision globale. Vous voyez \u00e0 peu-pr\u00e8s \u00e0 quoi ressemble la \u00ab\u00a0coquille\u00a0\u00bb des pages et comment on passe de l\u2019une \u00e0 l\u2019autre.\u00a0Il est maintenant temps de <strong>nous int\u00e9resser au contenu de ces pages<\/strong>. En termes de framework, il est temps de <strong>rentrer plus dans le d\u00e9tail des composants.<\/strong><strong>\u00a0<\/strong><\/p>\n<h3>Inventaire des contenus \/ d\u2019interface<\/h3>\n<p>Pour chacune des pages, je <strong>me demande alors de quels contenus je vais avoir besoin<\/strong>, dans le d\u00e9tail. Dans le cadre d\u2019une <strong>refonte, on peut partir de l&rsquo;existant<\/strong>. Sinon en g\u00e9n\u00e9ral je me base sur le cahier des charges.<\/p>\n<p>Le but est de<strong> lister ce dont nous allons avoir besoin en termes de contenus et de composants dans l\u2019interface<\/strong>. Par exemple ici, s\u00fbre notre projet de refonte du panneau d\u2019administration d\u2019un site, nous les avons tous list\u00e9s sur des post-its pour les classer ensuite.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-7167 alignnone\" src=_-970.html alt=\"Inventaire de composants fait avec des postits\" width=\"1542\" height=\"760\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/interface-inventory.jpg 1542w, https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/interface-inventory-768x379.jpg 768w\" sizes=\"(max-width: 1542px) 100vw, 1542px\" \/><\/p>\n<p>L\u2019int\u00e9r\u00eat de lister tous ces composants est de<strong> guider les \u00e9quipes de d\u00e9veloppement dans les choix d\u2019un framework dont les composants correspondront aux besoins des utilisatrices et de nos interfaces<\/strong>.<\/p>\n<p>Pour aller plus loin\u00a0:<\/p>\n<ul>\n<li><a href=_-971.html>interface inventory<\/a> et <a href=_-972.html>conducting an interface inventory<\/a> de Brad Frost<\/li>\n<\/ul>\n<h3>Crazy 8 \u2013 une m\u00e9thode pour g\u00e9n\u00e9rer des id\u00e9es de composants de mani\u00e8re collaborative<\/h3>\n<p>Si vous n\u2019avez pas forc\u00e9ment d\u2019id\u00e9es de comment afficher un contenu ou quel composant utiliser, une bonne m\u00e9thode pour g\u00e9n\u00e9rer des id\u00e9es de mani\u00e8re collaborative et sortir de sa zone de confort est le <strong>crazy 8<\/strong>. Il consiste \u00e0 essayer de g\u00e9n\u00e9rer un maximum d\u2019id\u00e9es en un minimum du temps. <strong>Le but n\u2019est pas que les id\u00e9es soient parfaites<\/strong>, mais d\u2019essayer de<strong> proposer autre chose que la premi\u00e8re id\u00e9e qu\u2019on a eue.<\/strong> Une fois que tout le monde a propos\u00e9 les id\u00e9es,<strong> on les affiche, on les confronte.<\/strong><\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-7159 alignnone\" src=_-973.html alt=\"Exemple de mise en commun suite \u00e0 un crazy height\" width=\"1542\" height=\"760\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/crazyheight.jpg 1542w, https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/crazyheight-768x379.jpg 768w\" sizes=\"(max-width: 1542px) 100vw, 1542px\" \/><\/p>\n<p>L\u00e0 encore, si le framework a d\u00e9j\u00e0 \u00e9t\u00e9 choisi, on peut confronter ces id\u00e9es aux composants du framework et choisir celle qui s\u2019en rapproche<strong>.\u00a0<\/strong><\/p>\n<p>Aller plus loin avec le crazy 8\u00a0:<\/p>\n<ul>\n<li><a href=_-974.html>6 \u2013 8 \u2013 5 <\/a><\/li>\n<li><a href=_-975.html>How to: Run a Crazy Eights exercise to generate design ideas<\/a><\/li>\n<li><a href=_-976.html>Crazy 8&rsquo;s<\/a><\/li>\n<\/ul>\n<h3>R\u00e9utilisabilit\u00e9 et choix (\u00e0 plusieurs) du framework<\/h3>\n<p>Comme expliqu\u00e9 plus haut, le but n\u2019est pas seulement de lister les contenus et composants, mais d\u2019<strong>essayer les regrouper et de voir ce qui pourra \u00eatre factoris\u00e9 et r\u00e9utilis\u00e9<\/strong>. C\u2019est particuli\u00e8rement important quand peu de temps de design a \u00e9t\u00e9 pr\u00e9vu dans le budget global.<\/p>\n<p>Apr\u00e8s tout, l<strong>e but d\u2019un framework c\u2019est de gagner du temps <\/strong>mais aussi de<strong> s\u2019assurer de la coh\u00e9rence de l\u2019interface.<\/strong> En g\u00e9n\u00e9ral \u00e0 ce stade on sait plus ou moins de quoi on va avoir besoin : navigation, gabarits de page mais aussi composants sp\u00e9cifiques (data tables, formulaires, etc.). Si le framework n\u2019a pas encore \u00e9t\u00e9 d\u00e9cid\u00e9, c\u2019est \u00e0 mon avis un bon moment pour le choisir en \u00e9quipe.<\/p>\n<p>Choisir le framework une fois qu\u2019on a une vision plus globale sur les composants et les contenus des pages permet \u00e9galement d\u2019<strong>\u00e9viter le choix d\u2019un framework fourre-tout super lourd alors qu\u2019on aurait besoin que de deux ou trois composants au final.<\/strong><\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-7160 alignnone\" src=_-977.html alt=\"Sch\u00e9mas de ce qui impacte le choix du framework\" width=\"1542\" height=\"760\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/criteres.jpg 1542w, https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/criteres-768x379.jpg 768w\" sizes=\"(max-width: 1542px) 100vw, 1542px\" \/><\/p>\n<p>Pas mal de choses vont impacter le choix, mais souvent pas de la m\u00eame mani\u00e8re<\/p>\n<ul>\n<li>58% disent que sur le support de la communaut\u00e9 influence le choix<\/li>\n<li>54% disent que le langage support\u00e9\u00a0influence le choix<\/li>\n<li>52% disent que la diversit\u00e9 des composants influence<\/li>\n<li>52% disent que la qualit\u00e9 visuelle des composants compte<\/li>\n<li>30% disent que l\u2019accessibilit\u00e9 influence le choix<\/li>\n<\/ul>\n<h3>Prise en main du framework par la designeuse<\/h3>\n<p>Dans les retours au questionnaire que l\u2019on m\u2019a fait, le besoin de <strong>compr\u00e9hension des contraintes<\/strong> des diff\u00e9rents m\u00e9tiers a \u00e9t\u00e9 remont\u00e9 plusieurs fois. C\u2019est un point tr\u00e8s important selon moi. Je pense que les \u00e9quipes de design n\u2019ont pas forc\u00e9ment besoin de savoir coder, par contre, quand elles travaillent avec un framework, il vaut mieux en conna\u00eetre les contraintes.<\/p>\n<p>Que le framework ai \u00e9t\u00e9 impos\u00e9 sur un projet en amont ou choisi avec les \u00e9quipes de d\u00e9veloppement, je commence toujours la phase de wireframes et de prototype <strong>parcourant la documentation pour m\u2019assurer que les composants que je vais utiliser dans mes wireframes existent<\/strong>. Pour moi, une documentation claire et pr\u00e9cise des composants du framework est donc primordiale. Je dois pouvoir si possible voir \u00e0 quoi ils vont ressembler les composants en action gr\u00e2ce \u00e0 des petits GIFs ou des vid\u00e9os. Voir encore mieux, pouvoir jouer avec.<\/p>\n<p>J\u2019appr\u00e9cie donc tout particuli\u00e8rement <a href=index-550.html#menus\">les documentations comme celle d\u2019ionic<\/a> qui me permettent de voir et tester les composants en action.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-7161 alignnone\" src=_-978.html alt=\"Documentation ionic avec un exemple visuel du composant\" width=\"1542\" height=\"760\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/doc-ionic.jpg 1542w, https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/doc-ionic-768x379.jpg 768w\" sizes=\"(max-width: 1542px) 100vw, 1542px\" \/><\/p>\n<h3>Wireframes, prototypes et tests utilisateur<\/h3>\n<p>Une fois la recherche utilisateur faite, apr\u00e8s avoir construit les parcours utilisateur et avoir pris en main le framework UI, je vais commencer \u00e0 <strong>construire des wireframes <\/strong>ou des prototypes plus ou moins d\u00e9taill\u00e9s. Si les gabarits ont \u00e9t\u00e9 bien con\u00e7us et que vous travaillez sur des interfaces m\u00e9tier, vous allez<strong> souvent pouvoir r\u00e9utiliser une grosse partie des composants <\/strong>sur toutes les vues. Cela permet de<strong> s\u2019assurer de l\u2019homog\u00e9n\u00e9it\u00e9 tout au long de l\u2019interface. <\/strong>Le but de ces wireframes est de formaliser les contenus des pages, les composants utilis\u00e9s et les diff\u00e9rentes interactions.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-7176 alignnone\" src=_-979.html alt=\"Wireframes mobile\" width=\"1542\" height=\"760\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/wireframes.jpg 1542w, https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/wireframes-768x379.jpg 768w\" sizes=\"(max-width: 1542px) 100vw, 1542px\" \/><\/p>\n<p>Si je dois cr\u00e9er des composants qui n\u2019existent pas, j\u2019en <strong>discute avec les \u00e9quipes de d\u00e9veloppement <\/strong>et on voit ensemble ce qui est faisable.<\/p>\n<p>Je <strong>documente \u00e9galement les composants utilis\u00e9s<\/strong> dans mes wireframes dans un fichier \u00e0 destination des \u00e9quipes de d\u00e9veloppement. Parce que parfois, il existe plusieurs composants pour faire la m\u00eame chose. Et que le but est encore une foi de favoriser la <strong>r\u00e9utilisabilit\u00e9 des composants.<\/strong><\/p>\n<p>Sur mon projet ionic, \u00e7a ressemble \u00e0 un gros fichier commun sur mon projet qui liste :<\/p>\n<ul>\n<li>le <strong>composant dans le wireframe<\/strong><\/li>\n<li><strong>l&rsquo;occurrence <\/strong>(sur quelle vue ou Template je l\u2019utilise)<\/li>\n<li><strong>l\u2019url du composant dans la doc <\/strong>(pas sur cet \u00e9cran)<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"size-full wp-image-7158 alignnone\" src=_-980.html alt=\"Inventaire de composants avec le nom, l'endroit utilis\u00e9 et l'URL\" width=\"1542\" height=\"760\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/composants-docu.jpg 1542w, https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/composants-docu-768x379.jpg 768w\" sizes=\"(max-width: 1542px) 100vw, 1542px\" \/><\/p>\n<h3>Test utilisateur &#8211; valider le choix final des composants<\/h3>\n<p>Le meilleur moyen de s\u2019assurer que les composants choisis par l\u2019\u00e9quipe de design correspondent aux besoins utilisatrices et utilisateurs est <strong>un test utilisateur sur un prototype.<\/strong> L\u2019avantage d\u2019utiliser un framework est de pouvoir <strong>monter un prototype cliquable plut\u00f4t rapidement<\/strong> \u00e0 partir des composants choisis.<\/p>\n<p>Le prototype n\u2019a pas forc\u00e9ment besoin d\u2019\u00eatre parfait, <strong>le but est vraiment de tester l\u2019utilisabilit\u00e9 et utilisation des composants<\/strong>. Si vous n\u2019avez pas encore eu l\u2019occasion de tester les parcours, c\u2019est \u00e9galement le moment.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-7173 size-full alignnone\" src=_-981.html alt=\"Un test utilisateur\" width=\"1542\" height=\"760\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/testu.jpg 1542w, https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/testu-768x379.jpg 768w\" sizes=\"(max-width: 1542px) 100vw, 1542px\" \/><\/p>\n<p>Je ne vais pas entrer dans les d\u00e9tails de comment faire un test utilisateur ici, cet article est d\u00e9j\u00e0 assez long. Par contre j\u2019en profite pour rappeler l\u2019int\u00e9r\u00eat des pr\u00e9-tests. Avant de faire passer le test \u00e0 de vrais utilisatrices et utilisateurs, pensez \u00e0 le pr\u00e9-tester sur des coll\u00e8gues par exemple. Cela permet de s\u2019assurer que tous les \u00e9l\u00e9ments du prototype s&rsquo;encha\u00eenent bien, que les consignes sont comprises, etc.<\/p>\n<p>Ressources pour des tests utilisateur\u00a0:<\/p>\n<ul>\n<li>Conception UX\u00a0: comment organiser un test utilisateurs\u00a0?<\/li>\n<li><a href=_-982.html>Test utilisateur<\/a><\/li>\n<li><a href=_-983.html>7 Step Guide to Guerrilla Usability Testing: DIY Usability Testing Method<\/a><\/li>\n<li><a href=_-984.html>The Art of Guerrilla Usability Testing<\/a><\/li>\n<li><a href=_-985.html>A Guide to the Art of Guerrilla UX\u00a0Testing<\/a><\/li>\n<li><a href=_-986.html>Usability testing<\/a><\/li>\n<li><a href=_-986.html>Checklist for Planning Usability Studies<\/a><\/li>\n<li><a href=_-987.html>Tests Go First. Usability Testing in\u00a0Design.<\/a><\/li>\n<\/ul>\n<p>Encore une fois, l\u2019<strong>exp\u00e9rience utilisateur<\/strong> est un <strong>travail d\u2019\u00e9quipe<\/strong>. Ce dont je vous ai parl\u00e9 jusque-l\u00e0 c\u2019est mon processus d\u2019UX designer. Si vous n\u2019avez <strong>pas ce r\u00f4le attitr\u00e9<\/strong> dans votre \u00e9quipe, diff\u00e9rentes personnes peuvent parfois s\u2019en charger.<\/p>\n<p>Ce qu\u2019il faut surtout retenir, c\u2019est qu\u2019il <strong>vaut mieux avoir d\u00e9cid\u00e9 et test\u00e9 les composants AVANT de commencer \u00e0 d\u00e9velopper<\/strong> et de s<strong>\u2019assurer qu\u2019ils correspondent bien aux besoins des humains qui vont utiliser vos interfaces. \u00a0<\/strong><\/p>\n<h2>Design d\u2019interface, styleguides et documentation<\/h2>\n<p>Un fois que tout est bon, que je me suis assur\u00e9e qu\u2019on va <strong>utiliser les bons composants<\/strong>, qu\u2019ils sont utilisables, correspondent aux besoins des utilisatrices et utilisateurs et que tout fonctionne bien, on passe \u00e0 la phase de design d\u2019interface \u00e0 proprement parl\u00e9.<\/p>\n<h3>Limiter les d\u00e9g\u00e2ts en cas d\u2019absence d\u2019\u00e9quipe de design<\/h3>\n<p>Sur certains projets comme je l\u2019ai vu souvent, on n\u2019a pas toujours une \u00e9quipe de design. En g\u00e9n\u00e9ral, faire la recherche utilisateur en amont, d\u00e9finir les parcours, la navigation, les composants et les tester permet <strong>de limiter une grosse partie des d\u00e9g\u00e2ts et s\u2019assurer de l\u2019utilisabilit\u00e9 de l\u2019interface<\/strong>.<\/p>\n<p>Il y a de fortes chances que votre framework propose des <strong>th\u00e8mes d\u00e9j\u00e0 tout faits<\/strong>.\u00a0C\u2019est une alternative int\u00e9ressante si vous n\u2019avez pas d\u2019\u00e9quipe de design ou si vous montez votre startup \u00e0 moindre co\u00fbt et n\u2019avez pas encore eu le temps de faire cr\u00e9er une charte graphique.<\/p>\n<p>Si vous souhaitez personnaliser les couleurs sans trop d\u2019efforts il existe des palette en ligne sur des sites comme <a href=_-988.html><strong>colorhunt<\/strong><\/a><strong>.\u00a0<\/strong>Attention n\u00e9anmoins \u00e0 l\u2019accessibilit\u00e9. Assurez-vous que le contraste entre le texte et le fond est suffisamment \u00e9lev\u00e9. Vous pouvez lire mon article <a href=_-548.html>Cr\u00e9er facilement une palette de couleurs accessibles<\/a> pour vous aider.<\/p>\n<p>Avoir un <strong>pack d\u2019ic\u00f4ne venant d\u2019une m\u00eame librairie<\/strong> permettra d\u2019assurer une coh\u00e9rence dans l\u2019interface. Vous pouvez par exemple utiliser <a href=_-989.html>fontawesome<\/a>. Par contre, il vaut mieux <strong>les tester <\/strong>encore une fois sur des utilisatrices et utilisateurs finaux. <strong>Evitez de tout transformer en ic\u00f4ne<\/strong>, surtout si vous n\u2019\u00eates pas s\u00fbres \u00e0 100% de ce que vous faites.<strong>\u00a0Il vaut d\u2019ailleurs mieux parfois un label explicite qu\u2019une ic\u00f4ne mal comprise.<\/strong><\/p>\n<p>Pour le choix des polices, l\u00e0 encore<strong>, <\/strong>si vous n\u2019\u00eates pas designers des sites en ligne comme <a href=_-990.html>fontpair.co<\/a> peuvent vous aider<strong>.<\/strong> Evitez de m\u00e9langer trop de polices, KEEEP IT SIMPLE. Souvent <strong>une seule avec plusieurs graisses suffit pour de l\u2019interface<\/strong><\/p>\n<h3>Styleguides et design modulaire<\/h3>\n<p>En g\u00e9n\u00e9ral si vous avez une \u00e9quipe de design, elle va prendre en charge le design de l\u2019interface, en cr\u00e9ant ou utilisant une charte graphique existante. Le point cl\u00e9 ici \u00e0 mon avis, et c\u2019est revenu plusieurs fois dans les discussions et les retours du sondage, est de<strong> documenter.<\/strong><\/p>\n<p>Cr\u00e9er un <strong>style guide <\/strong>me permet d\u2019avoir tous les composants au m\u00eame endroit pour les \u00e9quipes de d\u00e9veloppement. Je le c<strong>ompl\u00e8te au fur et \u00e0 mesure du projet<\/strong>, quand on ajoute des pages, des fonctionnalit\u00e9s, des composants. Que ce soit pour les boutons ou les formulaires, le style guide permet \u00e9galement de<strong> communiquer aux \u00e9quipes de d\u00e9veloppement les diff\u00e9rents \u00e9tats\u00a0: <\/strong>d\u00e9faut, focus, active, hover, etc. Le styleguide me permet \u00e9galement de communiquer les composants \u00e0 diff\u00e9rentes tailles pour le responsive.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-7171 alignnone\" src=_-991.html alt=\"Exemple de styleguide\" width=\"1542\" height=\"760\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/styleguide.jpg 1542w, https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/styleguide-768x379.jpg 768w\" sizes=\"(max-width: 1542px) 100vw, 1542px\" \/><\/p>\n<p>Au final, ce que je construis ce sont souvent des<strong> syst\u00e8mes de composants <\/strong>modulaires et pas forc\u00e9ment des pages compl\u00e8tes. Cela permet aussi de ne pas forc\u00e9ment \u00ab\u00a0designer\u00a0\u00bb toutes les pages quand le budget manque h\u00e9las pour designer toutes les pages. Dans ces cas-l\u00e0, il faut beaucoup de communication avec les \u00e9quipes de d\u00e9veloppement qui vont se baser sur un cahier des charges, des sp\u00e9cifications ou des wireframes pour cr\u00e9er les pages.<\/p>\n<p>Nous essayons dans ces cas-l\u00e0 de mettre en place des phases de retours avec les \u00e9quipes de d\u00e9veloppement pour leur faire des retours sur ce qui a \u00e9t\u00e9 d\u00e9velopp\u00e9.<\/p>\n<p>Pour favoriser la collaboration nous utilisons \u00e9galement des outils tel que <strong>Invision<\/strong> ou <strong>Zeplin<\/strong>. Ils permettent aux d\u00e9veloppeuses et d\u00e9veloppeurs d\u2019inspecter un fichier Sketch (ou Photoshop) Attention n\u00e9anmoins, m\u00eame si ces outils g\u00e9n\u00e8rent du<strong> CSS c\u2019est rarement propre<\/strong>. Ce sont des aides pour r\u00e9cup\u00e9rer les couleurs, polices et tailles, le code n\u2019est surtout pas \u00e0 copier-coller\u00a0!!<\/p>\n<p>Si les \u00e9quipes de d\u00e9veloppement n\u2019utilisent pas des outils comme Invision et que mes composants sont diff\u00e9rents de ceux de base du framework, il m\u2019arrive aussi de <strong>pr\u00e9parer des sp\u00e9cifications plus d\u00e9taill\u00e9es avec la police, les couleurs, etc. <\/strong><a href=_-992.html>Measureit<\/a> est un plugin Sketch tr\u00e8s pratique pour cr\u00e9er ce genre de documentation.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-7168 alignnone\" src=_-993.html alt=\"Exemple de composants avec les mesures\" width=\"1542\" height=\"760\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/measure.jpg 1542w, https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/measure-768x379.jpg 768w\" sizes=\"(max-width: 1542px) 100vw, 1542px\" \/><\/p>\n<p>Ressources pour aller plus loin pour les style guides\u00a0:<\/p>\n<ul>\n<li><a href=_-994.html>style guide-driven design systems<\/a><\/li>\n<li><a href=_-455.html>Meet \u201cDesign Systems\u201d, A New Smashing Book<\/a><\/li>\n<li><a href=_-995.html>how much documentation to include in a style guide?<\/a><\/li>\n<li><a href=_-996.html>Style Guides as Products<\/a><\/li>\n<li><a href=_-997.html>io<\/a><\/li>\n<\/ul>\n<h3>Documenter les choix de composants et d\u00e9cisions de design<\/h3>\n<p>Au final, <strong>la documentation du choix du design <\/strong>est d\u2019ailleurs il est plusieurs fois remont\u00e9e dans la partie \u00ab\u00a0am\u00e9liorer les frameworks\u00a0\u00bb de mon \u00e9tude. Cela permet de <strong>faire comprendre \u00e0 toute l\u2019\u00e9quipe le choix du composant<\/strong>. Cela permet \u00e9galement de faire monter en comp\u00e9tence les d\u00e9veloppeuses et d\u00e9veloppeurs sur de la <strong>sensibilisation aux principes de base de design<\/strong>.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-7163 alignnone\" src=_-998.html alt=\"Documenter le design pas que le code\" width=\"1542\" height=\"760\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/document.jpg 1542w, https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/document-768x379.jpg 768w\" sizes=\"(max-width: 1542px) 100vw, 1542px\" \/><\/p>\n<p>Certains frameworks comment d\u2019ailleurs \u00e0 proposer une documentation des principes de design. C\u2019est le cas de <a href=_-999.html>Clarity<\/a>. Pour chaque composant<strong>, <\/strong>la documentation ne commence pas par un bout de code, mais par une<strong> introduction au design du composant<\/strong> avec ce \u00e0 quoi il faut faire attention.<\/p>\n<p>Dans la m\u00eame optique, <a href=_-1000.html><strong>Ant Design<\/strong><\/a> propose des <strong>conseils et r\u00e8gles de base d\u2019ergonomie pour utiliser leur framework.<\/strong>\u00a0 Les pages ne sont pas li\u00e9es \u00e0 des composants directement, mais Ant propose de <strong>bonnes bases pour les \u00e9quipes sans designer<\/strong> pour construire des interfaces fonctionnelles et \u00e9viter les erreurs d\u2019ergonomie et d\u2019utilisabilit\u00e9.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-7162 alignnone\" src=_-1001.html alt=\"Documentation de Ant\" width=\"1542\" height=\"760\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/docu-design-datapicker.jpg 1542w, https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/docu-design-datapicker-768x379.jpg 768w\" sizes=\"(max-width: 1542px) 100vw, 1542px\" \/><\/p>\n<p>Que ce soit directement dans les framework, ou dans les modifications que l\u2019on en fait, tout le monde peut profiter d\u2019une documentation claire des composants et des choix de design. Cela permet de faire monter en comp\u00e9tence les \u00e9quipes, de sensibiliser les \u00e9quipes de d\u00e9veloppement au design, tout le monde y gagne.<\/p>\n<h2>Int\u00e9gration et \u00e9volutions\u00a0(oui, avec un S)<\/h2>\n<p>Une fois le design termin\u00e9, place \u00e0 la phase d\u2019int\u00e9gration et de d\u00e9veloppement.<\/p>\n<p>Je ne vais pas forc\u00e9ment rentrer ici dans les d\u00e9tails car ce n\u2019est plus vraiment ma partie, mais j\u2019ai pu voir deux fa\u00e7ons de faire.<\/p>\n<p>Soit les \u00e9quipes de d\u00e9veloppement construisent les gabarits de pages avec un Template qui se base sur le framework. Les \u00e9quipes d\u2019int\u00e9gration vont ensuite modifier le HTML et CSS de ce Template pour le modifier et le faire ressembler \u00e0 ce que j\u2019ai propos\u00e9 dans mes mockups UI. Du coup, on reprend<\/p>\n<p>Dans le cas de frameworks Angular ou React, c\u2019est souvent un peu plus compliqu\u00e9. Mon \u00e9quipe d\u2019int\u00e9gration va fournir le HTML et CSS \u00e0 partir du design, les d\u00e9veloppeuses et d\u00e9veloppeurs full stack vont ensuite se charger de r\u00e9cup\u00e9rer ce code, pour les transformer en composants du framework.<\/p>\n<p>Quel que soit la technique, en g\u00e9n\u00e9ral il vaut mieux se met d\u2019accord avec les \u00e9quipes front-end et backend sur la fa\u00e7on de proc\u00e9der. Et lorsque des composants custom sont cr\u00e9\u00e9s, il faut aussi les <strong>documenter.<\/strong> Si vous mettez \u00e0 jours le framework, \u00e7a permet de savoir ce qui risque d\u2019exploser durant la mise \u00e0 jour.<\/p>\n<h3>Recette, contr\u00f4le qualit\u00e9 et tests<\/h3>\n<p>Comme dit plus haut, il ne m\u2019est souvent <strong>pas possible de designer toutes les pages<\/strong> en amont. Les d\u00e9veloppeuses et d\u00e9veloppeurs vont donc devoir composer certaines des pages suppl\u00e9mentaires en se basant sur les wireframes, les style guides et les composants du framework, mais pas forc\u00e9ment sur un design complet.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-7172 alignnone\" src=_-1002.html alt=\"Test utilisateur d'une application TV\" width=\"1542\" height=\"760\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/test-u-produit-final.jpg 1542w, https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/test-u-produit-final-768x379.jpg 768w\" sizes=\"(max-width: 1542px) 100vw, 1542px\" \/><\/p>\n<p>En g\u00e9n\u00e9ral nous essayons d\u2019organiser des<strong> phases de recette<\/strong>. Elles permettent de s\u2019assurer de la qualit\u00e9 du produit final, que ce soit une application mobile ou un site web, de v\u00e9rifier qu\u2019il est conforme au design des composants. C\u2019est aussi l\u2019occasion de faire <strong>nos derniers test utilisateurs et fonctionnels <\/strong>et les corrections avant la mise en production. C\u2019est l\u00e0 encore un <strong>travail de collaboration continue <\/strong>et au quotidien entre \u00e9quipes de design et de d\u00e9veloppement.<\/p>\n<h3>Evolution, continuit\u00e9 de l\u2019exp\u00e9rience et processus agile<\/h3>\n<p>Un <strong>produit ne s\u2019arr\u00eate pas \u00e0 la premi\u00e8re mise en production<\/strong>, il est en constante \u00e9volution, c\u2019est cyclique.<\/p>\n<p>Les diff\u00e9rentes phases que je vous ai pr\u00e9sent\u00e9 jusque-l\u00e0 peuvent s\u2019appliquer sur un projet global, mais sont aussi applicables avec des m\u00e9thodes agiles sur des <strong>\u00e9volutions de fonctionnalit\u00e9s. <\/strong>On reprend une <strong>phase de recherche<\/strong>, on essaie de faire en sorte de trouver le composant du framework ad\u00e9quat qui repasse par une validation de l\u2019\u00e9quipe design.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-7164 alignnone\" src=_-1003.html alt=\"La conception, un processus continue\" width=\"1542\" height=\"760\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/evolution.jpg 1542w, https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/evolution-768x379.jpg 768w\" sizes=\"(max-width: 1542px) 100vw, 1542px\" \/><\/p>\n<p>Le but d\u2019un framework \u00e9tant de d\u2019assurer l\u2019homog\u00e9n\u00e9it\u00e9 et la r\u00e9utilisabilit\u00e9 des composants, <strong>introduire un nouveau composant<\/strong> fera souvent l\u2019objet de <strong>discussions <\/strong>entre designers, chefs de projets et \u00e9quipes de d\u00e9veloppement. Et n\u2019oubliez pas de faire \u00e9voluer son style guide et inventaire d\u2019interface au fur et \u00e0 mesure de l\u2019ajout de composants.<\/p>\n<h2>En conclusion \u2026<\/h2>\n<p>Au final, je pense qu\u2019il est <strong>possible d\u2019allier templates, framework UI et exp\u00e9rience<\/strong>, si l\u2019on fait les choses dans le bon ordre et l\u2019on s\u2019en donne les moyens.<\/p>\n<p>Bien plus que des <strong>solutions techniques<\/strong>, ce qui ressort surtout de mon \u00e9tude et des entretiens que j\u2019ai pu avoir, est <strong>cette volont\u00e9 et ce besoin de communication et de collaboration entre les \u00e9quipes<\/strong>. Il est grand temps de remettre l\u2019humain au centre de nos processus de conception. Et \u00e7a commence par plus de communication et de collaboration entre les \u00e9quipes de design et de d\u00e9veloppement. Quel que soit le framework, il faut aussi que les diff\u00e9rents m\u00e9tiers <strong>apprennent \u00e0 se respecter et \u00e0 communiquer, nous ne sommes pas ennemis, apprenons \u00e0 travailler ensemble.<\/strong><\/p>\n<p>Au final, j\u2019esp\u00e8re vous avoir convaincu que non, le design, <strong>le design d\u2019interface ce n\u2019est PAS de l\u2019art, c\u2019est de la conception, et \u00e7a se fait en EQUIPE. Et non, je ne colorierai pas votre Bootstrap. <\/strong><strong>\u00a0<\/strong><\/p>\n<h2>Et vous, votre processus de design\u00a0?<\/h2>\n<p>J\u2019ai partag\u00e9 dans cette seconde partie mon processus de design. J\u2019ai bien s\u00fbr survol\u00e9 les diff\u00e9rents points et m\u00e9thodologies, sinon l\u2019article aurait \u00e9t\u00e9 trop long.<\/p>\n<p>Je suis curieuse de savoir comment VOUS proc\u00e9dez pour allier frameworks UI, exp\u00e9rience utilisateur, ergonomie et composants utilisables. N\u2019h\u00e9sitez pas \u00e0 laisser un commentaire pour me parler de votre processus.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Comment remettre les utilisatrices et utilisateurs au c\u0153ur du processus de conception tout en continuant d\u2019utiliser des th\u00e8mes et des frameworks UI pour des questions de gain de temps et de budget ? Pas de solution miracle, dans cet article je peux vous expliquer comment je proc\u00e8de.<\/p>\n","protected":false},"author":3,"featured_media":7180,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[55],"tags":[],"class_list":["post-7154","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>Exp\u00e9rience utilisateur Templates \/ Frameworks UI \u2013 partie 2\u00a0: remettre l\u2019humain au centre du processus de conception. - 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=\"Contruire des produits utiles et utilisables avec des framwork UI c&#039;est possible si on oublie pas la recherche utilisateur, le design et fait collaborer les \u00e9quipes.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=_-607.html \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Exp\u00e9rience utilisateur Templates \/ Frameworks UI \u2013 partie 2\u00a0: remettre l\u2019humain au centre du processus de conception. - par St\u00e9phanie Walter - UX Researcher &amp; Designer\" \/>\n<meta property=\"og:description\" content=\"Contruire des produits utiles et utilisables avec des framwork UI c&#039;est possible si on oublie pas la recherche utilisateur, le design et fait collaborer les \u00e9quipes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/experience-utilisateur-templates-frameworks-ui-partie-2-remettre-lhumain-au-centre-du-processus-de-conception\/\" \/>\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=\"2018-12-20T07:00:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-11T18:56:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2018\/12\/humain-coeur-processus.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"350\" \/>\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=\"28 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/experience-utilisateur-templates-frameworks-ui-partie-2-remettre-lhumain-au-centre-du-processus-de-conception\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/experience-utilisateur-templates-frameworks-ui-partie-2-remettre-lhumain-au-centre-du-processus-de-conception\/\",\"name\":\"Exp\u00e9rience utilisateur Templates \/ Frameworks UI \u2013 partie 2\u00a0: remettre l\u2019humain au centre du processus de conception. - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/experience-utilisateur-templates-frameworks-ui-partie-2-remettre-lhumain-au-centre-du-processus-de-conception\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/experience-utilisateur-templates-frameworks-ui-partie-2-remettre-lhumain-au-centre-du-processus-de-conception\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/humain-coeur-processus.jpg\",\"datePublished\":\"2018-12-20T07:00:36+00:00\",\"dateModified\":\"2024-07-11T18:56:10+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Contruire des produits utiles et utilisables avec des framwork UI c'est possible si on oublie pas la recherche utilisateur, le design et fait collaborer les \u00e9quipes.\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/experience-utilisateur-templates-frameworks-ui-partie-2-remettre-lhumain-au-centre-du-processus-de-conception\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/experience-utilisateur-templates-frameworks-ui-partie-2-remettre-lhumain-au-centre-du-processus-de-conception\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/humain-coeur-processus.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/humain-coeur-processus.jpg\",\"width\":850,\"height\":350},{\"@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":"Exp\u00e9rience utilisateur Templates \/ Frameworks UI \u2013 partie 2\u00a0: remettre l\u2019humain au centre du processus de conception. - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Contruire des produits utiles et utilisables avec des framwork UI c'est possible si on oublie pas la recherche utilisateur, le design et fait collaborer les \u00e9quipes.","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\/experience-utilisateur-templates-frameworks-ui-partie-2-remettre-lhumain-au-centre-du-processus-de-conception\/","og_locale":"fr_FR","og_type":"article","og_title":"Exp\u00e9rience utilisateur Templates \/ Frameworks UI \u2013 partie 2\u00a0: remettre l\u2019humain au centre du processus de conception. - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Contruire des produits utiles et utilisables avec des framwork UI c'est possible si on oublie pas la recherche utilisateur, le design et fait collaborer les \u00e9quipes.","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/experience-utilisateur-templates-frameworks-ui-partie-2-remettre-lhumain-au-centre-du-processus-de-conception\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2018-12-20T07:00:36+00:00","article_modified_time":"2024-07-11T18:56:10+00:00","og_image":[{"width":850,"height":350,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2018\/12\/humain-coeur-processus.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":"28 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/experience-utilisateur-templates-frameworks-ui-partie-2-remettre-lhumain-au-centre-du-processus-de-conception\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/experience-utilisateur-templates-frameworks-ui-partie-2-remettre-lhumain-au-centre-du-processus-de-conception\/","name":"Exp\u00e9rience utilisateur Templates \/ Frameworks UI \u2013 partie 2\u00a0: remettre l\u2019humain au centre du processus de conception. - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/experience-utilisateur-templates-frameworks-ui-partie-2-remettre-lhumain-au-centre-du-processus-de-conception\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/experience-utilisateur-templates-frameworks-ui-partie-2-remettre-lhumain-au-centre-du-processus-de-conception\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/humain-coeur-processus.jpg","datePublished":"2018-12-20T07:00:36+00:00","dateModified":"2024-07-11T18:56:10+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Contruire des produits utiles et utilisables avec des framwork UI c'est possible si on oublie pas la recherche utilisateur, le design et fait collaborer les \u00e9quipes.","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/experience-utilisateur-templates-frameworks-ui-partie-2-remettre-lhumain-au-centre-du-processus-de-conception\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/experience-utilisateur-templates-frameworks-ui-partie-2-remettre-lhumain-au-centre-du-processus-de-conception\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/humain-coeur-processus.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2018\/12\/humain-coeur-processus.jpg","width":850,"height":350},{"@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\/7154"}],"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=7154"}],"version-history":[{"count":2,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/7154\/revisions"}],"predecessor-version":[{"id":8589,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/7154\/revisions\/8589"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/7180"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=7154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=7154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=7154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}