palais des congrès Paris

7, 8 et 9 février 2012

07 février 2012Bewise

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

@ocourtois ocourtois.fr

Olivier Courtois

Responsable BewiseDesignConsultant, Spécialiste UX

Toulouse Stand 47

@cmaneu maneu.net

Christopher Maneu

Directeur ProjetConsultant, MVP

Toulouse Stand 47

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

Pourquoi pour le

développeur ?

CONSTAT

Du webdesign au quotidien

2 CAS DE FIGURE

VERSUS

Aucun designerAucun ergonome

Equipe avec designerEt ergonome

Ce n’est pas votre faute !

PLAN EN 2 ETAPES

1FONDAMENTAUXAvoir une culture design et ergo

2VERIFICATIONSTester votre travail avant de le livrer

Fondamentaux

LayoutCouleursTypo Ergonomie

TYPOGRAPHIE

1 FamillesUne famille c’est pour la vie, utilisez en moins de trois, respectez les guidelines (typefaces)

2Serif / Sans SerifChoisissez Sans Serif pour un look résolument moderne

3GrasseLe contraste d’un simple clic

TYPOGRAPHIE

4 L’espacementAjustez vos textes par rapport à la mise en page avec les différents espacements

5Glyphs et alphabetsToutes les polices ne naissent pas égales.

COULEURS

1Ne les choisissez pas vous mêmeVous risquez une fracture de l’œil

2Créez des teintesNe multipliez pas le nombre de couleurs, utilisez des teintes

DEMO : Typographie et couleurs

LAYOUT

1ContrasteSi des éléments sont différents, différenciez les

2RépétitionCréez une unité en répétant une caractéristique visuelle

3AlignementGuidez l’œil de l’utilisateur en alignant les éléments

4ProximitéRegroupez les éléments de même sens, séparez les autres

Une bonne organisationCela tient en 3 étapes

1. Connaissez les règlesElles sont très simples

2. Remarquez leurs absencesIl faut être en mesure de formuler le

problème

3. Appliquer ces règlesVous allez être surpris du résultat !

Une bonne organisationen 3 étapes…

1Connaissez les règlesElles sont très simples

2Remarquez leurs absencesIl faut être en mesure de formuler le problème

3Appliquez ces principesVous allez être surpris du résultat !

DEMO : Layout

ERGONOMIE

1AffordanceCaractère intrinsèque d’un objet à nous renseigner sur sa fonction

2Loi de FittsPlus c’est grand et proche, plus c’est facile à cliquer

3Nombre de Miller7 (+/- 2)

VS

Vérifier votre travail

1Issu de l’expérience Bewise

2 Utilisé par des dizaines de développeurs

OUTIL

”“Vérifiez et améliorez

l’ergonomie 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 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 placePositionnez-vous sur le premier champ puis vérifiez qu’à chaque appui sur TAB, le focus va sur le bon champDevez-vous demander confirmation à l’utilisateur? Pour une action fréquente offrez un undo, pour le reste faites le.

1

2

34

Disponible dès maintenant http://chucklists.bewise.fr/techdays

5min max

Gratuit

Satisfaction utilisateur

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ître90 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

Q/A Merci