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

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

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

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

Pourquoi pour le développeur ?

CONSTAT Du webdesignau quotidien

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

Ce nest pas votre faute !

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

Fondamentaux

Layout Couleurs Typo Ergonomie

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

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.

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

DEMO : Typographie et couleurs

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 !

DEMO : Layout

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

DEMO : Ergonomie

Vérifier votre travail

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

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

DEMO : ChuckLists

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

Disponible dès maintenant 5min max Gratuit Satisfaction utilisateur

Chaque semaine, les DevCamps ALM, Azure, Windows Phone, HTML5, OpenData Téléchargement, ressources et toolkits : RdV sur MSDN Les offres à connaître 90 jours dessai gratuit de Windows Azure Jusquà 35% de réduction sur Visual Studio Pro, avec labonnement MSDN 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 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

Q/A Merci