flupa 2011 - atelier pratique maquettage

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

Category:

Technology


1 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu 1

Atelier Pratique FLUPA « Maquettage »

n Comprendre comment et pourquoi maquetter

Carine Lallemand – Centre de Recherche Public Henri Tudor

Page 2: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu

L’association FLUPA 3 antennes - 70 membres

2

Page 3: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu

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

Page 4: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu

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

4

Page 5: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu

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

Page 6: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu

Nous contacter •  Site Web

•  www.flupa.eu

•  Forum •  forum.flupa.eu/phpbb/

•  Twitter •  @assoFlupa

•  Newsletter

•  Facebook •  FLUPA (France Luxembourg…)

•  LinkedIn

6

Page 7: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu

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

Page 8: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu

•  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

Le maquettage, clé de voûte du développement itératif

Page 9: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu

Maquette Papier / crayon

9

Maquette interactive

Page 10: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu

Pourquoi maquetter ?

•  Pour communiquer

10

•  Pour partager les mêmes référents

Page 11: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu 11

Page 12: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu

Pourquoi maquetter ?

•  Stimuler la production d’idées

12

•  Visualiser l’interface et la tester •  Simuler le comportement de

fonctionnalités

Cop

yrig

ht :

usab

ilis.

com

Page 13: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu

Maquettage papier - test •  http://youtu.be/GrV2SZuRPv0

13

Page 14: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu

Les différents types de maquette

14

Page 15: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu

Conception de « bas » niveau Sketchs / esquisses : trouver des idées et les

challenger

15

•  Idées / concepts •  Grandes fonctions •  Hiérarchisation /

proportions

Ex : maquette papier/crayon

Page 16: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu

Conception de « bas » niveau Low fidelity wireframe : Concevoir les fondations

16

•  Affinage et regroupement des fonctions

•  Ne pas réinventer la roue

•  Navigation

Ex : maquette Balsamiq mockups

Page 17: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu

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

Page 18: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu

Conception de « haut » niveau High fidelity wireframe : Concevoir les fondations

18

Ex : maquette Powerpoint

•  Affinage du zonage •  Navigation, repérage,

cohérence globale, adaptation au contexte

•  Plus de « lorem ipsum »

Page 19: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu

Conception de « haut » niveau High fidelity prototype

19

•  Suffisamment clair pour pouvoir développer

•  Navigation dynamique - démonstration

•  Survols simulés

Page 20: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu

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

Page 21: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu

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

Page 22: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu

Mise en pratique

Comment maquetter une

interface ?

22

Page 23: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu

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

Page 24: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu

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

Page 25: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu

Quelques outils pour maquetter

•  Balsamiq Mockup

•  Powerpoint

•  Axure

•  FlairBuilder

•  Justinmind

•  Wireframesketcher

•  Oversite

25

•  Gliffy

•  MockupScreens

•  Pencil Sketching

•  Protoshare

•  Omnigraffle

Page 26: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu 26

Petite démo avant de commencer

Thibault Milan – Web Developper & Interface Designer chez Absolut Payment

Page 27: Flupa 2011 - Atelier Pratique Maquettage

www.flupa.eu

Mise en pratique

27

A vos maquettes !

45 min

Matériel : q  Contenu du site web q  Architecture de l’information q  Eléments de la home page q  Mémento Balsamiq