Capsule Design #08 : Le rôle de l’interface dans l’expérience

La Capsule Design fait son grand retour cette saison ! Un huitième épisode consacré à la place de l’interface dans l’expérience utilisateur.

Erika, designer UX/UI et Alexandre reviennent sur les spécificités de la conception d’interface utilisateur (UI), ses règles ergonomiques et méthodes de conception, mais aussi la manière de maintenir sa curiosité et son inspiration éveillées aux nouvelles tendances.

Bonne écoute à tous et à toutes !

Les Designers de l’Agence LunaWeb

Alexandre : Bonjour à toutes et à tous, vous écoutez “Salut les Designers”, le podcast de l’Agence LunaWeb. Aujourd’hui, nouvel épisode de notre format court “Capsule Design”. Dans cette série nous explorons le design UX à travers différentes thématiques en compagnie d’un membre de l’agence.

Pour cet épisode, j’ai le plaisir de recevoir ma collègue Erika Le Ralle, UX et UI Designer. Salut Erika, comment ça va ?

Erika : Salut Alexandre ! Et bah ça va très bien, et toi ?

Alexandre : Ça va très bien, merci. Avec toi nous discuterons du rôle de l’interface utilisateur, ou UI et de son influence sur l’expérience. Mais avant d’entrer dans le vif du sujet, peux-tu nous expliquer ce que tu fais à l’agence en quelques mots, en tant qu’UX/UI Designer ?

Erika : Comme tu l’as mentionné, je travaille à l’agence en tant que designer UX et UI.

Ma principale responsabilité, partagée avec mes quatre collègues, consiste à concevoir des interfaces web à la fois intuitives, fonctionnelles et esthétiques.

Dans cette démarche, on veille à répondre aux mieux, aux besoins des utilisateurs, tout en prenant en compte ceux de nos clients.

Alexandre : Aujourd’hui tu avais envie de nous parler de l’interface utilisateur, tu peux nous dire pourquoi avoir choisi ce sujet ?

Erika : Et bien, je constate qu’on met souvent en avant l’importance de l’UX dans la conception de sites web, ce qui est une bonne chose !

À mon sens, l’UI Design est mal comprise. On la voit uniquement comme une source d’effet « wow » alors qu’elle repose sur des règles bien approfondies.

Pour moi, son but est de créer une interface qui soit à la fois esthétique, certes, mais aussi ergonomique (donc utile et utilisable).

L’interface utilisateur doit rendre un site web attrayant, mais aussi facile à utiliser, de manière à ce que les utilisateurs puissent atteindre leurs objectifs sans difficulté.

Et je souhaite parler de tout ça avec toi içi !

Alexandre : UX design, UI design.. Ce ne sont pas forcément des termes très explicites, peut-être qu’avant d’aller plus loin, on pourrait revenir sur la base, c’est quoi pour toi l’UX design et l’UI design ?

Erika : C’est vrai que ces termes peuvent parfois sembler peu clairs…

Et c’est d’ailleurs, une question qui revient fréquemment dans notre métier. Mais j’ai l’impression qu’il n’y a pas, une définition bien unique.

On pourrait par exemple utiliser la métaphore de l’iceberg qui illustre l’UX et l’UI en 2 disciplines distinctes : l’UI représente la partie visible de l’iceberg (donc d’un site), et l’UX représente la partie immergée, non visible.

Mais, il existe d’autres points de vue sur ce sujet.

En tant que designer, je préfère voir le design d’Interface Utilisateur comme faisant partie intégrante de l’expérience utilisateur.

Donc pour faire simple, pour moi l’UX englobe l’ensemble de l’expérience des utilisateurs sur un site, en les plaçant au cœur du processus de conception.

Alors que l’UI, elle, se concentre sur l’apparence visuelle de l’interface et la manière dont les éléments sont disposés pour faciliter l’interaction entre l’utilisateur et l’interface.

Alexandre : J’ai l’impression que le plus souvent, on résume l’interface utilisateur à un simple travail esthétique, qu’en penses-tu ?

Erika : Oui je suis d’accord avec toi, malheureusement ! Pourtant, l’objectif de l’UI ne se limite pas à faire du “beau”, ses implications sont bien plus vastes.

Elle va, certes, permettre un design attrayant en harmonie avec l’image de marque, avec aussi parfois une dimension un peu plus marketing pour transmettre des messages spécifiques.

L’UI permet de générer des émotions positives et d’inspirer confiance, on peut d’ailleurs parler de “design émotionnel”.

Elle va aussi optimiser la conversion en mettant en avant des éléments clés, par ex avec des boutons qui seront stratégiquement bien placés.

Mais surtout, elle va assurer un parcours utilisateur efficace par le biais d’une navigation fluide et pertinente et par un design cohérent dans l’ensemble de pages avec une attention particulière à ne pas perturber les habitudes des utilisateurs.

Finalement, dans l’ensemble, l’UI englobe tout un tas d’aspects, que je n’ai d’ailleurs pas tous cités ici…

Il y a en beaucoup d’autres qui font, par exemple, partie des 8 critères de Bastien et Scapin (qui sont des chercheurs qui ont listé des éléments à prendre en compte pour améliorer l’ergonomie d’une interface), ou encore des lois UX par exemple la loi de Jakob, qui elle, préconise qu’il est préférable de s’appuyer sur ce que les utilisateurs connaissent déjà et comprennent…

L’UI englobe tout un tas d’aspects ergonomiques, comme par exemple les huits critères de Bastien et Scapin ou encore la loi de Jakob.

Donc pour résumer, l’UI design s’étend bien au-delà de l’esthétique pour influencer l’expérience de l’utilisateur.

Alexandre : Si je comprends bien, ça veut dire qu’un “beau site” n’est pas forcément synonyme d’un “bon site” ? 

Erika : Exactement et c’est intéressant ce que tu viens de dire !

Tu as peut-être d’ailleurs déjà entendu parler de l’effet de “l’esthétique sur l’utilisabilité”.

C’est une citation assez connue dont l’auteur par contre m’est inconnu. Elle montre que les utilisateurs ont tendance à penser que les interfaces attrayantes sont plus faciles à utiliser.

Et pour la petite anecdote, y a eu plusieurs tests là-dessus… en 1995 par exemple, y’a 2 chercheurs japonais (Masaaki Kurosu et Kaori Kashimura) qui ont mené une expérience avec des distributeurs automatiques de billets.

Ils ont divisé 26 variantes en 2 groupes : des distributeurs avec un design traditionnel sérieux et d’autres avec un design plus mignon et attrayant. Il faut savoir que toutes les versions avaient exactement les mêmes fonctionnalités.

Il est intéressant de voir d’ailleurs que les études qui ont été menées sur l’impact de l’UI sur l’utilisabilité ont montré qu’un design attrayant était perçu comme plus facile à utiliser.

Et les résultats ont pourtant montré que les distributeurs au design attrayant étaient perçus comme plus faciles à utiliser.

Cette observation met en évidence à quel point l’apparence d’une interface ou d’un site web influence sur l’expérience des utilisateurs et sur la façon dont ils évaluent sa facilité d’utilisation. Alors que c’est pas forcément le cas.

Je tiens quand même à souligner l’importance d’un équilibre entre la fonction et la forme. Si l’esthétique prédomine au détriment de l’utilisabilité, le risque est de frustrer les utilisateurs et de potentiellement les faire quitter du site.

Alexandre : Et à l’agence comment ça se passe ? À quel moment intervient le travail de l’UI au sein d’un projet ?

Erika : Et bien, tout dépend de la nature et l’envergure du projet, mais dans la plupart du temps, à la suite des études des UX Researchers de l’agence (qui ont par exemple réalisés des tests utilisateurs), avec ou sans les designers, on va organiser avec les chefs de projets des ateliers de conception en collaboration avec nos clients.

Ces ateliers ont pour mission de définir les objectifs du projet, de mieux cerner les utilisateurs, et de concevoir ou repenser des sites web en accord avec leurs besoins.

En préparation du travail d’UI, on utilise des méthodes UX adaptées aux exigences spécifiques du projet, avec par exemple la création de « User Journey » ou encore la définition de personas de marque.

Et on vient ensuite formaliser ces résultats, en commençant par la création de zoning, puis en élaborant des wireframes entre autres.

Et c’est à ce moment là, que l’Interface Utilisateur entre en action !

Alexandre : Tu aurais un exemple à nous donner ?

Erika : Et bien justement, actuellement, je suis chargé d’un rebranding et de la refonte UI d’un site d’offres d’emploi.

Dans un premier temps, j’ai commencé à créer leur nouveau logo et leur nouvelle identité graphique en veillant bien sûr à préserver l’essence de leur identité actuelle.

D’ailleurs je rebondis là dessus, mais on a pas souvent l’habitude à l’agence de faire du rebranding, on s’appuie souvent sur la charte graphique du client qu’on vient adapter au web, en veillant par ex à l’accessibilité des couleurs. Et dans le cas d’une charte graphique non existante, on vient jouer avec les éléments du logo, ses formes, ses couleurs, pour créer une véritable identité visuelle.

Même si c’est plus rare dans le cas de la conception web, l’identité de la marque étant déjà existante, le (re)branding est une étape très intéressante dans la définition d’une bonne UI.

Et après validation du logo, j’ai entrepris la phase d’UI Design en ayant bien en tête l’objectif de créer une identité visuelle distinctive qui reste ancrée dans la mémoire des utilisateurs.

J’ai donc commencé par faire de la veille graphique : J’ai rassemblé tous les sites concurrents sur une grande planche.

Et en parallèle, j’ai élaboré un moodboard pour mettre en avant diverses tendances et styles inspirants pour la marque et la refonte.

Une fois cette phase de référencement graphique terminée, j’ai entamé la phase de création proprement dite, en commençant par la refonte de la page d’accueil en version desktop puis mobile.

L’élaboration d’un moodboard, pour mettre en avant diverses tendances et styles inspirants pour la marque, est un travail à faire en parallèle.

Au cours de cette phase, j’ai apporté pleins des modifications aux différents éléments de la page, j’ai modifié et créé de nouveaux blocs etc.

En respectant des règles d’UX et d’UI, dont d’ailleurs, bon nombre deviennent des automatismes pour beaucoup d’entre nous je pense.

Par exemple, en accordant une importance cruciale à la hiérarchie visuelle, ou en utilisant une taille de typo pour les paragraphes à 16px avec un interlignage généreux pour une lecture optimale et accessible etc.

Par la suite, j’ai étendu cette approche à l’ensemble des pages du site, en veillant à préserver une cohérence globale grâce à la mise en place de composants sur Figma et d’un design system, qui implique par ex de garantir une uniformité dans les boutons, des espacements cohérents entre les éléments, et d’autres éléments similaires, le tout dans le but de faciliter la navigation des utilisateurs.

La mise en place de composants d’interface voir d’un Design System est aussi l’une des grandes étapes du design UI.

Voilà les grandes lignes de mon approche, mais en réalité, de nombreux autres aspects et règles automatiques entrent en jeu là-dedans.

Alexandre : Tu l’as dit, il y a des solutions pour concevoir l’UI d’un site avec le moodboard, la charte graphique, mais peux-tu t’assurer que ces choix graphiques sont les bons pour l’utilisateur ?

Erika : Hmm question pas simple… Je dirais que si on a correctement mené les phases d’UX research, qu’on est bien passé par les étapes d’UX et de veille, il y a de fortes chances que l’UI sera bien accueillie par les utilisateurs.

En ayant réalisé des recherches approfondies, on est en normalement en mesure de mieux comprendre les utilisateurs et leurs préférences.

L’UI d’un site, c’est un équilibre parfait entre les besoins de l’utilisateur et la représentation de la marque.

On doit toujours aussi veiller à ce que l’UI soit cohérente, et homogène, comme je l’ai expliqué juste avant. Mais, il faut toujours avoir en tête que l’objectif principal, c’est que les utilisateurs puissent trouver ce qu’ils cherchent, le plus facilement, et le plus rapidement possible.

Et si je peux rebondir sur ta question, je pense que l’UI Design, ne se limite pas qu’à satisfaire les utilisateurs, elle doit aussi permettre à promouvoir la marque, et véhiculer, un message précis.

En fait pour moi, l’UI d’un site, implique un équilibre parfait entre les besoins de l’utilisateur, et la représentation de la marque, mais là encore ça peut dépendre du projet.

Alexandre : Le travail d’UI design ne s’arrête pas, j’imagine, à la conception d’une maquette habillé ou d’un moodboard. Alors qu’est-ce qu’on peut faire, selon toi, si on veut aller plus loin dans une démarche de stabilité et de cohérence visuelle ? 

Erika : Et bien à l’agence, pour approfondir notre démarche en matière de stabilité et de cohérence visuelle, Arnaud, designer à l’agence, a initié un « Starter kit » sur Figma, qu’on utilise en début de chaque projet. D’ailleurs, si vous voulez en savoir plus, il y a une capsule dédiée à ce sujet, et une nouvelle est en préparation.

Ce fichier comprend plusieurs pages préconçues, dont, un guide de style qui répertorie les couleurs principales, secondaires et tertiaires, mais aussi les différentes typographies pour les titres et le texte. Le tout adapté aux différents devices.

Chez LunaWeb, nous avons mis en place un starter kit d’UI pour nos projets, afin d’assurer la cohérence visuelle et ergonomique du projet.

On dispose aussi d’autres pages comme un début de Design System avec des composants types, tels que les boutons sous différents états, par exemple.

Et justement, on va venir les personnaliser pour les aligner avec la direction créative qu’on a prédéfinie, et au fur et à mesure du projet on va venir multiplier ces composants en fonction de nos besoins spécifiques.

Mais cette page ça peut être aussi bien un simple UI KIT qu’un Design Système bien plus élaboré.

Cette approche, elle nous permet effectivement de gagner du temps, mais elle va surtout, nous assurer une cohérence globale sur l’ensemble des pages et des devices.

Alexandre : Pour finir, l’UI design c’est un travail qui demande évidemment de la créativité et cette créativité il faut pouvoir la nourrir alors Erika, est-ce que tu peux nous parler un peu de ta veille, qu’est-ce que tu regardes, est-ce que t’as des astuces à nous donner ? 

Erika : Pour commencer, je m’inspire évidemment des sources d’inspiration classiques comme Awwwards, Behance, Dribbble ou Pinterest…

J’utilise aussi plusieurs extensions Chrome comme Muzli ou Designer Daily report qui me permet d’être inspirée dès que j’ouvre un nouvel onglet sur mon navigateur.

J’utilise aussi de plus en plus Instagram qui regorge d’inspirations et de bonnes pratiques. Je suis des comptes comme « ui.johnson » « robert.mccombe” par exemple.

Et pour finir, À l’agence, on utilise un outil très pratique qui s’appelle “Eagle”, qui permet de stocker toutes nos inspi : donc ça peut être des sites web ou des captures d’écrans. C’est un peu comme une sorte de bibliothèque d’inspiration en constante évolution.

Au-delà d’extensions Chrome pour cultiver l’inspiration au quotidien, nous utilisons Eagle App, un outil permettant de stocker et classer les inspirations de sources différentes. C’est devenu un incontournable à l’agence.

Et ce qu’il le rend vraiment pratique, c’est qu’on peut tout organiser en dossier et sous-dossiers. C’est maintenant un outil incontournable, je ne pourrais plus m’en passer !

En tant que designer, je considère que c’est primordial de maintenir une veille constante et de rester attentif aux tendances graphiques au quotidien pour évoluer.

Alexandre : Eh bien, c’est déjà la fin de cette huitième capsule design du podcast Salut les designers ! Merci beaucoup Erika pour cet échange, c’était super intéressant.

Erika : Merci à toi !

Alexandre : Salut les designers, je le disais, c’est fini pour aujourd’hui mais ne vous inquiétez pas, on revient le mois prochain avec un nouvel épisode.

En attendant, n’hésitez pas à vous abonner à la newsletter du podcast pour retrouver l’ensemble des ressources de nos épisodes, les tips et conseils de nos invités ! C’est sur le site salutlesdesigners.lunaweb.fr que ça se passe. 

À très bientôt !