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

ui

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 :

Suggestion de logiciels pour vous

Ranxplorer

Ranxplorer
Positions SEO, suivi de ses concurrents, mots clés...
Analyse SEO gratuite
Voir ce logiciel

Prezevent

Prezevent
Solutions de gestion de vos événements professionnels
Testez Prezevent
Voir ce logiciel

Cocolabs

Cocolabs
Marketplace de services. Sur-mesure et 100% clés en main.
Demander un devis
Voir ce logiciel

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 :

UI : exemple interface 1
UI : exemple interface 2
© uxplanet.org

Définition de l’UX et 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.

UI : différence entre UI et UX

« L’UX n’est pas de l’UI mais l’UI c’est de l’UX » par © Plezi

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.

Par exemple, pour un site internet, les 6 fondamentaux de l’UX sont :

  • d’être trouvé aisément (notamment par un bon référencement naturel, ou SEO),
  • d’être facile d’accès,
  • de donner envie (de cliquer, de parcourir les pages),
  • d’offrir une navigation intuitive (avec un menu efficace),
  • d’inspirer confiance,
  • d’être utile (contenu riche et répondant aux questions).

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

UX et UI : les différences

© Agence LunaWeb

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/UX 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.

Les maîtres mots sont :

  • Personnalisation : comment être user-centered autrement ?

Personnalisation UI avec Uber

© graphiste.com

  • Minimalisme : less is more!

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

    UI : tendance minimalisme

    © Placepull

  • Animation : les micro-interactions améliorent l’engagement des utilisateurs.

UI : exemple de micro-interaction en e-commerce

exemple en e-commerce © uxplanet.org
 

  • Réalité augmentée : Se projeter, c’est adopter !

UI : exemple de réalité augmentée

© ARKit de Ikea

  • le neumorphisme : quand la 2D du flat design rencontre un réalisme subtile et minimaliste.

UI : exemple de neumorphisme

© uxdesign.cc

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 UX : 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.

UI : heatmap sur hotjar

© Hotjar

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.

UI : zoning

 © 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.

UI : wireframe

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, Principal et Framer pour le motion design (conception animée) et la 3D.

UI : exemple de mock up
© 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 :

UI : gestion de projet avec Trello

© Trello

Pour séduire vos utilisateurs, soignez votre UI

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 ?

Suggestion de logiciels pour vous

Salesforce Marketing Cloud

Salesforce Marketing Cloud
CRM leader dans la création de parcours clients intelligents
Découvrez nos démos
Voir ce logiciel

lead

Transformez les visiteurs anonymes de votre site en clients
Testez gratuitement
Voir ce logiciel

SEMrush

SEMrush
L'outil marketing all-in-1 pour votre référencement naturel
Essai gratuit
Voir ce logiciel
Commenter cet article

Ajouter un commentaire