Amomenti

Blog Livres Ebooks A propos

Stratégies web, permission marketing, marketing 2.0, promotion interactive, Référencement, SEO, Performance Marketing, expérience utilisateur, conception web

10 octobre 2006

Règles de conception d’une page web

Hier après-midi, je me suis rendu compte en passant quelques heures avec un client en pleine conception éditoriale de son site, que je n’avais jamais formalisé les règles de conception d’une page web sur ce blog. Ce billet fait suite à ceux postés auparavant sur l’écriture pour le web (1ère, 2ème et 3ème partie).

Une fois que l’on sait ce que le site web doit apporter et à qui, que ses éléments d’ergonomie, d’optimisation technique et de design sont définis, il reste encore à écrire les pages. Cette étape, si elle peut être accompagnée par l’agence, est du ressort de l’entreprise et fait parfois penser à l’angoisse de la page blanche que peut connaître un écrivain. En effet, par quel bout prendre les choses ? Pour lever toute angoisse, je vous propose de suivre une méthode de conception éditoriale simple et, du moins je l’espère, claire.

La première étape : la création des chemins
Le chemin ou scenario interactif Nous avons vu que les cibles du site avaient été définies en amont, nous savons donc à qui nous nous adressons. Chacune de ces cibles a des attentes particulières et l’objectif est de produire autant d’expérience utilisateur positive que possible (je vous invite à relire le billet sur l’expérience utilisateur pour vous rafraichir la mémoire le cas échéant). Nous pouvons donc “imaginer les chemins” ou scenarii interactifs que nos internautes suivront.

Un scenario interactif est une suite logique de pages vues par un internaute, cette suite de pages permet de répondre à la promesse induite par la promotion interactive. Maisons en bois Prenons un exemple, imaginons une entreprise fabriquant les éléments pour la construction de maisons en bois, elle ne s’occupe pas des plans et ne travaille pas en direct avec les particuliers. Ce sont les architectes qui sont en relation avec l’entreprise. Pourtant, les mots-clés “maison” et “bois” sont essentiels et l’entreprise souhaite que le site puisse répondre aux particuliers se posant la question d’une construction bois ; ne serait-ce que pour les rediriger vers les cabinets d’architectes partenaires.

Le scénario interactif sera donc vraisemblablement le suivant : l’internaute saisit le mot clé “maisons en bois” dans un outil de recherche, lequel propose le site de l’entreprise comme réponse pertinente. Seulement la page proposée n’est pas la page d’accueil du site (voir le billet précédent “la page d’accueil n’est plus la porte d’entrée“). Cette première page vue est une page interne dédiée à la construction de maisons en bois ; nous y reviendrons mais cela permet de montrer dès maintenant l’importance de l’introduction à chaque page.

Le chemin de notre internaute ne s’arrêtera pas là, il souhaitera télécharger le document résumant les grandes étapes d’une construction bois, voir la page expliquant en quoi le bois est un matériau intéressant, visualiser des exemples de maisons réalisées et trouver l’architecte le plus proche de chez lui pour plus d’informations. Voilà, rapidement imaginé (c’est pour l’exemple), le chemin possible pour un internaute lambda appartenant à la cible “particuliers - maisons en bois”.

La conception éditoriale
La conception éditoriale consiste en 3 étapes : la définition des “chemins” dont nous venons de parler (il n’y rarement qu’un seul scenario), la création de l’arborescence et l’écriture des pages en elle-même.

La création de l’arborescence
Une fois les scenarii interactifs (ou chemins) définis, il devient plus simple d’organiser les contenus attendus par les internautes et de les regrouper dans une démarche logique ou “synthétique” en respectant la règle “une page = un objectif” (cf le billet du 6 septembre 2005). On peut ainsi imaginer que l’ensemble des références (qu’il s’agisse de maisons individuelles ou de bâtiments collectifs) puisse être accessible au travers d’un même onglet du menu. n’oubliez pas que ce menu ne servira qu’à ceux qui décident de ne pas suivre une lecture linéaire (une page “lançant” une autre page). Dans un site bien pensé et bien réalisé, 80% des internautes se passeront totalement du menu.

Des pages web bien écrites pour produire une expérience utilisateur positive
Afin de réussir le challenge de l’expérience utilisateur positive, les pages doivent être écrites en respectant certaines règles. Pour l’exprimer le plus simplement possible, je vous propose un schéma :

les briques d'une conception de page web efficace

Il découpe une page en 3 grandes briques distinctes : la validation, la réponse et l’invitation.

Zone de validation
N’oubliez jamais qu’a défaut d’avoir le doigt sur la gâchette, l’internaute l’a sur la souris et qu’un clic suffit à vous envoyer aux oubliettes. Vous devrez donc veiller à assurer votre visiteur en permanence qu’il a raison de consacrer du temps à lire votre page. Vous lui avez fait une promesse pour qu’il charge cette page, le haut de la dite page doit donc rassurer le visiteur sur le fait qu’il y trouvera une réponse adéquate. Comment ?

Simplement ! Regardez un article de presse, vous y trouverez un résumé, des intertitres, du texte. La création d’une page web ressemble grosso modo à ce mode d’écriture. La zone de validation, le haut de page, répond à l’interrogation suivante : “qu’y a t il dans cette page”, “est-ce que cela correspond à mon attente”, “ai-je eu raison de cliquer ?”. Le titre de la page est bien entendu un premier élément de réponse primordial mais il n’est pas toujours suffisant. N’hésitez donc pas à rédiger un court résumé de 2 ou 3 lignes qui fera la synthèse du contenu à suivre. N’oublions pas que le temps est la denrée rare dans l’entreprise, vous devez être convaincant pour qu’un internaute accepte de vous lire, et de vous lire jusqu’au bout.

Cette première brique correspond donc à la ré-assurance, à séduire l’internaute pour le convaincre de passer à la seconde brique : la zone de réponse.

Zone de réponse
Cette zone correspond au corps de la page, là où l’internaute trouvera précisément le contenu qu’il attend. Pour faciliter sa démarche, cette zone de contenu sera aérée, les paragraphes seront courts, comporteront des visuels d’illustration et des intertitres pour faciliter la lecture en diagonale. Après tout, peut-être qu’un seul paragraphe de la page m’intéresse réellement…

Je passe rapidement sur l’écriture des contenus en eux-mêmes (vous retrouverez les règles d’écriture dans les billets qui lui sont consacré sur ce blog) en rappelant simplement que les intertitres en gras, le résumé et le titre de la page seront valorisés aux yeux des moteurs de recherche, les mots-clés importants doivent donc y figurer (dans le cas d’un site web optimisé bien entendu).

Zone d’invitation
Enfin, la dernière brique de la page est l’invitation. Comme nous l’avons vu précédemment, le “chemin” de l’internaute ne doit pas s’arrêter avant une transformation (prise de contact, redirection, achat, etc…), le bas de la page doit donc lui proposer de continuer son “voyage” vers une autre page. C’est cette dernière brique qui crée la linéarité de la lecture, elle est primordiale.

Pour résumer, le haut de votre page doit convaincre l’internaute de lire le corps de page. Le corps de la page doit répondre à l’attente de façon aérée et illustrée. Le bas de la page doit inviter à cliquer pour charger une autre page, et ce, jusqu’à la transformation.

Catégorie : Conception Web |

2 réponses

  1. Sébastien Billard :

    Merci Stéphane pour ce billet très interessant, qui abord beaucoup de points essentiels : frontloading afin de cerner immédiatement le propos d’une page, design "persuasif", et souci de répondre à une demande.

  2. Amomenti » Blog Archive » Shoot snapshot ! :: Stratégies web, promotion interactive, Référencement, SEO, Search Engine Marketing, expérience utilisateur, conception web :

    […] Au pire, listez les liens en bas de page ainsi vous ne proposerez une “sortie” à vos internautes qu’après leur lecture, c’est “l’invitation” d’une page web (voir mon précédent billet sur les blocs qui constituent une page web). […]

Publiez votre commentaire