Your SlideShare is downloading. ×
0
Atelier Pratique FLUPA        « Maquettage »                           nComprendre comment et pourquoi maquetter  Carine L...
L’association FLUPA3 antennes - 70 membres                          2	        www.flupa.eu
Les objectifs de FLUPA•  Promouvoir l’ergonomie des   Interfaces Homme-Machine et   l’Expérience Utilisateur	•  Sensibilis...
Les activités de FLUPA•  Petit Déjeuners	   •    Interfaces tactiles, Persuasive Design, Eye        Tracking, …	•  Atelier...
Le prochain event FLUPA :  PDJ Persuasive Design           « Découvrez comment les         concepteurs vous manipulent »	 ...
Nous contacter•  Site Web	   •  www.flupa.eu	•  Forum	   •  forum.flupa.eu/phpbb/	•  Twitter	   •  @assoFlupa	•  Newsletter	...
Qu’est-ce qu’une maquette ?•  La maquette représente à l’échelle   réelle linterface proposée.		•  Elle permet de visualis...
Le maquettage, clé de voûte         du développement itératif•  Le maquettage / prototypage est un élément   essentiel d’u...
Maquette	                                          Papier / crayon	Maquette interactive 	                                 ...
Pourquoi maquetter ?                          •  Pour communiquer	•  Pour partager les mêmes   référents	                 ...
11	www.flupa.eu
Pourquoi maquetter ?                           •  Stimuler la production d’idées	                                         ...
Maquettage papier - test •  http://youtu.be/GrV2SZuRPv0 	                                      13	                 www.flu...
Les différents types de maquette                                   14	            www.flupa.eu
Conception de « bas » niveau       Sketchs / esquisses : trouver des idées et les                        challenger	•  Idé...
Conception de « bas » niveau        Low fidelity wireframe : Concevoir les fondations	                                 •  A...
Conception de « bas » niveau                         Avantages•  Implémentation de fonctionnalités partielles du produit r...
Conception de « haut » niveau     High fidelity wireframe : Concevoir les fondations	                                •  Affi...
Conception de « haut » niveau                 High fidelity prototype	•  Suffisamment clair pour   pouvoir développer	•  Nav...
Avantages des maquettes / prototypes•  Incitent à la critique et la favorisent 	•  Peu coûteux et peuvent être de très bas...
A retenir…•  Avant de travailler sur l’habillage graphique d’une interface, il est nécessaire   de :	   •  Réfléchir à l’or...
Mise en pratique                    Comment                   maquetter une                     interface ?               ...
Phase de préparation•  A propos du produit : Qui ? Comment ? Quoi ?	      •  Qui l’utilise ou va l’utiliser ? à Cible(s) ...
Pour réaliser une maquette, il               vous faut …•  Papier/crayon ou logiciel   permettant le maquettage	•  Contenu...
Quelques outils pour maquetter        •  Balsamiq Mockup	        •  Powerpoint	          •  Gliffy	        •  Axure	      ...
Petite démo avant de commencerThibault Milan – Web Developper & Interface Designer chez Absolut Payment                   ...
Mise en pratique                                                     45 min	                                      Matériel...
Upcoming SlideShare
Loading in...5
×

Flupa 2011 - Atelier Pratique Maquettage

1,105

Published on

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).

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,105
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
49
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Flupa 2011 - Atelier Pratique Maquettage"

  1. 1. Atelier Pratique FLUPA « Maquettage » nComprendre comment et pourquoi maquetter Carine Lallemand – Centre de Recherche Public Henri Tudor 1 www.flupa.eu
  2. 2. L’association FLUPA3 antennes - 70 membres 2 www.flupa.eu
  3. 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. 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. 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. 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. 7. Qu’est-ce qu’une maquette ?•  La maquette représente à l’échelle réelle linterface 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. 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. 9. Maquette Papier / crayon Maquette interactive 9 www.flupa.eu
  10. 10. Pourquoi maquetter ? •  Pour communiquer •  Pour partager les mêmes référents 10 www.flupa.eu
  11. 11. 11 www.flupa.eu
  12. 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. 13. Maquettage papier - test •  http://youtu.be/GrV2SZuRPv0 13 www.flupa.eu
  14. 14. Les différents types de maquette 14 www.flupa.eu
  15. 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. 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. 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. 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. 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. 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. 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. 22. Mise en pratique Comment maquetter une interface ? 22 www.flupa.eu
  23. 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. 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. 25. Quelques outils pour maquetter •  Balsamiq Mockup •  Powerpoint •  Gliffy •  Axure •  MockupScreens •  FlairBuilder •  Pencil Sketching •  Justinmind •  Protoshare •  Wireframesketcher •  Omnigraffle •  Oversite 25 www.flupa.eu
  26. 26. Petite démo avant de commencerThibault Milan – Web Developper & Interface Designer chez Absolut Payment 26 www.flupa.eu
  27. 27. Mise en pratique 45 min Matériel : q  Contenu du site web q  Architecture de l’informationA vos maquettes ! q  Eléments de la home page q  Mémento Balsamiq 27 www.flupa.eu
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×