conférence pia au ms techdays 2011 : "réussir des applications attractives grâce au...

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