Atelier Pratique FLUPA "Maquettage" (réalisé le 20/09/2011 à Luxembourg) : Comprendre comment et pourquoi maquetter (présenté par C. Lallemand) puis Démonstration et Mise en Pratique (présenté par T. Milan).

1. Atelier Pratique FLUPA
« Maquettage »
n
Comprendre comment et pourquoi maquetter
Carine Lallemand – Centre de Recherche Public Henri Tudor
1
www.flupa.eu

2. L’association FLUPA
3 antennes - 70 membres
2
www.flupa.eu

3. Les objectifs de FLUPA
• Promouvoir l’ergonomie des
Interfaces Homme-Machine et
l’Expérience Utilisateur
• Sensibiliser à la démarche
ergonomique – conception
centrée sur l’utilisateur
• Animer un réseau de
professionnels
3
www.flupa.eu

4. Les activités de FLUPA
• Petit Déjeuners
• Interfaces tactiles, Persuasive Design, Eye
Tracking, …
• Ateliers Pratiques
• Animer un brainstorming, Réaliser un tri de
cartes, Maquetter, Faire un test utilisateur en
laboratoire, …
• Groupes de Travail
• GT Agile UX (avec AIGLU)
• Summer events : BBQ FLUPA
• Apéros Ergo
• World Usability Day
• Interventions à d’autres évènements
www.flupa.eu 4

5. Le prochain event FLUPA :
PDJ Persuasive Design
« Découvrez comment les
concepteurs vous manipulent »
• Le 27 septembre, Luxembourg
• Premiers pas en persuasive design :
concepts et exemples
• Grille de critères pour la persuasion
interactive : un outil pour la
conception
5
www.flupa.eu

6. Nous contacter
• Site Web
• www.flupa.eu
• Forum
• forum.flupa.eu/phpbb/
• Twitter
• @assoFlupa
• Newsletter
• Facebook
• FLUPA (France Luxembourg…)
• LinkedIn
6
www.flupa.eu

7. Qu’est-ce qu’une maquette ?
• La maquette représente à l’échelle
réelle l'interface proposée.
• Elle permet de visualiser le rendu
de l’application et de valider
rapidement les enchaînements
d'écrans avant le développement
7
www.flupa.eu

8. Le maquettage, clé de voûte
du développement itératif
• Le maquettage / prototypage est un élément
essentiel d’une conception itérative et centrée sur
la prise en compte des usages
• Conception d’alternatives, Évaluation/feedback,
Affinage des optimisations
• … jusqu’à ce que la performance du produit ou sa
qualité ergonomique soit atteinte !
8
www.flupa.eu

9. Maquette
Papier / crayon
Maquette interactive
9
www.flupa.eu

10. Pourquoi maquetter ?
• Pour communiquer
• Pour partager les mêmes
référents
10
www.flupa.eu

11. 11
www.flupa.eu

12. Pourquoi maquetter ?
• Stimuler la production d’idées
Copyright : usabilis.com
• Visualiser l’interface et la tester
• Simuler le comportement de
fonctionnalités
12
www.flupa.eu

13. Maquettage papier - test
• http://youtu.be/GrV2SZuRPv0
13
www.flupa.eu

14. Les différents types de maquette
14
www.flupa.eu

15. Conception de « bas » niveau
Sketchs / esquisses : trouver des idées et les
challenger
• Idées / concepts
• Grandes fonctions
• Hiérarchisation /
proportions
Ex : maquette papier/crayon
15
www.flupa.eu

16. Conception de « bas » niveau
Low fidelity wireframe : Concevoir les fondations
• Affinage et regroupement
des fonctions
• Ne pas réinventer la roue
• Navigation
Ex : maquette Balsamiq mockups
16
www.flupa.eu

17. Conception de « bas » niveau
Avantages
• Implémentation de fonctionnalités partielles du produit rapidement
• Pas de limites liées à la faisabilité technique (sauf contraintes
bloquantes)
• Explorer des alternatives, de nouvelles possibilités
• Valider les composants d’interface, le zonage, puis l’enchaînement des
étapes
• Tester auprès du groupe projet et d’utilisateurs
• Réduire le nombre de gabarits nécessaires et le coût final du produit
17
www.flupa.eu

18. 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 »
Ex : maquette Powerpoint
18
www.flupa.eu

19. Conception de « haut » niveau
High fidelity prototype
• Suffisamment clair pour
pouvoir développer
• Navigation dynamique -
démonstration
• Survols simulés
19
www.flupa.eu

20. Avantages des maquettes / prototypes
• Incitent à la critique et la favorisent
• Peu coûteux et peuvent être de très bas niveau de fidélité
• Répondent au besoin d’obtenir des résultats rapides à des tests lors de la
conception
• Orientent la discussion lors d’un atelier
• Permettent à tous les acteurs du projet de partager une même représentation
du produit vers lequel tendre
• Permettent de réaliser des tests utilisateurs tôt dans le processus
• Focalisent l’attention sur le contenu et les fonctionnalités sans être pollué par
les aspects de surface
• Permettent des validations intermédiaires par le client, les utilisateurs et les
équipes de développement avant implémentation.
20
www.flupa.eu

21. A retenir…
• Avant de travailler sur l’habillage graphique d’une interface, il est nécessaire
de :
• Réfléchir à l’organisation globale de l’application ou du site web
(architecture de l’information)
• Identifier les fonctionnalités, services, actions et informations nécessaires
au fil des pages notamment grâce à la conception de cas d’usage
• Poser le tout sur papier ou en numérique (rendu plus professionnel et
plus facilement modifiable)
• Le maquettage en fil de fer (wireframe) est un passage obligé pour élaborer
rapidement et concrètement l’agencement de l’information, le zoning et les
fonctionnalités d’une future interface
21
www.flupa.eu

22. Mise en pratique
Comment
maquetter une
interface ?
22
www.flupa.eu

23. Phase de préparation
• A propos du produit : Qui ? Comment ? Quoi ?
• Qui l’utilise ou va l’utiliser ? à Cible(s)
• Dans quel contexte ? à Situation(s)
• Quelles fonctions / services à Activité(s)
• A propos des contenus :
• Définir les contenus à intégrer
• Organiser l’information (ex : tri de cartes)
23
www.flupa.eu

24. Pour réaliser une maquette, il
vous faut …
• Papier/crayon ou logiciel
permettant le maquettage
• Contenus de l’interface
• Architecture de l’information
• De l’imagination !
24
www.flupa.eu

25. Quelques outils pour maquetter
• Balsamiq Mockup
• Powerpoint
• Gliffy
• Axure
• MockupScreens
• FlairBuilder
• Pencil Sketching
• Justinmind
• Protoshare
• Wireframesketcher
• Omnigraffle
• Oversite
25
www.flupa.eu

26. Petite démo avant de commencer
Thibault Milan – Web Developper & Interface Designer chez Absolut Payment
26
www.flupa.eu

27. Mise en pratique
45 min
Matériel :
q Contenu du site web
q Architecture de l’information
A vos maquettes
! q Eléments de la home page
q Mémento Balsamiq
27
www.flupa.eu