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 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


Elaborer la structure de l’application

Outils : card sorting, cas d’utilisation, zoning, prototypage,...

Design visuel

Login


Analysislocal

Login

HomeDashboard

Analysisglobal


Edit profile

Edit profile


Modal windowSceen



Operation Champion

Kinematic

AdministratorLogin



Edit user

Edit country



Design des interfaces

Analyse desbesoins



Concevoir les IHM, l’émotionnel en moins

Outils : prototype papier, maquette simple, prototype interactif, tests utilisateur...

Design visuel

Login


Analysislocal

Login

HomeDashboard

Analysisglobal


Edit profile

Edit profile


Modal windowSceen



Operation Champion

Kinematic

AdministratorLogin



Edit user

Edit country




Analyse desbesoins


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

Analyse

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.


26

Cas pratique | Le besoin

Fiches d’amélioration

Hôtel Hôtel

HôtelHôtel


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)


28

Une formalisation qui va à l’essentiel


29

Design d’interfacesPhilippe Chaurand, ingénieur IHM

@anomes

PIA PIA


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é


31

Une réunion de co-design

C’est quoi ?

Pourquoi ?

Avec qui ?


32

réunion de co-design

je consolide l’interface


33


CinématiquesZonings


33


CinématiquesZoningsPatterns


34

Des prototypes papier


35

réunion de co-design

je consolide l’interface

Et ainsi de suite ...

Utilité

Utilisabil

ité


36

Prototype papier !nal


37

prototyper, c’est donner unevision du futur produit ...

et partager cette vision !


38

Peut-on aller plus loin ?

Un prototype plus "nUn prototype plus immersifUn prototype plus interactifFormaliser le prototype


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


41


41

Fonctionnel


42

Quʼapporte le Design Visuel ?


43

La reconnaissance des valeurs


44

Lʼenvie et le désir


45

Le confort dʼutilisation


46

Quʼapporte le Design Visuel ?

La reconnaissance des valeurs

Lʼenvie et le désir

Le confort dʼutilisation


47

5 . Prototype haute-fidélité

4 . Charte chromatique

3 . Etude des contrastes

2 . Planches de tendances

1 . Valeurs / Etude cible

Esthétique intelligente


48

1 . Valeurs / Etude cibleEsthétique intelligente


49

2 . Planches de tendancesEsthétique intelligente


50

3 . Etude des contrastesEsthétique intelligente


51

4 . Charte chromatiqueEsthétique intelligente


52

5 . Prototype haute-fidélitéEsthétique intelligente


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


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...


La clé du succès est

dans la collaboration entre

Expert métier DéveloppeurErgonome Designer


Merci !

Philippe ChaurandIngénieur [email protected]

Emmanuel Levi-ValensiDirecteur Associé[email protected]

Yoan [email protected]

Arnaud WeilExpert développement [email protected]

Plus d’informations sur PIAwww.piaction.comwww.blog.piaction.com

Formations avec Arnaud Weilwww.aweil.fr

mailto:[email protected]








http://www.piaction.com




http://aweil.fr

http://aweil.fr

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

Technology