le livre du design et de l'ergonomie pour le développeur
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.TRANSCRIPT
![Page 1: Le livre du design et de l'ergonomie pour le développeur](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/1.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/2.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/3.jpg)
@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](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/4.jpg)
@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](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/5.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/6.jpg)
Pourquoi pour le
développeur ?
![Page 7: Le livre du design et de l'ergonomie pour le développeur](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/7.jpg)
CONSTAT
Du webdesign au quotidien
![Page 8: Le livre du design et de l'ergonomie pour le développeur](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/8.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/9.jpg)
Ce n’est pas votre faute !
![Page 10: Le livre du design et de l'ergonomie pour le développeur](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/10.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/11.jpg)
Fondamentaux
![Page 12: Le livre du design et de l'ergonomie pour le développeur](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/12.jpg)
LayoutCouleursTypo Ergonomie
![Page 13: Le livre du design et de l'ergonomie pour le développeur](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/13.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/14.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/15.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/16.jpg)
DEMO : Typographie et couleurs
![Page 17: Le livre du design et de l'ergonomie pour le développeur](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/17.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/18.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/19.jpg)
DEMO : Layout
![Page 20: Le livre du design et de l'ergonomie pour le développeur](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/20.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/21.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/22.jpg)
ERGONOMIE
3Nombre de Miller7 (+/- 2)
![Page 23: Le livre du design et de l'ergonomie pour le développeur](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/23.jpg)
Vérifier votre travail
![Page 24: Le livre du design et de l'ergonomie pour le développeur](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/24.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/25.jpg)
”“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](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/26.jpg)
DEMO : ChuckLists
![Page 27: Le livre du design et de l'ergonomie pour le développeur](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/27.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/28.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022070321/558de6251a28abe2428b477e/html5/thumbnails/29.jpg)
Q/A Merci