UX Days 2017 : tout ce qu’on a appris

Les 8 et 9 juin avaient lieu les UX days orga­ni­sés par la Flupa à Paris, l’oc­ca­sion pour nous d’échan­ger avec nos confrères passion­nés d’UX, et de nous enri­chir des diffé­rents retours d’ex­pé­rience.

Voici un résumé de tout ce que nous avons retenu de ces 2 jours.

Jour 1 : Les ateliers

La phase d’idéa­tion

Au cours de ces 4 ateliers, nous avons exploré l’idéa­tion en design sprint : une méthode qui permet de pratiquer le design thin­king en 5 jours et qui a conquis des entre­prises comme slack ou airbnb.

Voici les phases de dérou­le­ment de cette méthode :

1. Comprendre : les users, les usages, les points de fric­tion, le marché, la concur­rence
2. Imagi­ner des idées chacun de son côté, les sket­cher
3. Déci­der en passant par un vote silen­cieux pour plébis­ci­ter les idées qui conquièrent l’équipe et ensuite débattre
4. Proto­ty­per
5. Vali­der avec des tests utili­sa­teurs

Concrè­te­ment, les membres de l’équipe projet (4–5 personnes) travaillent dans un premier temps de manière indi­vi­duelle (step 1 et 2) pour conce­voir, lister des idées, et produire des sketchs rapides lors du deuxième jour. Le sprint accé­lère l’in­no­va­tion car il permet la maté­ria­li­sa­tion concrète des idées. Il encou­rage égale­ment la créa­tion : on assemble des idées, on les remixe, on les assemble de manière colla­bo­ra­tive. Lors de cet atelier nous avons mis en pratique les étapes 2 et 3 de cette métho­do­lo­gie, et nous ne manque­rons pas de l’ap­pliquer avec notre équipe !

La co-concep­tion

Nous avons abordé la ques­tion de la co-concep­tion, souvent utile lors du démar­rage de projets complexes.

Un bon atelier de co-concep­tion doit être :

• péda­go­gique
• ludique (chacun doit sortir de son rôle)
• centré sur l’ex­pé­rience utili­sa­teur via diffé­rents exer­cices

Nombre de parti­ci­pants à un atelier : 4 à 5 dans l’idéal dont 1 faci­li­ta­teur.

Le faci­li­ta­teur donne le rythme, il est le maître du temps, et fait en sorte que le groupe fonc­tionne. Sans juge­ment, il défi­nit le cadre et l’objec­tif. Tout commence par un ice brea­ker : un exer­cice simple pour mettre les parti­ci­pants à l’aise. Par exemple : chaque parti­ci­pant énonce 2 véri­tés et un mensonge sur lui, les autres parti­ci­pants doivent devi­ner quel est le mensonge.

Les diffé­rentes phases de la co-concep­tion :

1. Ouver­ture : On ouvre les possible, on exprime des idées, rien n’est inter­dit, et aucune critique ne doit être émise
2. Explo­ra­tion : On affine les idées, on critique, dans le but de faire émerge les idées les plus perti­nentes, les idées de second niveau étant souvent les plus abou­ties et les plus inté­res­santes.
3. Closing : On converge vers une solu­tion

Concer­nant les exer­cices à mettre en place, il est indis­pen­sable de les timer. On peut s’ins­pi­rer d’exer­cices clas­siques exis­tants comme le speed boat, ou alors en créer de nouveaux.

Retrou­vez l’en­semble des cartes présen­tées lors de l’ate­lier ici

Expé­rience map, diagnos­tique et idéa­tion

En groupe, nous avons réalisé l’ex­pé­rience map d’une partie du service Ameli.fr.

Un membre de l’équipe jouait le role d’un personna, tandis que les autres membres du groupe obser­vaient et notaient les réac­tions de l’uti­li­sa­teur,  afin de recueiller des infor­ma­tions étape par étape et les repor­ter sur une expé­rience map telle que celle que nous avons réali­sée ci-dessous :

Cette méthode simple permet de recueillir l’en­semble des réac­tions de l’user, et d’iden­ti­fier les points faibles du parcours utili­sa­teur. Ainsi, cet outil est idéal pour trou­ver des solu­tions concrètes à un probléme donné, sans pour autant revoir l’en­semble du parcours utili­sa­teur, on se concentre sur les points de fric­tion, les problemes iden­ti­fiés, et on y apporte des solu­tions UX ou tech­nique qui découlent de manière logique.

Appli­ca­tion de la méthode scrum pour construire un oiseau en légo

Oui, vous avez bien lu, la méthode scrum s’ap­plique à tout, même à la fabri­ca­tion d’un objet en Légo, un bon moyen d’ap­pré­hen­der cette méthode en douceur.

Le résul­tat est plutôt pas mal :

Jour 2 : les confé­rences !

Rendez-vous était pris au Beffroi de Montrouge pour une jour­née intense de confé­rences, il a fallu faire des choix, mais nous nous sommes dispat­chés pour avoir une vision d’en­semble et pour que l’en­semble des sujets évoqués puissent profi­ter à notre équipe, en fonc­tion des sensi­bi­li­tés de chacun.

Voici ce que nous avons retenu :

L’or­ga­ni­sa­tion est le maître mot de notre métier

La métho­do­lo­gie et l’or­ga­ni­sa­tion ont été un sujet majeur de cette jour­née de confé­rences. Comment être effi­cace et s’or­ga­ni­ser quand on a de multiples tâches à réali­ser ?

Il n’y a évidem­ment pas de recette miracle, mais quand on garde un item plus de 5 jours dans sa To Do quoti­dienne, alors il vaut mieux le suppri­mer.

Il faut tenir compte des person­na­li­tés dans la défi­ni­tion des person­nas

On a parfois tendance à défi­nir des person­nas un peu cari­ca­tu­rales, or cette cari­ca­ture est souvent contre-produc­tive dans la concep­tion d’un produit.

En effet, la déci­sion est liée à la person­na­lité de l’uti­li­sa­teur. Parfois on crée des person­nas sur la base du décla­ra­tif, mais le décla­ra­tif n’a pas valeur, et surtout, on ne peut pas faire de prédic­tif sur cette base là. Souvent, un utili­sa­teur va chan­ger ses décla­ra­tions a poste­riori.

De plus, de nombreux utili­sa­teurs peuvent être ambi­verts (pile au milieu entre deux compor­te­ments).

Alors comment faire pour évaluer la person­na­lité des utili­sa­teurs lors de ses recherches ? Il existe un certain nombre de ques­tion­naires qui permettent d’éva­luer la person­na­lité : le ques­tion­naire de Schwartz, le Big Five, le Neo-pi-R ou encore l’EMS 28.

Et évidem­ment, il faudra amen­der ses person­nas avec les traits de person­na­lité si l’on veut pouvoir faire du prédic­tif.

Collec­ter des insight sur son marché : ce n’est pas si compliqué

Les réseaux sociaux et Google Forms rendent la collecte de données utili­sa­teurs très facile, pour connaître son marché et ses usage.

Voici quelques conseils avant de lancer votre étude :

• utili­ser la méthode de la complé­tion de phrase
• Faire en sorte de quali­fier des données quali­ta­tives et non quan­ti­ta­tives
• clôtu­rez rapi­de­ment pour ne pas crou­ler sous un nombre trop impor­tant de données quali
• utili­sez des logi­ciels pour analy­ser les data (comme SPSS 23)
• établis­sez une codi­fi­ca­tion et une bible de codi­fi­ca­tion
• allez cher­cher la bonne cible grâce aux groupes Face­book
• limi­tez le nombre de carac­tères pour les réponses aux ques­tions ouvertes
• pré-testez votre étude avant de la lancer
• n’hé­si­tez pas à utili­ser des phrases quasi iden­tiques

C’est à vous de jouer main­te­nant !

L’UX est un enjeu majeur de l’IoT

Les prévi­sions annoncent 33 millions de devices connec­tés en France à l’ho­ri­zon 2020, tous les objets du quoti­dien seront possi­ble­ment connec­tés demain, et on peut voir l’IoT comme une 4eme révo­lu­tion indus­trielle.

On distingue 3 caté­go­ries d’IoT :

• les objets direc­te­ment connec­tés (match)
• les objets connec­tés indi­rec­te­ment, via un device
• les objets connec­tés loca­le­ment à d’autres objets

Le soft­ware devient une partie de plus en plus prégnante de l’Iot, ce domaine d’ac­ti­vité n’est désor­mais plus réservé aux desi­gners indus­triels, notam­ment grâce aux appli­ca­tions qui servent d’in­ter­face aux objets connec­tés. Nous avons des devices unique­ment connec­tés via une app, des devices avec un écran (mirroir de l’app), nous avons aussi des devices avec peu d’op­tions et des possi­bi­li­tés éten­dues inapp.

Dans tous les cas de figure, les inter­faces de l’app et du device doivent être cohé­rentes : graphique­ment, dans le wording, et avoir une UX cohé­rente.

On note égale­ment que la connec­ti­vité de l’objet doit avoir une valeur ajou­tée, d’au­tant plus que les glitch sont assez fréquents et rendent certains objets connec­tés plus diffi­ciles à utili­ser et moins fiables qu’un objet non connecté.

Il faut mettre le temps en scène

La percep­tion du temps a une large impor­tance dans l’ex­pé­rience utili­sa­teur, la ques­tion qui se pose régu­liè­re­ment dans notre métier est la suivante : comment limi­ter l’im­pact du temps d’at­tente.

De plus en plus, l’UX s’ins­pire du jeu vidéo avec la tech­nique du Flow. L’UX s’ins­pire du Flow très régu­liè­re­ment pour raccour­cir les temps d’at­tente des users : l’achat One-Click d’ama­zon ou encore l’achat de billet en 3 clics de train­line en sont un bon exemple.

Dans certains domaines l’im­mé­dia­teté est mal perçue par l’uti­li­sa­teur, comme par exemple pour les compa­ra­teurs de billets d’avion, les test utili­sa­teurs ont démon­tré qu’un simple loading screen donne à l’uti­li­sa­teur l’im­pres­sion qu’il y a vrai­ment une recherche en cours, et offre une meilleure expé­rience utili­sa­teur. La mise en scène du temps dans l’ap­pli­ca­tif peut avoir une vraie valeur ajou­tée pour l’uti­li­sa­teur, on pense par exemple aux parcs Disney, qui mettent en scène le temps d’at­tente aux attrac­tions, pour sembler plus court à l’uti­li­sa­teur, pour l’oc­cu­per.

La percep­tion du temps n’est pas univer­selle elle dépend du contexte et des personnes, un cross sell bien valo­risé peut détour­ner l’at­ten­tion de l’at­tente par exemple. On peut égale­ment susci­ter l’émo­tion par le design, ou rendre une expé­rience néga­tive posi­tive (comme le petit jeu que propose Google Hors connexion). On peut égale­ment utili­ser des barres de progres­sion, animer des loaders, trans­for­mer un CTA en loader…

UX desi­gners, vous savez ce qu’il vous reste à faire : repre­nez le contrôle du temps !

Il faut en place des process pour mieux se comprendre entre clients et pres­ta­taires

On connait tous cela : un client demande l’im­pos­sible, ou une agence qui répond par la néga­tive. Cela est dû à des facteurs humains, et à une utili­sa­tion de vocable diffé­rent, notam­ment en phase d’avant-vente.

L’ex­pé­rience utili­sa­teur de la rela­tion client-agence peut être opti­mi­sée en suivant un work­flow simple :

1. La plani­fi­ca­tion

– défi­nir le péri­mètre

– refor­mu­ler la demande initiale

– évan­gé­li­ser notre domaine

– défi­nir les livrables

– défi­nir le cadre d’in­ter­ven­tion (ce que l’on va faire, mais égale­ment ce que l’on ne va pas faire)

– défi­nir les points de contact

– défi­nir le plan­ning et l’équipe

2. L’ex­plo­ra­tion

– une réunion avec l’en­semble de l’équipe projet est préco­ni­sée

– défi­ni­tion du devis (souvent trop cher pour le client)

– démar­rage projet (souvent moyen­ne­ment fidèle à ce qui a été évoqué au départ)

– itéra­tions sur le design

– resti­tu­tion (souvent déce­vante pour le client, tout n’a pas pu être anti­cipé, manque de moyens…)

– factu­ra­tion

– entre­tien de fin de projet, pour dres­ser un bilan

Voici quelques conseils pratiques pour amélio­rer les rela­tions de l’agence avec son client :

– démon­trer sa valeur et rassu­rer

– itérer

– colla­bo­rer de manière accrue

– défi­nir les attentes du client de manière claire

– décou­per les lots dans les devis

– éditer une charte de trans­pa­rence entre client et agence

– défi­nir un point d’an­crage unique de chaque côté

– assu­rer des livrai­sons régu­lières

La recette pour qu’UX et scrum ne soit pas un fiasco

L’ap­pli­ca­tion de la méthode scrum est souvent vécue comme un trau­ma­tisme, il y a plusieurs raisons à cela :

– scrum est souvent vue comme une solu­tion miracle

– le product owner ne joue pas correc­te­ment son rôle

– la résis­tance au chan­ge­ment

Voici 8 ingré­dients pour réus­sir à appliquer scrum en UX :

– relire le scrum­guide régu­liè­re­ment et former les équipes

– favo­ri­ser une vraie colla­bo­ra­tion

– opter pour une défi­ni­tion de “done” qui a le même sens pour tous les membres de l’équipe

– accep­ter l’im­per­fec­tion des livrables

– docu­men­ter sa réflexion de concep­tion

– parti­ci­per à l’écri­ture des user stories en les rappro­chant des person­nas

– time­boxer les recherches

– prendre conscience des enjeux liés au chan­ge­ment

Le design sprint permet d’évi­ter les erreurs

Le design sprint est une métho­do­lo­gie de design rapide et itéra­tive qui permet de trou­ver une ou des solu­tions digi­tales à un problème donné rapi­de­ment.

Le process est le suivant : Idea > Learn > Idea > Learn.

Et non pas : Idea > Build > Lauch > Learn

Cette métho­do­lo­gie qui permet des “échecs rapides” et donc des retours rapides se plani­fie sur 5 jours :

– En Amont : Bien prépa­rer sa semaine en se fixant les objec­tifs et les livrables atten­dus

– Jour 1 : Comprendre le problème (Persona/Mind­map)

– Jour 2 : Sket­cher des idées papiers (Méthodes Crazy8, Group Critics, Story­board)

– Jour 3 : Déci­der de la ou des solu­tions à proto­ty­per et sur quel support (Vote pastille)

– Jour 4 : Proto­ty­per (partage des tâches, travail d’équipe)

– Jour 5 : Tester : durant la phase de test il est impor­tant qu’il y ait 2 personnes avec chacune un rôle précis : une qui inter­viewe et l’autre qui observe, prends des notes.

Le retour d’ex­pé­rience est probant :

– + d’em­pa­thie

– pouvoir donner la bonne info à l’user au bon moment

– une meilleurs info/un bon wording permet de lever les freins des utili­sa­teurs

– fonc­tion­na­li­tés testées

– La métho­do­lo­gie permet d’élar­gir des champs au niveau de la concep­tion/créa­ti­vité

Le tri par carte peut être utilisé de manière créa­tive

Voici 10 façons créa­tives d’uti­li­ser le tri par carte :

1. Pour comprendre une iden­tité : attri­buer des adjec­tifs (ce que doit/ne doit pas reflé­ter la marque, ….), cette méthode peut être un outil d’aide à la déci­sion marke­ting

2. Pour tester la signi­fi­ca­tion des symboles : véri­fier que les user comprennent les icons, on anti­cipe alors les problèmes de compré­hen­sions sur des picto notam­ment

3. Pour défi­nir les accès rapides les plus utiles d’un site : quels liens sont les plus impor­tants pour un utili­sa­teur ?
4. Pour prendre des déci­sion de concep­tua­li­sa­tion collec­tive, le tri par carte peut faire office de système de vote
5. Pour faire parti­ci­per toute l’équipe à la hiérar­chi­sa­tion des tâches
6. Pour mener une étude de marché : en direct avec les clients pour comprendre ce qu’ils veulent

7. Pour mener une démarche de crowd­fun­ding : rassem­bler des idées de contenu

8. Pour faire des recherches socio­lo­gique

9. Pour caté­go­ri­ser tout et n’im­porte quoi

10. Créer ses propres usages créa­tifs

Conce­voir un guide de concep­tion

Les inter­faces évoluent aujourd’­hui, et la ques­tion de la mise à jour d’un guide de réfé­rence est centrale dans la conduite d’un projet web sur le long terme.

Le design système, style guide ou encore guide de concep­tion sont un ensemble d’élé­ments qui servent à la concep­tion d’un produit, c’est la librai­rie des compo­sants qui consti­tuent l’in­ter­face.

Un guide de concep­tion doit être « vivant » c’est à dire qu’il doit évoluer dès qu’un élément est modi­fié, cette tenue à jour est un enjeu majeur. Il faut en prendre soin pour avoir l’avan­tage de le parta­ger, l’évan­gé­li­ser au sein d’une équipe et tout au long d’un projet.

Un style guide contient diffé­rents éléments de base (couleurs, typo­gra­phie, pop-in, …) mais peut conte­nir aussi d’autres éléments bien plus spéci­fiques (ex : illus­tra­tions et graphiques chez google ou shopify), comme le wording et le ton que le service client doit employer avec les clients de la marque, ou des indi­ca­tions tech­no­lo­giques.

Plusieurs métho­do­lo­gies peuvent être utili­sées pour faci­li­ter la concep­tion en design système : l’ato­mic design, le design pattern, les frame­works… Travailler avec un guide de concep­tion permet de conver­ger les points de vues entre déve­lop­peur et desi­gner, et côté client, c’est une vraie bible.

Conce­voir en Atomic Design, c’est l’idéal

L’objec­tif de l’ato­mic design est de « Sortir du design par écran », qui n’est plus forcé­ment toujours adap­tée à la complexité des inter­faces et au main­tien d’une appli­ca­tion. Il existe diffé­rentes taille d’écran, diffé­rents devices, donc pourquoi conce­voir écran par écran ?

L’Ato­mic design consiste à créer des compo­sants, que l’on assemble :

– Les atomes (couleurs, typo, illus­tra­tions)

– Les molé­cules sont des assem­blages de plusieurs atomes (ce qui est d’ordre fonc­tion­nel, comme un bouton)

– Les orga­nismes sont des assem­blages de plusieurs molé­cules

– Le template est le sque­lette de page

– La page est un template qui a évolué avec du contenu réel

L’Ato­mic design permet d’avoir une construc­tion, une cohé­rence commune, un « air de famille » entre chaque page. Cela permet aussi de conce­voir un style guide vivant, « living style guide », qui sera partagé avec les déve­lop­peurs et toute l’équipe.

Concrè­te­ment, cela fonc­tionne un peu comme des légos : les molé­cule sont les légos en pièces sépa­rées, quand on les assemble on crée des molé­cules, puis des orga­nismes.

Si vous souhai­tez en savoir plus sur cette démarche, nous avons rédigé un article à ce sujet.

Le Pair Design : conce­voir à deux, c’est mieux

Cette métho­do­lo­gie est parti­cu­liè­re­ment inté­res­sante lors de la géné­ra­tion/concep­tion des idées. C’est un travail en équipe, sous formes de séance rapide, côte à côte.

Comment cela fonc­tionne ?

On défi­nit 2 rôles dans le binôme : un « gene­ra­tor » et un « synthe­si­zer ».

Le « gene­ra­tor » (le conduc­teur) a pour mission de géné­rer et tester des idées, faire des sketch, justi­fier ses choix. Le « synthe­si­zer » (l’ob­ser­va­teur) a pour mission de garder une vision sur l’en­semble du travail, faire des retours (feed­back), poser de ques­tions afin d’amé­lio­rer les idées du gene­ra­tor.

Cette métho­do­lo­gie permet d’échan­ger rapi­de­ment sur une idée avant d’en chan­ger et d’ex­plo­rer beau­coup d’idées (une bonne idée se trouvent dans l’ex­plo­ra­tion de beau­coup d’idée). Elle offre égale­ment l’avan­tage de travailler en équipe en harmo­nie et non de manière frag­men­tée.

Comment le mettre en place au sein d’un projet ?

– l’ap­pren­tis­sage de cette méthode se fait peu à peu

– on défi­nit les rôles en se deman­dant qui est le plus fort en gene­ra­tor/synthe­si­zer

– agen­cer les bureaux de façon à travailler côte à côte lors de ces sessions

Et les profils du binôme ?

Le plus géné­ra­le­ment ce sont 2 desi­gners, mais il est tout aussi inté­res­sant de consti­tuer le binôme d’un desi­gner et un déve­lop­peur front-end.

En bref, c’était très enri­chis­sant, et on aime­rait que ce type d’évé­ne­ment soit plus fréquent ! A l’an­née prochaine 🙂