Qu’est-ce que l’UI design ? Quelles sont les éléments qui distinguent l’UI de l’UX design ? Pourquoi travailler l’UI de votre site internet est forcément une bonne idée ?
D’ici 3 minutes, à peu près le temps que vous mettrez pour arriver au pied de cet article, vous aurez les réponses à ces questions qui vous ont mené ici !
Qu’est-ce que l’UI ?
Après SEO, UX, CM, CR et autre CRM, voilà un nouvel acronyme à utiliser sans modération afin d’être considéré comme un expert du digital : UI. U pour user et I pour interface. On en déduit assez simplement qu’en ouvrant la porte de l’UI, on découvre l’univers de l’interface utilisateur.
Concrètement, qu’est-ce qu’une interface utilisateur ?
C’est l’ensemble des outils qui vont vous permettre de dialoguer avec la machine. Au premier niveau de cette interface, on retrouve les éléments indispensables afin de transcrire ce que vous voulez faire, dire ou ordonner à l’ordinateur en signe qu’il pourra comprendre : souris, clavier ou encore écran en sont les éléments de base. Comprendre cela, c’est accepter une vérité universelle : la machine ne parle pas le même langage que nous. (enfin en vrai maintenant si ! Siri, Alexa… Nous verrons cela dans un autre article.)
Source Image : Limpide pour MoneyLine Banking Système
De son côté, elle utilise aussi une langue que le commun des mortels ne comprend pas. Bien évidemment, les développeurs ne sont pas comptés parmi les quidams lambdas, ayant la capacité de dialoguer avec les machines dans la langue qu’elles parlent : le code. De quoi vous faire changer d’avis sur les geeks…
Partons du principe que nous ne sommes pas développeurs. Toutes les opérations que la machine effectue sont restituées dans un langage que nous sommes à même de comprendre. Textes, visuels, pages internet représentent autant d’interfaces mettant tout le monde sur un pied d’égalité.
Si l’on prend l’exemple de cette page de blog, du point de vue du device que vous utilisez pour la consulter, elle n’est qu’une série de code et de balises html, converties grâce à votre navigateur web, illustrée par une interface graphique que nous avons définie.
Vous l’aurez compris, l’UI regroupe ainsi tous les éléments qui composent le design de l’interface, qui font l’aspect des pages ou des applications que vous consultez.
Les éléments qui composent l’UI
- L’identité visuelle : En tant qu’interface, l’aspect visuel d’un site internet est sa première signature et le reflet immédiat de ce qu’est la marque. En reprenant la charte graphique, l’UI va se nourrir des logos, couleurs, typographies ou pictogrammes qui ont été voulu comme étant différenciant et marqueur d’identité.
- Le Web Design : c’est ici une des raisons pour lesquelles la frontière entre UI et UX est si ténue : l’UI s’intéresse à l’interface Web, ce que fait également l’UX. Mais ici, on appelle UI ce qui touche à la construction et l’agencement des pages : mise en forme du menu, alignement des contenus, présentation des page, tout en restant user friendly.
- La charte éditoriale : si l’identité visuelle permet en un coup d’œil d’identifier l’univers d’une marque, la charte éditoriale est également un marquer fort. Quelques mots lus sur une pub de biscuit au ton résolument décalé et vous ne tardez pas à comprendre qu’il s’agit de Michel & Augustin. Par exemple.
L’ensemble de ces éléments représentent la réflexion UI, et sont donc partie intégrante de l’UX car constituante de celle-ci, dans sa dimension visuelle et éditoriale. Les réflexions qui découlent de la mise en place de ces éléments sur une page web sont quant à elle du domaine de l’UX.
Qui est l’UI designer ?
Qui est donc l’expert qui se cache derrière ce travail de design ? Si l’expert de l’UX s’appelle l’UX designer, l’expert de l’UI s’appelle ainsi … L’UI designer. Bingo.
Il va être en charge de la conception de l’interface qui lie l’utilisateur au produit. Ça, vous l’avez compris. Mais n’étant pas possible de sacrifier l’efficace sur l’autel du beau, il se doit de travailler en étroite collaboration avec l’UX designer qui possède une vision plus globale de l’expérience utilisateur. Cette proximité dans le travail et cette coordination dans la livraison des projets fait que l’UI designer se doit d’être un fin diplomate. Et oui car comme nombre de créatifs qui officient dans le digital, il ne comprend pas toujours les modifications demandées à la suite des allers retours entre le client final et les différents experts.
Mais l’UX designer n’aura aucun mal à lui rappeler que l’esthétisme doit être un outil au service de la création d’une émotion chez l’utilisateur, émotion rendue possible par une conception fine et astucieuse du parcours. Si on devait résumer le tout en équation mathématique, il en résulterait que UX designer > UI designer dans la balance décisionnelle. C’est la vie, on ne choisit pas toujours ses combats …
Fin diplomate donc, mais également créatif. Difficile de prendre en charge la création d’une identité visuelle sans être au courant des dernières tendances créatives pour faire mouche à chaque fois.
Vous ne connaissez pas le semi-flat design, le low design ou l’ombre portée ? Alors avant de vous lancer dans la conception de votre site en autodidacte, vous devriez surement faire appel à un UI Designer. Oui, nous sommes désolés de le répéter ici, le skyblog est mort et il faut vraiment passer à autre chose pour solliciter le versant émotionnel de vos utilisateurs …
Les missions principales de l’UI designer
Comme on vous l’a dit, l’UI et l’UX ont pour habitude de fonctionner ensemble. De cette collaboration doivent naître des éléments solides pour créer un livrable intéressant pour vos utilisateurs. Mais cet intérêt ne se décrétant pas, des process permettent d’étayer la réflexion.
- Identifier les principaux enjeux de l’applicatif : le design est fortement lié à la vocation future de l’outil. La mise en place d’un site e-commerce ne génèrera pas les mêmes modes d’usages et de navigation de la part de vos utilisateurs qu’un site d’information en ligne. Taux de rebond, rétention, temps passé par page, durée moyenne de la visite … Tous ces paramètres sont des traductions de la navigation effective et de réelles pistes de travail pour votre team UX/UI. Sur votre site de e-commerce, le taux de rebond est très élevé ? Alors les deux experts doivent trouver le moyen de capter l’attention de l’utilisateur pour qu’il reste plus de temps sur votre site. Et qui dit plus de temps passé sur le site, dit plus d’opportunité de dépenser de l’argent chez vous … De même pour un site d’information sur lequel le temps passé par page serait extrêmement faible.
- Études qualitatives et quantitatives auprès de vos utilisateurs : vouloir améliorer les choses c’est bien, mais le faire sans consulter vos utilisateurs c’est moins bien. Ce sont eux les utilisateurs numéro 1 de votre plateforme, et c’est à eux qu’elle doit plaire. Votre team UX/UI prendra donc le pouls directement auprès d’un panel test pour être sûr que les améliorations proposées vont dans le sens des attentes de votre audience cible, soyez sûr que les services et outils proposés soient user friendly.
- Définition d’un buyer persona : prenez le petit calepin où vous notez tous les anglicismes que vous croisez et ajoutez-y celui-ci. C’est le nerf de la guerre digitale. Concrètement, il s’agit d’écrire l’histoire d’un utilisateur type de votre plateforme en dépassant le cadre de l’utilisation de votre applicatif. Vous devez comprendre qui sont vos utilisateurs type afin d’en dresser un portrait et ainsi découvrir les opportunités qui s’offrent à vous. En identifiant leurs attentes, vous vous offrez la possibilité d’identifier de nouveaux canaux sur lesquels ils seront présents.
Sauf que cet exercice n’est pas des plus aisés lorsqu’on n’est pas rompu à l’exercice. La team UX/UI, elle, l’est… - Création d’un storytelling en conformité avec l’image de la marque : l’objectif, depuis le début de cet article, est de créer de l’émotion chez votre utilisateur. Et l’émotion nait de la cohérence entre le discours porté, l’image véhiculé, et la capacité à plonger l’utilisateur dans votre univers à chaque instant du contact entre lui et vous. Il faut que l’expérience soit totale pour qu’elle fonctionne. Donc le tout doit être le fruit d’une réflexion globale. Et devinez qui peut, et doit, vous aider à la mener ? Vous commencez à prendre les bons réflexes c’est bien…
- Procéder à des phases d’A/B testing : allez hop hop on ajoute le mot sur le calepin. L’A/B testing est la traduction de l’approche customer centric. L’idée est de proposer à des échantillons définis de votre cible, des variantes d’un même objet. Ainsi, une partie de vos utilisateurs devra cliquer sur un bouton rouge pour passer à l’étape d’après, quand une autre devra cliquer sur un bouton vert. A la fin de la période de testing, vous étudiez les KPIs et vous tranchez en faveur de la couleur la plus efficace, ou alors vous décidez que ni le rouge ni le vert n’obtient des résultats assez significatif été testez le bouton bleu. Encore un outil à disposition des UI designers…
On l’aura compris, l’UI est un véritable bras armé de l’équipe de l’UX designer et c’est de manière conjointe que les réflexions doivent se mener afin de proposer une expérience totalement user friendly et différenciante à vos utilisateurs.
Vous avez des projets nécessitant l’intervention d’un UI designer ? Ça tombe plutôt bien : Nos équipes conçoivent l’ergonomie, réalisent des prototypes fonctionnels et testent le design de vos interfaces web et logiciel tout en s’adaptant aux environnements techniques, avec l’exigence et le souci du détail pour rester user friendly.
Découvrez une de nos réalisation avec Bubble, une solution no code
Refonte réussie de l’app du Petit Paumé en 30 jours avec Bubble
Le résultat : des interfaces intuitives au design soigné où les animations amènent de la modernité et donnent vie à vos projets.
Pour continuer à en apprendre sur le sujet :
