L’Interface utilisateur au cœur de l’expérience 15 Mars 2017 | Veille & tendances

UX, UI... On entend de plus en plus souvent parler de ces mots et des métiers d’UI et d’UX Designer en France mais parfois sans vraiment en distinguer les nuances.
Pourtant, ces deux compétences sont liées et non négligeables, pour ne pas dire indispensables, pour un site internet efficace. 

Quelle différence pour ces 2 notions UX et UI ?

L’UX, pour User eXperience travaille, comme son nom l’indique, sur l’expérience utilisateur. Il met celui-ci au centre de sa réflexion pour concevoir le site le plus adapté, pratique et simple possible pour la cible visée. 

Prenons l’exemple d’un produit concret, avec une marque qui a su tirer profit de cette réflexion et de l’utilisation de tous les jours de son produit pour l’adapter : le ketchup Heinz.  

Le produit vs l’expérience utilisateur

Au fil du temps, Heinz s’est servi de cette expérience quotidienne : lorsqu’il n’y a presque plus de ketchup, il faut mettre le produit à l’envers pour essayer de faire descendre le ketchup. Cependant, ce n’est pas toujours simple, de nombreuses personnes laissent donc le produit à l’envers afin de ne plus avoir de difficultés à avoir du ketchup lors de la fin de la bouteille.

Tirant parti des situations quotidiennes de ses clients, utilisateurs, Heinz a donc décidé d’inverser la forme de ses bouteilles comme si elles étaient à l’envers pour ne plus avoir ce problème.

Pour un site internet, c’est le même principe : il s’agit d’adapter son outil numérique à ses clients, à sa cible potentielle. 

L’UX Designer va donc se concentrer sur l’ergonomie, ou l’architecture du site. Il va penser et tester tous les procédés et scénari du site pour en sortir le meilleur en fonction d’une problématique posée par rapport à une cible.

Quant à l’UI Designer, ou User Interface (interface utilisateur), il va se concentrer sur la partie visuelle, tout ce qui est visible pour l’internaute : le contenu, la navigation, les fonctionnalités tels que les outils, les boutons ou encore les animations. 

C’est donc le produit fini tel qu’il est, mis en forme et en page. L’UI fait parti de l’UX, ces deux expertises, exploitées ensemble et intégrées au Webdesign permettent de créer un site internet des plus pertinents.

A l’agence Begital, cette notion est au cœur de nos projets en création ou refonte de site, du chef de projet au webmarketeur en passant par le webdesigner. Ce dernier en est le garant.  

Si d’ailleurs vous avez un projet de site internet ou vous souhaitez auditer votre site actuel, n’hésitez pas à nous contacter !  

Les bonnes pratiques en matière d’UI :

Voici quelques conseils UI et de mise en page à prendre en compte pour concevoir ou améliorer votre site internet :

Apportez de la clarté, restez simple dans votre mise en page :
- N’ayez pas peur du blanc, utilisez les whitespace
Conservez plutôt une seule colonne et évitez de lui donner une largeur trop importante. L’internaute doit avoir envie de lire et ne pas avoir l’impression que la lecture de ce texte soit interminable
Evitez les couleurs envahissantes, restez sobre

Exemple avec www.cyclesdesmazeau86.fr.

Allez à l’essentiel :
- Ne donnez que les informations nécessaires
Mais incitez à voir ou lire plus si besoin et à continuer la navigation 
Mettez en avant les informations ou actions importantes
Evitez les nombreuses étapes pour arriver à un but ou une action

Exemple avec www.lelitondort.fr.

Concevez un produit compréhensible par tous :
- Concevez des boutons où l’utilisateur comprend qu’il peut cliquer
Concevez des icônes qui n’ont pas de mauvaise interprétation. L’internaute doit immédiatement savoir ce qu’ils signifient. Dans le cas où cela porterait à confusion, ajoutez du texte avec l’action associée à l'icône. De plus, cela incite à l’action !
Adaptez vos contenus : tout le monde doit pouvoir comprendre vos contenus. Partez également du principe qu’on ne lit pas de la même façon un journal ou support papier qu’un support web !

Attention à la typographie :
- Elle doit être en cohérence avec le contenu et l’identité de l’entreprise
Elle doit aussi être parfaitement lisible par tous. Attention donc à la taille, l’interligne, l’espacement et au style de police…
Ne choisissez que quelques polices, une pour les titres et une pour le texte, ou alors une pour les titres, une pour les sous-titres et une pour le contenu restant mais ne soyez pas dans l’abus. Tout doit rester cohérent.

Exemple avec www.votre-bijoutier.fr ou www.eric-79.fr


Attention à la ligne de flottaison :
La ligne de flottaison est la ligne invisible qui sépare la partie de votre écran visible au reste du contenu du site, accessible uniquement si l’on fait défiler la page.

Exemple avec cet iceberg :

La partie en surface de l’iceberg est la partie visible sur votre écran du site internet et la partie qui est cachée en dessous représente le reste du contenu du site accessible en défilant. Cette surface, c’est la ligne de flottaison.

- Laissez les éléments importants au dessus de la ligne de flottaison avec les boutons d’incitation à l’action bien visible. En effet, une part de personnes se contentent des premiers contenus et ne scrollent pas (ne font pas défiler) le reste de la page. Elles ne verront et ne liront pas les autres informations et pourront passer à côté de quelque chose d’important !
Ne coupez pas le texte au dessus de la ligne de flottaison si vous avez d’autres informations à donner ou action à faire faire. Si votre contenu continue en dessous de la ligne de flottaison, faites comprendre aux utilisateurs qu’il y a d’autres choses à voir pour les inciter à scroller et à continuer sa navigation !

Exemple avec www.excelrent-location.fr.

Basez vous d’abord sur les plus petits écrans pour travailler :
- Pour le confort de tous les utilisateurs, partez toujours de la plus petite taille d’écran à la plus grande taille pour pouvoir plus facilement adapter les contenus sur du responsive

Respectez et suivez les normes du web : attention à l’originalité vs l’intuitif :
- La barre de recherche se trouve en haut vers la droite
Le menu est en haut vers la gauche ou bien en barre de menu centrale
Il y a une taille moyenne pour les typographies sur le site : en général le corps du texte se situe entre 10 et 14 selon les polices utilisées
S’il y a un logo ou un nom en haut du site, il renvoie vers l’accueil au clic 
Un texte souligné, c’est un lien. Évitez de frustrer vos internautes
Pour les contenus additionnels ou les renvois vers des liens annexes, ainsi que les pubs, tout se trouve sur la colonne de droite par habitude
Le burger ☰ affiche le menu

Exemple avec www.votre-bijoutier.fr.


Bien entendu, il est possible de ne pas suivre ces normes et d’être original. 
Faites attention cependant à ne pas perdre ou frustrer votre utilisateur car ce sont des réflexes et des concepts plutôt intuitifs !

Dernières actualités