Arborescence et wireframe, kècécè ça?

Chez Pomzed, nous construisons des sites internet personnalisés qui répondent aux besoins du client et au comportement de l’utilisateur (UX Expérience).

Lors du processus de création d’un site internet, notre département web commence toujours par une partie appelée arborescence et wireframe. Des noms barbares qui définissent des points essentiels dans la création d’un site.

L’arborescence se fait de manière écrite alors que le wireframe est un visuel, capito?

Voyons dans un premier temps ce qu’est l’arborescence, autrement dit «sitemap» (plan du site).

L’arborescence d’un site représente l’organisation des pages de votre site internet. Certaines pages sont plus importantes que d’autres, de par les informations qu’elles contiennent. Ces pages principales abritent le contenu essentiel à votre site internet.

Une page peut contenir des sous-pages et une sous-page peut contenir elle aussi d’autres pages et ainsi de suite. Inception like!

Le client, avec l’aide de nos experts, va pouvoir travailler ce sitemap, afin que l’utilisateur trouve rapidement ce qu’il est venu chercher sur le site.

Le but c’est la clarté! On affine les pages pour faire ressortir l’essentiel, afin d’aller droit au but.

L’arborescence est une des premières étapes lors de l’élaboration d’un site web. Une fois celle-ci terminée, on passe au stade du wireframe.

Le wireframe (ou ergonomie) représente la première ébauche visuelle de votre arborescence. Ici, pas de style graphique défini, mais plutôt des croquis représentant l’architecture brute. Représentez-vous le wireframe comme le squelette de votre site.

Cette étape est très importante, car elle nous permet de tester le comportement et le confort d’utilisation (navigation). Il faut se poser la question suivante : qu’est-ce que l’utilisateur vient chercher sur notre site et comment va-t-il utiliser ce dernier? Cette analyse nous permet de définir où se situera chaque élément du futur site. L’objectif est que chacun trouve ce qu’il cherche le plus rapidement possible.

Pour faire le wireframe, Pomzed se base sur l’arborescence précédemment créée. Cette étape va nous permettre de définir les différentes zones de chaque page et de poser les premières intentions.

Ensuite, on intègre directement le processus technologique au sein du wireframe en définissant si le site intégrera cette fonctionnalité-ci, ou celle-là… ou une chèvre… ou un pied de chaise, enfin en gros quoi!

Après le wireframe, passons au prototypage.

Le protyto, le protota, attendez… respire… Le prototypage (voilà, ça va mieux) est le fait d’ajouter des liens au wireframe pour permettre de le parcourir comme le vrai site. Cela offre au client la possibilité de faire des essais, mais surtout facilitera la tâche de nos testeurs «internes» (expérience utilisateur) qui nous rendront des rapports d’expertise plus pertinents.

Finalement, à quoi ça sert cette arboreschose et ce wiretruc? Pourquoi Pomzed ne passerait pas directement à la création du design et au codage du site?

Et bien, il s’agit là d’étapes essentielles, car elles permettent de valider la structure d’un site internet en un temps record. Le but de ces étapes est d’éviter de se rendre compte que le site ne correspond pas au public cible une fois terminé. Tout recommencé, ça coûte cher!

Le wireframe et le prototypage permettent plusieurs choses:

1. Détecter rapidement d’éventuels problèmes d’ergonomie
2. Être sûr que le but du site est atteint
3. Valider à moindres coûts les fonctionnalités du site

En respectant cet ordre de création, l’on s’assure un site cohérent. Viennent ensuite les étapes du web design et du codage et ils vécurent heureux et eurent beaucoup d’enfants. Ou presque!