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

www.flupa.eu

L’association FLUPA 3 antennes - 70 membres

2

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

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

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

www.flupa.eu

Nous contacter •  Site Web

•  www.flupa.eu

•  Forum •  forum.flupa.eu/phpbb/

•  Twitter •  @assoFlupa

•  Newsletter

•  Facebook •  FLUPA (France Luxembourg…)

•  LinkedIn

6

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

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

www.flupa.eu

Maquette Papier / crayon

9

Maquette interactive

www.flupa.eu

Pourquoi maquetter ?

•  Pour communiquer

10

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

www.flupa.eu 11

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

www.flupa.eu

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

13

www.flupa.eu

Les différents types de maquette

14

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

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

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

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 »

www.flupa.eu

Conception de « haut » niveau High fidelity prototype

19

•  Suffisamment clair pour pouvoir développer

•  Navigation dynamique - démonstration

•  Survols simulés

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

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

www.flupa.eu

Mise en pratique

Comment maquetter une

interface ?

22

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

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

www.flupa.eu

Quelques outils pour maquetter

•  Balsamiq Mockup

•  Powerpoint

•  Axure

•  FlairBuilder

•  Justinmind

•  Wireframesketcher

•  Oversite

25

•  Gliffy

•  MockupScreens

•  Pencil Sketching

•  Protoshare

•  Omnigraffle

www.flupa.eu 26

Petite démo avant de commencer

Thibault Milan – Web Developper & Interface Designer chez Absolut Payment

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