Upload
chantal-poulet
View
109
Download
4
Embed Size (px)
Citation preview
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