Réussir des applications attractives grâce au prototypage et à Sketchflow

Transcription

1

2 Réussir des applications attractives grâce au prototypage et à Sketchflow 10 février 2011 Emmanuel Levi-Valensi. Directeur Associé PIA Philippe Chaurand. Ingénieur IHM PIA Yoan Maman. Designer PIA Arnaud Weil. Expert Silverlight Freelance 2

3 PIA, cabinet de conseil en ergonomie, design et développement agile.

4 Spécialiste de l expérience utilisateur au service des applications métiers

5 Une société agile, impliquée et concernée 2006 Soutien de l OSEO pour le financement d innovations 2009 Financement de PEA avec Zebunet 2010 Agrément CIR 2004 Pionnier des RIA pour les applications d entreprise 2008 Ouverture PIA Toulouse Développement à distance 2009 Adhésion au Comité Richelieu 2010 Partenaire fondateur de l institut PIA adhère à l AFDEL 2009 Adhésion designers interactifs 2010 Lauréat Fast50 France Fast500 EMEA 2005 Statut JEI 2009 PIA soutient le Pacte PME

6 Ergonomie & Design d IHM _ Cas d utilisation, persona, maquettage, prototypage, shadowing, tests,... Expertise technique _ Architecture, benchmarking, qualité, audit, 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

7 Nos principales références France International Partenaires

8 Arnaud Weil Expert Silverlight &.NET freelance Formation aux développeurs et graphistes Conseil, Audit, Architecture Prochaine formation Silverlight 4 en mars

9 Réussir des applications attractives grâce au prototypage et à Sketchflow 9

10 Les nouveaux usages gagnent l entreprise

11 Un contraste fort Rupture dans l Expérience Utilisateur (UX) Manque de simplicité et d attractivité

12 Méthodologie PIA Construire la simplicité et l attractivité

13 Méthodologie PIA Construire la simplicité et l attractivité

14 Méthodologie PIA Construire la simplicité et l attractivité AVANT

15 Méthodologie PIA Construire la simplicité et l attractivité APRES

16

17 Design visuel

18 Design visuel Analyse des besoins

19 Design visuel Analyse des besoins Comprendre les usages, les utilisateurs, le contexte Analyse des besoins Outils : persona, cas d utilisation, shadowing, focus group, interviews,...

20 Design visuel Login Login Login Home Data Collect oriented Analysis local Home Dashboard Analysis global Administration countries, users, static data Administration, Users tab Local Operation Champion Data Collection Wizard Edit profile Operation Champion Review data Data Collect monitoring Edit profile Administrator Edit user Architecture de l information Architecture de l information Elaborer la structure de l application Administration, Countries tab Edit country Administration, Zones tab Administration, Systems tab Kinematic Edit system Modal Sceen window Outils : card sorting, cas d utilisation, zoning, prototypage,... Analyse des besoins

21 Design visuel Design des interfaces Design des interfaces Concevoir les IHM, l émotionnel en moins Login Login Login Home Data Collect oriented Analysis local Home Dashboard Analysis global Administration countries, users, static data Administration, Users tab Local Operation Champion Data Collection Wizard Edit profile Operation Champion Review data Data Collect monitoring Edit profile Administrator Edit user Architecture de l information Outils : prototype papier, maquette simple, prototype interactif, tests utilisateur... Administration, Countries tab Edit country Administration, Zones tab Administration, Systems tab Edit system Kinematic Sceen Modal window Analyse des besoins

22 Design visuel Design visuel Rendre attractive l application Outils : persona, planches de tendances, charte chromatique, prototype haute fidélité,... Design des interfaces Login Local Operation Champion Home Data Collect oriented Data Collection Wizard Login Login Analysis local Home Dashboard Analysis global Administration countries, users, static data Administration, Users tab Edit profile Operation Champion Review data Data Collect monitoring Edit profile Administrator Edit user Architecture de l information Administration, Countries tab Edit country Administration, Zones tab Administration, Systems tab Edit system Kinematic Sceen Modal window Analyse des besoins

23 Mise en oeuvre sur un cas pratique Analyse des besoins Design des interfaces Design visuel Coding

24 Mise en oeuvre sur un cas pratique Analyse des besoins Design des interfaces Design visuel Coding

25 Mise en oeuvre sur un cas pratique Analyse des besoins Design des interfaces Design visuel Coding

26 Mise en oeuvre sur un cas pratique Analyse des besoins Design des interfaces Design visuel Coding

27 Mise en oeuvre sur un cas pratique Analyse des besoins Design des interfaces Design visuel Coding

28 Analyse Design d interfaces Design visuel Développement Analyse

29 Analyse Design d interfaces Design visuel Développement 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. 25

30 Analyse Design d interfaces Design visuel Développement Cas pratique Le besoin Hôtel Hôtel Fiches d amélioration Hôtel Hôtel 26

31 Analyse Design d interfaces Design visuel Développement 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) 27

32 Analyse Design d interfaces Design visuel Développement Une formalisation qui va à l essentiel 28

33 Analyse Design d interfaces Design visuel Développement Design d interfaces Philippe Chaurand, ingénieur IHM PIA 29

34 Analyse Design d interfaces Design visuel Développement Monter à bord Ma vision Les directeurs d hôtel envoient des actions d amélioration Le responsable qualité les formalise puis les pilote Le responsable qualité veut mesurer l efficacité 30

35 Analyse Design d interfaces Design visuel Développement Une réunion de co-design C est quoi? Pourquoi? Avec qui? 31

36 Analyse Design d interfaces Design visuel Développement Une réunion de co-design C est quoi? Pourquoi? Avec qui? 31

37 Analyse Design d interfaces Design visuel Développement Une réunion de co-design C est quoi? Pourquoi? Avec qui? 31

38 Analyse Design d interfaces Design visuel Développement Une réunion de co-design C est quoi? Pourquoi? Avec qui? 31

39 Analyse Design d interfaces Design visuel Développement réunion de co-design je consolide l interface 32

40 Analyse Design d interfaces Design visuel Développement Architecture de l information Cinématiques Zonings 33

41 Analyse Design d interfaces Design visuel Développement Architecture de l information Cinématiques Zonings Patterns 33

42 Analyse Design d interfaces Design visuel Développement Des prototypes papier 34

43 Analyse Design d interfaces Design visuel Développement Des prototypes papier 34

44 Analyse Design d interfaces Design visuel Développement Et ainsi de suite... réunion de co-design Utilité je consolide l interface Utilisabilité 35

45 Analyse Design d interfaces Design visuel Développement Prototype papier final 36

46 Analyse Design d interfaces Design visuel Développement Prototype papier final 36

47 Analyse Design d interfaces Design visuel Développement prototyper, c est donner une vision du futur produit... et partager cette vision! 37

48 Analyse Design d interfaces Design visuel Développement Peut-on aller plus loin? Un prototype plus fin Un prototype plus immersif Un prototype plus interactif Formaliser le prototype 38

49 Analyse Design d interfaces Design visuel Développement 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 (Sketchflow) Mais - Est-elle lisible sans fatigue visuelle? - Est-elle en accord avec mes valeurs? - Est-elle attractive? 39

50 Analyse Design d interfaces Design Visuel Développement Réussir des applications attractives grâce au prototypage et à Sketchflow Yoan MAMAN Designer Intéractif PIA People in 40

51 Analyse Design d interfaces Design Visuel Développement 41

52 Analyse Design d interfaces Design Visuel Développement Fonctionnel 41

53 Analyse Design d interfaces Design Visuel Développement Quʼapporte le Design Visuel? 42

54 Analyse Design d interfaces Design Visuel Développement La reconnaissance des valeurs 43

55 Analyse Design d interfaces Design Visuel Développement Lʼenvie et le désir 44

56 Analyse Design d interfaces Design Visuel Développement Le confort dʼutilisation 45

57 Analyse Design d interfaces Design Visuel Développement Quʼapporte le Design Visuel? La reconnaissance des valeurs Lʼenvie et le désir Le confort dʼutilisation 46

58 Analyse Design d interfaces Design Visuel Développement Esthétique intelligente 5. Prototype haute-fidélité 4. Charte chromatique 3. Etude des contrastes 2. Planches de tendances 1. Valeurs / Etude cible 47

59 Analyse Design d interfaces Design Visuel Développement Esthétique intelligente 1. Valeurs / Etude cible 48

60 Analyse Design d interfaces Design Visuel Développement Esthétique intelligente 2. Planches de tendances 49

61 Analyse Design d interfaces Design Visuel Développement Esthétique intelligente 3. Etude des contrastes 50

62 Analyse Design d interfaces Design Visuel Développement Esthétique intelligente 4. Charte chromatique 51

63 Analyse Design d interfaces Design Visuel Développement Esthétique intelligente 5. Prototype haute-fidélité 52

64 Analyse Design d interfaces Design Visuel Développement Récupération directe par lʼéquipe de développement 53

65 Le travail du développeur Arnaud Weil 1

66 Scénario 1 Je reçois la maquette Je recode la maquette dans mon environnement Temps perdu PAS DE VACANCES 2

67 Scénario 2 Pas de maquette Je deviens responsable de problèmes qui ne sont pas les miens BOUC EMISSAIRE 3

68 Ce que je fais ne se voit pas On me juge sur ça Apparence Ergonomie Algorithmes Web services Logique métier Tests unitaires Ce que je fais 4

69 Solution Processus Collaboration outillée Passage transparent de Blend à Visual Studio XAML DataBinding Designer Ergonome Développeur XAML 5

70 Démo Ajout de logique métier: validation 6

71 Ergonomie et apparence Flexibilité: templates Graphiste et développeurs parlent (enfin) le même langage Exemple: 7

72 Analyse Design d interfaces Design visuel Développement Conclusion

73 Analyse Design d interfaces Design visuel Développement Prototyper c est... 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

74 Analyse Design d interfaces Design visuel Développement Mais surtout pour réussir une application attractive...

75 Analyse Design d interfaces Design visuel Développement La clé du succès est dans la collaboration entre Expert métier Ergonome Designer Développeur

76 Merci! Philippe Chaurand Ingénieur IHM Plus d informations sur PIA Emmanuel Levi-Valensi Directeur Associé elv@piaction.com Yoan Maman Designer yma@piaction.com Formations avec Arnaud Weil Arnaud Weil Expert développement Silverlight contact@aweil.fr