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

LAYOUT

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

VS

ERGONOMIE

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

ERGONOMIE

3Nombre de Miller7 (+/- 2)

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.

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

5min max

Gratuit

Satisfaction utilisateur

Q/A Merci