web design

Wireframing, zoning de site web et mockup

Le web design d’un site internet est primordial dans les processus de conquête et de fidélisation des internautes. Mais comment réaliser une maquette efficace pour votre futur projet web ? La réalisation d’un wireframe, du zoning et d’un mock up pour votre charte graphique étroitement liée à l’ergonomie doit permettre de faciliter la navigation, d’augmenter la vitesse de recherche d’information sur votre site internet et d’augmenter le taux moyen de visite sur votre site internet.

zoning et wireframing

L’expérience utilisateur

Lors de la création des sites internet, il est important de savoir conjuguer graphisme et simplicité d’utilisation. L’ ergonomie rend plus facile la compréhension et incite à l’action en permettant à l’internaute de visiter d’autres pages de votre site internet. L’interactivité permet d’offrir des scénarios diversifiés qui préservent la liberté de l’internaute. Le web design doit renforcer le confort de l’expérience utilisateur. La notion d’ergonomie doit être centrale pour améliorer l’expérience utilisateur. Mais pour arriver à réaliser un site web ergonomique, nous allons détailler le travail préalable du webdesigner avant l’intégration HTML.

Maquette et intégration

Il est indispensable de distinguer les 2 phases de la conception d’un site web:

  • La conception ergonomique sur la base d’une maquette que l’on peut améliorer par un débat d’idées et de commentaires.
  • La phase d’intégration de la maquette. Une fois l’intégration faite, il n’est plus possible de revenir en arrière.

La comparaison avec la couture prend ici toute sa pertinence : pour créer un vêtement, les couturiers passent d’abord par la création d’un patron adapté et aux mesures du client avant de travailler sur le tissu et le rendu final.

Une maquette est aussi très utile pour savoir comment un utilisateur va interagir avec l’interface. Par exemple, les maquettes peuvent contenir les différentes significations des boutons ou les comportements des menus. Le maquettage est important car il permet au designer de planifier la mise en page et les interactions d’un site web sans être distrait par les choix de couleurs, de polices ou même de contenus.

Zoning de site web

Le zoning d’un site web est la première étape permettant de définir l’organisation générale des pages d’un projet web . Le zoning consiste à représenter sur une maquette papier les différentes blocs fonctionnels dans la page web.

Cela permet de positionner les zones de navigation, les contenus, le logo, le pied de page, le moteur de recherche, le fil d’Ariane, la side bar… À terme, ces différentes zones pourront chacune contenir plusieurs éléments graphiques, mais à ce stade le zoning de site web dévoile uniquement la structure de vos pages.

faire un zoning

Le zoning d’un site web permet donc de découper la page en autant de zones que nécessaire : c’est la phase de conception de l’organisation des différents éléments en page type. Il est préférable de réaliser le zoning des pages web les plus importantes, les plus stratégiques car les différences peuvent être sensibles. Le zoning d’un site web n’est pas à faire pour toutes les pages dès l’instant où tous les scénarios ont été réalisés. 

Invision , un logiciel gratuit vous permettra de réaliser votre maquette tout en débriefant avec votre entourage.

Autodraw est un outil permettant de dessiner des shémas en ligne développé par Google. Simple et efficace.

Un simple dessin papier vous donne une bonne idée. Mieux vaut commencer par le zoning général, là ou les différentes zones apparaîtront de manière identique sur les pages. Un croquis voire des croquis qui découpe l’interface en différentes zones lisibles selon les pages est un préalable à un confort d’utilisation et une lecture évidente et aisée.

La side bar peut être spécifique à chacun de vos articles, de vos catégories, etc…. De même la gestion des publicités doit être paramétrée en fonction de vos contenus.

Le Wireframe

Le Wireframing (Maquettage – “maquette fil de fer” ) est l’étape suivante dans votre processus de conception d’interface.

Cette étape intervient généralement après avoir réalisé l’arborescence du futur site web. Après avoir réalisé le zoning pour les pages stratégiques de votre site web. Mais il est recommandé de faire varier les encarts secondaires pour diversifier votre offre de navigation à l’intérieur de votre site internet. Le wireframe indique aussi quels types d’informations seront repris sur chaque page. Il convient alors de réaliser autant de wireframe que de pages stratégiques. Les pages standards seront traitées de la même façon mais on accordera plus d’importance à celles qui sont les plus importantes.

Le wireframing ajoute une description détaillée à vos blocs découpés lors du zoning pour préciser l’organisation interne de certaines sections. Si vous partez d’un zoning bien fait, tout ce que vous aurez à faire, c’est remplacer vos zones par les éléments qui les composent.

Le wireframe détaille certaines parties contenues dans les différents blocs : emplacement des boutons, nature des contenus… Le découpage de l’information fait aussi partie de l’ergonomie en décrivant le fonctionnement de la page et en expliquant le type de contenus qui composent chaque grande zone. Un wireframe découpe votre page web en différents blocs et doit définir ce qu’ils contiennent : lesquels seront des images, des liens vers les réseaux sociaux, des call to action, des pictogrammes.

MockFlow est un outil en ligne permettant de réaliser les principaux wireframe de votre site web.

A ce stade,  on cherche seulement à valider l’aspect fonctionnel du projet pour pouvoir se projeter : les contenus sont fictifs (icône image, icône vidéo, icône call to action) et les textes sont en Lorem Ipsum. Vous n’avez pas à définir la taille finale des éléments, ni de leur couleur, ni de leur alignement, c’est le travail du graphiste.

Il permet principalement de définir la hiérarchie de l’information en fonction de votre arborescence afin d’élaborer plus simplement la mise en page selon le fil conducteur suivi par l’utilisateur. La règle de base est d’aller du simple au plus complexe. Une page stratégique doit évoquer vos principaux topics dans une organisation lisible en bloc pour servir les pages  standards qui traitent de chacun des sujets traités. Ainsi, l’internaute choisit son sujet à travers les liens de chaque bloc.

 Il est beaucoup plus facile de modifier un wireframe qu’une maquette ou un site déjà construit, ce qui permet bien des économies.

 

wireframe

 

Le mockup

Il permet de définir des scénarios d’interaction entre l’utilisateur et le site internet.

Le mockup scénarise décrit le cheminement des internautes afin d’optimiser les performances du site web. La scénarisation interactive idéale est une tâche relativement complexe mais elle permet d’optimiser la conversion de prospects en client.

Le mockup permet de créer des “tunnels” de ventes où les différents scénarios sont pensés pour orienter  votre prospect vers une page de vente spécifique. On ajoutera alors des blocs connexes pour relancer un panier abandonné par exemple.

Le scénario joue un grand rôle dans le taux de conversion qui devient alors l’indicateur-clé car votre taux de conversion dépend du parcours du client sur votre site.

Si l’action donne lieu à des messages d’erreurs ou bien si l’action réussie provoque une gratification pour l’internaute. Le code couleur, les pictogrammes ou bien les images permettent d’augmenter la réalité et de délivrer une réponse clair en cas de réussite ou d’erreur. Par exemple un message de succès sera plutôt de couleur verte et un message d’erreur, rouge ou orange pour attirer l’attention.

 

zoning site internet

Le principe de base de l’ergonomie : du plus simple au plus complexe

Pour permettre à l’internaute de choisir ce qui l’intéresse, vous devez mettre l’expérience utilisateur au centre de votre démarche de concepteur ce qui permet de structurer l’information et de rajouter de l’interaction avec l’internaute. Un visuel, une image, un pictogramme structure votre page.

On préférera un titre et un petit paragraphe suivi d’un lien ou un call to action vers une page qui développe votre accroche afin de rallonger le temps de visite sur votre site internet.

Il faut parfois fournir une accroche avec un lien plutôt qu’un long texte afin de laisser à vos internautes la liberté de naviguer vers ce qui l’intéresse en premier lieu.

L’expérience utilisateur profite aussi à votre référencement car Google a mis à jour son algorithme sur l’UX le 28 mai 2020. A voir…donc. L UX Design (zoning et wireframing) est donc un élément à intégrer à votre stratégie marketing en fonction de votre ou vos cibles.

Le travail du designer consiste à fusionner ces modèles d’organisation zoning, wireframing et mockup avec les éléments de votre identité visuelle pour créer un design qui vous ressemble. Une maquette résumera l’ensemble de ce qu’il faudrait dans une charte graphique web.

zoning de site web

 

Conclusion :

L’erreur classique consiste à se jeter sur un template graphique tout fait sans attacher suffisamment d’importance à son ergonomie. Pourtant les étapes du wireframe, du zoning et du mock up sont indispensables. La phase d’enrichissement viendra par la suite avec le contenu iconographique. Le processus de création d’un site Internet doit pouvoir présenter correctement vos informations et remplir les objectifs que vous vous étiez fixé.

 

BESOIN DE CONSEILS ?

Si vous voulez discuter de votre projet web, n’hésitez pas à en parler avec Webmaster freelance!

Leave a Comment

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

%d blogueurs aiment cette page :