Objectifs

Le prototypage ou maquettage est une étape clef dans le processus de création d’un site web. Elle se situe après la réalisation du cahier des charges, et avant la phase de conception web proprement dite.
Elle implique :

• l’équipe qui réalisera le site : chef de projet, concepteur, webdesigners, graphistes, développeurs, etc.,
• le commanditaire, qu’il soit représenté par le client lui-même ou sa Maîtrise d’Ouvrage (MOA).

L’objectif principal du prototypage est la fabrication d’un modèle physique (maquette, prototype) dans un délai très court, à moindre coût et avec le minimum d’outillage et d’étapes intermédiaires dans le processus de réalisation.

Le but recherché est de :

• se mettre d’accord sur les aspects fonctionnels et graphiques,
• détecter au plus tôt d’éventuels problèmes de conception,
• valider rapidement la faisabilité et tester des solutions alternatives,
• avoir une bonne et même compréhension du but à atteindre,
• éviter ainsi l’arbitrage d’éventuels conflits.

De l’idée au prototype

Préalable

Le brief créatif

Le “brief créatif” : un document rédigé par l’équipe de réalisation sous la forme d’un questionnaire/interview et fourni au client. Ce dernier y précise des détails qui seront utiles pour cerner le projet (contexte, problématique, les cibles, supports envisagés, contraintes principales).

Le sketch ou croquis

De la même manière qu’à une autre époque on faisait un brouillon avant d’écrire une lettre, la première chose que l’on fait est de jeter ses idées sur un papier, sous forme de croquis. Cette première étape s’appelle précisément sketch ou croquis.
Mais on est encore bien loin de la version cliquable aux couleurs de l’entreprise du commanditaire…

Les six étapes du prototypage

Le prototypage s’attache à détailler les deux points principaux d’un site web :

• le fond = les fonctionnalités offertes, l’ergonomie : le découpage en différentes zones et les services que chacune d’elle offre (dynamiques ou statiques) : zone de saisie, affichage d’un logo ou d’une image dans une bannière, etc.
• la forme = l’aspect graphique : présentation générale, choix des couleurs majoritaires, type et taille des polices utilisées, etc.

Le prototypage doit travailler séparément l’ergonomie et le graphisme du site. Et au sein même de chacune de ces deux grandes parties, on retrouve encore plusieurs phases que nous allons vous présenter.

On va donc s’attaquer dans un premier temps à l’ergonomie du site puis, dans une seconde sous-partie à son aspect graphique.

Conception ergonomique
Commençons donc la description de divers outils ou méthodes pouvant être utilisés pour définir l’ergonomie d’un site : le zoning, le wireframe et enfin le prototype.

1. Le zoning

Définition
Le zoning a pour objectif de jeter les bases graphiques du projet. Comme son nom l’indique, il permet de dégager les zones visuelles de l’application : proportionner les blocs principaux, de les hiérarchiser par des niveaux de gris, de positionner les éléments pour avoir un premier rendu graphique.
Il sert surtout à faire ressortir les idées du client et à permettre de lister les contenus pour ne pas les oublier, de dégager et d’exprimer les grandes fonctionnalités. Formalisé de façon générique, il ne s’attache pas à la forme, ni aux détails.
Cette première représentation permet d’éviter d’emblée des incompréhensions et par conséquent des erreurs de conception à venir.

Acteurs
Il s’agit d’un outil interne, sans participation directe du client : en fait, il est constitué à partir du cahier des charges, des différentes réunions et des éléments recueillis à l’aide du brief créatif. Le but de l’équipe en charge de la réalisation du site est donc de laisser s’exprimer ces idées dans un premier jet, puis de commencer à les structurer.
Il est la vision macroscopique du projet, sans aucun contenu, ni titre, ni même de logo ; juste les bases et peut être réalisé très simplement autour d’une table sur une feuille de papier. Aucune couleur, aucun contenu, aucune image, seuls des traits droits sont utilisés et le résultat reste sommaire.
Pour autant, des outils plus sophistiquées ont été conçus spécifiquement pour faciliter cette démarche ou peuvent simplement correspondre à ce besoin. On peut citer, entre autres, Microsoft PowerPoint, Adobe Illustrator, Pencil ou encore Balsamiq et wireframe.cc.
Il est important de préciser qu’aucun livrable n’est attendu après l’étape de zoning, le but est simplement de poser les bases et de dégrossir le trait pour les étapes suivantes.

Outils
Microsoft PowerPoint
Adobe Illustrator
Pencil
Balsamiq
wireframe.cc

2. Le wireframe, ou maquette filaire

Définition
Dans la continuité du zoning, le wireframe permet d’intégrer du vrai-faux contenu dans les zones préalablement définies. Le but est donc de définir une structure sans se préoccuper de l’apparence visuelle. Le dessin va ainsi être très basique, en noir et blanc.
A noter que l’utilité même de cette étape est l’objet de vifs débats dans la communauté des Webdesigners. En effet, toute personne connaissant HTML5, CSS3 (ou SASS : langage permettant de simplifier la manipulation des CSS) et éventuellement quelques Frameworks mettra très peu de temps à faire de même.

Acteurs
Le wireframe est réalisé en interne. Selon la taille du projet et donc de l’entreprise qui réalise, il peut être effectué par une seule personne ou une équipe : idéalement par un ergonome, et selon les moyens par des profils développeurs, webdesigners, etc.
Une fois une version aboutie, elle est soumise au client / commanditaire afin de la faire évoluer, la corriger. On peut même envisager les premiers tests utilisateurs en les questionnant sur leur ressenti à la vue des écrans.

Outils
Papier crayon, gabarit papier et crayon,
logiciel de dessin vectoriel,
Balsamiq,
Wireframe.cc, …

3. Le prototype

Définition
Attention le mot « prototype » peut être utilisé dans de nombreux cas.
On évoque ici la phase de conception ergonomique et fonctionnelle, le prototype représente donc une version avancée du projet de site web. En informatique, un prototype est quelque chose de fonctionnel.
Il s’agit ainsi d’une maquette dynamique de pages affichables dans un navigateur. Il est important de rappeler qu’à ce stade, l’aspect graphique n’intervient pas : le but du prototype est bien de valider les interactions et la navigabilité de l’application, nullement de valider la mise en forme. On peut ainsi s’en tenir à des pages noires et blanches.
Le prototype peut servir pour des premiers tests de fonctionnalités en sollicitant le client ou les utilisateurs finaux (représentés par la MOA ou l’Assistance à Maîtrise d’Ouvrage).
On peut ainsi déjà modifier rapidement et facilement certaines fonctionnalités qui n’ont pas encore été codées. Des modifications qui auraient eues une lourde répercussion en temps et en budget si elles avaient été décelées à la fin d’une première étape de développement : temps passé pour les réaliser une première fois, les modifier, les re-tester / valider, etc…

Acteurs
Le prototype s’attache à l’aspect fonctionnel et dynamique du site à réaliser, mais sans rentrer dans la technique de programmation. Il peut être réalisé par l’équipe de développement ou le concepteur suivant la taille du projet et les moyens de l’entreprise en charge, sur la base du travail effectué en amont.
Comme évoqué précédemment, lors des phases de tests d’utilisabilité la Maîtrise d’Ouvrage (MOA) et, si elle existe, l’Assistance à Maîtrise d’Ouvrage (AMOA) sont sollicitées afin de valider l’outil proposé. Dans certains cas on fera alors appel à une équipe professionnelle de testeurs, mais on peut également pour cela convoquer un panel d’utilisateurs finaux.

Outils
Axure,
Foundation,
Dummy

Habillage graphique
Poursuivons désormais la description de divers outils ou méthodes pouvant être utilisés pour définir le graphisme d’un site. Nous allons pour cela aborder le moodboard, les style tiles et le mockup.

4. Moodboard (planche d’inspiration)

Définition
De même que pour le zoning, mais cette fois sur l’aspect graphique, le moodboard permet de formaliser les idées exprimées par le client.
Le principe est d’épingler en vrac les inspirations visuelles : cela peut être réalisé avec de simples images découpées et assemblées sur un tableau, ou une collection de captures d’écrans de pages web existantes.
Le but est de dégager très tôt une tendance de style.

Acteurs
Tout comme pour le zoning, cette étape est un outil interne constitué à partir des informations collectées auprès du client. Aucun livrable ne lui est fourni et le résultat servira de base pour les étapes suivantes.

Outils
Tableau de liège, punaises,
Evernote, Pinterest, etc.

5. Style tiles

Définition
Ce terme est issu du secteur de la mode, de la décoration et de la publicité. Le but est de définir les grandes tendances (graphiques, texturales, chromatiques, typographie, etc.) pour un projet donné.
On ne s’intéressera ici ni aux dimensions de ce que l’on représentera, ni à sa structure, ni même aux terminaux utilisés, mais uniquement aux aspects graphiques et stylistiques eux-mêmes.
Le but est donc de créer plusieurs planches regroupant les éléments constitutifs de la charte graphique sans notion de mise en page. On peut ainsi se concentrer sur l’homogénéité et la pertinence (vis-à-vis de la marque, du message, …) des styles retenus et non sur la structure de la page.
On en définit ainsi plusieurs, plus ou moins différentes, dans le but de laisser un choix au client.
La « Planche Tendance » qui sera choisie va s’enrichir au cours des échanges avec le client en ajoutant par exemple les différents états des boutons. Si elle est tenue à jour, elle pourra devenir la « charte graphique » du site web.

Le travail autour de la « Planche de Tendance » peut se décrire par les 4 étapes suivantes :

• Ecouter le client,
• Interpréter (définir les éléments de design [ligne, couleur, forme, formulaire, model, les espace, les textures], ainsi que les principes de design [unité, harmonie, balance, rythme, accents]),
• Définir le langage visuel (Déterminer le thème en assemblant des adjectifs et commencer à les faire correspondre avec un style),
• Itérer.

Acteurs
Cet outil permet d’avoir des échanges rapides avec le client et entre totalement dans les démarches « Agile ». De plus, avec l’introduction du web adaptatif, une même page va avoir plusieurs structures en fonction de la taille d’écran des terminaux utilisés, mais la signature graphique devra rester celle du client. Il y a donc naturellement une séparation entre structure et apparence.
La réalisation s’effectue en interne en sollicitant périodiquement et directement le client.
Encore une fois, selon la taille du projet et donc de l’entreprise qui réalise, il peut être effectué par une seule personne ou une équipe : idéalement par un graphiste, et selon les moyens par des profils webdesigners, etc.

Outils
Adobe Photoshop

6. Mockup, ou maquette graphique

Définition
De même que pour le terme prototype, le terme mockup est très polysémique et peut correspondre à plusieurs choses suivant qui l’emploie. On peut ainsi le rencontrer pour des réalisations dans le domaine de la mode ou du packaging. Certaines personnes utilisent le terme mockup pour un livrable HTML, un wireframe, une maquette graphique, etc..
Ici, nous définissons le mockup comme un rendu visuel étant le plus proche possible du produit final à développer. On ne s’intéresse ainsi qu’à la représentation visuelle des pages du site web et pas du tout à leur dynamisme : le mockup n’est donc pas un prototype fonctionnel mais uniquement une image.
On définit donc le mockup comme une prévisualisation haute-fidélité du rendu graphique, permettant de valider l’apparence graphique des pages du site.

Acteurs
Le mockup est une conception purement graphique, il est donc de la responsabilité des graphistes de l’entreprise réalisatrice. Dans des structures plus modestes ou petites, il pourra être réalisé par un webdesigner, voir le concepteur/développeur.
Pour mener à bien cette maquette, l’équipe de réalisation pourra s’appuyer sur le travail effectué en amont ou sur la collecte d’informations auprès du client (cahier des charges, brief créatif, etc.).
Dans tous les cas, des rencontres entre le client et l’équipe de réalisation permettront d’adapter ou d’affiner le rendu du produit aux attentes ainsi formulées.

Outils
Photoshop : encore le fameux produit de l’éditeur Adobe.
The Gimp : l’équivalent gratuit au produit phare de Adobe
Photoshop Etiquette Manifesto

Récapitulatif et précisions complémentaires

Comme le suggère le schéma regroupant les six étapes, celles-ci peuvent être travaillées séparément et en parallèle.
Mais au-delà de ça, “dans la vraie vie”, aucun prototypage n’utilise l’ensemble de ces six outils ou méthodes. Nous avons présenté ici des étapes avec chacune un but précis et des frontières relativement claires. Or, la majorité des agences webs, conscientes de ces concepts de base, travaillent plusieurs aspects en une seule étape.
Ainsi certaines passent directement du sketch à un wireframe dit medium-fidelity puis à un prototype également dit de medium-fidelity : c’est à dire avec les principales zones fonctionnelles présentées mais de manière basique (on a dégrossi les éléments principaux, mais on est encore loin d’atteindre le rendu final).
D’autres décrivent un wireframe léger ainsi que des styles tiles, puis passent directement à un prototype haute-fidélité : c’est à dire un prototype s’approchant grandement de ce que sera la réalisation finale, tant fonctionnellement que graphiquement : une sorte de mélange entre prototype et mockup.

Principaux outils de prototypage

Frameworks

Les outils c’est bien, mais le HTML, CSS et Javascript ne sont pas en reste. Pour pousser le principe plus loin, on trouve également des frameworks pouvant correspondre à la définition de ces démarches. Ci-dessous, une sélection de frameworks ayant les fonctionnalités suivantes :

• Détection de l’explorateur et du terminal
• Socket asynchrone
• ServeurPush
• Drag&Drop
• Animation
• Gestionnaire d’évènemets
• Support Mobile / Tablette (touch event)
• Stockage hors ligne
• …

Nom	License
Dojo	The modified BSD license or the Academic Free License (≥ 2.1)
Ext JS	GPLv3 or proprietary
jQuery	MIT[1]
PhoneJS	Commercial
YUI	BSD License

A noter également l’émergence d’un langage tel que le SASS qui permet de faciliter la maintenance des CSS. Certes, ce n’est pas un framework, mais il présente une alternative légère et pratique …

Pour aller plus loin

Tout ce que nous venons de vous présenter ne sont que des méthodes et des outils. Ils n’ont pour finalité que d’aider à la réalisation et au dialogue entre les différents intervenants du projet et de poser les idées.
Aussi comme tout outil, ils sont des facilitateurs, et pour bien les utiliser, il est d’abord indispensable de déterminer le but à atteindre avant d’en comprendre les limites.
Mais ces outils ne dispensent pas les équipes de réalisation de leur rôle de conseil et d’expertise sur les sujets tels que les réglementations légales, les bonnes pratiques, etc.
A titre d’exemple, nous allons aborder trois points qui ne sont pas directement traités par les outils abordés mais qui doivent être traités, au minimum évoqués avec le client.

1. L’utilisateur final

En fonction du type de projet, l’implication de l’utilisateur final va être différente.
Comme dans tout projet informatique, les besoins de l’utilisateur final doivent transparaître au travers des choix faits par le commanditaire du projet : il appartient à ce dernier de bien définir le cahier des charges en ayant pleinement conscience de l’utilité finale du projet pour son besoin et l’utilisation qui sera faite du produit par l’utilisateur.
Si l’utilisateur n’est pas le commanditaire, il pourra être impliqué lors des tests si le client le souhaite (dans son intérêt…).

2. Ergonomie – Accessibilité

L’accessibilité du Web est un ensemble de règles qui permettent aux personnes en situation de handicap (temporaire ou permanent) visuel ou moteur, d’accéder au contenu du Web. Par exemple, il permet aux personnes atteintes de déficience visuelle d’utiliser des techniques matérielles (lecteur braille) et logicielles (logiciel de synthèse vocal) pour interpréter une page Web. De la même façon, les personnes à mobilité réduite pourront naviguer plus aisément (par raccourcis clavier par exemple).
Le respect de règles d’accessibilité peut découler d’une obligation réglementaire ou d’une volonté délibérée du client de rendre son information accessible au plus grand nombre.
Le W3C a en effet édité un ensemble de “règles pour l’accessibilité des contenus web (WCAG)” qui a comme énorme avantage de faire correspondre à chaque règle, un moyen d’évaluation et de notation du niveau d’accessibilité.
Beaucoup de gouvernements ont également édité des règles d’accessibilité à respecter.

3. Responsive webdesign

L’approche Responsive webdesign a pour principe de réaliser un site web de façon à ce que son contenu s’adapte naturellement aux dimensions de l’explorateur utilisé. Cela prend en charge les écrans de smartphone jusqu’aux écrans d’ordinateur de bureau. Plus l’écran est petit, plus les informations présentées seront réduites à l’essentiel. A l’inverse, plus l’écran est large et plus la page va s’enrichir d’outils supplémentaires.
Compte tenu qu’un exemple vaut toujours mieux qu’un long discours :

En règle générale, dans le cas de la création d’un site web responsive, on définit d’abord la page la plus légère : celle visualisée par le smartphone. On l’enrichira ensuite dynamiquement pour des écrans plus larges, au fur et à mesure que l’on passera certains paliers de dimensions.

Conclusion

Lorsque l’on débute dans le développement web, on n’identifie pas le besoin de concevoir au préalable une maquette des IHM à réaliser, et encore moins à leur enchaînement dynamique. C’est à peine si l’on pense à travailler séparément l’ergonomie du graphisme…
Cela s’avère être une grave erreur. En effet, cela conduit ensuite à de multiples hésitations et retouches lors du développement même du site, ce qui s’avère couteux en temps, en énergie et a donc de grosses répercutions en terme de budget.
Les techniques de prototypage décrites ici permettent d’appliquer une méthodologie. Cela permet de passer de l’expression du besoin du client/commanditaire à une maquette tangible du site à concevoir, de manière rationnelle et cadrée. Les différents acteurs interviennent à hauteur de leurs responsabilités et peuvent s’impliquer en ayant tous la même compréhension du sujet à traiter.
Et plus le projet sera grand, plus cette démarche sera efficace.

On peut donc conclure en disant que le prototypage présente trois principaux avantages :

• Cohésion des acteurs : même niveau d’information et actions mieux coordonnées,
• Gain par anticipation : un « petit » temps de préparation qui évitera du temps perdu ultérieurement,
• Optimisation : possibilité de réaliser des variantes très rapidement, à moindre coût et d’affiner ainsi les détails du produit final, sans avoir même commencé les développements.

Bibliographie

Articles

Accessiweb En savoir plus …
Comment faire un brief créatif ? En savoir plus …
Comment rédiger le brief pour la création d’un site internet ? En savoir plus …
Conception de sites web : le prototype fonctionnel En savoir plus …
Créer la maquette de son site web pro : les bons outils En savoir plus …
Des outils de prototypages UX En savoir plus …
Du zoning au mockup, itinéraire d’une maquette web En savoir plus …
Généralités sur le prototypage rapide En savoir plus …
Les « Style Tiles », un nouvel outil pour le webdesigner ? En savoir plus …
Prototype et style tile En savoir plus …
Six règles d’or pour un brief créatif efficace En savoir plus …
Top Ten Benefits of a High-fidelity Prototype En savoir plus …
Wireframes & Prototypes: Is There Really a Difference? En savoir plus …
Zoning, wireframe, maquettage, prototype : les meilleures pratiques En savoir plus …

Exemples et Images

Prototype En savoir plus…
Moodboard Exemple 1, Exemple 2
Style files En savoir plus…
Mockup Exemple 1, Exemple 2
Responsive Design En savoir plus…

Outils

Papier Crayon

iPrototype http://www.uistencils.com
sneakpeekit http://sneakpeekit.com/
Interface sketch http://www.interfacesketch.com/

Logiciels

Axure  http://www.axure.com/
Balsamiq http://balsamiq.com/
Dojo http://dojotoolkit.org/
Dummy http://dummy.kerns.dk/
Ext JS http://www.sencha.com/products/extjs/
Foundation  http://foundation.zurb.com/
jQuery http://jquery.com/
Pencil  http://pencil.evolus.vn/
PhoneJS http://phonejs.devexpress.com/
Photoshop Etiquette http://www.photoshopetiquette.com/
SASS http://sass-lang.com/
The Gimp  http://www.gimp.org/
YUI http://yuilibrary.com/

Ressources

Accessibilité (1) En savoir plus…
Accessibilité (2) En savoir plus…
Accessibilité WCAG En savoir plus…