L'angoisse de la page blanche existe aussi pour un(e) chef(fe) de projet chargé(e) de concevoir un nouveau site web.
Pour développer ses idées, les présenter à sa direction, à ses clients et communiquer avec les différents intervenants (rédacteur, graphiste, programmeur, responsable marketing, etc.), un schéma est – souvent – plus efficace qu'un long discours.
Les exemples suivants vous aideront à concevoir un projet réfléchi et à le présenter de manière professionnelle. Libre à vous d'utiliser un logiciel de dessin vectoriel ou simplement dans un premier temps une feuille de papier pour ne pas brider votre créativité.
Objectifs et profils des visiteurs
La première tâche consiste à identifier les visiteurs qui seront supposés interagir avec le site web et définir leur profil.
Prenons l'exemple d'une petite station de montagne. Un premier profil peut être schématisé de la façon suivante:
- Un objectif prioritaire pour le site serait de promouvoir les activités de sport d'hiver de la station et un objectif secondaire de vendre en ligne des abonnements de ski.
- Il est possible de définir une audience familiale, couple avec enfants, qui recherche une offre abordable pour un week-end dans la région. Pour plus de réalisme, on peut approfondir les Persona en créant des profils très détaillés pour mieux comprendre les visiteurs.
- Nous avons déjà le mot clé principal ski, et nous pouvons ajouter des mots clés secondaires comme prix, abonnement, forfait et la localisation géographique Valais. Ces mots clés vont servir de base au référencement et à la publicité avec Google Ads.
- Le contenu envisagé pour intéresser cette audience pourrait être un tableau récapitulatif des activités de loisirs dans la région.
- Un appel à l'action serait créé sous la forme d'un badge proposant un coupon de réduction pour des activités de loisirs et l'achat d'équipement dans la station.
- Les clics sur ce badge/bouton seront mesurés comme conversion d'objectif par un outil de mesure d'audience comme Google Analytics.
Lorsque vous avez une bonne idées de qui sont vos visiteurs et des actions qu'ils vont effectuer sur votre site, il est possible de passer à l'étape suivante: la définition des rubriques et des contenus.
Mind map et arborescence
L'arborescence (tree structure) décrit la structure hiérarchique d'un site web qui se compose d'une page d'accueil avec des liens vers les sous-rubriques et les pages intérieures (comme les branches d'un arbre). Il est important de définir le contenu du site dans les différents formats souhaités (textes, images, vidéos, sons, diaporamas ou autres fonctionnalités). L'arborescence finale joue un rôle important pour l'ergonomie du site, la création des URL (adresses des pages) par les CMS (Système de gestion de contenu) et le regroupement de l'information en silos qui peuvent influencer le référencement dans les moteurs de recherche.
Le concepteur peut préalablement créer une carte heuristique ou mind map, afin de noter toutes sortes d'idées de contenus en rafales sans trop réfléchir à la faisabilité ou la structure du site. Cela permet d'être plus créatif, avant de réaliser une synthèse et de finaliser l'arborescence définitive. L'arborescence servira de référence dans le cadre de la gestion du projet non seulement lors de la conception du site, mais aussi pour les futures mises à jour. Freeplane ou OmniGraffle sont des logiciels adaptés à la création de ce type de schémas. Personnellement, j'aime bien les arborescences en textes et listes à puces réalisés avec OmniOutliner, car il est possible d'ajouter facilement un nouveau noeud pour décrire la page.
Fil de fer (Wireframe)
C'est un schéma simplifié de la mise en pages où les images sont représentées par des rectangles avec une croix de Saint André à l'intérieur, afin de concentrer l'attention du concepteur sur la structure de la page et non pas l'aspect visuel. En effet, un bon wireframe doit laisser une marge de manoeuvre au designer. Le wireframe peut être réalisé rapidement avec un logiciel de dessin vectoriel comme Adobe Illustrator ou OmniGraffle pour décrire n'importe quel élément d'interface. Certains concepteurs aiment croquer les pages et les processus de leur site au crayon sous forme de vignettes avant de mettre au propre. Chacun a sa technique, mais le but est de planifier le développement du projet à l'avance et de le valider, car sa réalisation peut demander beaucoup d'efforts si l'on a un niveau d'exigence élevé et le souci du travail bien fait.
Une mise en pages en web responsive design utilise une grille fluide pour s'adapter à différentes tailles d'écran: PC, tablettes ou mobiles. On divise les pages en blocs distincts: les éléments d'interface qui appartiennent au canevas général de la page (en-tête, pied de page, navigation) et ce qui correspond à la zone modifiable de chaque page. Il faut établir des priorités avec les éléments les plus importants en haut de la ligne de flottaison (zone théoriquement visible de l'écran à l'ouverture de la page). La hiérarchie établie dans le wireframe se retrouvera dans le graphisme: différentes tailles ou fontes pour les titres, intertitres et le corps du texte, alignement, espacement. Elle reflétera aussi la sémantique des balises du code HTML 5 qui est importante pour la bonne compréhension de la page par les moteurs de recherche ou pour les programmes de lecture à l'écran facilitant l'accessibilité de la page aux personnes handicapées (balises h1, h2, navigation, main, section, aside, footer, etc.).
Un site ergonomique utilisera des conventions pour aider l'utilisateur à naviguer de manière intuitive sur la page. Les design patterns (patrons de conception) sont des bonnes pratiques à suivre pour réaliser des éléments d'interfaces courants comme un menu déroulant, un menu hamburger, un fil d'ariane, la pagination, etc. Le diaporama de photos est un design pattern que tout le monde a rencontré au moins une fois en naviguant sur le web. Il possède des boutons flèches pour avancer et reculer et permet de choisir une photo plus loin dans la liste en cliquant sur des points. La réutilisation de ce pattern sur votre site en simplifiera sa compréhension. Pour inclure facilement des designs patterns dans votre schéma, vous pouvez télécharger un wireframe kit utilisable avec votre logiciel de dessin. C'est un canevas contenant des éléments d'interface prédéfinis. Vous pouvez aussi vous inspirer de cette liste de design patterns.
Vous êtes maintenant prêt à faire bonne impression en tant que chef(fe) de projet web.
Sources:
Marketing in the Age of Google – Wiley
The Web Designer's Roadmap – SitePoint
