Maquettes schématiques : comment collaborer aux fondations de votre site Web?

Chroniques

Maquettes
schématiques

Comment collaborer aux fondations
de votre site Web?

17/02 2015

Maquettes schématiques : comment collaborer aux fondations de votre site Web?

Comment collaborer aux maquettes schématiques (wireframes) de votre site Web? Voici quelques trucs pour vous aider.

4 0

Qu’est-ce qu'une maquette schématique (wireframe)?

La maquette schématique est une représentation graphique des différents contenus et fonctionnalités d’un site Web. Réalisée avant la conception, elle permet de démontrer de façon plus visuelle et concrète les spécifications techniques d’un site, sans nécessairement prendre en considération les aspects plus artistiques de celui-ci.

Étape cruciale de transition entre la stratégie et la conception, elle permet à l’agence de s’assurer qu’elle partage la même vision du projet que le client, et au client de rectifier le tir avant qu’il ne soit trop tard.

La réalisation de maquettes schématiques est utile à plusieurs niveaux, que ce soit pour obtenir une validation de la part du client, pour démontrer les différents états d’un site adaptatif, ou encore pour s’assurer de l’ergonomie d’un futur site Web.

Mais encore, que retrouve-t-on dans ces maquettes schématiques?

Contenus et images

Les différents éléments qui seront présentés sur votre site se retrouveront sur ces maquettes. Textes, images, photographies… Sans être nécessairement intégré directement à la maquette schématique, chaque élément verra en quelque sorte son espace « réservé » dans la page.

Mise en page

Les maquettes schématiques permettent de démontrer l’organisation de ces différents contenus sur votre site. Seront-ils répartis sur une, deux ou trois colonnes? Comment seront disposées les différentes informations du pied de page?

C’est également l’occasion de débuter la réflexion quant au design adaptatif de votre site : comment la mise en page réagira-t-elle aux différentes résolutions d’écran?

Priorité des éléments

Les éléments de contenus d’un site web n’ont pas tous la même importance. Que doit-on mettre de l’avant sur votre site? Sur quels éléments l’attention de l’utilisateur doit-elle se porter lorsque celui-ci arrive sur la page? Il faut prioriser les informations en fonction des besoins de vos personas.

C’est le moment idéal de trouver une alternative plus efficace que le fameux carousel…

Qu’est-ce qu’un persona?

Le persona est une représentation fictive de l'utilisateur type de votre site Web créé au moment de l’élaboration de la stratégie. Le persona est utilisé tout au long du processus de réalisation; il sert en quelque sorte de référence lors d’une prise de décision en lien avec votre site Web.

Le profil type d’un persona comprendra notamment son âge, sa profession, ses besoins quant à votre site Web… Toute information pouvant avoir un impact sur son utilisation de votre site Web doivent normalement s’y retrouver.

Navigation

Comment l’utilisateur naviguera-t-il de page en page? Comment seront présentés les différents menus de navigation? Comment s’adapteront-ils aux différentes plateformes et contextes d’utilisation (interfaces tactiles, tablettes, téléphones intelligents…)? La maquette schématique permet d'explorer différents scénarios de navigation simplement et efficacement.

Fonctionnalités et interactivité

Comment l’utilisateur interagira-t-il avec votre site web? Quelles actions doit-il être en mesure d’accomplir? La maquette schématique permet de représenter de façon plus concrète les différentes fonctionnalités présentes sur le site, et de s’assurer que rien n’a été oublié.

Comment collaborer aux maquettes schématiques?

1. Fournissez vos contenus dès le départ

Le plus tôt vous fournissez vos contenus dans le processus de réalisation de votre site, le mieux ce sera. La réalisation de maquettes schématiques sans contenus est possible, mais est (très) problématique. Il y a une différence entre mettre en place un texte de quelques lignes et un autre de deux pages de long…

En ayant dès le départ tous les contenus disponibles, la réalisation des maquettes schématiques sera grandement facilitée. Il est évidemment plus facile de travailler avec des contenus réels qu’avec quelques indications plus ou moins précises!

L’étape des maquettes schématiques peut également mener à une révision de vos contenus : en mettant ceux-ci dans un contexte un peu plus concret qu’un fichier texte, vous réaliserez peut-être qu’ils ne conviennent pas à un environnement Web... (Lire à ce sujet Écrire pour le Web.)

2. Pensez à vos utilisateurs

Lorsque vous aurez à valider vos maquettes schématiques, mettez-vous dans la peau de vos personas : comment vivront-ils leur expérience sur votre site? Est-ce que la solution proposée leur conviendra? N’oubliez pas que ce sont eux qui utiliseront votre site.

Si le temps (et le budget) le permet, il serait bénéfique d’envisager des tests d'utilisabilité à cette étape du projet. Ces tests vous permettront d’observer le comportement de vos utilisateurs et d’apporter les correctifs nécessaires.

Qu’est-ce qu’un test d'utilisabilité?

Le test d’utilisabilité (aussi appelé test utilisateur) permet d’observer de façon concrète l’utilisation d'un site Web par des utilisateurs réels, et ainsi d’y identifier les problématiques à corriger.

L’utilisateur se voit guidé à l’aide d’un scénario établi à travers une série d’actions et de tâches à réaliser sur le site. Son comportement est analysé pour déceler des problèmes quant à la performance ou à la précision de ces actions.

Suite à l’analyse des résultats obtenus, des corrections peuvent être apportées au site tant au niveau du design que des fonctionnalités.

3. Validez de façon efficace vos maquettes schématiques

Contenus et organisation de ces contenus

Assurez-vous que tout ce que vous désirez avez besoin sur votre site Web est présent dans les wireframes. Éléments de menu, textes, photos… Faites l’inventaire et vérifiez que tout y soit.

Prenez également le temps de vérifier le positionnement de certains éléments vis à vis les autres contenus de la page. Quel élément doit être le centre d’attention de la page? Vérifiez que la hiérarchie et l'organisation des éléments convient à votre vision du projet.

N’hésitez pas à formuler vos commentaires à cette étape du projet : les changements à l’organisation des contenus sont bien plus faciles à apporter à ce moment qu’après la mise en ligne!

Fonctionnalités demandées

Blogue, bottin des employés, formulaire de contact, moteur de recherche, offres d’emplois… Faites le tour des maquettes schématiques et vérifiez que tout ce que vous avez demandé est là.

Assurez-vous également que les fonctionnalités correspondent à vos demandes. Permettront-elles à vos utilisateurs d’accomplir adéquatement ce qu’ils doivent faire? Êtes-vous en mesure d’obtenir ou de présenter toutes les informations nécessaires?

Chemins de navigation

À quel endroit sur votre site Web le client ira-t-il pour obtenir l’information qu’il désire? Pour acheter votre produit? Ou pour vous contacter? Habituellement déterminés lors de la stratégie, les chemins de navigation doivent avoir une influence sur les wireframes de votre site.

Vérifiez que les actions clés de vos utilisateurs sont facilement réalisables, peu importe le point de départ. Référez-vous constamment à vos personas lors de cette réflexion. Prenez également en considération que la page d’accueil n’est pas la seule porte d’entrée de votre site!

Éléments interactifs

De bonnes maquettes schématiques devraient aussi représenter les différents états de votre site Web. Bien que ces éléments interactifs seront probablement améliorés lors des étapes subséquentes, vous devriez être en mesure de visualiser leur fonctionnement dès l’étape des maquettes schématiques. Comment l’utilisateur va-t-il interagir avec le site?

Parmi les éléments interactifs les plus communs se retrouvent formulaires, galeries d’images et menus mobiles… Assurez-vous de bien comprendre leur fonctionnement sur papier avant de passer à la conception.

Des fondations solides pour un site efficace

L’étape des maquettes schématiques ne doit pas être prise à la légère; il s’agit d’une étape importante du processus de réalisation d’un site Web. Votre implication dès cette étape du projet vous permettra de mieux vous imprégner du projet, et certainement d’effectuer quelques économies en bout de ligne!

Photos par USACEHQ, baldiri et valakirka

Inscrivez-vous à notre infolettre!

Découvrez pourquoi les professionnels du marketing les plus futés sont abonnés à notre infolettre!

Les Dompteurs de souris

Les Dompteurs de souris

Les Dompteurs, c'est une équipe de professionnels des communications, sans prétention, qui ont du plaisir au travail et qui savent entretenir des relations exceptionnelles avec leurs clients.

Publier un commentaire

x
Inscrivez-vous à notre infolettre

pour recevoir nos prochains billets