Le maquettage

Produire des solutions de conception

Le maquettage

Pourquoi maquetter ? Le concept de MVP (Minimum Viable Product)

Minimum Viable Product

• Le Minimum Viable Product (MVP), ou Produit Minimum Viable en français, permet d’apprendre, de valider et d’invalider des hypothèses de départ formulées avant de lancer un produit.

• Un MVP possède toutes les caractéristiques d’un produit fini, mais elles ne sont pas abouties dans leur intégralité.

Produit Minimum Viable Source : http://newflux.fr/

Minimum Viable Product

• Le MVP peut aussi bien être un produit, un concept ou une interface.

• Le MVP s’inscrit dans un processus itératif d’amélioration continue.

• Le MVP, même s’il est limité dans ses fonctionnalités, doit être parfaitement fonctionnel pour ce qu’il fait !

• Le MVP est FAIT pour se tromper et faire des erreurs. Ce qui importe, c’est d’en tirer des conclusions et d’apporter des solutions.

Produit Minimum Viable

Produit Minimum Viable

Produit Minimum Viable

Le maquettage

Comprendre comment et pourquoi maquetter ?

Introduction

• En ergonomie, le maquettage/prototypage consiste à simuler l’interface d’un produit, de façon complète ou partielle, afin d’obtenir des informations sur l’interaction des utilisateurs avec le futur produit

• Effectué suffisamment tôt, le prototypage permet de détecter les problèmes d’utilisabilité et de vérifier les besoins des utilisateurs avant le codage complet.

• Cela favorise l’optimisation du processus et des coûts de développement

Maquette Papier / crayon

Maquette interactive

Les différents types de maquette

Le degré de fidélité

• Le prototype « basse fidélité » : il s’agit le plus souvent d’une maquette papier

• Facilite l’implication et la concentration de l’utilisateur sur les aspects fonctionnels (évite les dérives sur l’esthétique)

• Peut être annoté en cours de test

• Peu coûteux, permet de tester tôt le concept de l’interface

Maquettage papier

Papier crayon ! Post-its

Maquettage papier

Pochoirs (« Stencils »)

Maquettage papier

Sketchbook

Maquettage papier

Maquettage papier

Maquettage papier

Les différents types de maquette

Conception de « bas » niveau

• Le zoning est une technique consistant à schématiser une page Web à l’aide de blocs ou boîtes, dans le but de montrer les grandes fonctionnalités et les zones principales du contenu.

• Cette étape est cruciale, puisqu’elle permet de décider de l’organisation générale des pages.

• Ce travail débouche sur la rédaction d’un livrable qui servira de support de discussion avec le client, et permettra d’apporter les corrections avant validation finale.

Conception de « bas » niveau

• Low fidelity wireframe : Concevoir les fondations

• Affinage et regroupement des fonctions

• Travailler sur la navigation

• Le wireframe s’appuie sur le zoning, et permet d’indiquer le contenu présent dans chaque bloc de la page Web et de structurer l’interface.

• Aucun design n’est fait sur cette étape de wireframing, son objectif étant avant tout fonctionnel.

Zoning

Wireframe

Zoning

Maquettage / prototypage

Pencil Projecthttp://pencil.evolus.vn/

Les différents types de maquette

Le degré de fidélité

• Le prototype « haute fidélité » : il s’agit d’un prototype interactif, sur ordinateur, qui présente un aspect graphique très proche de l’interface finale.

• Offre à l’utilisateur une vision réaliste de l’interface même si tout n’est pas intégralement implémenté

• Intervient généralement à un stade avancé du développement

Conception de « haut » niveau

• High fidelity wireframe : Concevoir les fondations

• Affinage du zonage

• Navigation, repérage, cohérence globale, adaptation au contexte

• Plus de « lorem ipsum »

Prototypage

Axure

http://www.axure.com/

Pencil http://pencil.evolus.vn/

Pencil http://pencil.evolus.vn/

D’autres outils pour maquetter…

• Balsamiq Mockup

• Powerpoint

• Axure

• FlairBuilder

• Justinmind

• Wireframesketcher

• Oversite

• Gliffy

• MockupScreens

• Pencil Sketching

• Protoshare

• Omnigraffle