Dans le monde du digital, les termes UI et UX se sont peu à peu démocratisés pour désigner des tâches ou des métiers qui existaient pourtant avant eux à savoir designer web pour le premier et architecte web pour le second (ou « ergonomiste », ce qui a pu mener à désorienter les plus anciens du métier ou interloquer les profanes.
Pour résumer le plus simplement possible avant de rentrer en détail :
- Le UI ou User Interface, c’est l’apparence d’un site ou d’un application.
- Le UX ou User eXperience, c’est la manière dont ces derniers fonctionnent.
Naturellement, les deux sont intimement liés, voilà pourquoi ils sont souvent accolés en « Design UX/UI« . Pour autant les métiers ou les équipes qui se cachent derrière ne travaillent pas forcément ensemble, mais plutôt en parallèle.
En savoir plus sur l’UX et l’architecture d’une application mobile ou web
Tout d’abord, il faut savoir que le terme UX a été inventé par un scientifique spécialiste de la cognition, le Dr. Donald Norman. En conséquence, avec l’UX, c’est donc bien au raisonnement et au fonctionnement de notre cerveau que l’on va toucher !
L’UX, c’est un peu le « blueprint » de la maison digitale que vous allez construire.
Et se déplacer dans une maison doit être facile : les pièces et les éléments qui la composent doivent pouvoir être utilisés le plus simplement possible, en étudiant les normes générales et le comportement humain.
Par exemple, au même titre que dans une maison, on s’attend à avoir la poignée d’une porte à hauteur de main, dans une application, le UX designer placera l’action principale (un bouton valider par exemple) à portée du pouce de l’utilisateur, ou encore la croix de fermeture en haut à droite de la fenêtre (ou à gauche parfois).
En cela, les mots-clés, ou plutôt les idéaux dont vont se rapprocher les UX Designer sont avant tout Intuitivité, Ergonomie et Logique.
Plusieurs disciplines ou tâches incombent au UX Designer, le plus généralement dans l’ordre suivant :
1. Les recherches comportementales et les User Persona
Il s’agit là d’un pan presque « Marketing » ou « Neuromarketing ».
Pour designer une application mobile ou autre, il faut avant toute chose déterminer pour QUI on va la designer. Car en effet, en fonction des âges, des catégories, des pays, des cultures, les usages peuvent varier. Il s’agit donc de comprendre sa population cible pour adapter au mieux son design.
Cette étape n’est pas obligatoire, mais apporte beaucoup dans la précision de l’app et donc dans sa réussite. Des projets modestes éluderont donc souvent celle-ci, car elle mobilise beaucoup de ressources humaines et de temps, et présente donc des coûts non négligeables.
En l’absence de réelle étude de terrain, on pourra faire appel à des utilisateurs hypothétiques, que l’on appelle « User Persona ». Il s’agit de profils-types dont on suppose qu’ils vont utiliser l’application.
Si l’on peut effectivement utiliser ces Users Persona comme base, il est forcément mieux de confirmer ses intuitions par la création d’un véritable panel test.
Pour ce faire, un échantillonnage est réalisé, comme pour toute enquête d’opinion, et ce panel servira de banc d’essai aux différentes étapes de la réalisation du projet, en apportant un retour d’expérience et des ressentis dont les résultats seront à intégrer dans le design.
Ces recherches comportementales peuvent aller très loin, avec par exemple la mesure du temps de réaction de l’utilisateur jusqu’à sa prochaine action, ou encore la mesure du chemin parcouru par ses yeux pour l’écran grâce à des outils dits de « eye-tracking » ou de « heatmap ». Ces tests fonctionnent souvent sur le principe de ce que l’on appelle l’A/B testing : entre une solution A et B testées, laquelle est la meilleure ?
Grâce à ces données, le Designer UX ajustera sa copie pour que chaque action menée par l’utilisateur prenne le moins de temps possible sans confusion, la rapidité d’exécution étant un véritable Graal dans la quête UX.
2. L’élaboration de scénarios
En parallèle de ces recherches comportementales, le designer UX va dresser une liste d’hypothèses qui devront être intégrées au design et aux tests pratiques.
Ces scénarios correspondent à la liste des fonctionnalités proposées par l’application.
Comment quitter l’application ? Comment modifier tel ou tel élément ? Que se passe-t-il si l’application rencontre une erreur ? Quelles étapes sont à passer pour arriver à l’action X ou Y ? Bref, toutes les actions possibles, tous les scénarios doivent être envisagés pour être prêt à toute éventualité et satisfaire au mieux l’utilisateur.
Ces scénarios peuvent donc être comportementaux (les actions menées par un individu) mais peuvent être environnementaux aussi. Exemple : Que se passe-t-il si la luminosité change ? Si je reçois un appel ? Si j’intéragis avec une autre application ? Etc.
3. L’architecture de l’information
Une fois que l’on sait à qui l’on parle et quelles sont toutes les actions qui peuvent être menées sur un site ou une app, il faut à présent organiser tout cela !
Le designer UX va donc regrouper ces actions ou informations en familles logiques, et au sein de ces familles, donner des priorités. Certaines tâches sont en effet moins importantes que d’autres. Les outils de mindmapping sont alors très utiles à ce stade.
Cette architecture se fait alors à deux niveaux :
- Au niveau global, en déterminant la liste de tous les écrans et leurs liens logiques.
- Au niveau particulier, en déterminant pour chaque intérieur d’écran une hiérarchie des informations.
Dans le cas d’un site E-Commerce par exemple, sur une fiche produit, l’utilisateur devra pouvoir visualiser le produit, le prix, s’informer des caractéristiques de l’objet, le personnaliser le cas échéant, modifier une quantité, et l’ajouter à son panier.
Mais quel est l’argument phare du produit ?
Son prix ? Son aspect ? Ses caractéristiques techniques ?
En fonction de la réponse, le design sera modifié pour mettre en avant le ou les meilleurs arguments.
Il appartient alors au UX designer de retranscrire l’importance relative de chacune de ces interactions, et de les placer dans un ordre logique.
Par exemple : je regarde d’abord l’image, puis le prix, puis j’en apprends plus sur le produit et ses promesses, et seulement une fois « convaincu », je peux procéder à l’acte d’ajout panier.
Autre exemple : Est-il important d’accéder à son profil utilisateur ? Aux CGV ? Si oui, à quel moment ? Où les gens ont-ils l’habitude de trouver ces éléments ? etc.
Toutes ces questions vont être résolues à ce stade.
4. La réalisation d’un Wireframe.
Vient ensuite l’étape du premier maquettage.
Un Wireframe, c’est donc bel et bien une maquette qui dispose sur un écran (mobile, pc, ou autre) les éléments et les informations déterminés précédemment.
Il s’agit du véritable « plan » de l’application ou du site, son ossature, avec des emplacements qui pourront être remplis par le designer UI, comme dans l’exemple ci-dessous :
Traditionnellement, des logiciels tels que Sketch ou Adobe XD sont utilisés pour produire ce wireframe.
5. Envisager les interactions.
Enfin, le designer UX va imaginer comment interagir avec la maquette précédemment créée.
Animations, mouvements de la mains (swipes) ou du téléphone (accéléromètre), transitions d’écrans, bref tout ce qui va ajouter un plus pour l’immersion de l’utilisateur sera « scripté » par le designer UX afin qu’en fin de chaîne, le designer UI puisse créer les ressources nécessaires, et pour que le codeur puisse donner vie à cela !
En savoir plus sur l’UI, le design visuel d’une application mobile ou web
Avec le User Interface, on complète le travail amorcé par l’UX et on l’enrichit avec les éléments visuels qui vont créer la véritable personnalité de l’application ou du site web.
Dès lors, on fait appel aux éléments de design habituels :
- Fonts ou polices d’écritures / typographies
- Couleurs et palettes
- Logo, formes
- Tailles et ratios respectifs de tous ces éléments
- Illustrations, photographies, images en tous genre
- Motion Design
L’objectif de l’UI est d’attirer et de séduire le regard de l’utilisateur, l’inciter à rester sur la page qu’il visite pour favoriser son engagement.
Dans son processus de travail, un UI designer pourra passer par les étapes suivantes :
1. Création d’un moodboard
En français que l’on peut traduire par « planche d’humeur », un moodboard est une sélection d’influences qui vont venir guider l’inspiration du projet.
Ce moodboard peut être composé d’oeuvres d’arts, d’objets, de sites ou applications déjà existantes, de couleurs et teintes, bref, tout ce qui peut être rattaché à « l’esprit » que l’on veut donner à la création.
Les moodboards peuvent émaner :
- du panel d’échantillon
- du designer UI ou d’une équipe artistique
- de l’étude des tendances et modes actuelles
2. Proposition d’une charte graphique
Sur la base des pistes lancées par des brainstormings et par les moodboard, le design UI va ensuite proposer les bases d’une charte graphique qui se compose de la manière suivante :
- Polices d’écritures : souvent 1 à 3
- Couleurs : souvent 2 à 5
- Formes ou patterns pour agrémenter le tout
A cette proposition de charte graphique, peut s’ajouter celle d’un logo et / ou icone d’application.
3. Mise en place de la charte graphique et amélioration des outils fournis par l’UX
Une fois que les « guidelines » graphiques sont validées, le designer UI va pouvoir utiliser la trame (wireframe) élaborée par le designer UX afin de créer ce qui sera la maquette finale de l’application.
Lors de ce travail, le designer UI va apporter son expertise pour calibrer parfaitement l’ensemble, afin que l’application soit la plus harmonieuse possible à l’oeil.
Il va aussi l’embellir avec des éléments graphiques définitifs créés à cet effet : icones, illustrations, contenus animés, etc. et ainsi donner vie à l’ensemble.
4. Tester l’accueil du public, encore et toujours
Dans une démarche de parfaire l’application mobile, le designer UI va, tout comme son homologue UX, solliciter l’avis de son panel de test afin de s’assurer que le public recoive favorablement le design.
Plusieurs vagues de retouches peuvent alors être envisagées afin d’obtenir un produit fini le plus abouti possible.
