L’ABC de la conception UI pour séduire vos utilisateurs

par Nathalie Pouillard. Article mis à jour le 10 novembre 2020, publié initialement en mars 2020

Qu’est-ce que l’UI ? Pour attirer vos clients, leur faire adopter votre produit et les fidéliser, l’expérience utilisateur, ou UX, est la clé où centrer vos efforts pour vous différencier de la concurrence et satisfaire votre cible.

Mais nous avons dit que nous parlerions d’User Interface ? Pas d’User eXperience ! Oups, spoiler alert.

En effet, que votre produit ou projet web soit un site internet, une application mobile ou un logiciel en ligne, nous ne pouvons pas vous expliquer ce qu’est l’UI sans parler de l’UX, car ces deux notions font partie d’une seule et même stratégie marketing digitale.

En quoi l’UI contribue-t-elle à la conception centrée utilisateur, et donc à l’UX ? Quelle est la différence entre UI et UX ?

Ladies and gentlemen, pour créer ou optimiser votre produit web, en accord avec les besoins de votre cible, les valeurs de votre marque et votre stratégie digitale...

… nous vous présentons l’UI, partie émergée de l’UX :

Qu’est-ce que l’UI ?

UI signifie User Interface, ou interface utilisateur dans sa version française, mais qu’est-ce que c’est concrètement ?

L’interface, c’est la partie visible de la machine pour l’humain, le dispositif qui permet de mettre en relation l’utilisateur et le produit, et de communiquer entre eux.

L’utilisateur fait ainsi des commandes auxquelles la machine répond, en cliquant sur des liens, des menus, des boutons, sans qu’il ait besoin de coder.

L’UI est donc la vitrine cachant la complexité de la technologie tout en permettant à l’utilisateur de l’actionner simplement.

Enjeux de l’UI design

Vous le comprenez, dans la conception UI, il ne s’agit pas uniquement d’esthétique, même si c’est très important, mais plutôt de design fonctionnel, d’optimisation de l’esthétique au profit de l’efficacité et de l’émotion utilisateur.

Pour un fonctionnement web optimal, l’UI touche ainsi à :

l’emplacement du contenu,
la navigation,
le positionnement des menus,
le choix et le style des images, des animations ou des vidéos,
l’environnement graphique : le choix des couleurs, des typographies, des boutons.

C’est une problématique transversale qui touche au webdesign, pour répondre à des besoins en marketing et en communication de la marque (storytelling).

Dieter Rams, UI designer reconnu (chez Braun) définit les règles à respecter pour un UI design user friendly, en d’autres termes convivial et facile d’utilisation. Ainsi, le design de l’interface doit être :

innovant,
utile,
esthétique,
compréhensible,
discret,
honnête,
durable,
attentif aux détails,
minimaliste,
environment friendly (en étant smart, il consomme peu, notamment en serveurs).

Exemples d’UI mobiles proposés sur le site uxplanet.org :

uxplanet.org

Différences entre UI et UX

La notion de User Interface se définit en même temps que celle d’User eXperience, car la première sert la deuxième.

Oui, l’interface contribue à une bonne expérience client, entre autres...

Car il ne faut pas négliger le contenu, l’architecture du site, etc., autrement dit, l’UI est la forme, les contenus, le fond, et l’UX est l’équation parfaite entre le fond et la forme.

L’UX est le résultat des émotions procurées au moment de l’interaction avec la marque ou le produit.

En bref, elle répond à une stratégie basée sur le service client et sur l’intelligence émotionnelle, pour obtenir la satisfaction du client et le transformer en ambassadeur de la marque.

L’UI contribue, en partie, à l’atteinte de ces objectifs.

Le rôle de l’UI designer

Le métier d’UI designer, parfois UX-UI designer dans les plus petites structures, est apparu avec la complexité graphique et interactive croissante des pages web : responsivité (adaptation des pages à la taille de l’appareil utilisé), animation, réalité augmentée, etc.

En résumé, l’UI designer :

étudie les parcours utilisateurs, l’ergonomie et l’architecture d’information ;
prend en compte et répond aux demandes du client (ou employeur) ;
les traduit pour les web-développeurs ;
conçoit des maquettes d’interfaces simples, robustes, esthétiques et sécurisées ;
choisit les meilleurs outils et les meilleurs composants graphiques et interactifs.

Parmi ses qualités nécessaires : l’empathie, pour savoir se mettre à la place de l’utilisateur, et des connaissances graphiques (illustration, motion design, 3D) pour aider le client à se projeter, et in fine le client à adopter le produit.

Les tendances UI en 2020

Pour vendre votre produit, vous devez miser sur l’UCD, ou user-centered design.

Il s’agit d’une démarche de conception web qui s’attache aux besoins et aux attentes des utilisateurs finaux.

La personnalisation

Comment être user-centered autrement ?

Le minimalisme

Less is more ! Le temps de chargement des pages est plus rapide, pour un utilisateur toujours plus pressé.

L'animation

Les micro-interactions améliorent l’engagement des utilisateurs.

UI : exemple de micro-interaction en e-commerce

exemple en e-commerce © uxplanet.org

La réalité augmentée

Se projeter, c’est adopter !

Le neumorphisme

Quand la 2D du flat design rencontre un réalisme subtile et minimaliste.

La boîte à outils de l’UI designer

À la genèse du projet

Avant toute chose, vous devez commencer par :

une étude de marché (benchmarking), notamment pour comprendre les habitudes, les besoins et les comportements de votre population cible (via des interviews) ;
une veille graphique, sur les tendances en UI : des sites tels que Pinterest, Dribbble, Behance ou Awwwards sont appréciés à ce stade pour réfléchir à la conception de l’identité visuelle ;
la lecture du cahier des charges et des specs (spécifications, exigences du client) communiqués par le Product Owner, en charge de chapeauter le projet web ;
une étude de l’arborescence du site ou de l’appli ;
un audit ergonomique, si le produit web est déjà existant. L’UI designer peut par exemple se servir d’un logiciel tel que hotjar pour faire une heat map : le principe est de détecter les zones chaudes de la page, là où s’attardent les visiteurs, pour comprendre le parcours utilisateur.

Un design sprint, méthode de création inspirée par la méthode agile et le design thinking, peut aussi être mené pour partir d’une problématique pour imaginer un scénario réduisant les risques et les incertitudes autour d’une innovation.

Pendant la conception de l’interface

1) Le Product Owner, ou l’UX designer, qui n’a pas de compétences graphiques, fournit à l’UI designer un zoning, c’est-à-dire une pré-maquette très simple avec les blocs de contenus, les espaces attendus sur l’application, sans considérations esthétiques.

2) L’UI designer procède ensuite à l’élaboration du wireframe, maquette fonctionnelle schématisant plus en détail les zones et les composants de l’interface utilisateur.

Il utilise en général les traditionnels papiers et stylos, ou un logiciel tel que Balsamiq.

3) L’étape qui suit est celle de l’élaboration d’une maquette plus avancée, appelée aussi mock-up, réalisée par un·e infographiste pour concrétiser les éléments graphiques, ou l’UI designer lui-même s’il a des compétences en illustration.

Plusieurs itérations (ou versions) sont produites, en fonction des retours du client ou de l’employeur.

Parmi les références logicielles figurent Figma, Sketch et Adobe XD, mais aussi After Effects, Principle et Framer pour le motion design (conception animée) et la 3D.

Pexels

4) C’est enfin le moment de passer au prototypage. L’interface va être testée en partie par les utilisateurs et/ou les investisseurs, afin de recueillir les derniers retours avant le développement du produit.

Le logiciel de prototyping InVision permet ici de faire des tests de navigation en liant les JPEG de la maquette entre eux, et ainsi simuler le fonctionnement concret des pages webs de façon interactive.

Le prototype permet :

d’optimiser l’ergonomie,
d’appréhender le développement logiciel et applicatif nécessaire,
de simuler le fonctionnement a priori du site web, selon les objectifs de départ,
de valider les éléments graphiques,
d’estimer le temps et le coût de développement.

Tout au long du projet

Enfin, pour visualiser la progression de son projet, entre conception, suivi des itérations et validation du client, l’UI designer utilise un outil de gestion de projet doté d’un tableau Kanban :