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.

1. palais des
congrès
Paris
7, 8 et 9
février 2012

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 ocourtois.fr Toulouse Stand 47

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

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

7. CONSTAT
Du webdesign au quotidien

8. 2 CAS DE FIGURE
Aucun designer Equipe avec designer
Aucun ergonome 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. Typo Couleurs Layout 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
Unedes éléments sont différents, différenciez les
Si bonne organisation
Une bonne organisation
en 3 étapes…
Cela tient en 3 étapes
2 Répétition
1. Connaissez les règles
Créez une unité en répétant
Elles sont très simples 1 Connaissez les règles
une caractéristique visuelle
Elles sont très simples
2
2. Remarquez leurs absences
Remarquez leurs absences
Il faut être en mesure de formuler le
3 Alignement Il faut être en mesure de formuler le
problème problème
3. Appliquer ces règles
Vous allez être surpris du résultat ! 3 Appliquez ces principes
Guidez l’œil de l’utilisateur en alignant les éléments
Vous allez être surpris du résultat !
4 Proximité
Regroupez les éléments de même sens, séparez les autres

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
VS
3 Nombre de Miller
7 (+/- 2)

20. Vérifier votre travail

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

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 ».
1
Utilisez-vous des tooltips?2 Parfait à condition que ce soit
pour aider vos utilisateurs et non pour palier un problème
4
de place 3
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.

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

26. Pour aller plus loin
Prochaines sessions des Dev Camps
Chaque semaine, les 10
Live Open Data - Développer des applications riches avec le
février
DevCamps 2012
16
Meeting protocole Open Data
ALM, Azure, Windows Phone, HTML5, OpenData février
Live
Meeting
Azure series - Développer des applications sociales sur
la plateforme Windows Azure
2012
http://msdn.microsoft.com/fr-fr/devcamp
17
Live Comprendre le canvas avec Galactic et la librairie
février
Meeting three.js
2012
Téléchargement, ressources 21
février
Live La production automatisée de code avec CodeFluent
Meeting Entities
et toolkits : RdV sur MSDN 2012
2 mars Live Comprendre et mettre en oeuvre le toolkit Azure pour
http://msdn.microsoft.com/fr-fr/ 2012 Meeting Windows Phone 7, iOS et Android
6 mars Live
Nuget et ALM
2012 Meeting
Les offres à connaître 9 mars
2012
Live
Meeting
Kinect - Bien gérer la vie de son capteur
90 jours d’essai gratuit de Windows 13 mars
2012
Live
Meeting
Sharepoint series - Automatisation des tests
Azure 14 mars Live TFS Health Check - vérifier la bonne santé de votre
www.windowsazure.fr 2012 Meeting plateforme de développement
15 mars Live Azure series - Développer pour les téléphones, les
2012 Meeting tablettes et le cloud avec Visual Studio 2010
Jusqu’à 35% de réduction sur Visual 16 mars Live Applications METRO design - Désossage en règle d'un
Studio Pro, avec l’abonnement MSDN 2012 Meeting template METRO javascript
20 mars Live Retour d'expérience LightSwitch, Optimisation de
www.visualstudio.fr 2012 Meeting l'accès aux données, Intégration Silverlight
23 mars Live OAuth - la clé de l'utilisation des réseaux sociaux dans
2012 Meeting votre application

27. Q/A Merci