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

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 :

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.

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 :

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.

© Agence LunaWeb

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.

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.

Comment être user-centered autrement ?

© graphiste.com

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

© Placepull

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

exemple en e-commerce © uxplanet.org

Se projeter, c’est adopter !

© ARKit de Ikea

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

© uxdesign.cc

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.

© Hotjar

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.

© E. Renaux

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.

wireframe © twitpic.com

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.

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.

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 :

© Trello

L’interface, c’est ce que l’utilisateur voit en premier, et la navigation sur le web, une expérience à part entière.

Vous avez une carte émotion à jouer, une relation spéciale à créer avec vos prospects, de plus en plus exigeants et volatiles.

Si votre contenu et votre offre doivent rencontrer leurs attentes, il va sans dire que cela passera par une jolie vitrine bien conçue et intuitive.

Le secret : mettez-vous à la place de votre cible et faites des tests utilisateurs.

Et vous, comment allez-vous faire la différence ?