Quand on consulte un site web, on glorifie souvent les développeurs qui ont travaillé dessus, on oublie que ce qu’on voit est le fruit d’un travail méticuleux fait par le UX designer, le UI designer et le reste de l’équipe.

Après 3 années d’expérience dans le domaine, je partage avec vous les responsabilités traditionnelles d’un UX designer. Si vous comptez vous lancer dans une carrière du UX/UI designer vous devrez savoir que vous allez effectuer ces étapes à chaque nouveau projet. 

UX design VS UI design 

UX vs UI

Du fait que ces deux métiers sont souvent effectués par la même personne, la pensée commune fait que l’on croit qu’ils ne font qu’un. 

Ce n’est pas du tout la même chose ! Le UX (User Experience) Designer est responsable de l’expérience que l’utilisateur vit quand il visite un site web, une plateforme ou autre. Il doit assurer que ce dernier trouve vite fait l’information et puisse naviguer facilement et rapidement.

A Alors que le UI ( User Interface) Designer s’occupe plutôt de ce que l’utilisateur aperçoit, soit de la partie esthétique ( typo, couleurs, images…)

Le UX design 

La recherche 

Avant toute chose un UX Designer doit faire beaucoup de recherche pour pouvoir créer une interface adaptée au besoin de l’utilisateur. Cette recherche se fait à travers les surveys, lebenchmarking concurrentiel, la création du persona ou des personæ, l’élaboration du user flow, connaître les besoins et les attentes de l’utilisateur.

Bon, j’imagine que vous voulez en savoir plus sur le persona et le user flow

Commençons par le persona, c’est le profil de l’utilisateur ou des utilisateurs que le UX designer définit et vise et cela permet de mieux comprendre les clients (existants et cibles). Utilise-t-il la tablette plus que son ordinateur ? Quel comportement a-t-il ? …. Et des dizaines d’autres questions qui permettront de créer de un jusqu’à trois personas sur lequels tout le reste de l’élaboration de l’interface va se fonder.

Passons à présent au user-flow, qui est, comme son nom l’indique, les différentes phases par lesquelles passe l’utilisateur. Les UX designers schématisent ce flow. Si l’utilisateur choisi A, il accédera à la page X, s’il choisit B, il accédera à la page Y, ainsi de suite jusqu’à avoir un schéma entier.

Le wireframing 

On parle de wireframe low fidelity, c’est le plus simple. Un bout de papier, un crayon, et le tour est joué… Bon, la vérité, c’est que ce n’est pas aussi évident. Sur ce bout de papier, il faut dessiner l’écran de l’appareil et y mettre les éléments de votre interface. Ceci peut aussi se faire avec un logiciel de manière assez basique.

Le high fidelity wireframing, quant à lui, est généralement fait grâce à un logiciel, et met plus l’accent sur le côté esthétique.

wireframing

Le prototype 

Tout comme un architecte, le UX designer construit un prototype.
Plus besoin de passer d’une image à une autre mais de naviguer sur le prototype en testant les différents boutons Log In, Register etc…
Comme logiciel, je recommanderais Sketch, Abode XD ou InVision Studio.

Plus besoin de passer d’une image à une autre mais de naviguer sur le prototype en testant les différents boutons Log In, Register etc…
Comme logiciel, je recommanderais Sketch, Abode XD ou InVision Studio.

Il y a même un autre type de prototype qui est une technique très utilisée dans le User Centered Design process, ceci consiste à faire défiler les interfaces dans une coquille de smartphone ou remplacer différentes interfaces dans une version Desktop.

Vous pouvez aussi réaliser des animations pour que les développeurs les créé.

prototype

L’A/B testing 

Supposons que sur votre bannière, vous avez deux “calls to action”, votre collègue vous recommande d’en avoir qu’un seul. Comment vous départager? 

L’AB testing est la solution à travers laquelle vous testez les deux méthodes et vous identifiez laquelle génère le taux de conversion le plus élevé. 

Le Testing 

Il faut toujours tester votre produit avant de le lancer ! 

Une fois votre produit prêt, présentez-le à un échantillon représentatif d’utilisateurs (5 de préférence dans la même séance de User testing) et demandez-leur d’effectuer certaines actions. 

Vous allez leur demander leurs feedbacks en posant les bonnes questions, c’est là tout l’intérêt de cette étape et vos questions ne doivent pas être élaborées sans aucune logique. 

Par exemple, évitez les questions trop vagues, du type : avez-vous apprécié notre site web ? Comment a été votre expérience avec nous ? 

Penchez plutôt pour des formulations plus précises : qu’avez-vous apprécié dans notre site web ? Parlez-nous de votre expérience. 

Le UI design

L’adaptabilité au produit 

Le UI designer doit choisir des couleurs, des polices d’écriture, des styles graphiques adaptables au produit

Par exemple, vous verrez que les marques de luxe (Hermès, Prada, Dior, Tiffany & Co…) utilisent toujours l’empattement au niveau de leurs logo, c’est un peu leurs signatures. 

Avec l’expérience, vous pouvez faire abstraction de ces règles, si vous le jugez nécessaire. “You can break the rules” comme j’aime le dire. Auparavant, mettre une partie du texte sur une image était une faute grave. Maintenant, c’est une pratique assez répandue dans le Design. Les tendances changent, et les règles aussi. 

Pour ce qui est des Polices d’écritures, vous pouvez utiliser les typos open source de Google Fonts ou opter pour les fonts payantes. En terme d’image, au risque de retrouver vos images dans d’autres sites, vous pouvez tirer des photos de haute qualité de Pexels et Unsplash par exemple. Mais, je recommande fortement de réaliser vos propres photos, vous pouvez y intégrer votre empreinte particulière.

illustration

Le UI Kit 

Afin de présenter les composants de votre Design et éviter les aller-retour inutiles, vous pouvez confier au développeur ou à l’intégrateur un kit contenant les boutons, les couleurs, les messages d’erreur, les menus, les widgets etc.

Penser au différentes plateformes 

En travaillant sur vos maquettes, il faut penser à vos utilisateurs qui utilisent leurs ordinateurs et aux autres qui accèdent à votre application depuis leurs tablettes ou leurs smartphones. 

Le nombre d’utilisateurs de smart-phone augmente partout dans le monde, si vous voulez améliorer votre trafic et votre taux de conversion, il faut donc satisfaire cette partie de vos utilisateurs.

nombres d'utilisateurs du réseau internet mobile

Chercher l’inspiration 

Maintenant que vous avez une idée sur ce que fait un UI/UX Designer, il ne vous reste plus qu’à vous lancer. Le premier pas est le plus difficile, le reste est une partie de plaisir.

Comme tout “artiste”, bien que vous ayez l’œil artistique, vous avez parfois besoin d’inspiration. Vous pouvez dénicher les meilleurs designs sur Behance, Dribbble, ou awwwards. Bien sûr, vous n’allez pas faire du copier-coller…

Karim Zehani – Lead UI/UX Designer à GoMyCode

Leave a comment

Your email address will not be published. Required fields are marked *