Le livre de recette du design et de l'ergonomie pour le développeur

2. Le livre de recette du design et de l'ergonomie pour le développeur 07 février 2012 Bewise

3. Olivier Courtois Responsable BewiseDesign Consultant, Spécialiste UX ocourtois.fr Toulouse Stand 47 @ocourtois

4. Christopher Maneu Directeur Projet Consultant, MVP maneu.net Toulouse Stand 47 @cmaneu

5. Ouverture d’une agence sur Paris ! Pure Player Microsoft depuis 1999 Retrouvez nous sur le stand 47 Diffuse une expertise novatrice Contribue à l’émergence de logiciels performants et ergonomiques

6. Pourquoi pour le développeur ?

7. CONSTAT Du webdesign au quotidien

8. 2 CAS DE FIGURE VERSUS Equipe avec designer Et ergonome Aucun designer Aucun ergonome

9. Ce n’est pas votre faute !

10. PLAN EN 2 ETAPES FONDAMENTAUX Avoir une culture design et ergo VERIFICATIONS Tester votre travail avant de le livrer 1 2

11. Fondamentaux

12. Typo Ergonomie Couleurs Layout

13. TYPOGRAPHIE Familles Une famille c’est pour la vie, utilisez en moins de trois, respectez les guidelines (typefaces) Serif / Sans Serif Choisissez Sans Serif pour un look résolument moderne Grasse Le contraste d’un simple clic 1 2 3

14. TYPOGRAPHIE L’espacement Ajustez vos textes par rapport à la mise en page avec les différents espacements Glyphs et alphabets Toutes les polices ne naissent pas égales. 4 5

15. COULEURS Ne les choisissez pas vous même Vous risquez une fracture de l’œil Créez des teintes Ne multipliez pas le nombre de couleurs, utilisez des teintes 1 2

16. DEMO : Typographie et couleurs

17. LAYOUT Alignement Guidez l’œil de l’utilisateur en alignant les éléments Répétition Créez une unité en répétant une caractéristique visuelle Proximité Regroupez les éléments de même sens, séparez les autres Contraste Si des éléments sont différents, différenciez les 3 1 4 2 Une bonne organisation Une bonne organisation Cela tient en 3 étapes en 3 étapes… Connaissez les règles Elles sont très simples 1 Connaissez les règles Elles sont très simples 2. Remarquez leurs absences Il faut être en mesure de formuler le problème 2 Remarquez leurs absences Il faut être en mesure de formuler le problème 3. Appliquer ces règles Vous allez être surpris du résultat ! 3 Appliquez ces principes Vous allez être surpris du résultat !

18. DEMO : Layout

19. ERGONOMIE Affordance Caractère intrinsèque d’un objet à nous renseigner sur sa fonction Loi de Fitts Plus c’est grand et proche, plus c’est facile à cliquer Nombre de Miller 7 (+/- 2) 1 2 3 VS

20. Vérifier votre travail

21. OUTIL Issu de l’expérience Bewise Utilisé par des dizaines de développeurs 1 2

22. “ Vérifiez et améliorez l’ergonomie de vos applications vous-même avec nos chucklists. ” Bewise Team

23. DEMO : ChuckLists

24. APPLICATION WINDOWS • Utilisez-vous moins de 3 couleurs ? • Utilisez-vous moins de 3 polices de caractères ? • Votre application se lance en plus de 200ms ? Soyez sur d’avoir un « splashscreen ». • Utilisez-vous des tooltips? Parfait à condition que ce soit pour aider vos utilisateurs et non pour palier un problème de place • Positionnez-vous sur le premier champ puis vérifiez qu’à chaque appui sur TAB, le focus va sur le bon champ • Devez-vous demander confirmation à l’utilisateur? Pour une action fréquente offrez un undo, pour le reste faites le. 1 2 4 3

25. 5min max Gratuit Disponible dès maintenant http://chucklists.bewise.fr/techdays Satisfaction utilisateur

26. Pour aller plus loin • Chaque semaine, les DevCampsALM, Azure, Windows Phone, HTML5, OpenDatahttp://msdn.microsoft.com/fr-fr/devcamp • Téléchargement, ressources et toolkits : RdV sur MSDNhttp://msdn.microsoft.com/fr-fr/ • Les offres à connaître 90 jours d’essai gratuit de Windows Azure www.windowsazure.frJusqu’à 35% de réduction sur Visual Studio Pro, avec l’abonnement MSDN www.visualstudio.fr Prochaines sessions des Dev Camps

27. Q/A Merci