View
2.096
Download
1
Category
Preview:
DESCRIPTION
PIA a présenté avec Arnaud Weil, une démarche outillée pour moderniser les applications métier, réduire leur time-to-market et faciliter leur adoption par les utilisateurs. L'accent a été mis sur l'importance de la collaboration entre expert métier, ergonome, designer et développeur.
Citation preview
2
Réussir des applications attractives grâce au prototypage et à Sketchflow10 février 2011
Emmanuel Levi-Valensi. Directeur Associé PIAPhilippe Chaurand. Ingénieur IHM PIAYoan Maman. Designer PIAArnaud Weil. Expert Silverlight Freelance
PIA, cabinet de conseil en
ergonomie, design et
développement agile.
Spécialiste de l’expérience utilisateur
au service
des applications métiers
2004 2011
Statut JEI
Soutien de l’OSEOpour le financementd’innovations
2005
2006
PIA adhèreà l’AFDEL2007
Adhésion auComitéRichelieu
2009
PIA soutientle Pacte PME20
09
Financementde PEA avecZebunet
2009 Agrément
CIR
2010
Partenairefondateurde l’institut
2010
Adhésiondesignersinteractifs20
09
LauréatFast50 FranceFast500 EMEA20
10
2004 Pionnier des RIA
pour les applicationsd’entreprise
Une société agile, impliquée et concernée
OuverturePIA ToulouseDéveloppementà distance
2008
Ergonomie & Design d’IHM_ Cas d’utilisation, persona, maquettage, prototypage, shadowing, tests,...
Expertise technique_ Archi tecture , benchmark ing, qual i té , audi t , développement de composants,...
Développement « sur mesure »_ Réalisation d’applications métiers et web
Coaching agile_ Conseil et coaching pour le développement agile
Nos principales références
France
International
Partenaires
Arnaud Weil
Expert Silverlight & .NET freelance
Formation aux développeurs et graphistesConseil, Audit, Architecture
Prochaine formation Silverlight 4en mars
http://aweil.fr/inter.aspx
Réussir des applications attractives grâce au prototypage et à Sketchflow
9
Les nouveaux usages gagnent l’entreprise
Un contraste fort | Rupture dans l’Expérience Utilisateur (UX)
Manque de simplicité et d’attractivité
Méthodologie PIAConstruire la simplicité et l’attractivité
Méthodologie PIAConstruire la simplicité et l’attractivité
Méthodologie PIA | Construire la simplicité et l’attractivité
AVANT
Méthodologie PIA | Construire la simplicité et l’attractivité
APRES
Design visuel
Design visuel
Analyse desbesoins
Design visuel
Analyse desbesoins
Analyse des besoins
Comprendre les usages, les utilisateurs, le contexte
Outils : persona, cas d’utilisation, shadowing, focus group, interviews,...
Design visuel
Login
HomeData Collect oriented
Analysislocal
Login
HomeDashboard
Analysisglobal
Data Collection Wizard
Edit profile
Edit profile
Administrationcountries, users, static data
Modal windowSceen
Review dataData Collect monitoring
Local Operation Champion
Operation Champion
Kinematic
AdministratorLogin
Administration, Users tab
Administration, Countries tab
Edit user
Edit country
Administration, Systems tab Edit system
Administration, Zones tab
Analyse desbesoins
Architecture de l’information
Architecture de l’information
Elaborer la structure de l’application
Outils : card sorting, cas d’utilisation, zoning, prototypage,...
Design visuel
Login
HomeData Collect oriented
Analysislocal
Login
HomeDashboard
Analysisglobal
Data Collection Wizard
Edit profile
Edit profile
Administrationcountries, users, static data
Modal windowSceen
Review dataData Collect monitoring
Local Operation Champion
Operation Champion
Kinematic
AdministratorLogin
Administration, Users tab
Administration, Countries tab
Edit user
Edit country
Administration, Systems tab Edit system
Administration, Zones tab
Design des interfaces
Analyse desbesoins
Architecture de l’information
Design des interfaces
Concevoir les IHM, l’émotionnel en moins
Outils : prototype papier, maquette simple, prototype interactif, tests utilisateur...
Design visuel
Login
HomeData Collect oriented
Analysislocal
Login
HomeDashboard
Analysisglobal
Data Collection Wizard
Edit profile
Edit profile
Administrationcountries, users, static data
Modal windowSceen
Review dataData Collect monitoring
Local Operation Champion
Operation Champion
Kinematic
AdministratorLogin
Administration, Users tab
Administration, Countries tab
Edit user
Edit country
Administration, Systems tab Edit system
Administration, Zones tab
Design des interfaces
Analyse desbesoins
Architecture de l’information
Design visuel
Rendre attractive l’application
Outils : persona, planches de tendances, charte chromatique, prototype haute fidélité,...
Design visuelDesign des interfaces
Analyse desbesoins
Coding
Mise en oeuvre sur un cas pratique
Design visuelDesign des interfaces
Analyse desbesoins
Coding
Mise en oeuvre sur un cas pratique
Design visuelDesign des interfaces
Analyse desbesoins
Coding
Mise en oeuvre sur un cas pratique
Design visuelDesign des interfaces
Analyse desbesoins
Coding
Mise en oeuvre sur un cas pratique
Design visuelDesign des interfaces
Analyse desbesoins
Coding
Mise en oeuvre sur un cas pratique
Analyse
Analyse Design d’interfaces Design visuel Développement
Analyse Design d’interfaces Design visuel Développement
25
Cas pratique | Le besoin
- Un groupe hôtelier souhaite améliorer la qualité dans ses établissements répartis dans toute la France.
- Chaque manager d’hôtel pourra remonter des propositions d’action d’amélioration.
- Le Responsable de la Qualité Groupe se chargera de consolider l’ensemble des propositions.
Analyse Design d’interfaces Design visuel Développement
26
Cas pratique | Le besoin
Fiches d’amélioration
Hôtel Hôtel
HôtelHôtel
Analyse Design d’interfaces Design visuel Développement
27
Exemples de fiches d’améliorations
- Nombreux incidents sur les téléviseurs
- Manque de réactivité sur la réparation de la clim’
- Problèmes avec les relations fournisseurs pour le transport des clients (navette, taxi)
Analyse Design d’interfaces Design visuel Développement
28
Une formalisation qui va à l’essentiel
Analyse Design d’interfaces Design visuel Développement
29
Design d’interfacesPhilippe Chaurand, ingénieur IHM
@anomes
PIA PIA
Analyse Design d’interfaces Design visuel Développement
30
Monter à bord
Ma visionLes directeurs d’hôtel envoient des actions d’amélioration
Le responsable qualité les formalise puis les pilote
Le responsable qualité veut mesurer l’e!cacité
Analyse Design d’interfaces Design visuel Développement
31
Une réunion de co-design
C’est quoi ?
Pourquoi ?
Avec qui ?
Analyse Design d’interfaces Design visuel Développement
31
Une réunion de co-design
C’est quoi ?
Pourquoi ?
Avec qui ?
Analyse Design d’interfaces Design visuel Développement
31
Une réunion de co-design
C’est quoi ?
Pourquoi ?
Avec qui ?
Analyse Design d’interfaces Design visuel Développement
31
Une réunion de co-design
C’est quoi ?
Pourquoi ?
Avec qui ?
Analyse Design d’interfaces Design visuel Développement
32
réunion de co-design
je consolide l’interface
Analyse Design d’interfaces Design visuel Développement
33
Architecture de l’information
CinématiquesZonings
Analyse Design d’interfaces Design visuel Développement
33
Architecture de l’information
CinématiquesZoningsPatterns
Analyse Design d’interfaces Design visuel Développement
34
Des prototypes papier
Analyse Design d’interfaces Design visuel Développement
34
Des prototypes papier
Analyse Design d’interfaces Design visuel Développement
35
réunion de co-design
je consolide l’interface
Et ainsi de suite ...
Utilité
Utilisabil
ité
Analyse Design d’interfaces Design visuel Développement
36
Prototype papier !nal
Analyse Design d’interfaces Design visuel Développement
36
Prototype papier !nal
Analyse Design d’interfaces Design visuel Développement
37
prototyper, c’est donner unevision du futur produit ...
et partager cette vision !
Analyse Design d’interfaces Design visuel Développement
38
Peut-on aller plus loin ?
Un prototype plus "nUn prototype plus immersifUn prototype plus interactifFormaliser le prototype
Analyse Design d’interfaces Design visuel Développement
39
What’s next ?
L'interface est utile (elle répond au besoin)
L’interface est utilisable (c’est simple et intuitif )
Elle est dans un format collaboratif (Sketch#ow)
Mais …- Est-elle lisible sans fatigue visuelle ?- Est-elle en accord avec mes valeurs ?- Est-elle attractive ?
Design d’interfaces Design Visuel DéveloppementAnalyse
40
Yoan MAMANDesigner Intéractif
Réussir des applications attractives grâce au prototypage et à Sketchflow
PIA • People in action
@yoanmaman
Design d’interfaces Design Visuel DéveloppementAnalyse
41
Design d’interfaces Design Visuel DéveloppementAnalyse
41
Fonctionnel
Design d’interfaces Design Visuel DéveloppementAnalyse
42
Quʼapporte le Design Visuel ?
Design d’interfaces Design Visuel DéveloppementAnalyse
43
La reconnaissance des valeurs
Design d’interfaces Design Visuel DéveloppementAnalyse
44
Lʼenvie et le désir
Design d’interfaces Design Visuel DéveloppementAnalyse
45
Le confort dʼutilisation
Design d’interfaces Design Visuel DéveloppementAnalyse
46
Quʼapporte le Design Visuel ?
La reconnaissance des valeurs
Lʼenvie et le désir
Le confort dʼutilisation
Design d’interfaces Design Visuel DéveloppementAnalyse
47
5 . Prototype haute-fidélité
4 . Charte chromatique
3 . Etude des contrastes
2 . Planches de tendances
1 . Valeurs / Etude cible
Esthétique intelligente
Design d’interfaces Design Visuel DéveloppementAnalyse
48
1 . Valeurs / Etude cibleEsthétique intelligente
Design d’interfaces Design Visuel DéveloppementAnalyse
49
2 . Planches de tendancesEsthétique intelligente
Design d’interfaces Design Visuel DéveloppementAnalyse
50
3 . Etude des contrastesEsthétique intelligente
Design d’interfaces Design Visuel DéveloppementAnalyse
51
4 . Charte chromatiqueEsthétique intelligente
Design d’interfaces Design Visuel DéveloppementAnalyse
52
5 . Prototype haute-fidélitéEsthétique intelligente
Design d’interfaces Design Visuel DéveloppementAnalyse
53
Récupération directepar lʼéquipe de développement
1
Le travail du développeurArnaud Weil
2
Scénario 1
Je reçois la maquette
Je recode la maquette dans mon environnement
Temps perdu
PAS DE VACANCES
3
Scénario 2
Pas de maquette
Je deviens responsable de problèmes qui ne sont pas les miens
BOUC EMISSAIRE
4
Ce que je fais ne se voit pas
Ce que je fais
On me juge sur ça
ApparenceErgonomie
AlgorithmesWeb services
Logique métierTests unitaires
5
Solution
ProcessusCollaboration outillée
Passage transparent de Blend à Visual StudioXAMLDataBinding
XAML
Ergonome
Designer
Développeur
6
DémoAjout de logique métier: validation
7
Ergonomie et apparence
Flexibilité: templatesGraphiste et développeurs parlent (enfin) le même langage
Exemple:http://sltemplates.codeplex.com
Conclusion
Analyse Design d’interfaces Design visuel Développement
Prototyper c’est...Analyse Design d’interfaces Design visuel Développement
Générer des idées Montrer Se faire comprendre
Economiser du temps, de l’énergie et de l’argent
Réduire les risques en se confrontant aux utilisateurs
Mais surtout pour réussir une
application attractive...
Analyse Design d’interfaces Design visuel Développement
La clé du succès est
dans la collaboration entre
Expert métier DéveloppeurErgonome Designer
Analyse Design d’interfaces Design visuel Développement
Merci !
Philippe ChaurandIngénieur IHMpch@piaction.com
Emmanuel Levi-ValensiDirecteur Associéelv@piaction.com
Yoan MamanDesigneryma@piaction.com
Arnaud WeilExpert développement Silverlightcontact@aweil.fr
Plus d’informations sur PIAwww.piaction.comwww.blog.piaction.com
Formations avec Arnaud Weilwww.aweil.fr
Recommended