Le design d’un site web est primordial dans les processus de conquête et de fidélisation des internautes.
Mais comment faire la maquette graphique idéale pour le travail si complexe qu’est la mise en page de votre futur site web?
En effet, lors de la création de site web, le design doit être penser pour 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.
Penser correctement l’ergonomie commence donc par la réalisation d’un wireframe, du zoning et d’un mock up pour votre finaliser votre design de site web.
Comment réaliser un zoning pour votre maquette graphique ? Comment réaliser un wireframe pour votre projet web ? Qu’est-ce qu’un mock up?
Je vous livre dans cet article les clés de compréhension et des méthodes de travail pour réaliser un design web efficace.
zoning web
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.
Comment faire un zoning pour votre maquette graphique ?
Le zoning web est la première étape permettant de définir l’organisation générale des pages d’un site internet. Le zoning consiste à représenter sur une maquette papier les différents 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.
Le zoning est un schéma simplifié qui stipule l’emplacement des éléments principaux du gabarit. À ce stade, les différents détails graphiques ainsi que les textes finaux ne sont pas à prendre en compte.
Il s’agit d’un modèle type qui sera appliqué sur les différentes pages. Le zoning sert donc à préparer les maquettes graphiques.
La conception d’un webdesign ne commence pas par la création de calques sous photoshop, ou par l’écriture de code, sans savoir où positionner les différentes informations. Le zoning est indispensable pour l’élaboration d’une maquette. Il permet de voir comment fonctionne la charte graphique en privilégiant l’ergonomie et l’interactivité.
Le zoning indique l’emplacement des différents éléments tels que menu, logo, visuels, side bar, footer dans un modèle de page type sous forme de schéma simple. À ce stade, on ne parle pas de textes, d’illustrations ou de couleurs.
Un croquis, voire des croquis qui découpent l’interface en différentes zones lisibles, sont des préalables nécessaires à une communication réussie pour le confort d’utilisation et une lecture des messages évidente et aisée.
L’ergonomie sera réussie si l’organisation de votre site internet découpe l’information en la hiérarchisant du plus simple au plus complexe en incitant l’utilisateur à l’action (clic pour achat, incitation à continuer la lecture ou à remplir un formulaire contact)
zoning web
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 développé par Google permettant de dessiner des schémas en ligne. Simple et efficace.
Un simple dessin papier vous donne une bonne idée. Mieux vaut commencer par le zoning général, là où les différentes zones apparaîtront de manière identique sur les pages. Un 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.
Comment faire un Wireframe pour votre site internet
Le Wireframing (Maquettage – “maquette fil de fer”) est l’étape suivante dans votre processus de conception d’interface.
Le wireframing permet de définir la hiérarchie de l’information dans une mise en page simple. Il est aussi destiné à améliorer l’expérience utilisateur en décrivant le fonctionnement de la page.
À la différence du zoning, il explique le type de contenus qui compose chaque grande zone.
Le Wireframe s’attarde davantage sur les détails en présentant le type de contenu : images, FAQ, formulaires, textes, titres, call to action. Il permet de s’assurer du bon fonctionnement de la page, que l’ergonomie soit optimale afin d’optimiser l’expérience utilisateur.
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.
À 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
Qu’est-ce qu’un mockup?
Il permet de définir des scénarios d’interaction entre l’utilisateur et le site internet.
Le mockup propose plus un fonctionnement, un modèle d’enchaînement des pages du site Internet. Il retrace le parcours du visiteur pour naviguer de page en page de façon fluide.
Certains scénarios sont élaborés pour convenir de “tunnels” qui permettent de convertir certains prospects en clients ou pour retenir l’internaute plus longtemps sur votre site web. 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 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. Elle 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 claire 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.
Ces différentes étapes sont indispensables :
Wireframing, zoning web design et mockup sont nécessaires pour l’ergonomie de votre site internet. Le travail du designer consistera à fusionner ces modèles d’organisation avec les éléments de votre identité visuelle pour créer un design qui vous ressemble. Une maquette ou charte graphique web conforme à vos attentes en résultera si vous suivez correctement toutes ces étapes.
Le design d’un site web passe donc par une série d’étapes complexes. L’erreur classique consiste à se jeter sur un template graphique tout fait sans attacher suffisamment d’importance à son ergonomie. Il est donc nécessaire de savoir comment faire un zoning, un wareframing et/ou un mock up pour remplir les objectifs voulus.
Conclusion
Réaliser la maquette idéale d’un site internet est une chose complexe. Mais la méthode est éprouvée. La phase d’enrichissement viendra par la suite avec le contenu iconographique…
