le maquettage en conception
Upload: france-luxembourg-user-experience-professionals-association-flupa
Post on 07-Jul-2015
1.285 views
DESCRIPTION
par Corinne Leulier, Klee GroupTRANSCRIPT
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
Klee GroupKlee Group
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 GroupKlee Group
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…
Klee GroupKlee Group | octobre 2010
Pour
partagerles mêmes référents
Klee GroupKlee Group | octobre 2010
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
Concevoir les fondations
PrototypeMaquette dynamique
Alternative Alternative
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
Conception de haut niveauConception de bas niveau
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
WireframeMaquette + détaillée
Concevoir les fondations
PrototypeMaquette dynamique
Alternative Alternative
Alternative
Alternative
Alternative
Démonstration
SketchTrouver des idées et les challenger
Conception de haut niveauConception de bas niveau
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
WireframeMaquette + détaillée
Concevoir les fondations
PrototypeMaquette dynamique
Alternative Alternative
Alternative
Alternative
Alternative
Démonstration
SketchTrouver des idées et les challenger
Conception de ‘haut’ niveau
High fidelity wireframe
• Affinage du zonage
• Navigation, repérage, cohérence globale, adaptation au contexte…
• Plus de « lorem ipsum »
27
Conception de haut niveauConception de bas niveau
Klee Group 28
Powerpoint
Démo
Klee Group 29
Klee Group
WireframeMaquette + détaillée
Concevoir les fondations
PrototypeMaquette dynamique
Alternative Alternative
Alternative
Alternative
Alternative
Démonstration
SketchTrouver des idées et les challenger
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
Conception de haut niveauConception de bas niveau
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