View
234
Download
0
Category
Preview:
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 BewiseDesign
Consultant, Spécialiste UX
Toulouse Stand 47
@cmaneu maneu.net
Christopher Maneu
Directeur Projet
Consultant, 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
CONSTAT
Du webdesign au quotidien
2 CAS DE FIGURE
Aucun designerAucun ergonome
Equipe avec designerEt ergonome
Ce n’est pas votre faute !
PLAN EN 2 ETAPES
1 FONDAMENTAUXAvoir une culture design et ergo
2 VERIFICATIONSTester 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)
2 Serif / Sans SerifChoisissez Sans Serif pour un look résolument moderne
3 GrasseLe contraste d’un simple clic
TYPOGRAPHIE
4 L’espacementAjustez vos textes par rapport à la mise en page avec les
différents espacements
5 Glyphs et alphabetsToutes les polices ne naissent pas égales.
COULEURS
1 Ne les choisissez pas vous mêmeVous risquez une fracture de l’œil
2 Créez des teintesNe multipliez pas le nombre de couleurs, utilisez des teintes
DEMO : Typographie et couleurs
LAYOUT
1 ContrasteSi des éléments sont différents, différenciez les
2 RépétitionCréez une unité en répétant une caractéristique visuelle
3 AlignementGuidez l’œil de l’utilisateur en alignant les éléments
4 ProximitéRegroupez les éléments de même sens, séparez les autres
Une bonne organisation
Cela tient en 3 étapes
1. Connaissez les règles
Elles sont très simples
2. Remarquez leurs absences
Il faut être en mesure de formuler le
problème
3. Appliquer ces règles
Vous allez être surpris du résultat !
Une bonne organisationen 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 Appliquez ces principesVous allez être surpris du résultat !
DEMO : Layout
ERGONOMIE
1 AffordanceCaractère intrinsèque d’un objet à nous renseigner sur sa fonction
2 Loi de FittsPlus c’est grand et proche, plus c’est facile à cliquer
3 Nombre de Miller7 (+/- 2)
VS
Vérifier votre travail
1 Issu 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 champ
Devez-vous demander confirmation à l’utilisateur? Pour
une action fréquente offrez un undo, pour le reste faites
le.
1
2
3
4
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
MeetingNuget et ALM
9 mars
2012
Live
MeetingKinect - Bien gérer la vie de son capteur
13 mars
2012
Live
MeetingSharepoint 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
Recommended