Expert en UX/UI et fondateur de l’association *designer interactif*, Benoît Drouillat s’entretient dans ce MOOC avec Dominique Moulon au sujet de sujets évoqués dans son livre “Le design interactif. Du web design aux objets connectés”. Ensemble, ils tentent de clarifier les termes de Design UX/UI, et l’ensemble des notions et enjeux qui leurs sont associés.

B. Drouillat présente Don Norman et Jakob Nielsen comme les pionniers des réflexions d’UX Design. Issus de formations en psychologie cognitive, ils ont posé les bases des questionnements actuels sur les interactions Homme-Machine et sur les différents principes d’améliorations de l’expérience utilisateur.

Aujourd’hui, les termes de User Experience Design et de User Interface Design succèdent à celui de Webdesign. Le design UX, se focalise sur la conception d’une interface, il tente d’offrir la meilleure expérience possible à l’utilisateur final en tenant compte ses besoins et de ses attentes. Le travail de l’UI Designer s’inscrit dans la continuité du processus UX ; il se concentre sur l’intégration de l’identité visuelle, sonore et gestuelle du projet dans l’interface. Il se préoccupe également de la façon dont l’utilisateur interagit avec le support.

La conception d’une interface ne peut se détacher de l’assimilation du contenu et du message véhiculé par le projet ; le design doit souligner le message transmis par le contenu, et inversement. Qu’importe la méthode de travail utilisée, le design UX/UI doit être intégré dans un processus itératif, où chaque étape du projet doit être testée afin de détecter les problèmes et de formuler les solutions envisageables.

Tout au long de l’interview, Dominique Moulon questionne son interlocuteur sur les étapes importantes du design UX/UI. Le brief client, pour mieux comprendre les attentes du client concernant ce projet. Le benchmark, l’analyse des bonnes et des mauvaises pratiques des concurrents. La recherche utilisateur, réalisée sous forme d’interviews, est cruciale au début d’un projet afin de comprendre les spécificités de la cible, ses attentes et ses besoins. Le scénario d’usage, qui définit le contexte dans lequel l’utilisateur va être confronté au projet, ses objectifs, mais également le chemin qu’il va suivre. La cartographie qui synthétise la masse de données issues du brief et de la recherche utilisateur. Le moodboard, qui permet de montrer visuellement une orientation du projet au client sans restreindre la création. Le prototypage, une représentation haute fidélité du produit qui inclut les interactions. Enfin, ils évoquent les tests utilisateurs qui permettent de comprendre les points d’améliorations du projet.

Les interlocuteurs évoquent également la standardisation du web, avec la présence importante des templates et framework, et tentent de définir la façon dont ces éléments cohabitent avec le design UX/UI. De même, les applications mobiles sont soumises au respect des conventions établies dans les guidelines. Benoît Drouillat précise également qu’une compréhension du code par les designers favorise les échanges constructifs entre les différentes équipes lors de la conception d’un projet.

Bibliographie commentée

1. Ouvrages

Drouillat Benoît, Le design interactif: du web design aux objets connectés, Paris, France, Dunod, 2016.

Dans cet ouvrage, Benoît Drouillat commence par expliquer la définition de design interactif, ainsi que l’ensemble des démarches de conceptions centrées sur l’utilisateur : architecture de l’information, design d’expérience utilisateur, design d’interface, webdesign, ergonomie des interfaces et utilisabilité. Il en profite également pour décrypter les interfaces du passé, celles actuelles mais également imminentes. La seconde partie du livre s’attarde sur les différentes phases de développement d’un projet : la découverte du contexte et des besoins, la recherche utilisateur, la modélisation, l’idéation et l’exploration des solutions et enfin, la formalisation de l’expérience.
Le MOOC se développe autour de thématiques abordées dans cet ouvrage ; ce dernier se révèle ainsi être un indispensable pour pousser d’avantage sa compréhension du design UX/UI et mieux appréhender les notions abordées dans l’entretien.

Norman Donald A., The design of everyday things, Revised and expanded edition, New York, New York, Basic Books, 2013.

Donald Norman tente d’éveiller l’œil critique du lecteur sur le monde qui l’entoure. Le quotidien est rempli d’objets avec lesquels nous interagissons, qu’ils soient numériques ou non. Cependant, tous ont un point commun : ils doivent avoir été pensés pour être compréhensible de tous, sans apprentissage et sans tâtonnement. Si une erreur ou une hésitation survient lors de l’utilisation d’un de ces objets, l’utilisateur ne doit pas se remettre en cause. C’est l’objet lui-même qui doit l’être, sa conception n’ayant pas pris en compte les besoins et attentes de l’utilisateur final. En mettant en avant les problèmes fréquemment rencontrés, Don Norman présente la mise en place de concepts simples qui guideront l’utilisateur dans son l’utilisation d’un objet.
D. Norman est fréquemment considéré comme l’un des pionniers des réflexions de design centré utilisateur. Ce livre offre d’importantes réflexions pour le designer sur le monde qui l’entoure, et l’aide à comprendre les pratiques à mettre en place dans ses projets, afin de prendre d’avantage en compte le message que va percevoir un utilisateur au travers du design du produit.

Garrett Jesse James, Chronique « The Elements of User Experience », Jesse James Garrett – Ergolab, ergonomie sites web, New Riders, 2002.

Basé sur le diagramme qu’il proposa en 2000, Jesse Garrett présente dans ce livre l’ensemble des aspects auxquels il est nécessaire de penser avant de concevoir une interface web dont on souhaite optimiser l’expérience utilisateur. Il commence par expliquer la raison pour laquelle il est nécessaire de se préoccuper de l’expérience utilisateur, puis il développe les 5 piliers qui bâtissent une interface web : la stratégie, la portée, la structure, le squelette et la surface. Comprendre les besoins des utilisateurs et les objectifs du site est essentiel dans la phase de conception, afin de pouvoir en extraire les fonctionnalités et préconisations qui devront être assemblées dans le site, tout en gardant en mémoire la façon dont l’utilisateur va interagir avec ce contenu.
Tout comme Norman, Jesse Garrett est un acteur important des concepts actuels en design d’expérience utilisateur. Cet ouvrage pousse l’utilisateur à se poser les bonnes questions lors de la conception d’interfaces et lui permet de découvrir l’expérience utilisateur et ses enjeux.

Lallemand Carine, Gronier Guillaume, Robillard-Bastien Alain et al., Méthodes de design UX: 30 méthodes fondamentales pour concevoir des expériences optimales, Paris, France, Eyrolles, 2018.

Carine Lallemand propose ici de guider le lecteur dans la mise en place de processus UX. Alors que la mise en place théorie est souvent abordée dans la littérature et les blogs spécialisés, elle dédie son livre à la centralisation de l’ensemble des méthodes UX qu’elle détaille, étape par étape pour aider le designer à choisir la plus adaptée à son projet, mais également à comprendre concrètement comment en tirer profit au maximum. Les concepts, méthodes, techniques et outils de conception permettent d’explorer des sujets aussi vastes que la recherche et le recrutement d’utilisateurs, le déroulement d’entretiens et de focus group, d’expérience map, de cartes d’idéation, de tri par carte ou encore d’échelle UX et de tests utilisateurs. Chaque méthode possède une section « En mode guérilla » qui offre des alternatives aux méthodes en cas de ressources limitées.
Ce livre, destiné aux designers, donne un point de vue plus concret des notions évoqués par Benoît Drouillat dans le MOOC. Il explique pas à pas leur mise en pratique dans des projets concrets, en tenant compte des conditions.

Saffer Dan, Microinteractions – Designing with details, O’Reilly, 2014.

Dan Seffer propose dans ce livre la définition de microinteractions : la façon dont l’interface réagit visuellement aux actions de l’utilisateur. L’auteur développe notamment les 4 principes de bases des microinteractions. Les déclencheurs, qu’ils apparaissent suite à une action de l’utilisateur ou par la volonté du système. Les règles, qui définissent la façon dont surviennent les animations en fonction du parcours de l’utilisateur. Le feedback, c’est-à-dire le message qui est compris par l’utilisateur grâce à ces animations. Et enfin, il évoque les modes, qui définissent les règles des animations peu fréquentes, et les boucles, qui caractérisent la durée des animations et leur nombre de répétitions. Il donne également des instructions sur la façon de les mettre en place, ainsi que sur la façon de tester ces animations lors de tests utilisateurs.
Cet ouvrage est particulièrement intéressant puisqu’il se consacre au design d’interaction et sur la façon dont l’interface peut communiquer des informations à
l’utilisateur au travers d’animations simples.

2. Articles

Beyaert-Geslin Anne, « Architecture de l’information versus design de l’information », Études de communication. langages, information, médiations (50), Groupe d’Études et de Recherche Interdisciplinaire en Information et Communication de l’Université Lille 3, 01.06.2018, pp. 161‑174. En ligne: <https://doi.org/10.4000/edc.7651>.

Cet article d’Anne Beyaert-Geslin se concentre sur le thème de l’architecture de l’information. Elle retrace l’origine et l’évolution de cette méthode, qu’elle tente de définir au travers d’une métaphore avec l’architecture des villes. L’étude de points de vues d’experts, permet de clarifier les points de convergence et de divergence de l’architecture de l’information avec le design d’information. L’enjeu étant de mieux comprendre les spécificités de ces deux termes ; leur relation avec les notions de signes et de sens est également étudiée. En s’appuyant sur les axes de changements majeurs du passée, l’auteur se questionne sur leur évolution future et sur la façon dont ils vont être assimilés par les usagers.
Cet article permet de comprendre l’évolution des méthodes et des pratiques de conception. Il ne donne pas d’élément de réponse, mais pose une série de réflexions destinées à aider le designer à comprendre les enjeux, points commun et différences des notions d’architecture d’information, de design d’information et d’UX.

Camere Serena, Schifferstein Hendrik N.J. et Bordegoni Monica, « From Abstract to Tangible: Supporting the Materialization of Experiential Visions with the Experience Map », International Journal of Design (12:2), 2018. En ligne: <http://www.ijdesign.org/index.php/IJDesign/article/view/2825>, consulté le 23.04.2020.

Cet article se focalise sur la méthode de l’expérience map. Ce processus permet aux designers de se détacher des fonctionnalités et des caractéristiques physiques d’un produit, afin de se concentrer d’avantage sur l’utilisateur. L’expérience map est une synthétisation visuelle des besoins et des attentes de l’utilisateur, de la façon dont il va expérimenter le produit mais également de ses ressentis sensoriels. Elle permet aux designers de retranscrire facilement l’ensemble des éléments de l’histoire de l’interaction entre le produit et l’utilisateur. L’article comporte deux études de cas qui montre la mise en place de l’expérience map dans une conception centré utilisateur.
Cet article apporte des informations complètes et illustrées d’une méthode qui, bien que peu généralisé dans les processus UX, permet de cartographier l’ensemble des éléments, plus au moins abstraits, connus sur l’utilisateur. Cette visualisation est utile à toutes les phases d’un projet afin de garder en vu les objectifs qui doivent être remplis par le produit final.

Marcoux Yves et Rizkallah Élias, « La dimension sémantique, négligée de l’approche expérience-utilisateur », Études de communication. langages, information, médiations (41), Groupe d’Études et de Recherche Interdisciplinaire en Information et Communication de l’Université Lille 3, 01.12.2013, pp. 119‑138. En ligne: <https://doi.org/10.4000/edc.5418>.

Alors que la qualité de l’expérience utilisateur semble garantie pour beaucoup de designers par la réalisation de tests utilisateurs, l’article insiste sur une autre dimension importante : une représentation sémiotique de l’interface, basée sur la langue naturelle. Elle favorise l’établissement d’une communication porteuse de sens entre le concepteur et l’utilisateur. L’utilisation de l’interface est d’autant plus clarifiée pour les nouveaux utilisateurs. Cet article présente la sémiotique intertextuelle, avant de s’attarder sur une proposition de conception d’interface en utilisant des cycles d’idéation-tests. L’objectif principal de cet article est de lutter contre les interfaces « mensongères », qui ne reflètent pas pleinement à l’utilisateur le champ des possibles.
Cet article est intéressant, puis qu’il va plus loin que la simple phase des tests utilisateurs, et se concentre sur une pratique complexe à mettre en place, mais pourtant particulièrement indispensable pour une l’expérience de l’utilisateur de qualité.

Pucillo Francesco et Cascini Gaetano, « A framework for user experience, needs and affordances », Design Studies 35 (2), 03.2014, pp. 160‑179. En ligne: <https://urlz.fr/cvHW>.

Cet article permet de comprendre les critères qui définissent une bonne expérience utilisateur. Il réfléchit également aux futures conventions de conceptions de ces expériences qui pourraient être mises en place.
Lors de l’élaboration d’un produit, il est indispensable de prendre compte des spécificités de l’objet, mais également de satisfaire l’utilisateur dans sa démarche : il faut pour cela tenir compte de ses attentes, de ses besoins et de son aspect émotionnel. Cette double prise en compte est associée avec le terme d’affordance,  définit comme étant une possibilité d’actions offerte par une interface à un utilisateur, ce dernier ne pouvant se saisir de cette opportunité que dans un contexte donnée et avec une littératie suffisante.
Cet article est particulièrement intéressant en complément du MOOC, puisqu’il s’interroge sur la façon dont on peut concevoir une expérience pour un utilisateur ; bien qu’on ne peut être certain de l’expérience réelle ressentie par l’utilisateur, il est important de comprendre et de réduire ses frustrations.

Serrault David, « Design, agilité et intelligence collective : motifs et conséquences d’une mutation des pratiques », Sciences du Design n° 2 (2), Presses Universitaires de France, 2015, pp. 40‑47. En ligne: <https://www.cairn.info/revue-sciences-du-design-2015-2-page-40.htm>.

Au travers de cet article, David Serrault s’intéresse à la façon dont a évolué le design et ses pratiques, ainsi que les nouveaux enjeux auxquels a été confrontée la discipline, avec notamment une prise en compte accrue des besoins du commanditaire et des utilisateurs. L’origine des méthodes Agiles est revue par l’auteur, qui s’attarde par la suite sur l’intégration dans ces méthodes, issues du domaine informatique, au design, qu’il a ainsi fallu repenser. Dans un second temps, l’article évoque le rôle désormais majeur de la co-conception dans le design de service ; celle-ci repose sur l’intelligence collective et regroupe tous les acteurs d’un projet.
Cet article permet de mieux comprendre l’évolution des pratiques du design et des méthodes de développement de projets, tels que les méthodes Agile ou le Sprint. Il améliore la compréhension du lien originel entre le design et la production de logiciel. Il montre également la place croissante du design dans les projets, parallèlement à la nécessité émergente d’améliorer l’expérience l’utilisateur.

3. Page web et conférences

Drouillat Benoît, « Transmettre la vision d’un projet avec un prototype », Designers Interactifs, 2018, <https://www.designersinteractifs.org/transmettre-la-vision-dun-projet-avec-un-prototype/>, consulté le 22.04.2020.

Dans cet article, Benoït Drouillat revient sur l’une des phases importante du développement d’un projet : le prototypage. Il permet d’exprimer visuellement l’ensemble du travail déjà accompli, mais également de se faire une idée plus précise du produit final. Il procure, de plus, un support concret, plus ou moins réaliste, aux utilisateurs qui pourront ainsi se projeter plus facilement dans le projet. Il définit le prototype en fonction de plusieurs paramètres : l’échelle, la forme qu’il prend, son niveau de fidélité souhaité avec le projet final ? mais également son dessein. En s’appuyant sur des exemples, il s’attarde par la suite sur les différentes représentations du prototype : papier, hybride, narratif ou encore interactif.
Cet article entre dans la continuité du visionnage du MOOC, où le terme « prototype » a été fréquemment utilisé sans être expliqué. Destiné à un public novice, il offre une porte d’entré intéressante et accessible sur cet outil de conception indispensable en design UX.

Fadell Tony, The first secret of design is … noticing. En ligne: <https://www.ted.com/talks/tony_fadell_the_first_secret_of_design_is_noticing>, consulté le 22.04.2020.

Dans cette conférence, Tony Fadell, informaticien, ingénieur et designer, se focalise sur ce qu’il appelle les « problèmes invisibles ». Dans notre quotidien, nombreux sont les problèmes plus ou moins contresignant qui viennent compromettre une action ou une volonté. Les interfaces n’échappent pas à cette constatation et comportent de nombreux défauts. Le cerveau s’accoutume cependant à ces problèmes quotidiens, qu’il traite par automatisme. Ces derniers ne disparaissent pas pour autant, et les designers ont la responsabilité de les identifier, afin de pouvoir trouver une solution qui soulage l’utilisateur. Résoudre ce que plus personne ne voit est difficile, il prodigue donc quelques conseils pour y être plus attentifs.
Cette intervention est particulièrement pertinente dans le domaine de l’UX, elle permet de mieux comprendre les problèmes qui subsistent dans notre quotidien, et de l’importance qu’il faut donner à ces problèmes invisibles dans les interfaces pour simplifier et améliorer l’expérience des utilisateurs finaux.

LALLEMAND Carine, Guérilla UX, « quick » mais pas « dirty » – Carine LALLEMAND, Conférence, 48:29. En ligne: <https://www.youtube.com/watch?v=NTlBB9yhC1s>, consulté le 22.04.2020.

Carine Lallemand introduit ici la méthode Guérilla, de plus en plus courante dans l’UX. Le Guérilla s’adapte à l’ensemble des étapes du processus UX. L’utiliser, c’est tenir compte des méthodes classiques tout en les adaptant aux contraintes d’un projet. Ainsi, pour chaque étape, une alternative guérilla va être proposée, en pesant ses avantages et ses risques. Dans la phrase d’exploration, les entretiens peuvent par exemple être remplacés par des entretiens virtuels et des complétions de phrases. Lors de l’idéation, les personas peuvent être réalisés en proto-personas confrontés, le brainstorming peut être optimisé grâce des cartes d’idéations. À l’étape de génération, un sketch-a-thon peut se substituer au maquettage. Le tri par carte peut également être simplifié en tri de carte Delphi.
Cette conférence est intéressante puisqu’elle introduit le guérilla dans sa globalité, sans se focaliser uniquement sur les tests utilisateurs, et permet de comprendre comment les méthodes UX peuvent être mises en place sans une grande quantité de ressources.

Laureau Julien, « Heuristiques de Nielsen : les 10 commandements de l’utilisabilité », Medium, 28.03.2019, <https://medium.com/@j.laureau/heuristiques-de-nielsen-les-10-commandements-de-lutilisabilit%C3%A9-e1a1c0a49ddf>, consulté le 22.04.2020.

Cet article introduit les heuristiques de Nielsen qui, s’ils sont suivis, aident à améliorer l’utilisabilité d’une interface et donc l’expérience de l’utilisateur. Les dix principes énoncés sont : la visibilité du statut du système, la correspondance du système avec le monde réel, le contrôle de l’utilisateur et de sa liberté, la cohérence du système avec les standards, la prévention des faux-pas et des erreurs, la mise en avant d’un système de reconnaissance plutôt que de mémorisation, la flexibilité et l’efficacité de l’usage du système, la restriction du nombre d’informations dans l’interface, l’accompagnement de l’utilisateur en cas d’erreur et enfin, un accès facile à une aide complémentaire.
Cet article est intéressant pour un designer non expérimenté ; ces principes ouvrent les réflexions sur les premiers éléments à mettre en place dans une logique de conception centrée utilisateur.

Orsini Yuna, « Conception UX : comment organiser un test utilisateurs ? », Medium, 27.08.2018, <https://medium.com/poool-stories/conception-ux-comment-organiser-un-test-utilisateurs-cd20f5b3e283>, consulté le 22.04.2020.

Cet article apporte une série de réponses aux questions qu’un designer doit se poser avant de réaliser ses premiers tests utilisateurs. Yuna Orsina se base sur sa propre expérience pour donner des indications sur le meilleur moment pour effectuer un test utilisateur en fonction du projet ainsi que sur le nombre idéale de participants et sur la façon de les recruter. Elle estime également la durée optimale d’un test, la façon dont ce dernier peut être préparé, et décrit également chaque étape de son déroulement. Enfin, elle explique le processus d’analyse des résultats des tests et l’impact que ces derniers doivent avoir.
Cet article permet de donner quelques notions clés d’une méthode UX très répondue, et uniquement évoquée dans le MOOC. Les tests utilisateurs sont cruciaux dans une démarche centrée utilisateur, il est donc important de permettre à des designers novices de se faire une idée rapide du fonctionnement de cette méthode, et de la meilleure façon de la mettre en place pour éviter les biais.