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