Cartographie – On se promène ou on fabrique un site ?

A la question (apparemment tintée d’une pointe d’humour) posée dans ce titre évocateur, je répondrai avec beaucoup plus de sérieux que l’on fait les deux.

Et bien oui l’intérêt de cartographier son site, avant de se lancer plus loin, est double (ainsi que la tâche). Il s’agira bien évidemment, suite à l’étape de réflexion initiale relative aux idées et thématiques que l’on souhaite promouvoir au travers de son site, de classer ces dernières et de les organiser entre elles. Mais au delà de ce travail, il s’agira aussi (et surtout) de mettre en place et de visualiser les « chemins » de navigation à venir entre ces items, et donc d’identifier les liaisons entre vos pages.

Et oui, on va donc bien se promener ! Et il est fort possible que la balade soit longue.

Allez ,on organise…

Normalement, vous avez dû, au tout début de votre projet, identifier vos différentes rubriques. On commencera donc par les hiérarchiser, les regrouper, et les organiser.

A ce niveau pas de secret ni de complexification : un seul outil le papier-crayon ! (oui vous pouvez quand même utiliser votre ordinateur et son éditeur de texte ou de diapo !!!). On commence donc par définir des niveaux de hiérarchie selon l’importance des rubriques, en commençant par la page d’accueil qui représentera automatiquement le niveau 1. Ensuite, mon conseil est de se limiter à 2 niveaux supplémentaires relatifs aux rubriques principales et aux sous-rubriques. A considérer que les rubriques principales présenteront un contenu simple, épuré et immédiatement clair pour l’internaute, le détail étant plutôt réservé aux sous-rubriques.  Une fois faite cette organisation, il n’ y a plus qu’à représenter les rubriques ainsi définies (niveaux 1, 2 et 3) sous la forme d’une arborescence à plat.

Ca peut donner un truc dans le genre :

Cartographie site internet

Et maintenant, on relie…

Ben oui, parce mon cher petit internaute sagement en train de lire ma fiche produit n°5, et à ma grande joie, désireux d’en effectuer l’achat, il ne faudrait pas qu’il doive remonter l’arborescence jusqu’à la page d’accueil pour rejoindre celle des contacts (ou autre formulaire d’achat dans cet exemple). C’est qu’il ne faudrait pas le punir par une balade trop longue, mon cher internaute ! N’oubliez jamais votre objectif de conversion, et donc le tunnel efficace permettant d’atteindre cet objectif. En bref, imaginez vous en train de vous « balader » sur le site, et élaborez de « belles pistes » en accord avec votre objectif de conversion.

Ça donnerait donc un truc dans le genre :

Liaisons entre les rubriques

On vient donc tout simplement de formaliser le menu de notre futur site, et les liaisons entre les pages de ce dernier.

A noter qu’une autre méthodologie peut être appliquée à ce niveau, selon la complexité et le nombre de « chemins » que vous voulez mettre en place. Il s’agira ici de représenter horizontalement sur une ligne dédiée chaque chemin correspondant à un process menant aux objectifs prévus.

Pour exemple, le schéma ci-dessous :

Représentation linéaire process de navigation

Si votre projet s’avère bien imposant et/ou complexe, et que donc notre célèbre feuille de papier ou informatique s’avère limitée, n’hésitez pas à vous tourner vers des applications de « mindmapping » vous permettant d’éditer de jolies cartes heuristiques, que vous trouverez facilement sur le net; pour en citer quelques uns à la volée: FresMind, Mindjet ou Xmind.

Cette étape primordiale enfin validée, il sera temps de réfléchir à la structure interne du site et passer ainsi à l’étape de la représentation des pages ou wireframing.

En espérant en avoir aidé certains dans leurs démarches, n’hésitez pas à laisser vos commentaires et indiquer d’autres méthodologies.

Allez à vos stylos ! Cartographiez et commentez !

Wireframe – Qu’est-ce que c’est et pourquoi ?

Sous ce magnifique anglicisme barbare qui déplaira fortement à Mr TOUBON (quelqu’un dans la salle se souvient-il de Mr TOUBON ?) se cache l’appellation d’une étape fondamentale de la création d’un site. Cette étape initiale du projet suit directement celle de la cartographie (exposée dans l’article correspondant ici). Pour rester « frenchy touch », on parlera donc de la « maquette fil de fer ». Alors non, il ne s’agit pas ici de fabriquer via vos petites « mimines » et quelques trombones un personnage décoratif pour votre bureau, mais bien de réaliser une première maquette simpliste représentant l’organisation fonctionnelle des pages (nature et liaisons) qui constitueront votre site.

Think Simply !

A ce niveau, et parce que vous êtes un lecteur assidu de ce blog, vous disposez donc d’une cartographie finalisée de votre site. C’est à partir de cette dernière que vous allez représenter l’organisation de chacune des pages. Ici, il s’agira donc tout simplement de positionner sur votre support (représentant une page) des « blocs » ou autres boites de textes, représentatifs des principaux éléments et fonctionnalités que vous souhaitez voir apparaître sur vos différentes pages, et d’ainsi toutes les décliner (page d’accueil, formulaire, page de contenus, etc…). Vous allez ici, page après page, définir schématiquement le contenu prioritaire de votre site.

Lors de cette phase de travail, il s’avère primordial de garder en tête l’objectif premier de votre site. En effet, la nature, l’organisation, le placement et le déroulé des pages doit assurer le maximum de conversion. Ainsi, élaborez votre maquette en gardant cet objectif constamment à l’esprit, afin d’éviter de lourds correctifs sur la partie Webdesign qui suivra plus tard.

Un avis très personnel mais que je pense néanmoins essentiel : « Think and do simply« ; oups ! (pardon Mr TOUBON), je voulais dire « Pensez et faites simple ». En effet, cette étape de réalisation de son « wireframe » (oh flûte alors ! Mr TOUBON ? En fait, ça serait plus simple pour tout le monde si vous sortiez, merci !), permet justement de réfléchir à l’ergonomie finale de son site pour atteindre au plus vite et au mieux son objectif. Autant il sera évident de consolider et compléter son site à posteriori, autant simplifier un site une fois une multitude de pages, liens et autres modules mis en place, s’avérera plus que délicat et chronophage (donc coûteux).

Une fois ces éléments en tête, vous pouvez donc vous lancer dans la conception de votre wireframe, euh pardon…, zoning, …ah, non mince, votre maquette fil de fer ! (Vous êtes parti, Mr TOUBON ?).

Wireframe – Comment faire ?

Bien à ce niveau le débat peut-être un peu plus long ; pas vraiment au niveau du travail à effectuer mais plutôt des outils à utiliser. Mais bon, ici c’est un article de blog Mesdames et Messieurs, et donc, non, il ne sera pas possible pour moi de rédiger un paragraphe descriptif de toutes les possibilités avec mon avis éclairé sur chacune. Ainsi, je me contenterai donc de lister les possibilités, et de vous laisser vous en remettre à vous-même pour le choix. Du simple au plus élaboré (n’oubliez pas « Think and do simply, vous inquiétez pas TOUBON est parti) :

– le bon vieux papier-crayon, c’est tout bête mais ça marche depuis des millénaires !

Le plus simple

– les trombones et les « mimines » ! Non là je déconne, c’est pour voir si vous suiviez encore…

– le niveau supérieur reste un bon outil de diaporama d’un certain leader mondial de système d’exploitation arborant le doux et sympathique nom de « Fenêtre » (dommage qu’il soit parti du coup le père TOUBON, il aurait été content). La difficulté (ou non) ici, sera pour vous de vous créer votre propre bibliothèque d’éléments représentatifs.

– les applications dédiées en ligne : Mocknow, et Wireframe.cc ;

– les applications dédiées en installation locale : Balsamiq et Lumzi.

Il existe bien d’autres applications, alors n’hésitez pas à en proposer dans les commentaires.