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

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

Embed Size (px)

DESCRIPTION

Présentation donnée en février 2012 pendant les Techdays par Christopher Maneu et moi-même. La vidéo : https://vimeo.com/88650145. 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.

Citation preview

Page 1: Le livre du design et de l'ergonomie pour le développeur

palais des congrès Paris

7, 8 et 9 février 2012

Page 2: Le livre du design et de l'ergonomie pour le développeur

07 février 2012Bewise

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

Page 3: Le livre du design et de l'ergonomie pour le développeur

@ocourtois ocourtois.fr

Olivier Courtois

Responsable BewiseDesignConsultant, Spécialiste UX

Toulouse Stand 47

Page 4: Le livre du design et de l'ergonomie pour le développeur

@cmaneu maneu.net

Christopher Maneu

Directeur ProjetConsultant, MVP

Toulouse Stand 47

Page 5: Le livre du design et de l'ergonomie pour le développeur

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

Page 6: Le livre du design et de l'ergonomie pour le développeur

Pourquoi pour le

développeur ?

Page 7: Le livre du design et de l'ergonomie pour le développeur

CONSTAT

Du webdesign au quotidien

Page 8: Le livre du design et de l'ergonomie pour le développeur

2 CAS DE FIGURE

VERSUS

Aucun designerAucun ergonome

Equipe avec designerEt ergonome

Page 9: Le livre du design et de l'ergonomie pour le développeur

Ce n’est pas votre faute !

Page 10: Le livre du design et de l'ergonomie pour le développeur

PLAN EN 2 ETAPES

1FONDAMENTAUXAvoir une culture design et ergo

2VERIFICATIONSTester votre travail avant de le livrer

Page 11: Le livre du design et de l'ergonomie pour le développeur

Fondamentaux

Page 12: Le livre du design et de l'ergonomie pour le développeur

LayoutCouleursTypo Ergonomie

Page 13: Le livre du design et de l'ergonomie pour le développeur

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

Page 14: Le livre du design et de l'ergonomie pour le développeur

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.

Page 15: Le livre du design et de l'ergonomie pour le développeur

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

Page 16: Le livre du design et de l'ergonomie pour le développeur

DEMO : Typographie et couleurs

Page 17: Le livre du design et de l'ergonomie pour le développeur

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

Page 18: Le livre du design et de l'ergonomie pour le développeur

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 !

Page 19: Le livre du design et de l'ergonomie pour le développeur

DEMO : Layout

Page 20: Le livre du design et de l'ergonomie pour le développeur

ERGONOMIE

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

VS

Page 21: Le livre du design et de l'ergonomie pour le développeur

ERGONOMIE

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

Page 22: Le livre du design et de l'ergonomie pour le développeur

ERGONOMIE

3Nombre de Miller7 (+/- 2)

Page 23: Le livre du design et de l'ergonomie pour le développeur

Vérifier votre travail

Page 24: Le livre du design et de l'ergonomie pour le développeur

1Issu de l’expérience Bewise

2 Utilisé par des dizaines de développeurs

OUTIL

Page 25: Le livre du design et de l'ergonomie pour le développeur

”“Vérifiez et améliorez

l’ergonomie de vos applications vous-même avec nos chucklists. Bewise Team

Page 26: Le livre du design et de l'ergonomie pour le développeur

DEMO : ChuckLists

Page 27: Le livre du design et de l'ergonomie pour le développeur

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.

Page 28: Le livre du design et de l'ergonomie pour le développeur

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

5min max

Gratuit

Satisfaction utilisateur

Page 29: Le livre du design et de l'ergonomie pour le développeur

Q/A Merci