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

Développeurs, échappez-vous quelques instants de la grisaille quotidienne. Le chef vous propose de vous asseoir à ses côtés pour apprendre ses techniques. Au menu, concentré de techniques ergonomiques, émulsion de couleurs avec sa touche de typographie, et son rizotto de conseils prêt à l'emploi pour les développeurs. Vous pourrez même emporter tous ses conseils chez vous.

Transcript

1. palais des congrès Paris 7, 8 et 9 février 2012
2. 07 février 2012 Bewise Le livre de recette du design et de l'ergonomie pour le développeur
3. @ocourtois ocourtois.fr Olivier Courtois Responsable BewiseDesign Consultant, Spécialiste UX Toulouse Stand 47
4. @cmaneu maneu.net Christopher Maneu Directeur Projet Consultant, MVP Toulouse Stand 47
5. Ouverture d’une agence sur Paris ! Retrouvez nous sur le stand 47 Diffuse une expertise novatrice Contribue à l’émergence de logiciels performants et ergonomiques Pure Player Microsoft depuis 1999
7. CONSTAT Du webdesign au quotidien
8. 2 CAS DE FIGURE Aucun designer Aucun ergonome Equipe avec designer Et ergonome
9. Ce n’est pas votre faute !
10. PLAN EN 2 ETAPES 1 FONDAMENTAUX Avoir une culture design et ergo 2 VERIFICATIONS Tester votre travail avant de le livrer
11. Fondamentaux
12. Layout Couleurs Typo Ergonomie
13. TYPOGRAPHIE 1 Familles Une famille c’est pour la vie, utilisez en moins de trois, respectez les guidelines (typefaces) 2 Serif / Sans Serif Choisissez Sans Serif pour un look résolument moderne 3 Grasse Le contraste d’un simple clic
14. TYPOGRAPHIE 4 L’espacement Ajustez vos textes par rapport à la mise en page avec les différents espacements 5 Glyphs et alphabets Toutes les polices ne naissent pas égales.
15. COULEURS 1 Ne les choisissez pas vous même Vous risquez une fracture de l’œil 2 Créez des teintes Ne multipliez pas le nombre de couleurs, utilisez des teintes
16. DEMO : Typographie et couleurs
17. LAYOUT 1 Contraste Si des éléments sont différents, différenciez les 2 Répétition Créez une unité en répétant une caractéristique visuelle 3 Alignement Guidez l’œil de l’utilisateur en alignant les éléments 4 Proximité Regroupez les éléments de même sens, séparez les autres Une bonne organisation Cela tient en 3 étapes 1. Connaissez les règles Elles sont très simples 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 ! Une bonne organisation en 3 étapes… 1 Connaissez les règles Elles sont très simples 2 Remarquez leurs absences Il faut être en mesure de formuler le problème 3 Appliquez ces principes Vous allez être surpris du résultat !
18. DEMO : Layout
19. ERGONOMIE 1 Affordance Caractère intrinsèque d’un objet à nous renseigner sur sa fonction 2 Loi de Fitts Plus c’est grand et proche, plus c’est facile à cliquer 3 Nombre de Miller 7 (+/- 2) VS
20. Vérifier votre travail
21. 1 Issu de l’expérience Bewise 2 Utilisé par des dizaines de développeurs OUTIL
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 3 4
25. Disponible dès maintenant http://chucklists.bewise.fr/techdays 5min max Gratuit Satisfaction utilisateur
26. Chaque semaine, les DevCamps ALM, Azure, Windows Phone, HTML5, OpenData http://msdn.microsoft.com/fr-fr/devcamp Téléchargement, ressources et toolkits : RdV sur MSDN http://msdn.microsoft.com/fr-fr/ Les offres à connaître 90 jours d’essai gratuit de Windows Azure www.windowsazure.fr Jusqu’à 35% de réduction sur Visual Studio Pro, avec l’abonnement MSDN www.visualstudio.fr Pour aller plus loin 10 février 2012 Live Meeting Open Data - Développer des applications riches avec le protocole Open Data 16 février 2012 Live Meeting Azure series - Développer des applications sociales sur la plateforme Windows Azure 17 février 2012 Live Meeting Comprendre le canvas avec Galactic et la librairie three.js 21 février 2012 Live Meeting La production automatisée de code avec CodeFluent Entities 2 mars 2012 Live Meeting Comprendre et mettre en oeuvre le toolkit Azure pour Windows Phone 7, iOS et Android 6 mars 2012 Live Meeting Nuget et ALM 9 mars 2012 Live Meeting Kinect - Bien gérer la vie de son capteur 13 mars 2012 Live Meeting Sharepoint series - Automatisation des tests 14 mars 2012 Live Meeting TFS Health Check - vérifier la bonne santé de votre plateforme de développement 15 mars 2012 Live Meeting Azure series - Développer pour les téléphones, les tablettes et le cloud avec Visual Studio 2010 16 mars 2012 Live Meeting Applications METRO design - Désossage en règle d'un template METRO javascript 20 mars 2012 Live Meeting Retour d'expérience LightSwitch, Optimisation de l'accès aux données, Intégration Silverlight 23 mars 2012 Live Meeting OAuth - la clé de l'utilisation des réseaux sociaux dans votre application Prochaines sessions des Dev Camps
27. Q/A Merci