Croquis et maquettage¶
pourquoi faire ?¶
Les termes maquettage et maquette recouvrent tout un ensemble de méthodes, outils et formes différentes.
Il s’agit toutefois de « construire une représentation concrête d’un système, produit ou service » dans le but de formaliser, communiquer et évaluer et des idées.
Évaluer¶
« échouer vite pour réussir plus tôt » (fail soon to succeed sooner). » [1]
Si vous attendez le produit fini pour découvrir une erreur, le coût sera élevé. Si vous produisez de manière anticipée.
communiquer¶
« montrer » est plus fort que « décrire » [2]
Il vous sera plus simple de discuter vos idées avec un support visuel qu’avec une description.
formaliser¶
La question de la formalisation amène la question suivante ? Que sont les maquettes ?
Différentes formes de maquettes¶
Les maquettes peuvent prendre différentes formes : croquis, maquette papier, storyboard, simulation détaillée.
Les maquettes peuvent aussi présenter différents niveaux de précision/définition, ainsi que d’interactivité. Il est préférable de commencer par maquetter avec un niveau de précision et de définition bas, et d’augmenter le niveau selon le besoin.
Pour revenir au coût de l’erreur, le coût de modification d’un site livré est plus élevé que le coût de modification d’une maquette haute fidélité, coût qui est supérieur au coup de modification d’une maquette basse fidélité.
croquis¶
Le croquis est la première chose à faire : sur une serviette en papier, une feuille de brouillon : il s’agit de formaliser grossièrement mais rapidement ses idées. Ici, nul besoin d’aller dans le détail.
Comment faire ?¶
Un papier, un crayon suffisent à réaliser ses premiers croquis. Il n’y a pas de véritables règles : raturez et recommencez autant que nécéssaire. C’est même le moment pour le faire : ça ne vous coûte, pour ainsi dire, rien du tout.
S’il n’y a pas de règles, quelques conseils : représentez vos formats en respectant leurs échelles relatives, figurez vos niveau de texte par des tracés plus ou moins appuyés, annotez si besoin.
Note
Voir à ce propos la ressource B – processus de design, premières étapes .
zoning¶
Le zoning en un dessin, numérique ou manuel, où l’on va répartir les zones principales du site dans le format : menu, fil d’ariane, contenu, pied de page, etc…
Comment faire ?¶
À nouveau, papier et crayon suffisent. Tracez vos zones sous forme de rectangles et nommez-les.
maquette filaire, fil de fer ou wireframe¶
La maquette filaire va plus loin que le zoning, et l’on va s’intéresser aux sous-éléments des différentes zones. Le terme « maquette filaire » vient de l’usage de simples traits pour figurer les éléments, plus ou moins appuyés pour les niveau de texte, ou de rectangles, dont les diagonales sont habituellement figurées pour signifier la présence d’une image.
todo
comment faire ?¶
Il existe des outils numériques adaptés (ou détournés), mais le dessin est le meilleur, et le moins coûteux des outils pour commencer. Utilisez de simples tracés, des rectangles, figurez-en les diagonales pour signifier une image. Et tendez, de plus en plus, vers l’exhaustivité.
prototypes fonctionnels¶
L’ajout d’interactivité à nos précédentes maquettes va les transformer en prototypes plus ou moins fonctionnels.
comment faire ?¶
La manière la plus basique serait de naviguer entre différents écrans au format papier, en les saisissant et en les remplacant selon l’interaction voulue. Plus technologiques, différents outils logiciels existent afin de réaliser des maquettes interactives. Vous pouvez aussi coder vous même vos maquettes, notamment pour le web, ce qui peut vous permettre d’atteindre un résultat très proche du résultat final.
notes de bas de page
| [1] | « Le principe clé du maquettage est « échouer vite pour réussir plus tôt » (fail soon to succeed sooner). » Carine Lallemand ; Avec Guillaume Gronier. « Méthodes de design UX. » |
| [2] | « showing is better than telling », p.60, Warfel, Todd Z. Prototyping : a practitioner’s guide. Brooklyn, N.Y: Rosenfeld Media, 2009. Print. |