Zoning

A quoi sert le zoning ?

Cette étape du web design intervient avant la conception graphique. A partir d’une arborescence, qui constitue le “squelette” du site, elle permet de définir la structure des pages, à travers l’emplacement et l’organisation des différents éléments : logo, menu, colonnes, zones de texte, footer…

Grâce au zoning, on peut se focaliser sur l’ergonomie et les fonctionnalités du futur site web sans être influencé par l’aspect graphique de ce dernier. Cette étape fait gagner du temps sur la conception du site, car elle permet de déceler les éventuels problèmes d’ergonomie et de navigation avant de se concentrer sur le design graphique.

Le travail de zoning permet d’obtenir une maquette (un wireframe) détaillant les contenus que l’on pourra retrouver sur chaque page du site. Le wireframe, parfois aussi appelé mockup, est donc une représentation visuelle de l’interface d’un site.

Par la suite, le wireframe guide le designer dans son travail de mise en forme graphique, en l’aidant à concevoir les maquettes de chaque page à partir d’une base claire. Le wireframe a l’avantage d’être compris par tous (designer, client, développeur…), permettant à chacun d’exprimer ses besoins et envies et d’y apporter des modifications.

Le wireframe permet de rendre un projet clair et concret, en confrontant l’idée du projet à la faisabilité technique de celui-ci. L’intérêt de concevoir un wireframe est de mettre un point d’honneur à l’ergonomie et à l’expérience utilisateur. Ainsi, le zoning est généralement réalisé par un ergonome ou un webdesigner, parfois avec l’aide d’un UX designer.

Cette étape permet également d’estimer le budget nécessaire pour la réalisation du site web.

Comment réaliser un zoning ?

Le travail de zoning peut être réalisé à l’aide d’outils spécialisés comme Mockflow, Axure, Balsamiq ou Adobe Experience Design, mais aussi avec un logiciel de conception graphique tel que Photoshop, ou encore à la main, simplement à l’aide d’une feuille de papier et d’un crayon.

Les logiciels spécialisés ont l’avantage de proposer une banque d’éléments réutilisables (icônes, boutons…) et s’utilisent de manière intuitive. De plus, certains outils de wireframing permettent la création de maquettes interactives, afin de tester la facilité de navigation entre les pages. On peut ainsi se mettre à la place de l’utilisateur, tester les différentes fonctionnalités en situation et corriger les erreurs si besoin.

L’intérêt du zoning pour le référencement naturel ?

La problématique du SEO doit entrer en jeu dès la phase de conception du site. Pour cela, il est préférable de produire des wireframes conçus spécialement pour répondre aux besoins du SEO. Il est nécessaire de les structurer de façon à ce que la navigation interne et le contenu puissent être optimisés facilement.

Le wireframe permet ainsi aux experts SEO de prévoir l’optimisation on-page du site et de réfléchir aux éléments pouvant faciliter la conversion, la génération de leads et le netlinking.

L’étape de wireframing peut même aider à préparer la recherche de mots-clés pour chaque page.

La stratégie idéale consiste à rédiger et structurer le contenu (h1, h2…) avant la phase de zoning, afin de prendre en compte le message à faire passer et de mettre le contenu au coeur du wireframe. Le designer pourra ensuite tenir compte de ces besoins en SEO pour la mise en forme graphique : blocs de texte extensibles, choix d’une webfont plutôt que d’icônes graphiques…