Palais des congrès Paris 7, 8 et 9 février 2012. 07 février 2012 Bewise Le livre de recette du design et de l'ergonomie pour le développeur.

Présentation au sujet: "Palais des congrès Paris 7, 8 et 9 février 2012. 07 février 2012 Bewise Le livre de recette du design et de l'ergonomie pour le développeur."— Transcription de la présentation:

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

6 Pourquoi pour le développeur ?

7 CONSTAT Du webdesignau quotidien

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

9 Ce nest 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 cest 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 dun simple clic

14 TYPOGRAPHIE 4 Lespacement 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 lutilisateur 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 dun objet à nous renseigner sur sa fonction 2 Loi de Fitts Plus cest grand et proche, plus cest facile à cliquer 3 Nombre de Miller 7 ( + / - 2) VS

20 DEMO : Ergonomie

21 Vérifier votre travail

22 1 Issu de lexpérience Bewise 2 Utilisé par des dizaines de développeurs OUTIL

23 Vérifiez et améliorez lergonomie de vos applications vous-même avec nos chucklists. Bewise Team

24 DEMO : ChuckLists

25 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 davoir 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 à lutilisateur? Pour une action fréquente offrez un undo, pour le reste faites le. 1 2 3 4

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

27 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 dessai gratuit de Windows Azure www.windowsazure.fr Jusquà 35% de réduction sur Visual Studio Pro, avec labonnement 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

28 Q/A Merci