L’UI, acronyme pour “User Interface”, n’est autre que l’interface visuelle d’un site web ou d’une application avec laquelle interagissent les utilisateurs. C’est ce qui permet au visiteur la navigation entre les pages web et la compréhension de la structure du site (menus, liens, etc.). Elle a également un impact important sur le ressenti de l’internaute. Elle peut soit paraître visuellement attrayante et faciliter le parcours utilisateur, soit faire fuir. En d’autres termes, elle participe activement à l’expérience utilisateur générale, l’UX, et influe sur le trafic et l’audience. D’où l’importance d’une stratégie UI design pour la conception ou l’optimisation de son site internet. Mais quelle est exactement la définition de l’UI design et quels sont ses grands principes ? Faisons le point.
UI Design : Définition générale
Les champs d’action du design d’interface utilisateur
Le sigle UI désigne l’interface utilisateur, ou “User Interface” en anglais. Il s’agit de la partie visible d’un site ou d’une application web, utilisée par les internautes et mobinautes. Celle-ci, aussi appelée “front-office”, permet les interactions entre l’utilisateur et la partie technique, invisible, du site internet (le “back-office”). C’est ce qui va, par exemple, permettre à un client d’effectuer un achat et une commande sur un site e-commerce.
L’interface utilisateur est constituée d’un ensemble d’éléments graphiques qui doivent en permettre l’usage et la rendre attrayante :
- mise en page ;
- couleurs ;
- logos ;
- boutons de navigation ;
- images et bannières (cliquables ou non) ;
- polices d’écriture ;
Branche du design graphique, l’UI design est alors défini comme étant le travail de conception et d’optimisation du front-office. Réalisé par un UI designer, il vise à :
- Créer une identité visuelle qui soit agréable pour l’usager. Il s’agit du “design émotionnel”. L’esthétique participe à la communication et à l’image de marque du propriétaire du site (entreprise, entrepreneur, e-commerçant, etc.). Elle doit respecter une charte graphique pour rester cohérente d’une page web à une autre.
- Rendre la navigation efficace et intuitive, en se mettant à la place de l’usager. On parle alors de “design thinking”. Une mise en page soignée, claire, avec des rubriques rapidement identifiables, améliore l’expérience utilisateur. Elle permet, en autres, de retenir les internautes ou de leur donner envie de passer à l’action (cliquer, acheter, etc.).
Distinction avec l’expérience utilisateur (UX)
L’UI design, parce qu’il vise une meilleure expérience utilisateur (ou “User Experience”) fait partie du domaine, plus vaste, de l’UX. Celui-ci désigne, de manière générale, la qualité de l’expérience vécue par un internaute sur une plateforme web.
L’UX design cherche à allier satisfaction et engagement des visiteurs, notamment via :
- des contenus de qualité, répondant à leurs besoins ;
- des informations rapidement et facilement accessibles ;
- une simplification du parcours utilisateur, et donc de l’arborescence du site ;
- des visuels clairs et esthétiquement plaisants ;
Ainsi, UX et UI designers travaillent de pair. Le créateur de l’interface va notamment chercher à traduire visuellement les idées et concepts UX. Il porte un soin particulier à :
- l’esthétique et l’image de marque ;
- la clarté de la mise en page et des éléments graphiques ;
- la praticité de l’interface ;
- la lisibilité des informations (police, taille d’écriture…) ;
- aux temps de chargement et d’affichage des images en optimisant les ressources. Un procédé d’éco-conception web qui aide aussi à réduire son empreinte carbone.
Ce travail conjoint entre UX et UI permet de réduire le taux de rebond et d’améliorer le taux de conversion. Autrement dit, il aide à retenir les visiteurs et à les transformer en clients.
Qu’est-ce que l’UI dans la création ou refonte de site web ?
Comment intégrer l’UI design à la phase de conception ?
Comme nous l’avons vu, l’UI design doit faire partie d’un plan de conception plus général, afin d’optimiser l’expérience utilisateur. Or, celle-ci doit être pensée en amont de la création du site, puisqu’elle en impactera la structure.
Pour ce faire, il convient d’effectuer une recherche sur l’expérience utilisateur (ou “UX Research”) pour définir son public cible. L’analyse des besoins et des usages, essentielle en design thinking, permettra de concevoir un projet adapté au persona de ses clients. Les données récoltées se composent d’informations :
- quantitatives, qui synthétisent les comportements de manière statistique : qui fait quoi ?
- qualitatives, qui renseignent les attentes des usagers et les obstacles potentiels.
Ces informations doivent permettre de répondre aux questions suivantes :
- Quels sont les profils types des usagers ?
- Quels sont les produits, informations ou services qui les intéressent ?
- Pourquoi cela les intéresse ?
- Qu’attendent-ils de leur navigation sur votre plateforme ?
Ce travail d’enquête peut être réalisé via divers procédés, tels que :
- des sondages ;
- des entretiens ;
- ou des tests utilisateurs.
L’UX research, autrefois intégrée au métier d’UX designer, tend aujourd’hui à être réalisée à part, par un spécialiste : l’UX researcher. Ses données serviront à l’UX designer dans la conception du projet, puis à l’UI designer, pour sa retranscription graphique.
Toujours dans un souci d’anticipation, l’UI designer veillera à établir une charte graphique, garante de la cohérence visuelle du projet.
Comment optimiser l’UI d’une application ou site internet existant ?
Lorsque l’on travaille sur la refonte d’un site web, celui-ci est déjà soumis au test des utilisateurs. On effectue alors un audit UX, grâce à un suivi des performances, pour étudier les différents usages et parcours utilisateurs. Ce qui permettra, par la suite, d’adapter l’UI design.
On peut notamment utiliser des outils comme des trackers, ou bien des heatmaps, c’est-à-dire des cartes d’interactions. Ces représentations graphiques aident à identifier les zones avec lesquelles les visiteurs interagissent le plus, ou le moins. On distingue :
- les cartes de clics, qui montrent à quels endroits cliquent les internautes ;
- les cartes de déplacement, qui indiquent les mouvements du curseur de la souris, et donc les zones d’intérêt d’une page web ;
- les cartes de défilement, qui nous renseignent sur les scrolls, et donc les parties survolées.
- les cartes de clics morts et d’erreurs, qui mettent en évidence les bugs ou les zones induisant l’usager en erreur.
L’audit permet aussi de connaître le taux de rebond de chaque page, à savoir la proportion de visiteurs qui sont partis sans cliquer sur d’autres liens. S’il est élevé, cela signifie que les internautes ne trouvent pas les informations qu’ils cherchent ou que l’affichage n’est pas plaisant. On estime qu’au-delà de 55 %, le taux de rebond devrait être amélioré.
Enfin, un benchmark de la concurrence permet d’appréhender les concepts et designs graphiques à succès dans son domaine. Il peut aussi, à l’inverse, nous inciter à nous démarquer, en cherchant de nouvelles idées.
L’UI designer va ainsi utiliser toute cette mine d’informations pour améliorer l’interface du site, en accord avec les principes UX. Cela va l’aider à :
- retravailler la mise en page :
- modifier des visuels,
- jouer sur les couleurs ;
- ajouter ou supprimer des images ;
- augmenter ou diminuer la visibilité de certains éléments (boutons d’appels à l’action, titres, menus…)
Vous connaissez désormais les principes de base de l’UI design, sa définition et ses implications sur l’UX. La qualité de l’expérience utilisateur est cruciale lorsque l’on veut attirer, retenir et convertir en clients ses utilisateurs. Par conséquent, l’UI n’est pas simplement un bonus esthétique, elle joue un rôle central. Elle a un impact sur l’humeur et la confiance de l’internaute en votre site web, votre marque ou votre entreprise. Vous pouvez arriver à l’améliorer en tenant compte des conseils précédents, mais rien ne vaut l’expertise d’un UI designer. Vous souhaitez bénéficier du meilleur accompagnement possible en UI et UX design ? Faites appel aux spécialistes d’Ethiko, agence web écoresponsable, pour augmenter votre trafic et votre taux de conversion !
