L’UI Design Kezako? 

L’UI (User interface) Design signifie design de l’interface utilisateur. Il s’agit d’une étape dans la création d’un site internet qui arrive après l’UX Design. L’UI permet l’interaction avec le produit et contribue en cela à l’UX globale. L’expérience utilisateur (UX) est en effet directement liée au design graphique de l’interface (UI) qui a pour rôle de permettre une expérience agréable, c’est pourquoi on parle d’UX/UI.  L’UI Designer collabore donc avec l’UX Designer, garant de l’expérience utilisateur, avec qui il élabore la version graphique de l’interface. 

Le user interface design : entre technique et créativité

Définition de l’UI Design

C’est la conception graphique du prototype validé en amont ; ce travail requiert des compétences graphiques et techniques selon les différents types d’interfaces utilisateurs à réaliser. Une jolie interface ne suffit pas, elle doit servir des objectifs et répondre aux bonnes pratiques du web design. En effet, la conception de l’interface doit permettre au maximum de personnes d’apprécier cette plateforme web. L’UI Designer doit donc concevoir une interface utilisateur cohérente selon les ressources qui lui sont précédemment transmises (cahier des charges, charte graphique). 

Une technique

Aussi bien sur le mobile que sur l’écran d’ordinateur ou la tablette, le site sera lisible et optimisé selon la taille du device, c’est ce que l’on appelle un site responsive. Ainsi, le design doit être suffisamment réfléchi pour pouvoir être adapté à chaque écran correctement. Le parcours de navigation intuitif, l’architecture de l’information, les fonctionnalités requises, la qualité des contenus... autant de critères que se doit de remplir un site internet, garantis notamment par l’UI Designer.

Qu’est-ce qu’une “bonne” UI ?

Une bonne interface utilisateur doit présenter de manière générale, des caractéristiques communes. Premièrement, elle doit être intuitive, facile à comprendre, et avec une ergonomie générale satisfaisante et des éléments graphiques pertinents pour une navigation fluide. Aussi, il faut que les actions de l’utilisateur du site ou du logiciel entraînent le résultat attendu. Le design est conçu de manière cohérente par rapport à l’image et aux valeurs de la marque.  

L’objectif n’est donc pas uniquement de faire “beau”, bien que l’esthétique participe à la motivation à utiliser l’interface, et ne puisse être dissociée totalement de l’utilisabilité. L’UI designer ne se définit pas comme un artiste, même s’il est incontestablement créatif.

Bien comprendre l’UI Design

L’UI Design au service de l’UX

UX et UI sont très proches, mais attention à ne pas les confondre. Ces disciplines ont un outil de prédilection en commun, à savoir adobe xd. Cet outil permet de concevoir un écran d’application mobile, des écrans de sites internet, et ce avec une ergonomie du logiciel favorisant le bon développement du projet. Aussi, le logiciel Sketch est un bon outil pour l’UI Designer car c’est un éditeur de graphiques vectoriels. Ainsi, Sketch est tout à fait adapté pour le webdesign. L’application du design graphique à partir d’un prototype UX est le travail d’UI Design : c’est l’emploi des composants graphiques (couleurs, formes, textures etc) qui va permettre d’atteindre complètement l’objectif du projet, initié par l’UX. En particulier pour l’e-commerce, l’UX et l’UI vont jouer un rôle important dans l’accès aux pages produit et la mise en valeur de chaque produit. 

Une dimension cognitive de l’UI Design

L’effet entre le design et l’humain : la liaison entre le graphisme et le cerveau. Outre la technique, la perception est un axe à travailler. Les sensations procurées par le design peuvent être multiples, elles sont liées à des émotions : on parle d’ailleurs de design émotionnel. Les couleurs, formes, visuels, typographies, effets d’animations, créent un ressenti différent en fonction des personnes et des choix effectués par l’UI Designer. Cet aspect cognitif sur internet est ultra important pour casser cette barrière du digital et rentrer ainsi plus facilement en communication avec l’utilisateur de l’interface web. 

Les couleurs

Le code couleur sur un système informatique est le RVB : rouge, vert, bleu contrairement au système de codage couleur sur print qui est CMJN : cyan, magento, jaune et noir. Il faut bien veiller à adapter les couleurs à l’univers digital : c’est donc bien l’emploi du RVB qu’il faut respecter. Aussi, les couleurs doivent être suffisamment contrastées pour avoir un site bien accessible, dans le sens visible par le plus grand nombre. Des couleurs prioritaires et secondaires sont bien sûr à définir ou à reprendre de la charte. Un principe de l’UI Design notamment est de n’utiliser la couleur principale que pour les éléments interactifs (boutons CTA, liens). Par ailleurs, les niveaux de gris doivent être bien travaillés, une des astuces est de rajouter de la saturation. Ainsi, le travail des couleurs participera à l’expérience positive de l’utilisateur.

Pour aller plus loin dans l’UI Design

Le kit UI Design

L’UI Kit se compose de divers éléments graphiques et de ressources, servant le web design de la marque. Ces composants peuvent servir à concevoir d’autres interfaces utilisateurs. Concrètement, ces éléments regroupent des boutons call to action, des éléments de navigation, la barre de progression, les widgets, la palette de couleurs, des icônes systèmes etc. En effet, les formes et couleurs de ces éléments définissent l’image d’une marque, c’est pourquoi il est important de maintenir une cohérence sur l’ensemble des interfaces utilisateurs de la marque. Ce Kit UI est idéalement livré au moment de la validation des maquettes par les UI Designers.

Histoire de la conception graphique d’UI

Le web design doit servir les interfaces digitales de façon à correspondre aux habitudes de chacun. Certaines tendances sont représentatives des usages, telles que le skeuomorphisme. Ce courant utilisait des représentations familières, réalistes, pour faciliter l’utilisation de fonctionnalités encore assez méconnues des utilisateurs. On retrouve ce principe notamment dans les premières versions de l’iOS d’Apple. Ensuite, arrive le flat design qui marque un changement vers un design plat, où les boutons en relief deviennent des formes géométriques. Aussi, nous pouvons citer le material design, qui d’ailleurs n’est pas qu’une tendance. Celui-ci a été lancé par Google en 2014, conservant l’esprit du flat design et intégrant des aspects de mouvements et d’ombres pour évoquer le papier. C’est aussi une boîte à outils proposée aux développeurs d’applications qui contient des règles de design et de bonnes pratiques, c’est en fait en quelque sorte un kit UI Design.

Focus sur le métier d’UI Designer

L’UI Designer peut travailler en agence web ou bien dans le service conception de l’entreprise. Ses compétences vont de la conception graphique d’interfaces, en passant par des principes de communication, jusqu’à du marketing numérique. Aujourd’hui, les UI Designers ont des parcours post-bac plutôt variés. Certains ont fait des études orientées graphisme, d’autres multimédia, communication ou encore informatique. Par ailleurs l’UI Designer en devenir peut suivre une formation spécialisée en illustration web ou encore une formation focus illustrator pour maintenir leur niveau de compétences. En effet, c’est un métier qui peut correspondre à des formations différentes, cependant il est idéal d’avoir fait des études post-bac dans les domaines du graphisme, de la communication et bien sûr d’avoir été formé au marketing digital / numérique. Ainsi, des personnes issues de divers métiers et de formations distinctes peuvent avoir le projet de se réorienter vers l’UI Design, un de ces nouveaux métiers qui n’existait pas il y a 20 ans. Ce travail de conception graphique requiert certes une formation spécialisée aujourd’hui. Toutefois, la passion et la détermination à évoluer dans l’univers de la création restent primordiales.

Pour conclure, contactez l’agence Kwantic pour en savoir plus sur nos expertises en particulier celle de l’UI. Nous pourrions vous présenter nos références : maquettes, kit UI et sites développés sur-mesure pour vous inspirer et évoluer ensemble vers des projets concrets. L’agence est localisée à Bordeaux, Toulouse, Marseille, Lyon et Rennes, nous serions ravis de vous rencontrer, maintenant que c’est possible 😉 !