Placer l’utilisateur au centre de votre dispositif, en cinq étapes, avec Jesse James Garrett

 Par Cécile Almonté, Xavier Berger, Delphine Delfieu, Thibault Savignac

Le livre The Elements of User Experience de Jesse James Garrett a été publié en 2002, soit quatre ans après la publication de Information Architecture for the World Wide Web par Morville et Rosenfeld.
L’auteur fait partie des précurseurs de l’expérience utilisateur et il propose dans son ouvrage une méthode de conception innovante qui place l’utilisateur et son expérience en son centre. Il s’agit de faire en sorte que toute action de l’utilisateur d’un site web ait été envisagée dans le processus de conception. Chaque clic devrait, dans l’idéal, relever d’une intention explicite et consciente du créateur du site.

Pour ce faire, JJ Garrett propose de décomposer le processus de conception en cinq grandes étapes, ou plans, se suivant du plus abstrait au plus concret : la stratégie, l’envergure, la structure, l’ossature et la surface. Ces plans décrivent les étapes d’une méthode à suivre. Ils sont tous interdépendants : toute décision prise à un niveau est la conséquence de décisions prises en amont et limite les décisions prises en aval. C’est pourquoi les phases de travail sur les différents plans doivent se chevaucher et non se succéder.

Nous allons nous pencher plus en détail sur chacune de ces étapes, en illustrant la méthode de JJ Garrett à l’aide de l’exemple de la réalisation d’un site web pour la Junior Entreprise de l’ENS Lyon.

 

Premier plan : la stratégie

À la base de tout site web réussi, il y a une stratégie clairement énoncée. Cette première étape vise à définir les objectifs du commanditaire d’une part, les besoins des utilisateurs d’autre part. Le concepteur peut ainsi se poser deux grandes questions :  Pourquoi veut-on réaliser ce projet ? Pour qui et pour en faire quoi ?

Si nous prenons l’exemple du site web de la Junior Entreprise de l’ENS Lyon, nous avons pu définir deux objectifs principaux :

  • Offrir une visibilité sur internet. Mettre en valeur les différentes activités, compétences et projets réalisés par la Junior-Entreprise.
  • Permettre prises de contact pour propositions de projets ou adhésion d’élèves.

Une fois les objectifs définis, il faut être capable de déterminer s’ils seront atteints ou non. Il faut donc fixer des critères de mesure.

Pour valider la réalisation des objectifs du site web de la JE, nous pouvons par exemple décider de mesurer sa fréquentation, ainsi que le nombre de prises de contact et de projets proposés.

Nous avons répondu à la première question, reste à présent à se pencher sur la deuxième et déterminer qui sont les utilisateurs ciblés.
Nos objectifs dessinent déjà les contours d’une population. On peut alors segmenter cette population selon différents critères (profils d’âge, de milieu socioprofessionnel,  etc.). Les études, interviews et autres tests permettent ensuite de recueillir des informations sur les segments afin de mieux cerner les utilisateurs et leurs attentes. On peut ensuite, à partir des informations récoltées, définir des profils imaginaires types, ou personas, qui personnalisent les grandes catégories d’utilisateurs.

 

Personas pour le site de la JE

Personas pour le site de la JE

 

 

Deuxième plan : l’envergure

À partir des objectifs définis à l’étape précédente, nous pouvons à présent en déduire des contenus et des fonctionnalités, qui seront listés dans deux documents : les besoins liés aux contenus et les spécifications fonctionnelles.

L’étape de l’envergure vise également à fixer les priorités. Il s’agit d’évaluer chaque contenu et chaque fonctionnalité afin de déterminer s’il est prioritaire ou peut être réalisé plus tard (éventuellement dans une version ultérieure du site), s’il répond à un objectif ou sort du cadre du projet.

À l’étape précédente, nous avons esquissé les besoins utilisateurs. Ici, nous allons tenter de déterminer comment répondre à ces besoins. Pour ce faire, nous pouvons notamment avoir recours à des séances de brainstorming avec les utilisateurs et commanditaires afin de confronter les points de vue et faire apparaître des solutions nouvelles.
Les personas sont également utiles à cette étape, à travers la conception de scénarios d’usage : imaginer des situations dans lesquelles les personas interagissent avec le site. Il s’agit alors de se rendre compte de leurs besoins et difficultés et, à partir de là, de trouver les fonctionnalités et contenus qui leur seront nécessaires.

Si nous revenons à notre exemple, nous avons pu ici déterminer les contenus nécessaires, commela description des compétences de la JE, ainsi que des fonctionnalités nécessaires, comme le fait de proposer un formulaire de contact, et que ce dernier soit adapté aux grandes catégories d’utilisateurs (élèves et professionnels).

 

Troisième plan : la structure

Au niveau de la structure, nous allons organiser les interactions ainsi que les contenus.

Le plan structure correspond à l’étape où les problèmes abstraits de stratégie et d’envergure deviennent concrets.

Avant JJ Garrett, l’utilisateur devait s’adapter au système ; aujourd’hui, on prend en compte l’utilisateur dans la conception du système et de l’interaction. Cela nécessite de comprendre à qui on s’adresse et leur manière de réfléchir.

C’est ici que l’architecte de l’information créer des schémas d’organisations et de navigations permettant aux internautes de se déplacer rapidement et efficacement dans les contenus. Plus que le nombre d’étapes à franchir, le point essentiel est qu’elles s’enchaînent selon une logique compréhensible.

La solution architecturale dépendra du projet, le plus compliqué n’étant pas de créer une structure, mais de créer celle qui correspond aux objectifs de l’entreprise et aux besoins de ses utilisateurs.

Concernant notre exemple, il s’agit d’un site One-Page, la structure est donc beaucoup moins complexe que certains sites, et la réalisation de schémas d’organisations complets semble peu nécessaire. En revanche, nous avons pu déterminer les intitulés des catégories (à propos, le bureau etc.) et leur ordre d’enchaînement de bas en haut.

 

Quatrième plan : l’ossature

L’ossature rend tangible les éléments d’organisation qui ont été précisés jusqu’ici. Nous déterminons à cette étape la répartition des éléments sur la page. Pour ce faire, l’outil utilisé est le wireframe, ou maquette fonctionnelle. Il s’agit d’un prototype qui permet de montrer l’organisation d’une page du site : la répartition des différentes zones de contenus, etc. Ce wireframe peut être interactif, afin de simuler les interactions possibles et la navigation de page en page.

Wireframe du site de la JE.

Wireframe du site de la JE.

Wireframe pour le site de la JE

 

Le plan ossature fait appel au design de l’interface, au niveau fonctionnel, et au design de navigation, au niveau informationnel. Le design de l’interface consiste à définir les éléments d’interface qui seront utiles à l’utilisateur (tel bouton, tel menu, etc.), et à les rendre visibles.

Le design de navigation vise quant à lui à déterminer les cheminements possibles à travers le site, à s’assurer qu’ils soient compréhensibles pour l’utilisateur et à permettre à ce dernier de ne jamais être perdu dans le site.

 

Cinquième plan : la surface

Le plan surface constitue en quelque sorte le point de contact entre l’utilisateur et l’objet, et fait appel aux sens (design sensoriel). Il est la partie visible des choix faits en amont.
Ce design visuel va au-delà de l’esthétique, il s’agit de rendre fonctionnels et efficients les objectifs définis sur les plans inférieurs. Il s’agit de soutenir la structure.

La réalisation du plan surface passe par des choix graphiques. Il faut par exemple hiérarchiser visuellement les éléments, afin que le regard de l’utilisateur soit attiré par ceux qui ont de l’importance.

Il est également nécessaire de penser à conserver une “uniformité”, une cohérence, en retrouvant les éléments ayant même fonction aux mêmes emplacements d’une page à l’autre.

Le livrable permettant de rendre visibles les choix de design graphique est la maquette. Celle-ci peut prendre des libertés avec le schéma de l’ossature mais doit en respecter l’esprit, les idées centrales, notamment en termes de design d’information.

Maquette du site de la JE.

Maquette du site de la JE.

JJ Garrett propose finalement un questionnement qui peut guider les acteurs d’un projet web avec efficacité parce qu’il s’intéresse étape après étape, plan après plan, aux besoins et au contexte de l’utilisateur tout en gardant de la souplesse.

Si elle a le mérite de proposer des étapes claires, cette méthode semble incomplète pour pouvoir aborder l’ensemble des dispositifs où l’on pourrait mettre en œuvre l’expérience utilisateur aujourd’hui. Ainsi, la multiplication des canaux (réseaux sociaux, sites web, application, etc.) n’est pas abordée par JJ Garrett.


Vous aimerez aussi...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *