UX Design

De Sylvain Martinod dans Méthodes et Organisation

15 jan 2017

L’UX Design est certes à la mode ces dernières années et c’est en grande partie pour répondre à l’évolution de l’utilisation toujours plus nomade des terminaux (smartphones, tablettes, montres connectées, etc…). Les enjeux s’intensifient et les usages changent, il faut pouvoir y répondre efficacement. Pourtant, l’UX Design est né un peu avant l’arrivée du tout premier site internet en 1994.

Don Norman en est le précurseur/créateur au début des années 1990 dans le but de concevoir des produits manufacturés plus adaptés aux usagers.

En 1999, la norme iso 13407 en définit les exigences et les recommandations sur le « Processus de conception centrée sur l’opérateur humain pour les systèmes interactifs ». Cette norme a été mise à jour en 2010 en iso 9241-210 pour « Ergonomie de l’interaction homme-système — Partie 210: Conception centrée sur l’opérateur humain pour les systèmes interactifs ».

 

Mais que veut dire “UX Design”

Tout le monde ou presque sait que UX veut dire « User eXperience ». Mais le terme qui suit prête souvent à confusion : « Design ». Ici on ne parle pas de WebDesign ou d’UI Design. Ce terme a pour signification la conception. Donc si on doit traduire en bon français l’UX Design nous pourrions dire que c’est la conception de l’expérience utilisateur.

UX DESIGN
Conception de l’expérience utilisateur

 

Mais attention, dire que l’UX Design relève uniquement de l’ergonomie serait aussi une erreur, un raccourci très souvent utilisé à tort.
Nous allons utiliser le schéma créé par Peter Morville pour comprendre les attributs d’un bon UX Design. Une bonne application doit être : utile, utilisable, accessible, attractive, trouvable, crédible, “de valeur”.

Le périmètre de l’ergonomie reste dans la plupart des cas dans l’utile, utilisable et accessible. Les designers quant à eux tenteront de rendre le produit plus attractif, crédible et « de valeur ». L’UX Design regroupe tout ça et va bien au-delà. L’UX n’est pas qu’une séquence dans un process mais une itération dans chacune des séquences dans la création du produit.

 

LES METHODES ET PHASES DE L’UX DESIGN

Il est difficile de définir une méthode « générique » de l’UX Design car il va beaucoup dépendre du domaine d’expertise de l’entreprise dans lequel on se trouve. Néanmoins, nous allons tenter de synthétiser un déroulement standard à adapter sur la base des travaux de Matthieu Mingasson.

 

Phase 1 : Définir le contexte

 

Découvrir l’utilisateur final

Il faut identifier dans un premier temps la cible et acquérir le plus d’informations possible par rapport au contexte du projet (statistiques, données métrix, etc…). Toutes informations qui peuvent être utiles pour mieux connaitre l’utilisateur final. De ces données recueillies, il faut créer des « Personas » qui représentent des profils « types » et fictifs d’utilisateurs potentiels de l’application. Il y en aura plusieurs avec des profils « standards » qui représenteront la majeure partie de la cible mais aussi des profils plus « atypiques » pour apporter de la granularité. Le but est de faire vivre ces personas dans des scénarios pour générer des idées suivant différents contextes.

Exemple de fiche persona

Audit

Savoir où se situe l’entreprise qui vous demande une application ou site web : Quelle est sa capacité à mener à bien le projet ? Est-elle suffisamment calibrée pour un projet web ? En BtoB, l’entreprise qui vous demande une application se retrouvera forcement éditeur car l’application sera diffusée en son nom.

Les Benchmarks

Avant même d’avoir un projet, il est judicieux d’établir régulièrement des benchmarks pour analyser et pratiquer un exercice de veille permanent. Le but est de mettre à plat des informations précieuses à un instant T et surveiller son évolution dans le temps. Pour l’UXD, ces benchmarks permettent d’être recoupés avec les Personas et d’établir une grille des usages. Imaginons que nous avons établi un comparatif sur diverses fonctionnalités d’une application mobile, certaines d’entre elles seront adéquates pour plusieurs personas et d’autres moins. Grâce à ce travail, on va pouvoir faire des choix.

Exemple de recoupe entre benchmark et personas

 

Phase 2 : Construire le concept

 

Générer des idées

Echanger en groupe différents points de vue pour aider à trouver des nouvelles idées en créant des storyboards, des scénarios d’usage.

Exemple de storyboard

Cette recherche se fait uniquement en croquis avant de se lancer dans des wireframes. Le but est de commencer à échanger sur des idées avec le client sans rentrer dans la production directement. Les croquis permettent de ne pas passer trop de temps et d’amener le client à raisonner plus précisément en fonction du contexte, d’apporter une vision globale du projet sur un court terme.

 

Phase 3 : Organiser

 

Périmètre fonctionnel

Lister les fonctions en accord avec le client et définir le budget avec un plan de production.

Management des contenus

Etablir une matrice des contenus.

Structure

Définir le plan ou l’arborescence de l’application ou du site web.

 

Phase 4 : Designer

 

Le design fonctionnel

Les wireframes

Permet de montrer la structure en niveau de gris avec suffisamment d’informations pour imposer ses choix. Le wireframe doit aussi laisser de la place à l’interprétation visuelle.

Les wireflows

On relie les wireframes avec des flèches pour défini le/les parcours de l’utilisateur. C’est un document de présentation pour le client.

Exemple de wireflow

Le chart flow

C’est le même principe que le wireflow mais ce document est à destination des développeurs pour comprendre plus rapidement le fonctionnement technique de l’application notamment en précisant les boucles. Il n’est pas nécéssaire d’utiliser les wireframes ici.

Exemple de chart flow

 

Le design d’interaction

En fonction des personas définis auparavant, on doit savoir ce que l’utilisateur s’attend à voir, mais on va chercher à anticiper ses futures actions et ainsi mettre à disposition plus facilement ce qu’il recherche. On mettra l’accent sur les formulaires, boutons d’actions et menus.

 

L’UI Design (User Interface Design)

Sur la base des wireframes et du design d’interaction, on définit l’esthétique finale de l’interface. A savoir le design des boutons d’action et de navigation, le design des animations, la clarification et la mise en avant des contenus.

 

Le prototype

On peut envisager plusieurs types de prototypes :

  • Les wireframes cliquables
  • L’utilisation d’un logiciel de prototypage (Adobe Experience Design par exemple)
  • Une maquette html

Le but est de s’approcher le plus fidèlement possible du produit fini pour présenter au client et aussi de s’apercevoir des erreurs dans le déroulement.

 

Phase globale : Manager la production

 

La phase de suivi du projet est très importante. L’UXD doit s’assurer du bon déroulement de la production en maintenant les 4 flux d’informations suivants qu’il faut traiter :

 

Les spécifications fonctionnelles

Avec la production des schémas de structure (wireframes)

La production graphique

Créer un document de gabarit d’objet (charte de template) pour rationaliser le design. Cela permet d’augmenter la qualité du produit fini.

La production des contenus

Valider les étapes de la matrice des contenus : à faire, en cours, fait.
 

Les spécifications techniques

 

Durant la phase de production, une itération doit être mise en place entre plusieurs profils différents (le chef de projet, l’architecte d’information, l’UI Designer, etc) pour que le projet soit “User experience friendly”.

Conclusion

Vous l’aurez compris, l’UX Design est une affaire d’équipe et d’échanges en interne et avec le client. C’est un process Agile. Si une équipe est dédiée à l’UX dans une entreprise, elle devra idéalement être composée de personnes avec des appétences différentes (technique, esthétique, fonctionnelle, informationnelle, etc…) pour enrichir l’expérience utilisateur. Si une seule personne est garante de l’UX Design, elle doit s’assurer que les échanges entre tous les intervenants du projet soient fluides à chaque phase de création du projet toujours au service de l’expérience utilisateur.

1 Réponse pour UX Design

Avatar

Daniela Castro

mars 3rd, 2017 à 1 h 37 min

J’adoré cette article! Merci pour cette article Sylvain, j’ai beaucoup apprécié les exemples aussi. C’est un inspiration pour moi pour la réflexion à la mise en place de l’UX Design dans chacune des phases dans la création de un produit/application.

Bravo!!!! ***** (5 étoiles)

Commentaire

9 − = six

iMDEO recrute !

REJOIGNEZ-NOUS

A la recherche de nouveaux talents (développeurs web et mobile, chefs de projet,...)

Voir les annonces