Les étapes de la conception d'un parcours internaute

Le 29/09/2010

Dans Webdesign

Après avoir introduit la notion de parcours internaute, soyons plus concrets en nous intéressant aux étapes d’analyse et de conception de ces parcours. Comme nous l’avions vu précédemment, la conception Web et le parcours internaute sont liés.

S’il s’agit bien d’une méthode similaire, nous avons là une vision et une notion différente.
Je m’explique : On peut concevoir un site web avec toutes les étapes de conception web que nous avons acquis en tant que professionnels : analyse de la cible, wireframes, maquettes…
Mais souvent ces étapes sont :

  • Trop indépendantes les unes des autres. Un professionnel différent pour chaque méthode ou une étape qui ne prend pas suffisamment en compte la précédente.
  • Sans autre objectif que celui de respecter des règles d’ergonomie, de graphisme web et de stratégie de communication. C’est à dire se concentrer sur des règles et des acquis.


Mais ainsi nous nous intéressons uniquement à l’objectif final de l’internaute (et encore…) en se disant que, si tout a été fait dans les règles, il arrivera rapidement à ses fins. Ce n’est qu’une interprétation hasardeuse du parcours internaute. Hors le manque de contrôle amène à un risque important de perte d’internautes.
Le parcours internaute a une règle simple : l’anticipation pour un maximum de gain !

Les étapes :

1 | Définition du ou des profils internautes :

  • Benchmark et brief client : Même si sa vision peut sembler subjective, le client reste la meilleure source pour connaître les profils de consommateurs/lecteurs. (Les internautes ne sont que ça à ce niveau!)
  • Veille communautaire : Analyse des communautés d’internautes et de leurs sujets.
  • Personas : définition des différents profils d’internautes qui vont emprunter nos parcours. Les personas synthétisent les informations issues des précédentes sources.
  • Objectif : nous listons les caractéristiques, peurs, préjugés, goûts et surtout les besoins des internautes. Chacune de ces caractéristiques aident au choix de la bonne “signalisation”.

2 | Pré-parcours :

Nous réalisons une première esquisse des étapes grossières où passera l’internaute.
Exemple : L’internaute part d’un “point 1” qui est la landing page (page d’atterrissage) où il a atterrit (mais qui n’est pas forcement la page d’accueil) ; puis il passe par un “point 2” qui est la page produit ; un “point 3” qui est le panier d’achat ; et enfin un “point 4” qui est la validation de l’achat. Ainsi le besoin est maintenant considéré comme un objectif (De préférence l’objectif de l’internaute doit être commun à celui de l’annonceur).

3 | Arborescence :

Elle permet de structurer les idées et les ranger dans un rubriquage logique. Plus nous synthétiserons l’information, plus l’accès à cette dernière sera facile pour l’internaute. L’internaute ne veut peut être pas réfléchir, mais il a besoin de logique et d’ordre pour être rassuré et naviguer dans son idée.
Des outils comme les “tris de carte” permettent de connaître précisément le meilleur rubriquage souhaité par notre cible d’internaute. Cependant cette méthode ne peut amener à une arbo définitive. Le “tri de cartes” n’est pas la “réalité” du surf internaute (“Tri de carte” : temps de réflexion VS “Action de surf” : action instinctive) L’arbo est un aussi une sorte de plan de parcours. On part du point A qui est la home pour arriver au dernier niveau de l’arbo qui est une page, par exemple. Mais cela reste un parcours linéaire (de gauche à droite ou de haut en bas), alors qu’un site, de part son interactivité, est tout sauf linéaire.

4 | Parcours :

Pour chaque cible internaute, un parcours différent. Nous modélisons le besoin de l’internaute à partir du point Alpha jusqu’au point Omega qui est la réponse à ce besoin. Pour cela, nous détaillons tous les différents chemins que doit emprunter l’internaute :

 

  • Quelles pages va-t-il prendre => les pages d’atterrissage (ou landing pages)
  • De quelle façon (bouton, liens, lecture du contenu …) => les actions inter-page et intra-page.
  • Cette modélisation nous évite de réaliser un site au hasard et de laisser naviguer l’internaute de façon chaotique. Deux intérêts à cela :
    • nous l’emmenons à l’élément que nous estimons être comme l’information ou l’action finale => intérêt pour l’annonceur
    • nous le satisfaisons dans son besoin => intérêt pour l’internaute
      Mais attention, la finalité de l’annonceur  doit être en accord avec la réponse (inconsciente ou non) acquise par l’internaute.

5 | Wireframes :

Ils matérialisent les outils et éléments qui aideront aux actions de navigation à travers les parcours. Une sorte de cahier des charges de la signalisation et des infrastructures routières… La D.D.E des sites Web.
Les wireframes ne doivent pas être graphiques : il s’agit du plan architectural de la construction qui est notre site. Cela permet au client (et à l’équipe de production) de se concentrer uniquement sur le contenu et pas sur la forme.


Dans le cas d’un CMS (outil de gestion de contenu) par exemple, c’est aussi une sorte de palette d’outils dont nous disposerons lorsque nous rentrerons les contenus. L’intégrateur des contenus utilisera les éléments prévus dans les wireframes pour lier les informations entre elles. Il devra respecter les plans de parcours établis en mixant éléments d’actions et contenus.
Bien sûr les wireframes ne s’arrêtent pas aux boutons, il y a aussi les formulaires, mises en page… Tous les éléments d’actions et d’informations doivent être listés.


Attention : Les wireframes ne sont pas des prototypes. Avec le prototypage, nous rentrons déjà dans la production. (Le prototypage est souvent utile pour des applis Web et des fonctionnalités complexes. Je ne pense pas qu’il soit utile pour chaque projet.)

6 | Maquettes :

C’est à ce moment là que nous commençons à intégrer de l’ergonomie « pure et dure ». Le graphiste traduit visuellement les éléments des wireframes. En effet, le graphisme a un rôle primordial dans la conception des parcours :
A lui de représenter un bouton de façon à ce qu’il soit compris en tant que tel par exemple… Idem pour la hiérarchisation de l’information : Mise en évidence des informations importantes d’une page avec des encarts, taille de police…

Comme vous avez pu le voir, nous n’avons pas traité toutes les étapes d’une conception Web. Nous nous sommes intéressés uniquement à ce qui permet d’étudier le parcours internautes.
N’oublions pas non plus que le parcours internaute se fait également en dehors du site (SEO, social., etc). Nous en parlerons plus tard…
Dans le prochain chapitre, nous aborderons en détails les différents niveaux de parcours.