Définir l'architecture d'un site web signifie hiérarchiser l'information de manière à la rendre :

• Facilement accessible et compréhensible par les utilisateurs du site,
• Organisée selon des principes qui facilitent la navigation,
• Référençable par les moteurs de recherche

Notions clés d'architecture de site Web

Pour cela quelques notions de base sont nécessaires. Votre site internet comprend une partie front end, qui est la partie visible par les utilisateurs externes et une partie back end qui correspond aux bases de données et à leur utilisation. Dans certains cas l'accès à une partie du front end sera privée, réservée aux utilisateurs administrateur du site par exemple. Cela peut permettre de gérer les inscriptions ou bien de remonter des données depuis le back end. C'est notamment le cas pour les tableaux de bord. Le front end implique ainsi de réfléchir à l'expérience utilisateur et au parcours client. Tandis que le back end nécessite une réflexion sur le stockage des données, et d'éventuels calculs intermédiaires.

Votre site internet est un ensemble de fichiers hébergés sur un serveur (OVH, Heroku, AWS) par opposition à un hébergement local, c'est à dire sur votre ordinateur. Le principe est le même, pour consulter un site, un ordinateur émet une requête vers un autre ordinateur (le serveur) à partir d'une adresse IP, qui est simplifiée selon la norme DNS. Cette norme permet d'interroger un serveur en tapant son adresse url depuis la barre de recherche du navigateur (Explorer, Chrome, Firefox...). Cette simplification permet de plus facilement retrouver l'adresse du site, mais aussi de le référencer.

Structuration de l'arborescence du site Web

Lors de la structuration de votre architecture vous devrez donc prendre en compte tous ces aspects : UX, parcours client, stockage des données, organisation des pages constituant le site et leurs relations entre elles (maillage). Et enfin référencement (SEO en anglais).

Au fur et à mesure du développement du web, de bonnes pratiques ont fait leur apparition dans la création de sites. Un bon nombre est issu de la norme W3C établie par The World Wide Web Consortium, une organisation dédiée au fonctionnement du web et à l'amélioration de son fonctionnement.

Parmi les plus importantes, Miller indique qu'un site doit de préférence comprendre au maximum 8 niveaux horizontaux et 3 à 4 niveaux de profondeur. Vous pouvez représenter ces niveaux, cette architecture sous la forme d'un organigramme. Il s'agit de visualiser l'organisation de votre site. Le haut de l'organigramme correspondra à la page d'accueil, la porte d'entrée sur le site. La limite de 3-4 niveaux de hiérarchisation permet de limiter les "voies sans issues" : ces pages qui ne mènent nulle part. Votre utilisateur doit en en effet en permanence savoir où il se trouve et pouvoir revenir à la page d'accueil. Les liens entre les pages sont également verticaux et horizontaux. Il s'agit d'éviter que certaines pages ne soient pas accessibles de manière transversales. Un peu comme si pour aller à Saint Etienne en train depuis Lyon, vous deviez repasser par Paris... Peu pratique ! Le fil d'Ariane qui se présente sous la forme d'un thème>page 1>page1.1, permettra à votre utilisateur de s'y retrouver et de cliquer directement sur le fil d'Ariane pour se déplacer.

Les ateliers sur le plan de site

Pour élaborer une architecture plusieurs méthodes s'offrent à vous. Nous vous conseillons de travailler par ateliers, en fonction des tâches, mais aussi des contenus. 

La liste des tâches permet d'identifier les actions requises. Il s'agit de ce que l'utilisateur doit pouvoir réaliser. Pour poursuivre l'analogie avec l'organisation d'une entreprise, il s'agit de la fiche de fonction à laquelle répondra le site. L'utilisateur doit pouvoir réaliser telle ou telle action, telle ou telle tâche. Celles-ci doivent s'enchainer logiquement. Vous pouvez donc commencer par lister seul ou en groupe les différentes tâches à réaliser pour les utilisateurs, puis les positionner sous la forme de post it et effectuer des regroupements.

La partie contenu permet de lister ce que l'utilisateur souhaite trouver sur un site. Il s'agit des informations attendues.

La synthèse des deux vous permettra de structurer une arborescence qui consituera votre site map (plan de site) vous pouvez trouver par exemple celui de Maddyness, un site d'informations en ligne ici.

Traduite en expérience utilisateur, la partie visible du plan de site s'affichera dans le header (le menu), d'évebtuels menus déroulant qu complèteront les grandes thématiques et le footer (en bas de page où l'on retrouve généralement les formulaires de contact et informations plus spécifiques). Aini limitr le plan de site (et menu) à 8 niveaux horizontaux permet de ne pas perdre l'utilisateur lors de la navigation. 

La constitution par pages et l'adaptation au contenu

Votre site est ainsi constitué de différentes pages. Si vous utilisez des CMS type Wordpress ou Shopify, cela fonctionnera de la même manière. A vous de bien choisir les thèmes en fonction de leur strucuration. A ce sujet vous trouverez de nombreux exemples Wordpress et une description de l'architecture induite sur le site themforest.

Le lien entre vos pages se fera en fonction :

• Du menu et menu déroulant du header
• D'une éventuelle barre latérale facilitant la navigation (visible ou masquée)
• Des boutons suivants, généralement en haut ou en bas de page
• Des liens url qui permettent de ne pas casser la lecture. Wikipedia par exemple est fondé sur ce principe.

Chaque page doit évidemment structurer l'information pour en faciliter la lecture. Cela se fait du général au particulier en suivant un sens de lecture qui correspond à l'oeil humain. A ce sujet on distingue les lecteurs novices et expérimentés. Lorsqu'un utilisateur découvre pour la première fois une page web, il a tendance à la lire selon une courbe en Z. Le regard démarre en effet en haut à gauche et termine sa trajectoire en bas à droite. Au contraire les utilisateurs expérimentés auront tendance à aller tout de suite à l'essentiel. La lecture privilégiera :

• les informations au centre de l'écran,
• puis à droite et à gauche sur les colonnes latérales de l'écran
• avant de remonter ensuite à la recherche de la barre de recherche pour accéder directement au contenu souhaité.

Ainsi certaines zones situées aux extrémitées de l'écran, sont-elles moins propices au partage d'informations importantes.

Par ailleurs la multiplication des supports connectés (devices) de types smartphone ou tablette ont complexifié la création de site internet. En effet les tailles d'écrans sont moins standardisées et varient davantage que sur les PC. On observe par exemple ces dernières années une tendance à l'augmentation des tailles d'écran sur Smartphone qui impactera vos gabarits.

Il est donc important lors du choix de votre architecture de site internet de réflechir mobile first !

Concevoir la vision mobile de votre site sera donc important. Soit sous la forme d'un site responsive, qui est la vision légèrement adaptée des écrans de PC au mobile. Ou bien concevoir une application dédiée complètement ad hoc par rapport au site. C'est le choix par exemple qu'on fait Facebook ou bien Googel Ads pour optimiser l'expérience sur smartphone. La taille de l'écran implique une présentation différente de l'information, souvent réduite en volume et présenter pour les plus petits écran de manière verticale, par empilement.

Le hamburger généralement situé en haut à gauche ou à droite permet de simplifier le menu. Cette pratique est de plus en plus courante. La navigation devra par ailleurs être pensée selon les spécificités liées au smartphone : utilisation à une main, dans des contextes particuliers (transports en commun par exemple) avec une connexion réduite (3 ou 4G selon le réseau). Ainsi la nature du code devra tenir compte de pratiques visant à utiliser des images de tailles réduite situées sur des serveurs puissants, plutôt que de positionner un lien directement dans le code (les fameux "img src"). On considère par exemple que la partie supérieure gauche de l'écran, diffilement accessible d'une seule main pour un droitier servira plutôt aux actions destructives. les actions de validation se situeront dans la zone de déplacement du pouce, de préférence latéral bas gauche. La navigation sera simplifiée si le menu est à gauche sur un smartphone. D'autres contraintes concernent par exemple les tablettes souvent tenues à deux mains.

Evidemment rien ne remplace les tests utilisateurs qui pourront se faire via :

- des tests uniques, en vous situant à côté de l'utilisateur pour observer si la navigation est intuitive

- des tests lors de la conception en simulant une expérience de navigation dans une structure brute (wireframe) ou predesignée (mockup)

- des outils comme Hotjar qui enregistrent la navigation et permettent d'identifier où l'utilisateur bloque

L'impact du architecture optimisée sur le référencement

L'architecture de votre site internet impactera également votre référencement. A ce sujet les anglosaxons évoquent plutôt l'optimisation des recherches (search engine optimization). Il s'agit de faciliter le travail de l'algorithme de Google : le Googlebot qui va crawler votre site internet pour indexer les pages dans son moteur de recherche. Lorsqu’il crawl votre site, le Google Spider a un temps donné pour analyser l’ensemble de vos pages. On parle de Google Juice. Lorsque le temps de crawl est dépassé, il quitte votre site. AInsi les règles de Miller permettent d'optimiser le nombre de pages vues. Il mesure également la structure des pages : liens ou maillages internes, backlinks, qualité et structure des pages de contenu : mots clés, niveaux de titre etc. Pour en savoir plus sur le référencement, rejoignez notre formation à la création d'entreprise