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