Ergonomie 101 : les éléments d'une bonne scénarisation

Pourquoi scénariser le web?

La scénarisation est un terme surtout utilisé dans l’industrie du cinéma. En contexte web, elle désigne l’étape de création de maquettes dites « fonctionnelles », aussi appelées les maquettes fil de fer ou wireframes.

Un peu comme l’architecte dessine les plans d’une maison, l’ergonome organise l’espace sur les pages web. Pour faire des choix judicieux, il prend en considération plusieurs éléments :

  • les objectifs du site
  • les personas (ou clientèle cible)
  • les données d’utilisation du site (merci Google Analytics!)

Tout ça dans un but ultime : créer la meilleure expérience pour l’utilisateur.

Le travail de scénarisation permet de communiquer facilement les orientations du projet au client et valider les enjeux du site. C’est aussi un document de référence important pour les intégrateurs et les programmeurs lors du développement du site.

Un complément à l’arborescence

L’arborescence illustre bien les différentes sections du site et chacune des pages qui s’y retrouvent. De son côté, la scénarisation démontre les interactions entre les pages, chose qu’on ne peut voir facilement dans l’arborescence.

Les maquettes fonctionnelles illustrent clairement comment la navigation, l’interactivité et les fonctionnalités prennent forme sur le site. Elles ont donc un important rôle à jouer.

Le contenu d’abord

Le contenu définit un site et permet aux visiteurs d’atteindre les objectifs souhaités. Sans contenu de qualité, le site devient une coquille vide. Alors qu’il peut être tentant pour l’ergonome de débuter son travail avec l’en-tête et la navigation, c’est le contenu qui doit constituer le point central de la scénarisation.

Comme les contenus ne sont pas tous de la même importance, il faut les prioriser. Ceux ayant la plus grande valeur ajoutée bénéficieront donc d’une place importante dans la page (positionnement plus haut, utilisation de plus d’espace).

Le piège du design

Il faut faire attention de ne pas mettre de détails graphiques dans les maquettes fil de fer. Les éléments visuels brouillent parfois les cartes et empêchent l’équipe de s’attarder aux bonnes questions. La scénarisation doit servir spécifiquement à valider les fonctionnalités avec le client.

Une fois cette étape finalisée, le designer web viendra habiller les pages afin d’y infuser l’ambiance et les tons de couleur qui respectent l’image de marque de l’entreprise.

Le niveau de détail et les annotations

Le niveau de détail des maquettes fonctionnelles devrait être suffisant pour ne pas laisser place à l’interprétation. Par exemple, un bloc gris ayant le libellé Texte peut être considéré ainsi:

  • par le programmeur: « Un texte simple. Le CMS devra fournir un champ texte pour permettre au client de saisir son texte. » (voir l’exemple Programmeur plus bas dans l’article)
  • par le client: « Du texte riche. Je pourrai y mettre mon contenu avec le tableau des avantages de mes services offerts et des liens vers les pages appropriées. » (voir l’exemple Client plus bas dans l’article)

Vous voyez le casse-tête pour la suite des choses?

Parfois, même en ajoutant le détail nécessaire, il est difficile de bien illustrer certains comportements de l’interface. C’est surtout le cas pour des interactions précises (ex.: les différents états d’un élément) ou pour des fonctionnements dynamiques (ex.: un sticky menu). Dans ces situations, les annotations viennent clarifier ce qui arrive lors d’un clic ou du défilement de la page.

Tout ce qui peut porter à confusion ou laisser place à l’interprétation devrait être annoté. Une annotation n’est pas forcément textuelle. Parfois, il est plus simple d’illustrer un comportement que de le décrire en mots.

Comme vous le voyez, les maquettes fonctionnelles représentent une étape importante du développement d’un nouveau site. Nous espérons que cet article vous fera mieux comprendre son rôle dans un projet web.

Exemple Programmeur

Exemple Client