https://zol.fr/blog/assets/js/66c865fc.adcc803f.js

1"use strict";(self.webpackChunkreact_native_blog=self.webpackChunkreact_native_blog||[]).push([[7079],{1409:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>o,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>l,toc:()=>u});var n=t(5893),i=t(1151);const r={slug:"agence-ux-ui",title:"ZOL, l\u2019agence UX/UI, et non ce ne sont pas des lettres au Scrabble",authors:["agatheL"],tags:["design","UX"],date:new Date("2024-03-21T11:00:00.000Z")},a=void 0,l={permalink:"/blog/agence-ux-ui",source:"@site/blog/agence-ux-ui/index.md",title:"ZOL, l\u2019agence UX/UI, et non ce ne sont pas des lettres au Scrabble",description:"L\u2019UX et l\u2019UI, ou l\u2019Exp\xe9rience Utilisateur et l\u2019Interface Utilisateur, s'int\xe9ressent aux utilisateurs (sans rire). On va plus loin que le d\xe9veloppement de sites, d\u2019applications mobiles, \u2026 On s\u2019interroge sur l'utilisateur final, en se positionnant user centric : le mettre au centre de toute la conception, d\xe8s le d\xe9marrage d\u2019un projet !",date:"2024-03-21T11:00:00.000Z",formattedDate:"21 mars 2024",tags:[{label:"design",permalink:"/blog/tags/design"},{label:"UX",permalink:"/blog/tags/ux"}],readingTime:6.755,hasTruncateMarker:!0,authors:[{name:"Agathe",title:"Chipie color\xe9e",imageURL:"https://images.intra.zol.fr/blog/ALS_small.webp",key:"agatheL"}],frontMatter:{slug:"agence-ux-ui",title:"ZOL, l\u2019agence UX/UI, et non ce ne sont pas des lettres au Scrabble",authors:["agatheL"],tags:["design","UX"],date:"2024-03-21T11:00:00.000Z"},unlisted:!1,prevItem:{title:"Le mythe de la charte graphique, pourquoi en d\xe9finir une ?",permalink:"/blog/charte-graphique-pourquoi"},nextItem:{title:"Votre E-commerce en Shopify vous agace ?",permalink:"/blog/e-commerce-shopify"}},o={authorsImageUrls:[void 0]},u=[{value:"La recherche utilisateurs : la base neutre de tout projet\xa0",id:"la-recherche-utilisateurs--la-base-neutre-de-tout-projet",level:2},{value:"L\u2019optimisation strat\xe9gique de l\u2019ergonomie des interfaces",id:"loptimisation-strat\xe9gique-de-lergonomie-des-interfaces",level:2},{value:"L\u2019atelier conception\xa0",id:"latelier-conception",level:3},{value:"Le tri de cartes : la voyance du site web",id:"le-tri-de-cartes--la-voyance-du-site-web",level:3},{value:"L'exp\xe9rience map : devenir le Joe du parcours client",id:"lexp\xe9rience-map--devenir-le-joe-du-parcours-client",level:3},{value:"Le test utilisateur : mieux vaut pr\xe9venir que gu\xe9rir\xa0",id:"le-test-utilisateur--mieux-vaut-pr\xe9venir-que-gu\xe9rir",level:3}];function c(e){const s={a:"a",em:"em",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",ul:"ul",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s.p,{children:"L\u2019UX et l\u2019UI, ou l\u2019Exp\xe9rience Utilisateur et l\u2019Interface Utilisateur, s'int\xe9ressent aux utilisateurs (sans rire). On va plus loin que le d\xe9veloppement de sites, d\u2019applications mobiles, \u2026 On s\u2019interroge sur l'utilisateur final, en se positionnant user centric : le mettre au centre de toute la conception, d\xe8s le d\xe9marrage d\u2019un projet !"}),"\n",(0,n.jsx)(s.p,{children:"L\u2019avantage ? Cette d\xe9marche garantit de r\xe9pondre \xe0 de vrais besoins et \xe9vite de d\xe9velopper des fonctionnalit\xe9s qui ne seront pas utilis\xe9es. De fait, vos co\xfbts sont optimis\xe9s et r\xe9duits \xe0 l\u2019essentiel, \xe7a vous permet aussi de fid\xe9liser des consommateurs, notamment ceux qui vont utiliser le service, parce que ce sera pens\xe9 100% pour eux en r\xe9pondant \xe0 leur besoin \xe0 l\u2019instant T ; royal.\xa0"}),"\n",(0,n.jsx)(s.p,{children:"L\u2019UX/UI c\u2019est une branche de m\xe9tiers avec plein de sous-cat\xe9gories : des corps de m\xe9tiers sp\xe9cialis\xe9s en recherche d\u2019informations sur les utilisateurs, d\u2019autres dans le writing \xe9ditorial adapt\xe9 aux utilisateurs (comment leur parler), d\u2019autres plus sp\xe9cialis\xe9s sur les notions d\u2019architecture de l\u2019information (aka la structure de site la plus fluide pour les utilisateurs), et puis d\u2019autres encore dans la notion de conception d\u2019interfaces : chaque corps de m\xe9tier s\u2019int\xe9resse aux personnes et \xe0 la marque."}),"\n",(0,n.jsx)(s.h2,{id:"la-recherche-utilisateurs--la-base-neutre-de-tout-projet",children:"La recherche utilisateurs : la base neutre de tout projet\xa0"}),"\n",(0,n.jsx)(s.p,{children:"Grosso merdo, c\u2019est une grosse enqu\xeate, le but \xe9tant de d\xe9finir des profils types des personnes \xe0 qui le service est adress\xe9 !"}),"\n",(0,n.jsx)(s.p,{children:"Pour \xe7a il faut rechercher des donn\xe9es, faire une \xe9tude de march\xe9 plus aboutie en allant interroger les consommateurs pour recueillir des informations plus pr\xe9cises sur leurs usages : une personne X qui a une vie X, est amen\xe9e \xe0 utiliser le produit ou le service dans un contexte X pour r\xe9aliser un objectif X. En suivant cette id\xe9e, on vient collecter les informations de mani\xe8re qualitative et/ou quantitative."}),"\n",(0,n.jsx)(s.p,{children:"Une fois les donn\xe9es r\xe9colt\xe9es, on analyse tout \xe7a, et on dessine les profils types qui correspondent \xe0 la cible de tel service (4 \xe0 5 est l'id\xe9al pour avoir une cible compl\xe8te). Ensuite vient la d\xe9finition des cas d'usages et des sc\xe9narios associ\xe9s, pour chaque profil"}),"\n",(0,n.jsx)(s.p,{children:"Exemple de profil type et de son cas d'usage : Jean-Eude utilise l\u2019app de drive en revenant du boulot vers 17h mais parfois il doit aller chercher les enfants \xe0 l\u2019\xe9c

1ole, et donc doit avoir une flexibilit\xe9 des horaires propos\xe9s par la commande.\xa0"}),"\n",(0,n.jsx)(s.p,{children:"Une fois tous les cas d\u2019usage d\xe9finis, il faut se demander comment mon service peut \xeatre utile, on traduit cette notion en fonctionnalit\xe9s.\xa0"}),"\n",(0,n.jsx)(s.p,{children:"M\xeame exemple avec Jean-Eudes : ici la fonctionnalit\xe9 du drive c'est de pouvoir choisir et modifier ses horaires facilement"}),"\n",(0,n.jsx)(s.p,{children:"Les fonctionnalit\xe9s viennent apr\xe8s le choix de la solution (app mobile, site web, \u2026), grosso merdo :"}),"\n",(0,n.jsxs)(s.ol,{children:["\n",(0,n.jsxs)(s.li,{children:["\n",(0,n.jsx)(s.p,{children:"On d\xe9finit le profil"}),"\n"]}),"\n",(0,n.jsxs)(s.li,{children:["\n",(0,n.jsx)(s.p,{children:"On liste ses besoins \xe0 travers des cas d'usages"}),"\n"]}),"\n",(0,n.jsxs)(s.li,{children:["\n",(0,n.jsx)(s.p,{children:"On d\xe9finit la solution globale (ex du drive : besoin d'une app car en mobilit\xe9)"}),"\n"]}),"\n",(0,n.jsxs)(s.li,{children:["\n",(0,n.jsx)(s.p,{children:"On liste les fonctionnalit\xe9s associ\xe9es aux cas d'usage"}),"\n"]}),"\n"]}),"\n",(0,n.jsx)(s.h2,{id:"loptimisation-strat\xe9gique-de-lergonomie-des-interfaces",children:"L\u2019optimisation strat\xe9gique de l\u2019ergonomie des interfaces"}),"\n",(0,n.jsx)(s.p,{children:"Une fois que la forme globale du produit est connue, il faut r\xe9fl\xe9chir aux interfaces, et \xe9videmment, au parcours utilisateur."}),"\n",(0,n.jsx)(s.p,{children:"En gros : j\u2019ai besoin de r\xe9aliser une t\xe2che, et pour ce faire, je vais arriver sur le produit par la porte A et j\u2019en sors par la porte B, entre A et B qu\u2019est ce qui se passe, qu\u2019est ce que je fais.\xa0"}),"\n",(0,n.jsx)(s.p,{children:"Ce questionnement est \xe0 faire pour chaque cas d\u2019usage, chaque profil type d\xe9fini.\xa0"}),"\n",(0,n.jsx)(s.p,{children:"Normalement cette \xe9tape se d\xe9finit avec les utilisateurs : on r\xe9unit les utilisateurs et on leur pr\xe9sente le sc\xe9nario d\u2019usage (exemple le drive pour Jean-Eudes) en d\xe9finissant ensemble comment ils font face \xe0 ce cas. Cela permet de compl\xe9ter la recherche utilisateurs, et vient valider les donn\xe9es r\xe9colt\xe9es en interrogeant les utilisateurs directement en situation r\xe9elle."}),"\n",(0,n.jsx)(s.p,{children:"Le parcours utilisateur c\u2019est la colonne vert\xe9brale du produit, c\u2019est le point de d\xe9part pour d\xe9finir les positions des fonctionnalit\xe9s, la navigation, l'arborescence du site, la conception du produit, \u2026\xa0"}),"\n",(0,n.jsx)(s.h3,{id:"latelier-conception",children:"L\u2019atelier conception\xa0"}),"\n",(0,n.jsx)(s.p,{children:"C\u2019est un atelier pendant lequel on con\xe7oit le produit avec la base de donn\xe9es r\xe9colt\xe9es et des cas d\u2019usage d\xe9finis, on brainstorme sur les fonctionnalit\xe9s, et on sc\xe9narise les diff\xe9rents parcours utilisateurs notamment avec le tri de cartes et l'exp\xe9rience map.\nLe St Graal c\u2019est de le faire avec un max de parties prenantes pour une vision holistique et percutante (UX/UI, clients, utilisateurs, SEO si tri de cartes, et pour les fonctionnalit\xe9s : un lead tech)."}),"\n",(0,n.jsx)(s.h3,{id:"le-tri-de-cartes--la-voyance-du-site-web",children:"Le tri de cartes : la voyance du site web"}),"\n",(0,n.jsxs)(s.p,{children:["Le tri de cartes (non ce n\u2019est pas Madame Irma, mais presque), est un processus permettant de pouvoir optimiser l\u2019arborescence et la hi\xe9rarchie de contenus sur le site web.\nOn se munit de cartes sur lesquelles sont \xe9crites les noms de toutes les cat\xe9gories.\n",(0,n.jsx)(s.em,{children:"Par exemple : en E-commerce vont \xeatre \xe9crites \u201cle frais\u201d et \u201cles viandes\u201d ou encore des sous-cat\xe9gories comme \u201cle fromage\u201d ou bien \u201cla volaille\u201d, chaque carte reprenant l\u2019id\xe9e d\u2019une cat\xe9gorie ou d\u2019une sous-cat\xe9gorie."})]}),"\n",(0,n.jsx)(s.p,{children:"L\u2019objectif c\u2019est de demander aux utilisateurs de ranger l'arborescence selon leur propre sens de navigation. Souvent cet atelier se fait avec 10 utilisateurs et se conclut par la mise en commun des arborescences et la d\xe9finition commune de l\u2019arborescence selon les diff\xe9rents r\xe9sultats obtenus et le SEO."}),"\n",(0,n.jsx)(s.h3,{id:"lexp\xe9rience-map--devenir-le-joe-du-parcours-client",children:"L'exp\xe9rience map : devenir le Joe du parcours client"}),"\n",(0,n.jsx)(s.p,{children:"C\u2019est un outil qui permet de cartographier toute l\u2019utilisation du service/produit :\xa0"}),"\n",(0,n.jsxs)(s.ol,{children:["\n",(0,n.jsxs)(s.li,{children:["\n",(0,n.jsx)(s.p,{children:"Quelles sont les actions r\xe9alis\xe9es par les utilisateurs"}),"\n"]}),"\n",(0,n.jsxs)(s.li,{children:["\n",(0,n.jsx)(s.p,{children:"Quels sont les probl\xe8mes rencontr\xe9s avec ces actions"}),"\n"]}),"\n",(0,n.jsxs)(s.li,{children:["\n",(0,n.jsx)(s.p,{children:"Les \xe9motions li\xe9es \xe0 ces actions et \xe0 ces probl\xe8mes"}),"\n"]}),"\n",(0,n.jsxs)(s.li,{children:["\n",(0,n.jsx)(s.p,{children:"Des verbatim qui humanisent la d\xe9marche, et qui permettent une vraie compr\xe9hension du parcours"}),"\n"]}),"\n",(0,n.jsxs)(s.li,{children:["\n",(0,n.jsx)(s.p,{children:"Des opportunit\xe9s : comment aider l\u2019utilisateur avec votre produit \xe0 r\xe9aliser son action sans \xeatre bloqu\xe9 par une probl\xe9matique ?"}),"\n"]}),"\n"]}),"\n",(0,n.jsx)(s.h3,{id:"le-test-utilisateur--mieux-vaut-pr\xe9venir-que-gu\xe9rir",children:"Le test utilisateur : mieux vaut pr\xe9venir que gu\xe9rir\xa0"}),"\n",(0,n.jsx)(s.p,{children:"Il s\u2019active \xe0 diff\xe9rents moments du projet :\xa0"}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsxs)(s.li,{children:["\n",(0,n.jsx)(s.p,{children:"En mode audit/conseil (

1dans le cas o\xf9 les utilisateurs se d\xe9sengagent de l\u2019outil digital) : le test permet de r\xe9colter des informations \xe0 la source sur ce qu\u2019il se passe quand les utilisateurs utilisent le produit. On regarde alors avec eux ce qu\u2019ils font et on leur demande de commenter ce qu\u2019il se passe pour eux \xe0 chaque action de leur part sur l\u2019outil, on r\xe9colte les r\xe9flexions qu\u2019ils se font, et on regarde m\xeame l\xe0 o\xf9 ils regardent (un peu border psychopathe). Chaque sc\xe9nario est alors mis en place et on analyse comment se comportent les utilisateurs dans tous les sc\xe9narios."}),"\n"]}),"\n",(0,n.jsxs)(s.li,{children:["\n",(0,n.jsx)(s.p,{children:"En phase de conception : il permet de valider les hypoth\xe8ses de conception, on r\xe9alise le test sur les prototypes qui ont \xe9t\xe9 cr\xe9\xe9s depuis les sc\xe9narios d\xe9finis, et on fait tester les parcours."}),"\n"]}),"\n",(0,n.jsxs)(s.li,{children:["\n",(0,n.jsxs)(s.p,{children:["En maquettage : Pour tester l\u2019impact de ",(0,n.jsx)(s.a,{href:"https://zol.fr/blog/charte-graphique-pourquoi",children:"la charte graphique"})," mise en place, et v\xe9rifier sa coh\xe9rence, on teste les utilisateurs sur les prototypes et la nouvelle charte.\xa0"]}),"\n"]}),"\n",(0,n.jsxs)(s.li,{children:["\n",(0,n.jsx)(s.p,{children:"Finalement, une fois que le produit est en production, on r\xe9alise des tests r\xe9guliers pour v\xe9rifier que le service r\xe9pond aux besoins, et si ce n\u2019est pas le cas, on ajuste en suivant la m\xeame proc\xe9dure !"}),"\n"]}),"\n"]}),"\n",(0,n.jsx)(s.p,{children:"En conclusion, l'UX/UI est bien plus qu'une simple interface digitale, c'est l'art de s'assurer que la solution digitale est v\xe9ritablement utile. Mais qu'est-ce que cela signifie, \xeatre utile ? Cela implique de correspondre aux besoins r\xe9els des utilisateurs, de les comprendre et de les int\xe9grer dans la conception de l'interface. En mettant l'utilisateur au c\u0153ur du processus, on s'assure de l'adh\xe9sion et de la r\xe9ussite de la transition digitale."}),"\n",(0,n.jsx)(s.p,{children:"L'interface digitale ne se limite pas \xe0 la fonctionnalit\xe9 et \xe0 l'ergonomie, elle est aussi un vecteur d'\xe9motion. Au contraire de ce que l'on pourrait penser, le digital offre une opportunit\xe9 unique d'apporter de l'\xe9motion dans l'utilisabilit\xe9. Car plus l'utilisateur ressent quelque chose en interagissant avec une interface, plus il y revient avec plaisir. Ainsi, une interface qui va au-del\xe0 de l'ergonomie et du fonctionnement, et qui est \xe9galement attrayante, a toutes les chances de rencontrer le succ\xe8s."})]})}function d(e={}){const{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},1151:(e,s,t)=>{t.d(s,{Z:()=>l,a:()=>a});var n=t(7294);const i={},r=n.createContext(i);function a(e){const s=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),n.createElement(r.Provider,{value:s},e.children)}}}]);