Articles

UI : pourquoi concevoir sans couleur ?

A l’heure du Dark Mode, les designers sont toujours plus tournés vers la conception d’interfaces qui priorisent le confort des utilisateurs et les enjeux d’accessibilité. Le choix des couleurs, faisant partie intégrante de tout design system, est crucial pour assurer une expérience utilisateur inclusive et efficace. Et si finalement nous ne conservions que le noir et le blanc ?

Dark mode et Dark UI

Déjà répandu chez les développeurs et proposé par un nombre croissant de services, le Dark Mode donne naissance à la « Dark UI ». Pour preuve, il est maintenant disponible sur iOS13 et Google propose déjà un thème « dark » de son design system Material. Au-delà des considérations purement esthétiques, deux avantages d’ordre pratique sont reconnus :

  • Les interfaces sombres sont plus reposantes pour la lecture sur écran ;
  • La charge mentale est moins élevée lorsque les écrans présentent un grand nombre de contenus par exemple.

Par ailleurs, l’utilisation de la couleur dans ces interfaces sombres permet de mettre plus facilement en avant des composants ou des messages importants. Dans ce court article, l’auteur présente notamment comment l’utilisation du dark mode leur permet de simplifier une interface tout préservant une hiérarchisation des informations facilement perceptible :

Ui 1

Heydon Pickering et la conception en noir et blanc

Heydon Pickering, designer reconnu dans le monde de l’accessibilité et plus largement de l’inclusion, va plus loin que le Dark Mode en utilisant uniquement le noir et le blanc dans ses designs. Il a notamment présenté son approche radicale lors de la conférence Why Every Interface Should Be Black And White. Il aborde différents sujets récurrents lorsqu’il s’agit de Dark UI tels que la gestion des contrastes et l’implémentation du mode nuit des interfaces, mais il présente également quelques avantages spécifiques dans l’utilisation du noir et blanc dans son processus de conception. 

Son approche permet notamment de développer la créativité. Pour découvrir le travail d’Heydon Pickering, je vous recommande ces deux ressources :  

Les contraintes promeuvent la créativité

Nous pouvons bien évidemment utiliser les couleurs à des fins décoratives. Mais comment dynamiser une page sans utiliser de couleur ? L’idée ici est de se challenger afin de trouver de nouveaux moyens, de nouveaux mécanismes, afin de dynamiser une mise en page sans avoir recours à la couleur. 

Dans un exemple, le designer présente des cartes aux formes différentes :

Ui 2

Exemple partagé par Heydon Pickering lors de sa conférence.

In fine, ce n’est pas qu’une contrainte

Les couleurs sont des moyens parfois efficaces pour faire passer des informations, mais s’avèrent quelques fois contre-productives car porteuses de biais cognitifs (les goûts et les couleurs!). A travers la conception en noir et blanc, l’occasion est donnée au concepteur de se libérer de ces contraintes et facilités afin d’explorer de nouvelles voies. 

Au-delà de l’affirmation « Toutes les interfaces devraient être en noir et blanc » (qui peut paraître au premier abord provocatrice), la démarche est avant tout pragmatique. Le designer doit trouver la meilleure manière de transmettre de l’information. Heydon Pickering a d’ailleurs plusieurs fois démontré, au cours de ses travaux, comment la recherche de nouveaux designs l’a amené à l’exploration de solutions techniques de mise en œuvre innovantes. Il partage sur ce sujet des trouvailles plus ludiques basées sur des jeux de formes et imprégnées d’expérimentations de technologies frontend (notamment svg, et css). 

Le designer peut ainsi faire le pont entre conception graphique et conception technique. Ainsi la démarche consistant à faire un premier jet de son interface en noir et blanc est parfois expérimentale mais elle reste toujours très réaliste techniquement.

 

Être indépendant de la couleur

Le concept d’un design qui fonctionne sans couleur est très important en accessibilité puisque certains utilisateurs ne peuvent tout simplement pas percevoir les couleursIl s’agit des non-voyants bien évidemment, mais pas uniquement. Des utilisateurs malvoyants, selon leur pathologie, vont percevoir uniquement le noir et blanc. Enfin, d’autres utilisateurs ne vont pas distinguer correctement les couleurs, ou ne vont avoir qu’un spectre limité (les daltoniens par exemple). 

Comme le dit Heydon Pickering : « Avec une approche en noir et blanc vous ne réfléchissez donc plus en termes de couleurs, mais plutôt en termes de signification. » 

Un exemple simple : comment transmettre une notion d’alerte sans avoir recours au rouge ? 

Ui 3

Vous allez peut-être ajouter une icône.

Ui 4

Maintenant, comment différencier des icônes qui transmettent des informations différentes ?

Ui 5

Vous allez utiliser des icônes de formes différentes. 

Ui 6

En noir et blanc, l’information est toujours perçue par les utilisateurs.

Ui 7

Cette démarche s’applique des concepts les plus simples (les icônes) aux plus complexes (la transmission des informations dans les histogrammes). Même sans être expert en accessibilité, en faisant abstraction de la couleur, vous allez résoudre des problématiques qui sont souvent des challenges pour des utilisateurs en situation de handicap. Car, comme évoqué précédemment, certains utilisateurs ne perçoivent pas les couleurs. Il est important que les informations soient comprises par tous. Si une information est transmise, elle doit être comprise, sans ambiguïté par n’importe quel utilisateur.

Animer, c’est donner vie

Acheter en ligne peut être une expérience extrêmement frustrante. Attendre le chargement en continu de pages, faire défiler de longues listes de produits, savoir ce qu’il y a dans son panier ou connaître l’état actuel de sa commande… c’est épuisant. En plus de cela, l’animation peut facilement ressembler à un dessin animé des années 1930. Mais en utilisant l’animation correctement, on peut atténuer cette frustration. En diminuant les distractionsnous facilitons la conversion et procurons une expérience plus agréable à l’utilisateur ; l’animation est en train de devenir la base de la conception d’une interaction efficace. 

Ux gif 1

UI de type dessin animé lors du processus de commande d’une pizza, par Cuberto 

Introduire du mouvement dans la conception d’une UI
 

La vie est un mouvement perpétuel. Nous marchons, courons ou pédalons, et ce qui nous entourent bougent (souvent) de façon prévisible. Rien d’étonnant, donc, à ce que nous soyons incapables d’imaginer notre quotidien sans mouvement. Notre œil capte les objets en mouvement, presque comme un réflexe. Nous pouvons mettre ce principe à profit en introduisant de l’animation dans une UI. 

En faisant cela, nous adoptons une approche de conception centrée sur l’humain. Après tout, elle engage directement l’utilisateur et l’aide à vivre les transitions et les interactions de façon plus naturelle et plus intuitive. Les meilleures animations de sites web ont à la fois un objectif et un style, et elles créent une impression et une perception proches de celles qu’éprouve une personne qui interagit avec un objet physique dans la vraie vie. Elles racontent des histoires simples, du style « Hé, regarde un peu ça ! » ou « Super, votre commande a été lancée ». Si elle est bien faite, une animation ne se contente pas de divertir l’utilisateur, mais aide aussi à comprendre ce qui se passe ou explique comment utiliser le site plus efficacement. 

Aujourd’hui, les interfaces ne sont plus des suites d’écrans statiques ; elles permettent de combler le fossé entre le logiciel et la nature humaine en ajoutant la dimension de temps. 

 

Utiliser l’animation pour visualiser les traitements 

Lorsqu’on interagit avec un produit (numérique), on veut savoir ce qui se passe à chaque étape. Si votre client est obligé d’attendre dans l’incertitude, vous risquez de le perdre. Souvent, il ne suffit pas de faire savoir à l’utilisateur que le processus est en cours de chargement ; par conséquent, mieux vaut éviter les indicateurs de chargement. Ils ne servent qu’à lui rappeler qu’il attend. Rendez l’attente plus agréable en utilisant le squelette en même temps qu’une animation subtile pour charger un contenu, afin de maintenir l’interaction avec le client. En tenant l’utilisateur au courant du niveau d’avancement, vous transformez une notification peu agréable en élément de divertissement. 

Ux gif 2

Fixer des attentes sur la rapidité de traitement de l’action 

 

Utiliser l’animation pour montrer que l’action est terminée 

Bien que certaines animations illustrent le processus, une animation peut également montrer sa finalisation. L’utilisateur doit comprendre rapidement et clairement que l’action est terminée et savoir que le système y a répondu. L’un des exemples les plus simples est le « bouton » : lorsqu’on appuie dessus – quelle que soit son aspect – on s’attend à ce qu’il se passe quelque chose. La convivialité de la conception du produit va réellement en pâtir si ce type de retour n’est pas prévu de façon visible. Harrods utilise l’animation pour illustrer le mouvement du produit jusqu’au panier une fois qu’on a appuyé sur le bouton « Add to shopping bag » (Ajouter au panier). L’icône du panier se transforme en une boîte sur laquelle apparaît le bouton « Checkout » permettant de valider la commande. Le titre du bouton devient « Added » (ajouté) avec une coche qui disparaît au bout de quelques secondes. Cela évite à l’utilisateur de se demander si l’article a été ajouté ou non et lui permet d’aller sur la page de validation de la commande sans visualiser d’abord le contenu de son panier.

 

Ux gif 3

Fournir un retour visuel sur une action 

 

Utiliser l’animation pour faciliter la compréhension 

Si l’on pense aux états d’erreur et aux écrans qui s’affichent en cas problème, il est important que ces derniers sautent aux yeux de l’utilisateur. Pour la saisie de données, on peut utiliser une animation montrant un mouvement horizontal indiquant que la saisie est refusée. Dans une UI, nous associons ce mouvement à un geste tel que secouer ou hocher la tête. L’utilisateur consacre moins d’énergie ou d’effort à comprendre comment fonctionne le site. 

Ux gif 4

Visualiser le résultat d’une action 

 

Utiliser l’animation pour améliorer une histoire 

De nombreux sites de-commerce affichent leurs produits sur un mur de produits. S’il n’y a pas de mise en lumière, l’utilisateur peut se sentir indécis et se perdre dans des détails. Simply Chocolate, boutique danoise qui vend des barres de chocolat, montre – sans le dire – les caractéristiques spécifiques du produit. La conception très dynamique du site donne à chaque produit suffisamment d’espace pour briller. Exactement comme dans la vie réelle, on peut enlever l’emballage de la barre en le faisant glisser, pour voir à quoi elle ressemble. Les ingrédients de la barre s’animent doucement en arrière-plan. Bien que l’effet soit on ne peut plus direct, l’expérience globale marche car seule une petite quantité d’informations s’affiche en arrière-plan pour chaque produit. 

Ux gif 5

Schéma d’organisation de Simply Chocolate 

 

Quelques réflexions pour conclure 

Comme pour tout ce qui figure dans l’interface, l’animation nécessite une approche réfléchie et un objectif clair. Si elle est bien faite, l’animation permet aux boutiques en ligne de procurer une expérience utilisateur agréable et sans frustration. Vous pouvez guider votre utilisateur tout au long des tâches, lui donner des repères visuels clairs et même lui permettre de s’amuser un peu. Les avantages apportés par l’animation doivent l’emporter sur les éventuels inconvénients : ce doit être la cerise sur le gâteau, pas l’ombre au tableau. 

Data-driven UX : la méthode en 3 phases pour mieux comprendre, mesurer et agir

Pour être optimale, l’amélioration des performances de tout site doit passer par une connaissance fine de ses utilisateurs. Impossible d’optimiser ses KPI sans identifier et comprendre le comportement de l’utilisateur : le remettre au cœur de sa démarche peut s’avérer riche en leçons. Pour cela, il convient d’adopter l’approche data-driven UX.

 

Tweet webagencyfail

Ce tweet du compte parodique @webAgencyFail traduit une réalité : nombre d’organisations adoptent une démarche instinctive sur les canaux digitaux.

 

Pragmatique car basée sur des données tangibles, l’approche data-driven UX présente l’avantage d’offrir une vue globale des parcours utilisateurs, en croisant les méthodes de recherche UX et data. La nécessité de ce rapprochement de ces deux méthodes tient d’un constat simple : se focaliser sur un seul aspect ne peut apporter qu’une réponse incomplète aux problématiques que vous rencontrez. Comment expliquer une baisse du taux de conversion ? Pourquoi les utilisateurs abandonnent leurs parcours sur une page précise ? le problème vient-il du trafic, du contenu, de l’ergonomie, du contexte actuel ?

Il est aujourd’hui possible (et facile) de mettre en place des solutions techniques et organisationnelles pour identifier et tester en temps réel ces axes d’amélioration avec l’appui des utilisateurs grâce à la méthode en 3 phases. Cette dernière s’applique de façon universelle quels que soit les secteurs d’activités ou les environnements techniques.

Méthode en 3 phases – Phase 1 : Mieux comprendre


“If you can’t measure it, you can’t improve it”
– Peter Drucker

 

[DATA] Il s’agit de faire l’audit technique des first party data (données patrimoniales) en :

  • Estimant la qualité et l’homogénéisation des données exploitées
  • Vérifiant le bon paramétrage de l’outil de mesure d’audience pour ne prendre en compte qu’une donnée qualifiée
  • Etablissant un plan d’action à court/moyen terme pour mettre en place des actions correctives si besoin

[UX/DATA] En parallèle, nous réalisons un audit des parcours utilisateurs et performances du site avec une analyse croisée des données UX ANALYTICS, issus de différents outils (Google Analytics, Hotjar…), et une étude experte.

Ce diagnostic peut être complété par différentes méthodes UX dites « qualitatives », comme des tests utilisateurs, pour creuser certains points.

Cette analyse permet d’obtenir une cartographie des comportements utilisateurs, d’identifier les différents axes d’amélioration et hypothèses de travail, de les prioriser et construire une roadmap d’optimisations sur le long terme.

 

Méthode en 3 phases – Phase 2 : Mieux mesurer

 

“Rely on facts, not feelings” Dicton populaire

 

[DATA] Lors de cette seconde phase, nous mettons à plat la stratégie de collecte, d’exploitation et de restitution de la donnée en :

  • Identifiant les besoins métiers et la faisabilité technique
  • Définissant les indicateurs clés à suivre et les moyens intermédiaires pour y parvenir
  • Mettant à plat le système de collecte de données par le biais d’un plan de taggage priorisé
  • Reprenant des processus et des solutions de gestion d’applications tierces (tag management system) afin d’appliquer un assainissement des données récoltées et exploitées
  • Affinant la lecture de données via un paramétrage des comptes de l’outil de mesure d’audience

[UX] Puis, nous mettons en place des outils et méthodes de mesure via :

  • Nouveau paramétrage des outils déjà mis en place dans la cadre de l’audit sur la base de la roadmap d’accompagnement (scroll heatmaps, souris et clics, complétion des formulaires, etc.)
  • Un baromètre de satisfaction utilisateurs via un questionnaire online
  • Un dashboard de suivi des performances

 

Méthode en 3 phases – Phase 3 : Mieux agir

 

“Every large system that works started as a small system that worked.” – Anonyme

 

Optimisation continu test learn

 

Cette troisième et dernière phase consiste en un cycle d’optimisation en continu de test and learn :

  • Mise en place d’optimisations issues de la roadmap ou lancement de tests AB
  • Analyse et suivi de la performance via le dashboard (phase 2)
  • Ajustement, hypothèse d’optimisation
  • Mise en place des optimisations par l’ensemble des équipes UX UI et DEV
  • Mesure
  • ….

Afin d’approfondir la recherche et l’analyse, on peut décider d’opter pour d’autres méthodes d’investigation tels que les tests utilisateurs et des interviews.

En ayant toutes les cartes en main, vous pouvez désormais sortir du schéma « Je n’ai pas besoin d’audit UX car j’ai déjà une analyse et des tableaux de bord, je connais les performances de mon site » et expliquer et améliorer durablement vos performances. Ready ? Set, go !

 

 

Charlotte Salvo, Lead UX Research et Anthony Calvel, Consultant Digital Analytics & Search Marketing

UX et RGPD : Comment proposer une expérience utilisateur de qualité et respecter la légalité ?

En matière de RGPD, 76% des Français se disent préoccupés par ce qui est fait de leurs données personnelles. Pourtant, plus d’un an après sa mise en place, le paradoxe est là : 1 Français sur 2 accepte les conditions d’utilisation de leurs données sans même les lire, selon un sondage d’Odoxa datant de 2019.  

 

Pourquoi un tel paradoxe ? 

Les Français sont-ils paresseux ? Difficile de les blâmer. Qui aurait sérieusement le temps de prendre les 86 minutes nécessaires pour lire intégralement les conditions d’Instagram ? Qui ne se sent pas frustré et agressé par toutes ces fenêtres qui s’ouvrent et bloquent l’accès aux contenus ?  

Les entreprises ne sont-elles pas assez sérieuses ? L’instauration dRGPD a donné rapidement naissance à des formulaires à l’ergonomie douteuse. Avant même de réussir à tomber sur les conditions d’utilisation de ses données, il faudrait déjà réussir à passer les multiples barrières qui viennent polluer leur accès, qui poussent l’utilisateur à « Tout accepter » par dépit 

 

Que faire alors pour nos utilisateurs ?  

Apporter toujours plus de transparence et déthique. Autrement dit, concevoir des produits digitaux qui informent clairement les utilisateurs de leurs choix sans tricherie aucune, tout en leur donnant un accès rapide et permanent pour qu’ils puissent les modifier.  

Tirées de l’article « What does GDPR mean for UX ? » de l’UX Designer Claire Barrett, les guidelines suivantes visent à synthétiser clairement les pratiques à suivre pour à la fois adhérer au RGPD et viser une bonne expérience utilisateur. 

 

  1. Garder le contrôle

L’utilisateur doit choisir s’il souhaite que ses données soient collectées et utilisées. Les contrôles doivent être « user-friendly » : clairs et faciles à comprendre. La base, en somme. 

  1. Respecter la granularité

Les utilisateurs doivent donner leur consentement sur chaque activité requérant le traitement ses donnéee. L’affichage des formulaires de consentement au moment de leur collecte permet de donner un contexte aux utilisateurs (par exemple au moment de la création de leur compte).  

  1. Pouvoir revenir en arrière

Les utilisateurs ont le droit de retirer leur consentement à tout moment. Les paramètres doivent ainsi être conçus pour qu’ils puissent facilement y accéder et les modifier. 

  1. Différencier les conditions

Les conditions générales sont bien à séparer des informations de collecte de données. Le design doit faire en sorte que cela soit bien clair pour l’utilisateur.  

  1. 5.Êtretransparent 

Expliquer à quelles fins la donnée est collectée, de façon courte et concise.   

  1. Expliquer les bénéfices

Lorsqu’on demande l’approbation de l’utilisateur, c’est encore mieux de lui expliquer en quoi son consentement va bénéficier à son expérience. 

 

Quelles pratiques mettre en œuvre ?  

Don’t : la bannière d’information 

Si elle respecte l’aspect légal, la bannière est facilement ignorée par les utilisateurs et elle dégrade leur expérience de navigation en cachant le contenu de la page.  

Dans cet exemple, le bouton « Accepter et fermer » pousse clairement l’utilisateur à opter pour ce choix tandis que le bouton « En savoir plus », permettant à l’utilisateur de refuser l’utilisation de ses données, est dans un « gris sur gris » peu incitateur. 

Banniere information doctissimo

Capture écran réalisé sur le site doctissimo.fr

 

Do : la fenêtre d’info et son FAB (Floating Button Action)

Un message clair (et drôle en plus <3) avec des boutons d’action faciles d’accès et compréhensibles pour l’utilisateur.

Cookie axeptio

Capture écran réalisé sur le site axeptio

 

Don’t : la pop-in

En sélectionnant les « options », l’utilisateur est souvent accueilli par une fenêtre peu engageante.

Une fois celle-ci refermée, elle ne peut être réouverte qu’après une exploration profonde des sous-pages des conditions du site.

Pop in doctissimo

Capture écran réalisée sur le site doctissimo.fr

 

Do : le centre de confidentialité

Accessible partout depuis le même endroit, le centre de confidentialité permet à l’utilisateur de facilement choisir les options qu’il souhaite activer ou non. *BONUS* Et en plus, on lui explique à quoi cela sert.

Cookie axeptio choix

Capture écran réalisée sur le site axeptio.eu

 

Respecter le RGPD pour la loi et pour construire des parcours utilisateurs respectueux, c’est possible !  La Cnil a d’ailleurs récemment renforcé sa base de connaissances sur le sujet avec une nouvelle plateforme : design.cnil.fr.

N’hésitez pas à puiser dans les ressources à disposition ou à échanger avec l’un de nos experts SQLI.

Design Sprint, le raccourci pour savoir ce que votre idée va donner !

Pour entamer cette rentrée 2019, rien de mieux que de se rafraichir les idées avec le retour d’expérience d’une méthode très inspirante le « Design Sprint », lors d’un petit-déjeuner organisé par l’agence toulousaine de SQLI en juillet dernier.

La quarantaine de participants présents a découvert la démarche, ses atouts, ses prérequis, ainsi que quelques-uns des usages les plus adaptés. Cette matinée riche en enseignements a été complétée par un retour d’expérience de la DSI du groupe COFAQ (centrale d’achat du bricolage pour les professionnels), pour qui nous venions de terminer un Design Sprint pour la définition d’une plateforme e-Commerce, la première du genre pour l’entreprise… un gros challenge !

 

Design sprint 1

 

La genèse du Design Sprint

Le Design Sprint puise son inspiration dans le « Design Thinking », et notamment dans son approche centrée humain afin d’adresser des problématiques complexes. Le Design Sprint ajoute une composante, le « time to market », en permettant de tester de nouvelles idées en une semaine et d’avoir les premiers retours immédiats des utilisateurs cibles. Le tout pour valider le concept (et investir sereinement) ou pivoter tant qu’il est encore temps. C’est une vraie démarche pour « dé-risquer » un projet d’innovation qui s’adresse à de nouveaux utilisateurs ou qui consiste à créer une nouvelle offre.

 

Design sprint 2

 

Le Design Sprint en détails

Les cinq étapes/journées de la démarche consistent à identifier la problématique, comprendre le contexte et définir le challenge en conséquence.

La première journée (lundi) est certainement la plus chargée de la semaine. Il conviendra de se concentrer sur l’essentiel – la première des clés de succès de cette démarche – et ne pas vouloir traiter tout l’ensemble d’une problématique. Elle permet également, au travers d’échanges entre les participants, d’aligner les décideurs et de partager une même vision.

On peut alors passer à la deuxième journée (mardi) qui, sur une première phase, permet d’inspirer les participants avec les tendances du marché, les dernières innovations technologiques du moment… – issue d’un travail préparatoire et nocturne produit par nos consultants, la deuxième clé de succès. Pour ensuite, en deuxième phase, laisser libre court à l’idéation et générer un maximum d’idées pour résoudre la problématique identifiée la veille.

Nous sommes déjà mercredi… Il faut maintenant décider du concept que l’on veut tester, en s’appuyant sur un vote participatif des solutions pour co-construire ensemble un scénario. Scénario qui alimentera la phase de « storyboard », via des scénettes représentant toutes les étapes du parcours utilisateurs et qui serviront de brouillon pour la phase du lendemain, à savoir le prototypage.

 

Design sprint 3

Cette phase prototypage (jeudi), est assurée par un expert UX/UI pour fabriquer un prototype d’haute-fidélité. Avec ce prototype, on aura un maximum de retours lors de la phase de test. Le secret pour cette étape clé – 3ème clé de succès –, c’est la préparation en amont avec un design system (charte graphique, framework de développement, bibliothèque d’images…) et surtout un UX designer expérimenté !

Nous voilà arrivés au dernier jour (vendredi) pour enfin découvrir le verdict des tests utilisateurs (5 testeurs minimum). Ces tests utilisateurs sont le véritable point culminant du process – 4ème clé de succès –, tout le reste du sprint consiste en la préparation de ce moment. Un moment qui commence par une série de tests durant la matinée, où l’on retrouve l’équipe derrière un écran qui visualise en temps réel la session de test et ainsi capturer le plus d’informations et d’émotions au regard de l’expérience qui est proposée dans le prototype. L’après-midi est consacrée à l’analyse des enseignements collectés et consolidés par toute l’équipe durant les sessions de tests afin de valider le concept ou le faire pivoter.

Et après le sprint ? Une bonne pratique, si le prototype a rencontré un certain succès, est de repartir pour une itération accélérée (prototypage + test) pour améliorer le concept et être proche d’un pilote à tester en condition réelle.

 

Pour conclure

Mon avis personnel est que le Design Sprint est une démarche qui délivre toute sa valeur dans le cadre de développement de produit, ou lorsqu’il s’agit de challenger un business model.  Il faut faire attention à ne pas en abuser, cela reste consommateur de temps et d’énergie – et c’est d’ailleurs la dernière clé de succès –. Il faut être capable de réunir une équipe créative et motivée (7 personnes maximum), et de dégager 5 jours consécutifs dans l’emploi du temps de tout le monde (et c’est non négociable).  Vous l’aurez compris il se positionne très en amont des projets d’implémentation, pour « dé-risquer » une idée et permettre aux décideurs métiers de prendre une décision en sachant ce que ça va donner !

Afin d’éviter tout écueil, nous avons mis en place un premier atelier de 2 heures pour identifier les bonnes idées candidates à un Design Sprint. N’hésitez pas à nous contacter !

 

Merci à Stephen Demange (Directeur Conseil, SQLI Bordeaux) pour l’animation du petit-déjeuner et son retour d’expérience.

Hello Wireflow !

Combinaison fantastique entre le wireframe (maquette en “fil de fer”) et le user flow (parcours utilisateur), suivez le petit guide illustré des wireflows.

Quand les utiliser ? Quel format leur donner ? Partons ensemble à la découverte !

 

Pour commencer, reposons le vocabulaire

 

Le flowchart (logigramme) est un diagramme qui permet de visualiser une séquence d’actions. Cela ressemble à ça :

Wireflow 1

Source : https://uxplanet.org

 

Voici un task flow (flux de tâches). C’est un simple listing des actions à réaliser par l’utilisateur pour accomplir une tâche. Il ne comporte pas de branches.

Wireflow 2

Source : https://uxplanet.org

 

Ceci est un user flow (parcours utilisateur) : c’est une série d’étapes par lesquelles doit passer l’utilisateur pour réaliser son objectif. Le flux n’a pas besoin d’être linéaire.

 

Wireflow 3

Source : https://blog.prototypr.io

Nous allons maintenant voir comment capitaliser sur le “flow” pour en faire un rendu aussi impactant que les wireframes.

 

 

Les principales qualités du wireframe

Itérer rapidement

Les wireframes offrent aux designers – et non-designers – un moyen de parcourir et de tester rapidement leurs idées.

 

Wireflow 4

Source : https://uxdesign.cc

 

Améliorer la communication

Ce que l’on aime avec les wireframes, c’est qu’ils nous donnent la possibilité de garder la discussion ouverte sur le design lui-même, sans être au pixel près.

Avec les wireframes le processus est passé de : “Hé regarde, cher développeur, j’ai besoin que tu codes quelque chose qui ressemble exactement à la maquette que j’ai fait sous Powerpoint.”… A quelque chose qui ressemble plus à ça : “Regarde, c’est une idée de ce à quoi l’interface peut ressembler. Mais je vais déjà la montrer à quelques utilisateurs avant qu’on se lance.”

 

Wireflow 5

Source : https://uxdesign.cc

 

Alors… qu’est-ce qu’un wireframe a à voir avec un user flows ?

Mais ils ont tellement en commun ! Tous les deux offrent différents niveaux de “résolution” et de fidélité au produit fini. Utilisé au bon moment dans les projets, wireframes et user flows peuvent améliorer la rapidité des itérations et faciliter la communication entre les équipes du projet.

 

Comment construire son user flow step by step ?

1.   Objectif de l’utilisateur : poser l’histoire

Wireflow 6

To-do : préciser l’objectif de l’utilisateur ou l’US (User Story pour les aficionados des méthodes agiles). Il s’agit simplement de donner un titre au parcours utilisateur : cela peut être un livrable à produire, une étape de son parcours, …

Exemple : Editer la fiche d’engagement. En tant que responsable du planning, je veux communiquer les dates validées auprès de mes collaborateurs.

 

2. Task flow : lister les actions

Wireflow 7

Source : https://uxdesign.cc

 

To-do : détailler les étapes par lesquelles l’utilisateur passe pour atteindre son objectif.

 

Par exemple :

  • Etape 1 : Se rendre sur la page d’application
  • Etape 2 : Renseigner son login et mot de passe
  • Etape 3 : Consulter les actualités de la page d’accueil

 

3. Wireflow : détailler les composants

Wireflow 8

https://uxdesign.cc

 

To-do : il s’agit de documenter le workflow avec une représentation simplifiée des écrans. C’est une combinaison entre les wireframes et le parcours réalisé par l’utilisateur.

 

Le wireflow (ou visual user flow) est LA nouvelle étape à intégrer ! A cette résolution, il est possible d’ajouter des éléments visuels sur ce que vos utilisateurs vont voir ou faire sur l’interface.

C’est donc ici que le wireframe intervient. Mais attention : la conversation doit rester centrée sur le parcours et non sur les écrans !

 

 

4. User flow : matérialiser les interactions

Wireflow 9

https://uxdesign.cc

To-do : détailler la série d’étapes que l’utilisateur suit pour réaliser son objectif. Le user flow montre les pages, la logique d’interaction et les actions requises par l’utilisateur.

 

A cette étape, l’objectif est d’avoir un user flow que les utilisateurs et les développeurs sauront comprendre. Pour arriver à cette étape depuis les wireframes, réfléchissez à propos de toutes les informations dont vous avez besoin pour créer ce parcours :

  • Que se passe-t-il si l’utilisateur ne suit pas ce “parcours parfait” ?
  • Quel cas mène à un parcours alternatif ?
  • Est-ce qu’il y a des changements d’état sur l’interface ? Si oui, qu’est-ce qui les a provoqués ?

 

Le User Flow Design complet

Wireflow 10

https://uxdesign.cc

 

FAQ

Comment mettre en place le wireflow au sein de son processus de conception ?

Allez-y doucement ! Là où le user flow fonctionne le mieux c’est lorsqu’il est avant tout utilisé comme un outil pour communiquer autour du design à travers l’œil d’un utilisateur.

 

Quel outil choisir ?

Il existe plein de jolies choses pour réaliser vos user flows. Chez WAX Interactive, on reste fidèle au couple SketchInvision, et pour itérer rapidement sur nos idées, on aime beaucoup le petit dernier que l’on a adopté : Whimsical.

Cet article est une traduction libre et augmentée du très beau papier illustré d’Alexander Handley : “User Flow is the new wireframe”.

 

Sources :

https://uxplanet.org/ux-glossary-task-flows-user-flows-flowcharts-and-some-new-ish-stuff-2321044d837d

https://uxdesign.cc/when-to-use-user-flows-guide-8b26ca9aa36a

https://blog.prototypr.io/mixed-reality-user-flows-a-new-kind-of-template-27d59991de4a

 

Accessibilité : avez-vous bien pensé à l’expérience digitale de tous les utilisateurs ?

Une expérience égale pour tous, via un site ou une application, cela semble évident. Pourtant, les enjeux de l’accessibilité ne sont pas toujours suffisamment pris en compte dans les projets digitaux. Nous avons tout intérêt à l’anticiper et l’intégrer dès les toutes premières phases de conception d’une plateforme digitale.

Pouvez-vous vous passer d’une partie des utilisateurs ?

A l’ère du numérique, les enjeux de l’accessibilité s’invitent dans l’expérience digitale de la même manière que dans nos paysages urbains. L’utilisateur normé n’existe pas. Beaucoup d’entre nous ont un handicap qui n’est pas toujours visible.

Il existe dans la population française près de 4 % de daltoniens, ce qui représente 2 670 000 utilisateurs. Toujours en France, 1,7 million de personnes sont atteintes d’un trouble de la vision. Pourtant, seuls 10% des sites internet sont accessibles aux personnes malvoyantes. A cette population identifiée, il faut ajouter les utilisateurs qui ont des difficultés à manipuler une souris (tremblements, problème de canal carpien, autres handicaps physiques…).

Visuel accessibilité

Tous ces utilisateurs peuvent-ils accéder à vos sites et applications ?

Pour ne pas se couper de ces utilisateurs, il existe des bonnes pratiques faciles à mettre en place. Dès la phase de conception, il faut penser accessibilité informatique en même temps qu’ergonomie et UX.

Quelques règles simples et outils permettent de rendre vos sites et applications accessibles à ces utilisateurs, comme par exemple :

  • En France, le RGAA (Référentiel général d’accessibilité pour les administrations) ;

Mise en œuvre, l’accessibilité va permettre l’utilisation de solutions alternatives à la souris tels que :

  • La navigation au clavier ;
  • Des interfaces braille : ce genre de dispositif adapté permet par exemple à une journaliste sportive de faire des chroniques sur une radio publique, malgré sa cécité ;
  • D’autres dispositifs adaptés

Pour un bâtiment physique, la prise en compte de l’accessibilité dès sa conception est bien moins coûteuse que la réalisation de modifications nécessaires une fois le bâtiment construit. Il en va de même pour l’accessibilité informatique : la mise en œuvre de ces bonnes pratiques dès la conception initiale du site ou de l’application sera plus économique que les adaptations dont le besoin surviendrait ultérieurement.

Visuel accessibilité 2.png

Lors du dernier projet d’application web que j’ai mené chez un client du secteur de l’énergie, les règles d’accessibilité retenues en fonction du public visé ont été prises en compte en même temps que les règles d’ergonomie. Finalement, elles n’ont généré qu’un surcoût lors de l’étude UX, autrement dit, une goutte d’eau dans l’océan au regard des bénéfices apportés en incluant tous les utilisateurs.

Expérience utilisateur sur mobile : 5 types de micro-moments

Lorsque l’on entend mobile on pense souvent responsive design. Effectivement, l’écran d’un smartphone est bien plus petit que celui d’un ordinateur. Utiliser un site inadapté à ce format peut devenir un calvaire et faire fuir l’utilisateur le plus investi. 

Cependant, la réelle problématique du mobile ne réside pas dans son format mais plutôt dans son usageLa particularité du mobile est son omniprésence dans la vie de tout utilisateur qui peut se connecter à n’importe quel moment de la journée ou de la nuit. Il existe en effet une forte corrélation entre la taille de l’écran, la fréquence et le temps d’utilisation : plus l’écran est petit, plus il est utilisé fréquemment sur de courtes périodes. 

 

Design mobile article

Ce phénomène dont la haute fréquence d’usage n’a d’égale que son temps d’utilisation succinct se nomme « micro-moments ». Pour vous aider à vous mettre à la place de l’utilisateur et à comprendre son contexte, j’ai déterminé les grands types de micro-moments : 

1.Un micro-moment déclenché par ce qui a été vu

Les applications de rencontres sont très fortes pour cela. Un utilisateur est célibataire et voit un couple dans la rue ? S’il a une application de rencontre installée sur son smartphone, il y a des chances pour qu’il ressente l’envie de dégainer son téléphone. 

Exemple d’application qui répond à cet usage : Tinder 

 

2. Un besoin urgent

Un utilisateur se balade dans une nouvelle ville un soir et cherche un bon restaurant à moins de 10 minutes de marche. C‘est encore une fois vers son smartphone qu’il se tourne. 

Exemples d’applications qui répondent à cet usage : Google MapsLaFourchette 

 

3. Un avis en magasin

Une paire de chaussures aperçue dans un magasin suscite l’intérêt mais le consommateur se demande s’il ne peut pas la trouver pour moins cher ailleurs. Il se peut aussi qu’il souhaite rechercher des avis ou des recommandations. 

Exemple d’application qui répond à cet usage : Amazon 

 

4. Passer le temps 

Ce fameux ami toujours en retard a encore fait attendre… Naturellement, l’utilisateur a eu le réflexe de sortir son smartphone, avec comme seul but d’occuper le temps, et en demi-teinte peut-être de s’inspirer. 

Exemple d’application qui répond à cet usage : Instagram 

 

5. Micro-productivité

Proche du précédent type de micro-moment dans l’objectif d’occuper le temps, et différent dans le sens qu’il permet aussi d’avancer dans sa to-do listOn peut imaginer vouloir profiter du temps passé dans les transports en commun pour apprendre l’espagnol à l’aide d’une application. 

Exemple d’application qui répond à cet usage : Duolingo 

 

Enfin, la question à se poser en concevant une expérience mobile, avant même de se demander comment votre logo va tenir dans ce petit écran : l‘expérience imaginée répond-elle à un de ces micro-moments ? 

Sources : Lien 1; Lien 2; Lien 3

L'usage du design circulaire : comment relever le défi du design circulaire ? 2/2

Nous avons abordé dans un premier temps l’usage du design circulaire, le concept de modèle économique et social qui, discrètement, engendre une (r)évolution sur notre façon de concevoir les produits et services. Produire de manière responsable est un défi qu’il est nécessaire de relever, y compris dans le domaine du digital. 

La pensée circulaire avant le Design 

Entreprendre ce changement de système entend adopter un mode de pensée circulaire. On soulignera ici cette pensée circulaire car elle doit être présente au niveau managérial pour être efficace. Elle rend le manager acteur du processus de décision et non le maître du processus. C’est une forme de management qui donne et qui reçoit. Il s’agit de développer une capacité à l’interaction où l’énergie vient de chacun et circule entre tous : elle veut le sens, la confiance, l’exemplarité. 

Évidemment, l’ensemble des acteurs (les actionnaires, les clients, les fournisseurs, les salariés et la société civile) sont intégrés à ce management où l’ouverture, le doute et la communication engagée sont de vertu. Ensemble, on s’applique à partager une recherche de sens commun et de lien, accepter d’émettre des doutes et de ne pas s’autocensurer dans l’analyse des risques. 

Les quatre saisons du design circulaire 

Isabelle Kocher, Directrice Générale d’ENGIE, identifie un quatuor clé ayant une forte influence sur l’écosystème de l’entreprise. C’est lui qui fait la pluie et le beau temps sur un projet collaboratif, ses rôles doivent donc être compris et pris en compte pour intégrer au mieux la méthode circulaire dans les processus de création : 

Le consommateur 

Perso 1

« L’impact d’une entreprise sur l’environnement a de plus en plus d’importance pour moi. Je n’hésite pas m’adresser directement à elle sur Twitter pour montrer du doigts ses déviances et la faire réagir. » 

Le salarié 

Perso-2 v2

« J’aime être galvanisé par mon environnement de travail et être en accord avec l’identité de l’entreprise. Si je ne suis pas en adéquation avec la raison d’être de l’entreprise, cela peut être un motif de rupture. » 

 

Le régulateur 

Perso 3

« Je veille à la bonne rédaction du dossier sur les conséquences sociales et environnementales de l’activité des entreprises. » 

 

L’investisseur 

Perso 4

« J’apprécie que l’entreprise face preuve de transparence quant à son impact global. » 

 

Ce sont ces acteurs qui doivent enclencher et mener à bien la méthode circulaire au quotidien. Si chacun d’entre eux incarne un de ces rôles par des actions récurrentes, c’est tout l’écosystème d’une entreprise qui change. 

Face à un nouvel utilisateur plus que jamais averti quant à sa consommation de produits et services digitaux, nous – orchestre de l’expérience utilisateur – devons considérer ces nouveaux comportements pour revoir nos méthodes de conception dans une démarche plus responsable.    

Alors comment faire ?  

En tant qu’acteurs du digital, adopter la vision circulaire dans nos méthodes de travail, jusque dans les services vendus, apporte des bénéfices concrets :  

  • Croire en une économie durable avec un positionnement fort et différenciant. Aujourd’hui des agences de création digitale se positionnent sur ce créneau éco-responsable et parlent d’éco-conception web pour répondre aux nouvelles problématiques des entreprises ayant un fort engagement RSE. 
  • Optimiser nos méthodes de travail en facilitant l’accessibilité, la communication et la prise de décision. 
  • Éviter aux équipes qu’un projet soit énergivore et aux consommateurs que l’utilisation produit/service soit chronophage.  

De notre côté, on pourrait relever le défi du circulaire en appliquant la pensée circulaire dès le brainstorming. Pour une recherche de concept ayant par exemple, voici les questions les questions qui doivent nous aider à démarrer : 

  • Comment pourrions-nous rendre notre produit ou service plus modulaire, adaptable ? 
  • Comment notre produit pourrait-il être inspiré par les systèmes vivants ? 
  • Comment pouvons-nous transformer notre offre de produits en un service ? 
  • Comment notre produit pourrait-il être remis à neuf au fil du temps ? 

Des méthodologies propres au design s’inscrivent d’ailleurs dans cette démarche circulaire. Le design system est un cas de régénération par lequel des équipes design et tech vont pouvoir piocher des informations lors d’un projet collaboratif. On peut le qualifier de charte graphique à laquelle on aurait ajouté des règles d’usage, de comportements, de positionnement, etc. En clair, le design system définit le design des plus petits éléments (textes, titres, formulaires) aux grilles, palettes de couleurs, blocs ou composants. 

Le design sprint, est un réel accélérateur d’innovation qui permet d’inventer et de tester de nouveaux produits en 5 jours grâce à une approche multidisciplinaire (intégrant designers et développeurs) et centrée sur l’humain. 

Télécharger l'infographie sur le design sprint

 

Au sein du pôle Expérience Design de WAX Interactive, cette méthode de Design Thinking est proposée aux clients désireux d’accélérer leur processus de création pour aboutir à un produit/service en très peu de temps. 

Design circulaire schéma

Ce que l’on doit retenir c’est qu’au de-là de faire du design circulaire, il faut dans un premier temps sensibiliser tous les acteurs de l’entreprise à une approche circulaire qui s’intègrerait dans leur quotidien. Ce fonctionnement implique donc un changement des modes de production et de consommation significatif. Cette approche représente aussi la possibilité de satisfaire les attentes des utilisateurs/consommateurs par un positionnement engagé, tout en favorisant la transition vers une économie circulaire.  

En résumé, concevoir pour des systèmes circulaires consiste à examiner la manière dont les systèmes naturel, industriel et social se déroulent, puis à découvrir des moyens de les modifier pour faciliter des résultats circulaires et régénérateurs. Dans certains cas, cela est extrêmement compliqué (le nucléaire), dans d’autres, c’est une évidence (comme pour changer notre dépendance collective à des objets jetables). Mais tous les changements de systèmes qu’on doit concevoir sont composés de la même manière : de personnes, de produits/services, de lieux et de processus. Ils peuvent tous être repensés pour maximiser les avantages et minimiser les effets négatifs. 

Alors, avons-nous toutes les conditions réunies pour appliquer ces principes et porter le design circulaire au sein de nos entreprises ?  

 

Pour aller plus loin : 

Le livre Le Design Thinking au service de l’innovation responsable
Ecrit par François Verez, Daphné Carthy, Corinne Jouanny et Xavier Pavie

L'usage du design circulaire : quand cela ne tourne plus très rond 1/2

S’intéresser à l’environnement lorsqu’on travaille dans le digital peut à priori faire sourire, mais une (r)évolution discrète fait sa percée avec le concept de design circulaire. Plus que jamais, il s’agit de dépasser le simple effet de mode ou, à l’inverse, mépriser et complètement marginaliser de l’écoresponsabilité. La protection de l’environnement doit faire partie intégrante de notre société et nous sommes tous concernés pour améliorer la situation.

La genèse du design circulaire

En 2010, avec l’aide de sa fondation, la navigatrice britannique Ellen MacArthur parlait déjà d’une économie circulaire en réponse à l’obsolescence de notre système économique.

Rappelez-vous, la Terre a vécu « à crédit » de ses ressources naturelles pendant les 5 derniers mois de l’année 2018. La navigatrice n’a de cesse d’alerter sur le mode de production et de consommation très linéaire basé sur le « Product – Consume – Dispose » en déclarant que la solution n’était pas tant de ralentir la machine et de restreindre nos modes de vie, mais de revoir le schéma tout entier.

Elle abordait alors l’idée de reconstruire notre système économique et nos business model à chaque étape de production en l’illustrant comme suit. 

« Do we buy a car, or do we buy road miles?

Should the 1st line of the manufacturer’s design brief be « we need to design a car for this assemble, or we need to be able to recover all the materials, so we can make the next car out of it »?

Do you buy a washing mashing or do you buy 3000 washes?

If you buy 3000 whashes, you can have a maching which is more reliable, better build, can be repaired and you have a relationship with the manufacturer. It works for everyone, is a different way of looking at things.

Then the business model changes, you end up with million different options for innovation, for young people – through economic, through material science – it changes the all the paradigm. »

L’entreprise IDEO s’est appuyée sur ce manifeste pour définir un guide du Design Circulaire. Son originalité réside dans la prise en compte de l’ensemble du processus de conception et de production : matériaux utilisés, business models et avenir du produit ou service, conçu dans une logique renouvelable et responsable.

Le Design Circulaire nous montre qu’une autre réflexion est possible, autour d’une méthode de conception qui reprend les codes de l’économie circulaire en cinq points :

  1. Penser régénération : le terme « régénération » décrit un processus qui restaure, renouvelle ou revitalise ses propres sources d’énergie et de matériaux en créant des systèmes durables en harmonie avec la nature.
  2. Retournement de service : notre capacité à nous réadapter et à réorienter notre pensée des produits vers les services au travers des besoins sous-jacents. Vous êtes-vous déjà demandé pourquoi les bureaux vacants ne pourraient pas servir à des travailleurs en freelance, par de location immédiate d’espaces temporaires ? Ou encore, pourquoi les boutiques de vêtements et d’ameublement n’adoptaient pas un système de location, de retouche/réparation ou de récupération ?
  3. Décorticage : les matériaux et composants sont-ils récupérables ou réutilisables ? Est-ce économiquement viable de démonter le produit ? Qu’est-ce qui pourrait être amélioré ?
  4. Inspiration : c’est ici qu’on s’inspire des méthodes Agile – itération, sprint, feedback, évolution, etc. – pour les appliquer au développement de produits ou de services circulaires. 
  5. Apprendre de la nature : nous invite à nous demander comment la nature pourrait relever un défi de conception. On parle alors de biomimétisme lorsqu’on s’inspire de systèmes biologiques pour créer de nouvelles solutions circulaires et holistiques.
    Un regard en dehors de nos domaines d’activité est un excellent moyen d’inspirer le développement de nouvelles idées alors pourquoi ne pas ‘hacker’ la nature, car comme Idriss Aberkane – enseignant, conférencier et essayiste français – l’a déclaré, « la nature est le meilleur modèle de prospérité économique sur Terre ».

Cette méthode demande qu’on oublie tous les stéréotypes, les préjugés, qu’on oublie tout ce qu’on a appris à l’école, petite ou grande, où étaient privilégiées les logiques binaires et linéaires.

Des idées & des actions

Une prise de conscience tardive, mais présente

Depuis une dizaine d’années, on observe une évolution dans notre façon de consommer. L’uberisation de la société pousse à abandonner l’idée de possession de biens au profit de la location de services et de produits. On se sent moins coupable de louer un objet ou service en sachant que celui-ci est ponctuel ou éphémère.

Selon The Economist, les Millennials seraient davantage favorables à investir dans des fonds à énergies renouvelables (même s’ils sous-performent). On perçoit là une volonté de pérenniser ces énergies même si celles-ci ne rapportent pas autant que des fonds pétroliers par exemple. Mais cela nous montre bien une nouvelle vision d’avenir non plus basée sur un intérêt individuel, mais sur l’intérêt commun.

Une force dans l’individualisme

Des applications mobiles ont été conçues pour sensibiliser aux impacts écologiques. En alliant digital et mobilité, ces entreprises accompagnent les utilisateurs pour relever le défi de l’éco-responsabilité par de petites actions :

  • Astuces Ecolo : pousse des idées écologiques et une multitude de bons plans économiques et écologique pour sauver la planète tout en aidant à économiser ou même gagner de l’argent ; 
  • Eat4Good : sensibilise et aide ses utilisateurs à manger de façon plus écologique et plus équitable ; 
  • Breathe Up : application connectée à un écosystème numérique qui permet d’indiquer en temps réel les polluants contenus dans l’air respiré ;
  • 90 jours : l’assistant personnel de transition écologique qui propose une série de 20 défis pour modifier vos habitudes à son rythme.
Design circulaire visuel

Alors, comment relever le défi du design circulaire ? Rendez-vous dans deux jours pour le découvrir.