Guide d’utilisation de la maquette grise

27 juin 2020
Carole Lavocat
Maquette grise

Le plan du site web

La maquette grise ou maquette « fonctionnelle » fait le lien entre le développeur web et le porteur de projet. Elle lutte contre le syndrome du garagiste. En voici le guide d’utilisation !

Le syndrome du garagiste

Qu’est-ce-que c’est ?

Le syndrome du garagiste c’est le fait de se laisser guider par le professionnel sans même comprendre ses explications et les mécanismes qu’il met en place.

Ce que nous vous proposons c’est de participer à l’élaboration de votre projet. Nous cherchons à réduire les incompréhensions entre les professionnels du web et vous.  Le but de Wexample est de faciliter la co-construction. Nous mettons en place des ateliers de coconstruction pour vous permettre de prendre en main à 100% votre projet web. Nos outils sont élaborés pour faire le lien entre vous et les développeurs web.

Qu'est ce qu'une maquette grise ?

La maquette grise est l’interprétation exacte du cahier des charges fonctionnelles de manière à voir du premier coup d’œil si l’ensemble des besoins sont bien respectés. Son objectif est de disposer les informations et de répertorier les fonctionnalités du site, indépendamment de l’aspect graphique et esthétique. C’est un wireframe augmenté, c’est à dire qu’il ne se contente pas de placer les éléments mais il les explique également.

Pourquoi faire une maquette grise ?

Il serait impensable de construire une maison sans avoir élaborer un plan au préalable. Pour un site web, c’est la même chose !

L’élaboration d’une maquette grise vous permet de :
Rendre votre idée concrète et pouvoir la visualiser
Faire gagner du temps aux développeurs qui auront l’idée directrice et les grandes lignes de votre projet
Rendre l’échange avec les développeurs plus simple
Lutter contre l’entropie
Avoir une vue d’ensemble du projet au niveau des contraintes de temps et des contraintes techniques
Valider l’UX d’une fonctionnalité

Identifier les composants

Listez les différents composants que vous voulez intégrer et de déterminer les différentes structures de pages de votre site web en vous inspirant de sites existants.

Exemple de structure

Définir la navigation

La maquette grise va permettre de tester la navigation. Il s’agit de hiérarchiser le contenu et de tester les items du menu.

La navigation doit faciliter la recherche d’informations et permettre une compréhension rapide des utilisateurs.

Préciser les fonctionnalités

La maquette grise sert à placer et détailler très précisément les fonctionnalités attendues.

Exemples de composant à intégrer
Activité
réservation

Définir les scénarios utilisateur

La maquette grise est composée de flowcharts. Elle répond à la question : « Que se passe-t-il si mon utilisateur… ? » Elle aide à reconstituer chaque étape du parcours utilisateur. Les flowcharts permettent de mettre en place des scénarios utilisateurs qui prévoient l’enchaînement des composants.

Voici un exemple de flowchart


Évaluer la charge de travail des utilisateurs

Il existe différents types d’utilisateurs qui auront une charge de travail plus ou moins importante :

Utilisateur anonyme : il découvre l’application, l’objectif est de lui donner envie de l’utiliser.
Utilisateur client : il cherche à acheter les produits, le parcours panier doit être optimisé.
Utilisateur connecté : il crée un compte pour accéder à un service.
Utilisateur administrateur : il animer, éditer et configurer le site.
Utilisateur du back office ce sont les membres de l’équipe : ils conçoivent le site.

La mauvaise évaluation de la charge de travail de vos utilisateurs pourrait mettre en péril votre projet web.

UX design

La maquette grise vous permet de créer des design au service de vos utilisateurs.

Elle vous aide à :

Vérifier la facilité de compréhension
Confirmer la facilité d’utilisation
Concevoir des expériences optimales

Travailler mon message

Quelles informations doit on trouver sur une page de site web ?

La maquette grise facilite la conception du message. L’utilisateur doit en un instant les réponses aux questions qui, quoi, comment, pourquoi, combien. Les informations importantes doivent être faciles d’accès. La maquette grise permet de se pencher sur l’expérience utilisateur(UX) et de concevoir un site qui réponde vraiment aux besoins de vos utilisateurs.

Conclusion

La maquette grise est l’élément central de notre méthodologie.

Elle fait le lien entre le porteur de projet, les développeurs web et les utilisateurs

Rencontez nos Wexies !

Notre méthodologie de travail vous intéresse ? Contactez-nous pour rencontrer les Wexies qui ont participé à l’élaboration de notre méthodologie !

La rédaction de cet article fait suite à ma découverte de cet outil qu’est la maquette grise. Elle m’a permis d’avoir une représentation plus visuelle et plus concrète de mes idées avant de passer à l’intégration WordPress. Chaque porteur de projet devrait considérer la réalisation de la maquette grise comme une étape clé de la mise en place de son projet web car elle permet un réel gain de temps.
Kimberley Thisme Assistante en communication

Pour aller plus loin…

No comments

Laisser un commentaire

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

J’accepte les conditions et la politique de confidentialité

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.