le maquettage en conception

Klee GroupKlee Group

Petit Dej’ FLUPALe maquettage en conception

Petit déjeuner FLUPA

1Corinne Leulier [email protected]

Forces et faiblesses, best practices, outils

Klee Group

Sommaire

• Qui est Klee ?

• Pourquoi maquetter ?

• Les différents types de maquette et leurs rôles

• Les outils disponibles

• Retour d’expérience au sein de Dexia BIL

2


Qui sommes-nous ?

1987Création de Klee Group

+ 300personnes

Secteurs d’activité :Services publics / privé, Industrie, distribution, culture, banque / assurances, +300 clients Ergonomie

Expérience utilisateur

Interfaces Homme Machine

Design d’information

Savoir faire technologique

depuis 2000

Klee Interactivel’agence nouvelle génération

45 personnes dont 10 en ergonomie/design

3


Klee Interactive

Klee Group 4

Projets « métier »

Projets e-commerce oucorporate

Projets sur de nouveaux supports web, mobiles

Types de projets | Notre différence

Applications professionnelles

Applications à destination du

grand public

Méthodologie des acteurs

industriels du monde numérique

UCDConception Centrée Utilisateurs

Klee GroupKlee Group | octobre 2010

Pourquoi

maquetter?

Klee Group 6

Pour

Communiquer…


Pour

partagerles mêmes référents


PartagerCe que le client a expliqué

Ce que le chef de projet a compris

Ce que le business consultant a décrit

Ce dont le client avait Ce dont le client avait Ce dont le client avait Ce dont le client avait vraiment besoinvraiment besoinvraiment besoinvraiment besoin

les mêmes référents

Klee Group 9

Qui Qui l’utilise ou va

l’utiliser ?

Cible(s)

Comment Dans quel contexte ?

Situation(s)

Quoi Quelles fonctions /

services ?

Activité(s)

À propos du

produit

Klee Group

Rappel : Expérience utilisateur / Ergonomie

10

Cible(s)

Activité(s)Situation(s)

produit adapté

Klee Group 11

Klee Group 12

http://project.cmd.hro.nl/cmi/hci/toolkit/

Processus de conception de produitcentré sur l’utilisateur

Klee Group 13

Maquettage & itération(s)

Expérience Expertise

Idées

Contexte

Klee Group

Le maquettage

• Le maquettage / prototypage est un élément essentiel d’uneconception 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é ergonomiquesoit atteinte

– Le maquettage va du simple dessin réalisé à la main (conception de bas niveau) à des systèmes interactifs contenant quasiment toutes les fonctionnalités du système final (conception de haut niveau)

14

Klee Group

Le maquettage

• Une maquette– Permet de stimuler la production d’idées, l’innovation

– Permet de visualiser l'interface et de la tester avant l’implémentation

– Permet de simuler le comportement de fonctionnalités, sous forme de succession d'écrans

– constitue aussi une excellente façon de créer une synergie au sein de l'équipe et de communiquer très tôt dans le processus

– La démarche se poursuit jusqu'à l'obtention d'une maquette satisfaisante, moment où un prototype fonctionnel pourra être programmé et testé, soit de façon locale, soit à distance

– C’est aussi un livrable qui peut servir de validation intermédiaire dans la conception

15

Klee Group

LES DIFFÉRENTS TYPES DE MAQUETTE ET LEURS RÔLES

16

Klee Group

Wireframe / fil de ferMaquette + détaillée

Concevoir les fondations

PrototypeMaquette dynamique

Alternative Alternative

Alternative

Alternative

Alternative

Démonstration

Communication

Accompagnement du changement

« Sketch » / esquisseTrouver des idées et les challenger

Conception

17

Conception de haut niveauConception de bas niveau

Klee Group

WireframeMaquette + détaillée




Alternative

Alternative

Alternative

Démonstration

SketchTrouver des idées et les challenger

Conception de ‘bas’ niveau

Sketches : esquisses

• Idées / concepts

• Grandes fonctions

• Hiérarchisation – Proportions

18


Klee Group 19

Klee Group 20

Remue méninges

Klee Group 21

Maquette papier / crayon

Klee Group 22

Maquette papier / crayon

Klee Group

Conception de ‘bas’ niveau

Low fidelity wireframe

• Affinage et regroupement des fonctions

• Ne pas réinventer la roue (sur TOUS les composants)

• Navigation

23





Alternative

Alternative

Alternative

Démonstration



Klee Group

Wireframe

24http://www.flickr.com/photos/35468151759@N01/184032078/

Klee Group

Les + de la conception de bas niveau

• L’implémentation de fonctionnalités partielles du produit le plus rapidement possible

• Ne pas se soucier des problèmes éventuels de faisabilité technique à ce stade (sauf contraintes bloquantes)

• C’est magique…

• A quoi ça sert ?– Explorer des alternatives, de nouvelles possibilités d’interface

– Valider les composants d’interface, le zonage, puis l’enchainement des étapes

– Tester auprès du groupe projet et auprès d’utilisateurs lors d’ateliers ou de tests utilisateurs (sessions individuelles)

– Réduire le nombre de gabarits nécessaires et donc le coût final du produit

25

Klee Group 26

Klee Group





Alternative

Alternative

Alternative

Démonstration


Conception de ‘haut’ niveau

High fidelity wireframe

• Affinage du zonage

• Navigation, repérage, cohérence globale, adaptation au contexte…

• Plus de « lorem ipsum »

27


Klee Group 28

Powerpoint

Démo

Klee Group 29

Klee Group





Alternative

Alternative

Alternative

Démonstration


Conception de ‘haut’ niveau

High fidelity prototype

• Suffisamment clair pour pouvoir développer dans la foulée

• Navigation dynamique - démonstration

• Survols simulés

30


Klee Group 31

Axure RP

Démo

Klee Group 32

Klee Group

Bénéfices du maquettage 1/2

• Bénéfices pour une application métier (B to B) -> s’assurer que :– les utilisateurs pourront utiliser l’application concrètement et qu’ils

voudront le faire

– les fonctionnalités « vitales » sont toujours présentes et accessibles

– les fonctions dont les utilisateurs n’ont finalement pas besoin ou dont ils ne veulent pas ont été identifiées

• L’effort de formation, d’accompagnement du changement et de support sera moins important

• Bénéfices pour une application à destination de clients (e-commerce, B to C)– La facilité d’utilisation a pour effet d’améliorer le taux de conversion,

d’optimiser le « cross selling » et le « up-selling »

– Une meilleure satisfaction utilisateur et une meilleure perception de la marque

– Tests de l’outil auprès d’utilisateurs avant sa mise en ligne ou sa sortie

33

Klee Group

Bénéfices du maquettage 2/2

• Pas de développement dans le cycle de conception court– Compatible avec méthodes agiles de conception

• Boucle de feedback rapide

• Meilleure communication autour de la conception et des choix de conception réalisés

• Le résultat : un processus de conception plus rapide qui donne naissance à des produits de meilleure qualité ergonomique, mieux adaptés

34

Klee Group

L’avantage des maquettes / prototypes

• Les avantages sont nombreux :– Ils incitent à la critique et la favorisent car en présence d’un outil plus

abouti, les utilisateurs peuvent hésiter à le critiquer.

– Ils sont peu couteux et peuvent être de très bas niveau de fidélité.

– Ils permettent de répondre au besoin d’obtenir des résultats rapides à des tests lors de la conception

– Ils permettent d’orienter la discussion lors d’un atelier

– Ils permettent à tous les acteurs du projets de partager une même représentation du produit vers lequel tendre

– Ils permettent de réaliser des tests utilisateurs tôt dans le processus de conception

– Ils focalisent l’attention sur le contenu et les fonctionnalités sans être pollué par les aspects de surface (habillage graphique, couleurs utilisées…)

– Ils permettent d’avoir des validations intermédiaires par le client, les utilisateurs et les équipes de développement avant d'être implémentés.

35

Klee Group

BEST PRACTICES DU MAQUETTAGE

36

Klee Group 37

Raconter une histoire

Besoins réels

Validation

Idées

Klee Group 38

Contexte

Contraintes

Enjeux

Klee Group

Les best practices du maquettage

• Raconter une histoire– Utiliser les maquettes pour faire émerger des idées, récolter des

informations sur les besoins réels des utilisateurs cibles et obtenir des validations

– Repartir du contexte et des contraintes du projet, rappeler les enjeux

39

Argumenter les choix

Parcours utilisateurs

Un à un

Klee Group

3 points clés à retenir

1. Avant de travailler sur l’habillage graphique d'une interface, il est nécessaire de réfléchir– Réfléchir à l’organisation globale de l’application ou du site web

(architecture de l’information)

– Identifier les fonctionnalités, les services, les actions et les informations nécessaires au fil des pages grâce notamment à la conception de cas d’usage

– Poser le tout sur papier... Et / ou passer au numérique, qui permet un rendu plus professionnel, plus propre et plus facilement modifiable

2. Le maquettage en fil de fer (wireframe) est un passage obligé pour élaborer rapidement et concrètement l'agencement de l'information (et le zoning) et des fonctionnalités d'une future interface.

3. Grâce à la maquette « fil de fer », on peut se représenter concrètement la future interface du produit.

40

Klee Group

OUTILS

41

Klee Group

Balsamiq Mockup©

• Utilisable facilement en ligne (Flex) ou en version logicielle, le rendu ressemble à du dessin bien qu'il reste très efficace pour valider les aspects fonctionnels : architecture de l’information et zoning– Exportable au format png et xml avec le logiciel

– http://www.balsamiq.com/

42

Klee Group

PowerPoint

• Un outil logiciel intéressant pour les présentations orales...

• Il peut et est aussi souvent utilisé comme outil de prototypage rapide, mais devient limité si l'on souhaite implémenter des éléments et patterns d'interactions précis.

43

Klee Group

Powerpoint - maquettes grises ou « fil de fer »

44

Klee Group

D’autres outils existent

• D'autres logiciels comme Flash, Visio ou d’autres permettent de faire des prototypes fonctionnels plus puissants...

• Cependant leur maniabilité demande davantage de temps et de connaissances notamment en programmation

• Ils permettent cependant l’interaction avec des bases de données, etc.

45

Klee Group

Pour aller plus loin…

• Rapid prototyping tools – une revue de Dan Harrelson (september 2009)

46

http://spreadsheets.google.com/pub?key=pOa2Uqiakxlry5hNuZm89Eg&output=html

http://www.dexodesign.com/2008/11/07/review-16-user-interface-prototyping-tools/

Klee Group

Merci de votre attention

le maquettage en conception

Documents