Dans le monde du web, les termes UX et UI sont fréquemment utilisés en tant que termes interchangeables, et sont souvent regroupés en tant que «UX / UI» lorsqu'ils font référence à un aspect ambigu du design web. Un coup d’oeil sur les rétro-acronymes (ouais, le nouveau mot du jour) nous permets d’avoir un petit aperçu des différences entre ceux-ci:
UX signifie User Experience Design (Expérience utilisateur).
UI signifie User Interface Design (Interface utilisateur).
Ok, mais qu’est ce que ça signifie?
Imaginons un vélo standard. Le guidon, les freins et le siège font partie du UI, ce qui constitue l’interface avec laquelle on interagit. Le sentiment que nous ressentons quand nous faisons du vélo est le UX; ce qui définit à quelle douceur il roule, à quel point celui-ci est sécuritaire et jusqu’à quelle vitesse il peut aller. Si, par exemple, une compagnie veut produire un vélo rapide, le designer UX chercherait des éléments qui augmenteraient la vitesse et les ajouterait au design de base ou au plan du vélo, ce qui pourrait inclure les engrenages, le matériel du cadre, le type de guidon, etc. Le designer UI ferait ensuite en sorte que chaque éléments soient compatibles et cohérents avec le vélo dans son ensemble, par exemple, le choix de sa couleur, sa forme et les éléments additionnels lui ajoutant du caractère.
Par cette analogie du vélo, nous pouvons observer que le rôle d’un designer UX est de créer un plan contenant les éléments les plus importants du produit afin de créer une expérience utilisateur spécifique ou combler un besoin, comme par exemple un vélo pouvant rouler rapidement. Nous pouvons aussi voir que le rôle d’un designer UI est de prendre ce plan et de concevoir le look and feel de ce produit (à quoi il devrait ressembler, quel sentiment il nous apporte), en fournissant une esthétique spécifique et décrivant les détails de chaque élément du vélo.
Ainsi, le UX et le UI se complètent afin de fournir une expérience à la fois fonctionnelle et agréable. Pendant que le UX rend les produits et les interfaces fonctionnelles, le UI les rend jolies et agréables.
Alors, pourquoi est-ce important pour les gens qui ne sont pas des designers?
La raison pour laquelles c’est important, spécialement pour les gens qui désirent faire affaire avec un designer ou une agence de design, est parce que la compréhension de la différence entre le UX et le UI permet de mieux gérer le budget ainsi que le temps alloué sur un projet à cet effet, en plus de permettre de mieux communiquer avec l’équipe et de savoir à quoi s’attendre d’eux.
Passons maintenant de l’analogie à la pratique en ce qui concerne le UX et le UI du web.
Qu’est ce que l’expérience utilisateur dans le développement web?
Le rôle principal d’un designer UX est de prendre les besoins de l’utilisateur ou du client et de créer une carte pour assurer la fonctionnalité, la satisfaction de l’utilisateur et répondre à l’objectif du produit. En temps normal, les développeurs UX travaillent avec l’équipe de commercialisation ainsi que les développeurs dans la création de livrables tels que: logigramme des utilisateurs, cahier des charges et fils de fer.
L’exemple d’un travail d’un designer est le fameux logigramme qui simule la navigation de l’utilisateur du point A au point B.
Figure 1. Logigramme
Ceci est un logigramme simple qui montre les pages principales d’un site, incluant la navigation possible entre les pages de la page d’accueil à la page d’achat d’un livre. En tant normal, un logigramme est présent dans les premières étapes du développement d’un produit et évolue de façon itérative en plan plus détaillé qui montre les différents éléments contenus dans chaque page ainsi que les décisions que l’usager risque de prendre durant sa navigation dans le site - mappant ainsi l’expérience utilisateur.
Figure 2. Logigramme détaillé
Durant les premières étapes d’un processus de design, il est possible de s’attendre à au moins un logigramme mappant la navigation d’un utilisateur dans le site. La prochaine étape serait, dans la plupart des cas, d’effectuer une série de maquettes “fil de fer” (ou wireframe) afin de déterminer l’emplacement des éléments dans la page, tout en établissant une hiérarchie des informations basées sur les besoins de l’utilisateur et du client. Afin de créer cette hiérarchie des informations, le designer UX doit faire des recherches avancées sur le produit, comprenant une analyse de la concurrence dans le but de définir un produit minimum viable (ou MVP de l'anglais : minimum viable product).
Les fils de fer peuvent être des documents en noir et blanc avec des boîtes de contenu et des faux textes (Lorem ipsum). C’est une façon de montrer de quelle façon les informations seront structurées afin de maximiser la visibilité de certains éléments ou de certaines actions. Le logigramme et le fil de fer sont créés afin de créer un consensus visuel entre le client et le designer sur les besoins spécifiques du client et l’expérience que l’utilisateur va avoir. Ces documents sont cruciaux car ils permettent à l’équipe de production de savoir exactement ce que le client désire.
Figure 3. Fils de fer
Dans le cadre de cet article, nous n’irons pas plus loin en ce qui concerne le rôle du UX dans le développement web. Cependant, le travail du designer UX ne se résume pas seulement à ça. Même après le lancement de la plateforme, une série de tests rigoureux doit être effectuée afin d’assurer la qualité de l’expérience utilisateur. Le designer UX doit donc agir de façon itérative afin de s’assurer que le site web répond aux besoins de l’utilisateur, et ce, à travers chaque l’évolution de la plateforme.
Qu’est ce qu’il en est du design de l’interface utilisateur dans le développement web?
Ok, maintenant nous savons que le designer UX est responsable du plan ou de la fondation du produit. Nous pouvons donc dire que le UI est le “bling bling”, est le “pimp mon char” d’un site web. Nous avons besoin de structure, de plan et de prototype qui apporte un sentiment.
Les designers UI travaillent non seulement en étroite collaboration avec les designers UX, mais bien aussi avec l’équipe de commercialisation et des clients, afin de faire en sorte de faire un design qui rejoint les valeurs de l’entreprise, mais aussi les intentions du site. Les designers UI sont en charge de déterminer le niveau de sérieux, l’élégance, le côté amusant et les autre caractéristiques qui influencent les émotions ressenties par l’utilisateur.
Figure 4. Maquette
Les différents éléments du design UI sont, entre autres, la typographie, les couleurs, les traitements des photos, les éléments graphiques, les illustrations et les espaces entre les éléments. Ce qu’on réfère fréquemment au design graphique est le travail du designer UI, agrémenté et supporté par le travail en amont du designer UX. Sur le web, on retrouve également un autre type de design UI, soit, les animations. Le comportement des boutons lorsque le curseur passe dessus, la façon dont les transitions entre les pages vont s'animer, ou le Parallax Scrolling, cette fameuse tendance qui donne un effet de profondeur lors du défilement sur la page; tous ces éléments sont des aspects du design UI qui sont choisis et développés minutieusement afin de renforcer certaines émotions lors de la navigation sur le site.
Si vous croyez que le design UI est la partie la plus importante dans le développement de l’expérience utilisateur, détrompez-vous! Le UI est un aspect crucial de l’expérience, certes, et focus essentiellement sur l’esthétisme de la plateforme; toutefois, c’est le UX qui pose les bases fondamentales de l’expérience utilisateur menant facilement les utilisateurs du point A au point B.
Voilà, nous l’avons fait ! Nous avons résolu le mystère du design UX et UI, du moins, dans sa forme la plus simple.