Par
Mathieu Collet dans
Conception le
30 août 2007 |
8 commentaires La maquette ergonomique est un élément fondamental dans un projet.
Qu’est-ce qu’une maquette ergonomique ?
La maquette ergonomique, appelée également storyboard, est un document (la plupart du temps électronique) qui présente :
- L’arborescence, pas forcément complète mais les premiers niveaux (facultatif mais est d’une grande aide pour définir cinématique et navigation)
- Les pages clés (ou les gabarits) : représenter la structure des pages du futur site (ou application), par exemple la page d’accueil, la page de recherche, la page d’aide, la page gallerie photo.
La maquette est dénuée de graphisme volontairement afin de se focaliser sur la structure et les interactions dans les pages.
Quand et pourquoi faire une maquette ergonomique ?
Elle peut intervenir pendant 2 phases :
- La phase de définition du projet. Cela peut prendre plusieurs formes selon l’ampleur et la visée du projet : étude préalable, expression de besoins, cahier des charges, spécifications fonctionnelles générales.
La maquette est utile ici pour confronter les idées avec des éléments concrets.
- La phase de conception du projet : quand l’orientation générale du projet est connue ainsi que la plupart des fonctionnalités.
Qui pour faire une maquette ergonomique ?
La plupart du temps, c’est l’ergonome qui réalisera la maquette, surtout en ce qui concerne les applications métiers car la maquette dérive souvent d’une analyse de l’activité ou d’un recueil des besoins utilisateurs.
Le concepteur peut également réaliser un storyboard, il pourra demander le concours de l’ergonome, mais est à l’aise avec cet élément, en particulier pour des sites plus orientés Web.
Comment faire une maquette ergonomique ?
L’outil le plus simple reste PowerPoint de la suite MS Office.
- Avantages :
- Tout le monde, ou presque, sait l’utiliser.
- Il est très rapide de faire la maquette
- Tout le monde l’a
- Il a de nombreuses fonctionnalités pour reproduire des enchaînements d’écrans, simuler des fonctionnalités
- On peut y incorporer des éléments un peu plus graphique
- Inconvénients :
- Les interactions sont tout de même limitées
- Les objets à disposition sont peu nombreux
Il existe d’autres outils de maquettage, plus évolués donc parfois plus complexes à s’approprier mais qui peuvent permettre d’aller plus loin dans le détail
A lire pour compléter cet article : http://www.boxesandarrows.com/view/the_guided_wire
Poster un commentaire
Je suis totalement d’accord avec toi la maquette ergonomique (ou grille fonctionnelle, écran, wireframe …) est un élément clé des projets de développement d’applications ou de site web.
Pour ma part, j’utilise Visio que je trouve trés pertinent; j’en parle dans cet article : http://www.qualitystreet.fr/?2007/05/03/31-visio-et-les-wireframes
Eric di Pol a publié également quelques billets trés intéressants sur ce sujet comparant des outils comme Visio, Axure, Acrobat … pour les réaliser. Voici les liens vers ces billets:
pour PPT: http://www.superfiction.net/blog/index.php?2007/03/13/125-creation-de-wireframes-article-1-3-utiliser-microsoft-powerpoint
Pour Axure : http://www.superfiction.net/blog/index.php?2007/03/22/128-creation-de-wireframes-article-3-3-utiliser-axure-rp-pro
Pour Visio: http://www.superfiction.net/blog/index.php?2007/03/18/127-creation-de-wireframes-article-2-3-utiliser-microsoft-visio
@jc_QualityStreet
Merci pour ce commentaire, je me sens flatté d’avoir comment lecteur de mon blog l’auteur de Quality Street
J’apprécie énormément ton blog, particulièrement l’article « L’ergonome Agile ».
Pour en revenir à nos moutons, j’ai vu les articles d’Eric Di Pol, ils sont très bien effectivement.
Mathieu
Je vais apporter mon petit point de vue technique, Matt
Le story-board est également super utile pour le reste de la réalisation, que ce soit comme guide pour le design bien sûr, mais également pour la conception technique et le développement (le développement web quoi qu’on en dise se fait beaucoup à base d’interface utilisateur
).
Pour la conception technique, il peut apporter une grande aide pour arrêter des choix technologiques si ca n’a pas été fait avant. Par exemple, l’utilisation des composants graphiques à faire intervenir, où mettre de l’AJAX etc/
Pendant le développement, je le fais intervenir durant la revue fonctionnelle. Il permet de s’assurer que la présentation des écrans est bien conforme, et que leur cinématique l’est également.
J’ai fait des maquettes ergonomiques pour l’administration de site, et pour avoir comparé PPT et Visio, ma préférence va nettement vers le second pour la souplesse des composants d’interface et leur richesse, puisqu’il dispose d’objets réseaux, bases de données… bien pratique pour faire des schémas d’architecture bien léchés (et ca passe super bien avec les grands comptes !)
Bonjour,
je suis très interessé par vos remarques car je cherche moi même à avoir des infos sur le fonctionement de visio pour la réalisation de maquette ergonomique d’interface informatique. J’aurais voulu savoir si vous aviez des tutoriels pour m’aider dans mon apprentissage du logiciel, car c’est quand même un peu plus complexe que pwp et j’ai des difficultées pour comprendre toute seule comment ca marche.
Merci d’avance.
Bonjour,
Quelle version de Visio ?
Mathieu
Bonjour,
La version que j’ai est visio standard 2003.
Yoo ! Je lit pas mal le forum souvent… mais là je choisit de m’inscrire pour vous demander c’est quoi l’adresse web au juste du magasine decouvertes vacances . J’ai entendus dire qu’il y a plein de choses à s’amuser sur ce site..! Bye..!!
allo ca fait un bon boutque je vous ecoute, Je sais que vous n’etes pas les plus grands programmeurs, mais j’ai eu mot de Allnblue uneentreprise de patentage de web site à quebec . Il semble qu’ils soient tres puissants et qu’ils travaillent aussi de l’animation 2D/3D à qebec. J’ai regarder sur Google mais je n’ai pas trouver leur adresse internet??? Est-ce que quelqu’un la connait?? Bye