UI design : conception d’interface utilisateur

L’UI design (User Interface Design) correspond à l’environnement graphique d’une interface dans laquelle évolue l’utilisateur. Il peut s’agir de designer l’interface d’un projet digital comme un site web ou une application mobile ou d’un projet de logiciel software.

Le but d’un UI designer est de rendre l’interface client la plus fonctionnelle et agréable possible en optimisant le visuel et en facilitant les interactions, pour offrir la meilleure expérience utilisateur final. On entre ici dans une phase de conception de maquettes d’interfaces graphiques ergonomiques et intuitives (choix de police, agencements graphiques et textuels, choix de navigation…) dans le respect de l’identité graphique de la marque et du client.

L’UI design se base sur une analyse de données UX. Il intervient donc directement après les recommandations établies en fin du travail UX.

Les objectifs de l’UI Design

Apporter une solution attrayante, ergonomique et intuitive au projet. Livrer les éléments dans un format facile à exploiter par les développeurs, et créer un guide de style (marges, couleurs, éléments graphiques, polices…)

Notre approche

  • Création de maquettes “master” de quelques interfaces choisies, avec des variantes de style
  • Déclinaison des versions adoptées (suite aux tests utilisateur si possible)
  • Illustration d’éléments spécifiques (icônes, animations)

Nous nous appuyons sur les logiciels (typiquement Sketch) qui permettent de gérer des éléments d’interface en tant que modules, pour faciliter la livraison de variantes fonctionnelles. Cette approche permet de changer un élément partagé (header de navigation, bloc de merchandising) à un seul endroit pour le déployer sur un ensemble de pages ou de variantes de page.

Pour livrer les maquettes, nous fournissons des exports via des liens web (typiquement via Zeplin ou Sympli). Ce qui permet d’échanger avec les équipes de projet et de développement. Pendant la phase d’approbation des versions finales on peut cibler une zone d’écran pour ajouter un commentaire. Une fois les écrans validés (par le client et / ou par des tests utilisateur) les côtes des éléments, les couleurs et l’exportation directe de chaque image ou icône vectoriel sont directement disponibles dans le même lien.

Ainsi, le travail graphique est fait en itération entre les utilisateurs, le produit et le développement. Le travail de spécifications techniques peut être grandement réduit.