UX design et UI design : différents et complémentaires.

Il existe plusieurs règles à suivre quand on crée un site internet. Je pense au référencement, à l’accessibilité, à la sécurité … et L’UX design (expérience utilisateur) et l’UI design (interface utilisateur).
En effet, on conçoit un site avant tout pour les futurs utilisateurs.

La navigation sur un site est une expérience.

La navigation sur la page d’un site doit être une expérience agréable pour un utilisateur. 
L’UX design permet de définir la meilleure façon de naviguer sur un site. Dans un premier temps on se pose les questions de bases : 

• Quelle est la cible?
• Quels sont ses besoins?
• Quels sont ses comportements?

L’UI permet de rendre cette navigation intuitive et agréable.
L’UX et l’UI design répondent à une problématique précise : 
Quel est le meilleur moyen pour proposer mon offre à ma cible le plus efficacement possible.

L’UX design

Arborescence et wireframe

Dans un premier temps, l’arborescence permet de définir le nombre de pages nécessaires. Elle définit également la navigation entre chaque page. Cela permet de vérifier si la logique de votre cible est respectée. De cette manière la navigation sera intuitive, et positive pour votre cible.
L’UX design crée le bon chemin pour que votre cible arrive à votre offre.
Le chemin le plus pratique, le plus fluide, le plus efficace, le plus logique pour votre cible, bref le chemin qui permettra à votre cible d’avoir une bonne expérience sur votre site.
Cela implique évidemment de bien connaître sa cible, de connaître ses comportements et ses besoins en matière de navigation web.

Avec le wireframe, c’est la navigation sur chaque page qui est étudiée. Le but reste le même : accompagner votre cible vers votre offre en lui proposant un parcours agréable. On peut tout à fait comparer cela à une situation concrète. 

Vous ouvrez un magasin de jouets. Si vos rayons sont rangés sans penser aux besoins et à la logique de votre cible (les parents des enfants), que les allées sont étroites (difficile de circuler avec des enfants), que l’emplacement n’est pas visible (voie sans issue et pas d’enseigne), que le parking est petit (en général voitures familiales) et que la route pour venir au magasin est mal entretenue, vous diminuez grandement vos chances de réussite.

A l’inverse, si vous étudiez l’organisation de vos rayons, que vous facilitez la circulation dans le magasin pour des familles, si vous êtes sur une place visible, avec une enseigne qui attire le regard, si enfin la route est facile et agréable, alors vous mettez toutes les chances de votre côté. Vous attirez votre cible dans votre magasin, il ne reste plus qu’à la convertir en clients!!

C’est la même chose avec un site.

L’UI design

L’arborescence,les fonctionnalités ont été définies. Il est maintenant nécessaire de permettre une mise en place qui donne un maximum de satisfaction à l’utilisateur pour qu’il devienne un client.
Si je reviens à l’exemple du magasin de jouets. 

Vous avez pensé à tous les points décrits plus haut. Vous êtes visibles, les rayons sont rangés, l’enseigne est magnifique et les voitures ont de la place pour se garer. Les premiers visiteurs arrivent.
Votre magasin est mal éclairé, il n’y a aucune indication sur l’emplacement des différents jouets, vous avez choisi une musique d’ambiance stressante, il n’y a qu’une caisse et le sens de la file d’attente n’est pas clairement indiqué. Vous pensez que les visiteurs vont rester?

C’est le même principe pour un site.
Après avoir définit l’arborescence, le contenu des pages et les fonctionnalités nécessaires, l’UI design permet de mettre en place une interface intuitive et fluide avec tous ces éléments.
Le choix des couleurs se fait en fonction de la lisibilité, avec les contrastes nécessaires. Les boutons sont visibles et accessibles. Les différentes rubriques sont organisées en fonction des besoins de la cible. La typographie est adaptée à la lecture des paragraphes.

En résumé, on allie fonctionnalité, esthétique et efficacité. L’UX design et l’UI design sont deux activités différentes et complémentaires.