• Introduction o Présentation o Objectifs de la conférence • La fin d’un mythe, le début d’une aventure o Le Design (UI, ergonomie, UX) o La nécessité pour les informaticiens de prendre en compte le Design • Les résistances o Les principales objections o La réalité du besoin • L’importance des interfaces utilisateur o Pourquoi sont-elles si importantes ? o Qu’est ce qui fait une bonne interface ? • Concepts fondateurs du Design • Le Design appliqués aux logiciels et sites Web o Connaître ses utilisateurs o L’utilisateur  Les buts de l’utilisateur  Les deux types d’utilisateurs  L’habileté  Les schémas directeurs  Les utilisateurs ne lisent rien ! o Cognitive Friction o Les “interfaces utilisateur” du monde réel o L’apprentissabilité (learnability) o L’utilisabilité o La clarté o La liberté d’action o L’universalité de ces concepts o Utiliser les bonnes métaphores • Metro, un langage de design à maîtriser o Metro sur WP7 • Conclusion

1. DES105 – 8 Fév. – 13h00
palais des
congrès
Paris
7, 8 et 9
février 2012

2. Concevoir des Interfaces
Utilisateur Efficaces &
Vendeuses
DES105
Mercredi 8 Février 2012
Olivier Dahan
Direction
MVP Silverlight 2012
MVP Silverlight 2011
MVP CAD 2010
MVP C# 2009

3. 60 minutes pour…
Comprendre ce qu’est le Design de logiciel
 Sa nature
 Ses méthodes
Comprendre comment se créent les bonnes UI
Comprendre que le Design n’est pas la cerise sur le gâteau mais une
partie non négociable du processus de création d’une application
moderne
Comprendre comment mieux planifier et intégrer le Design dans la
conception de vos logiciels
Comprendre le travail du Designer pour mieux gérer la collaboration
avec ce professionnel et vous éviter les déconvenues du syndrome du
« designer sapeur pompier ».
Le tout pour vous aider à concevoir des UI Efficaces et Vendeuses !
Ce que nous ne pourrons pas faire en 60 minutes :
 Vous transformez en Designer
 Vous formez à Expression Design et Blend
 Faire de vous un expert en UI et UX

4. Please…. Avant, pas après…
Binding View non
ViewModel
designée
String Activity TextBlock
"Active" "Inactive"
$$$ !
Binding View
ViewModel
designée
String Activity Animation
"Active" "Inactive" d’un UserControl
Bool Active
New/Old Properties,
Converters
ICommand , …

5. Objectif
Concevoir des UI efficaces et vendeuses
Efficaces
Rendre la tâche
plus aisée, rendre
l’utilisateur plus
intelligent, plus Vendeuses
habile
Savoir séduire
sur une
démo, savoir
plaire sur le long
terme
1er constat : UI efficace et vendeuse = Bonne UX !
Donc un bon Design !

6. Raisons
Rationnelles Commerciales
Seul lien entre le code et Battre la concurrence, Attirer le
l’utilisateur client, Créer le besoin
Romantiques Economiques
Art, Beauté, Séduction… Rentabilité, Meilleur ROI
Pratiques Stratégiques
Ergonomie, Rapidité d’exécution Image de marque, Fidélisation
des tâches, gain de temps des clients, Positionnement
médias, Obsolescence
programmée

7. Un nouveau paradigme
1976 : Algorithms + Data Structures = Program (Niklaus Wirth)
2012 : Design + Code = Application
« Un bon Design consiste en une
communication efficace, pas en décorations au
détriment de la lisibilité. »
Vitaly Friedman
« Un Design de qualité communique avec son
public. Il délivre le message qu’il est censé
diffuser. Rien de plus, rien de moins. »
Paul Scrivens

8. L’importance du Design
« Quand même votre concierge possède un IPhone vous
ne pouvez plus fournir de logiciels au look XP ! » - Olivier
Dahan.
Laquelle de ces UI vous fait peur, laquelle vous fait rêver ?
Pourquoi ?

9. Qu’est ce que le Design ?
« Le génie d’un bon Designer n’est pas défini par son habileté à
représenter le monde tel qu’il le voit, mais par son habilité entraînée à
le représenter comme les autres s’attendent à le voir. »
Nishant Kothary – MS – Creative Director Mix Online.

10. Sémantique & Syntaxe
Sémantique
 Le sens. La recherche du
sens de ce qui doit être
Designé
La Syntaxe
 Le contrôle de l’usage
correct de la grammaire
dans la construction des
phrases d’un langage, le
Design.
 Relation entre les grilles,
la structure générale, le
texte, les dessins.

11. Le Pragmatisme
Un projet parfait
sémantiquement et
syntaxiquement mais que
personne ne comprend est
un échec !
Approche réaliste
Chercher à informer plus
qu’à plaire
La clarté des intentions doit
s’imposer et les artefacts
doivent être auto-explicatifs.

12. La Pertinence
La recherche des racines de ce qu’on doit Designer amène à
définir le champ des solutions possibles qui sont appropriées.
La recherche de la spécificité de tout problème posé.
La pertinence guide le choix des couleurs, des formes, des
médias à utiliser, soit en les précisant directement soit en
permettant d’éliminer ceux qui, a contrario, ne sont pas
appropriés.
La pertinence est locale-sensitive, contextuelle, socio-
culturellement liée à la cible visée. Il n’y a pas de pertinence
absolue (sauf rares codes internationaux et trans-
générationnels comme « SOS »).

13. L’unité
Un bon Design reflète une unité D’un objet à l’autre, d’un écran
de concept. à l’autre, d’un bouton à
l’autre, cette unité d’aspect et
de comportement doit être
évidente.

14. La Puissance Visuelle
Nous aimons les Designs
visuellement
puissants Les Designs conceptuellement
faibles, aux formes, couleurs et textures
mal définies n’impressionnent pas, ne
marquent pas.
Il y a une infinité de
manières pour rendre une
expression puissante : jeu
de couleurs, d’échelles, de
fontes, de graisses…

15. L’Elégance intellectuelle
L’élégance intellectuelle n’a rien à
voir avec l’élégance des
manières.
C’est une force créatrice qu’on
retrouve dans les statues
grecques, les toiles de la
Renaissance, dans certains
théorèmes mathématiques, dans
des formules de physique comme
E=MC2
P.V = m.r.T

16. Le processus d’un bon Design
Empathie, Persona
s, Navigation, Feedback
Schémas commandes Papier, fak
users
directeurs.... e, Blend
réels, tests
Sketching
utilisabilité
Le
…
problème à
résoudre
Connaître Users Prototypage
Interaction Design Evalutation
Le Brief Rôles Spécifications &
Information Design Itération
Répartition
Rôles : contact Analyse Paysage Design visuel
client, user,
informatique « polish » Décisions.
Contenu tonalité, typos, Documenta
Contexte, conc application couleurs… tion
urrents, bonne
s
pratiques, term Divergence Convergence
inologie

17. Connaître les utilisateurs

18. Les buts de l’utilisateur
Il veut accomplir une ou plusieurs tâches
précises, le plus vite possible, le plus
simplement possible
L’utilisateur n’aime pas se sentir
« idiot », une bonne UI doit savoir le
guider en accord avec ses buts, sa
façon de pensée, de procéder.
(Sentiment de proximité, empathie).
Il faut connaître parfaitement ces tâches
pour proposer des méthodes originales et
Il est parfois « forcé » d’utiliser le
efficaces pour les réaliser
logiciel, autant atténuer le rejet…
S’il choisit lui-même : ne pas
décevoir son attente !
Dans tous les cas il faut bien connaître
chaque profil d’utilisateur pour répondre à
ses besoins…

19. Les Personas
Personne fictive qui représente un groupe cible.
Lors de la création on lui assigne des attributs (âge, sexe,
métier, hobbies…)
Cela permet de créer des scénarios d’utilisation (qu’on
retrouvera en miroir généralement dans les Use Cases
UML) en accord avec le public visé.
Très utilisé pour l’amélioration de l’ergonomie des logiciels
et des sites Web.
Utilisé aussi pour la stratégie de promotion, le marketing
afin que application + promotion soient en cohérence

20. Exemple de Persona
Nom: Caroline Dupond
Sexe: F
Prof: Directrice des ventes
Fam.: Mère de famille active, 2 enfants
Note: Utilise souvent la fonction loupe de son
PC
pour afficher ce qui l’intéresse en plus
Caroline Dupond est à la foisgros.
une mère de famille vivant en banlieue et une directrice des ventes d’une
société d’informatique. Elle partage son temps entre sa lunettes. travail et des week-ends de loisir en
Porte des semaine au
famille : balades en vélo avec ses enfants, manifestations sportives, et quelques fois des repas seule avec
son mari dans des restaurants de la capitale avant ou après avoir assisté à une pièce de théâtre, plus
rarement un film .
Caroline mène une vie active, mais sans une suite d’assistants technologiques, elle ne serait pas en mesure
de percevoir les expressions sur les visages de ses enfants, lire un menu de restaurant, ou un e-mail.
Caroline à une vision assez mauvaise, à la limite du handicap.
Née avec une vision dégradée, Allison utilise un agrandisseur d'écran sur son ordinateur portable et une
loupe pour lire les menus et les signes. Son logiciel de grossissement d'écran agrandit son écran d'ordinateur
à la maison et au travail, lui permettant de lire un texte et voir les images. Elle s'appuie également sur un
lecteur d'écran pour lire le texte à haute voix, ce qui réduit également la fatigue oculaire et des maux de tête.
Cette combinaison de produits améliore les différents aspects de la vie personnelle et professionnelle de
Caroline, lui permettant de se concentrer sur ce qui importe le plus, comme le visage de sa fille quand elle
explose de joie à Noël en découvrant ses cadeaux.

21. L’habileté
Débutant pendant un temps assez court, l’utilisateur
s’arrêtera aux solutions qu’il a trouvé sans plus jamais
cherché plus loin.
Seul un petit nombre ira plus loin. Les « power users ».
La majorité des utilisateurs seront dans la moyenne
(distribution gaussienne).
Exception : Les applications publiques (type annuaire,
distributeur de billet) et les applications non choisies et
que l’utilisateur n’aime pas - La majorité des utilisateurs
ne fera AUCUN effort pour comprendre et rejettera la
faute sur le système…

22. Les schéma directeurs
Approche du logiciel en fonction d’a
priori personnels, sociaux, culturels,
de réflexes, de schémas directeurs qui
dépendent des connaissances
passées relatives au domaine du
problème traité par l’application.
L’utilisateur va s’attendre à
ce que l’application suive
certains modèles, un certain
schéma de fonctionnement.

23. Cognitive Friction
Défini par Alan Cooper dans son 2d livre en 98 « the inmates are
running the asylum : why High-Tech product drive us crazy and
how to restore the sanity ».
“la friction cognitive est la résistance rencontrée par
l’intellect humain quand il est confronté à un système
complexe de règles qui changent en même temps que
le problème évolue”.
Une Règle : si l’utilisateur n’y comprend rien c’est que votre interface
est bonne à jeter, c’est aussi simple que ça…
Exemples :
 Menu « démarrer » pour arrêter Windows XP
 Plus de « croix » pour fermer les applis sous Windows 8
 Le Menu « démarrer » type Windows 7 de Windows 8 qui n’ouvre pas de
menu et qui renvoie sur le menu Metro Style…
 Table de caractères de Windows qui donne un code abscons et non le ALT-
xxx qui permettrait de s’en servir…
 Le dialogue de conflit de fichier à la copie de Vista/7, incompréhensible…

24. Pour le plaisir…

25. On en trouve partout !

26. Sur la piste d’une bonne UX

27. « L’apprentissabilité »
(learnability)
Question essentielle à se poser :
 L’utilisateur peut-il rapidement découvrir l’application et
apprendre à s’en servir efficacement ?
Ne pas confondre avec la 1ère impression qui est souvent
trompeuse grâce à un design accrocheur.
Cela se mesure avec des panels d’utilisateurs testeurs et
des choix d’UI différents.
Si vous ne pouvez pas réunir
un panel même restreint
d’utilisateurs pour tester vos
UI : arrêter la conception
de logiciels…

28. L’Utilisabilité
Le degré d’intuitivité et de productivité de l’UI
Cela se mesure aussi
 Assigner un tâcher à réaliser, chronométrer. Changer
l’UI et recommencer. Choisir la meilleure !
Une haute « utilisabilité » permet aux utilisateurs
d’effectuer toutes les tâches courantes directement, sans
détour.
Utilisabilité <>Apprentissabilité
Les bêta sont un moyen gratuit pour les éditeurs de
remplacer un large panel d’utilisateurs testeurs…

29. La Clarté
Clarté, lisibilité, priorité à l’information, c’est l’essentiel
d’une UI réussie et d’une bonne UX.
Viser une conception « pacifiée », « calme ». Metro Style
est un bon exemple.
Objets aux formes douces, simples, reconnaissables que
l’œil repère, trie facilement, des fontes lisibles, jeu sur les
tailles sans mélanger plusieurs fontes
Création de groupes visuels qui respectent la sémantique.
Une règle : se concentrer sur la clarté plutôt qu’ajouter
des infobulles car l’UI n’est pas claire…

30. La liberté d’action
Souplesse réelle, l’utilisateur ne doit pas se sentir
« piégé » dans un choix, une procédure.
Le retour en arrière doit être évident
Le droit à l’erreur est essentiel
Guider sans limiter
Ne pas proposer de choix qui ne sont pas de la
compétence de l’utilisateur
Proposer des choix par défauts, masquer certaines
options en fonction du profil de l’utilisateur
=> une fois encore : Bien connaître les utilisateurs !

31. Utiliser les bonnes métaphores
Les métaphores sont essentielles : elles font venir le
monde réel de l’utilisateur dans l’espace du logiciel
Une métaphore réussie supprime le besoin d’un
libellé, d’une bulle d’aide, elle participe à la clarté, à la
lisibilité, à la mise en avant de l’information.
La plus célèbre : la corbeille (Mac et PC)
La notion de « bureau », de
« dossier », « répertoire », « document », ce sont des
métaphores tellement évidentes qu’on a du mal à en sortir
(les tuiles de Windows 8 arriveront-elles à détrôner la
notion de bureau ?)
Attention : elles sont culturelles ! Dans le doute mieux vaut
un texte qu’une métaphore dessinée ou filmée (non
localisable).

32. Ne pas abuser des métaphores
!Les métaphores hyperréalistes ne sont pas forcément les meilleures

33. Design en action

34. Exemple
Des outils de surveillance de NAS
VB + Windows Forms

35. Exemple designé
ReadyNasMonitor (E-Naxos, WPF)

36. Exemple designé avec
métaphores

37. Console Silverlight

38. Autres conférences
• Le livre de recette du design et de l'ergonomie pour le développeur (DES101)
• Mise en pratique de l'ergonomie et du design sur un exemple concret : Mishra
reader (DES201)
• Au cœur d'un projet Kinect innovant (DES202)
• 2012 : les utilisateurs prennent le pouvoir ? (KEY202)
• Blend 4 pour les Designers (et pour les développeurs) (DES203)
• Retour d'expérience sur la conception et la construction d'une application
METRO pour WP7 (DES103)

39. Merci de votre participation !
Questions ?
Contact : odahan@gmail.com
Dot Blog : www.e-naxos.com/blog

40. Pour aller plus loin
Prochaines sessions des Dev Camps
Chaque semaine, les 10
Live Open Data - Développer des applications riches avec le
février
DevCamps 2012
16
Meeting protocole Open Data
ALM, Azure, Windows Phone, HTML5, OpenData février
Live
Meeting
Azure series - Développer des applications sociales sur
la plateforme Windows Azure
2012
http://msdn.microsoft.com/fr-fr/devcamp
17
Live Comprendre le canvas avec Galactic et la librairie
février
Meeting three.js
2012
Téléchargement, ressources 21
février
Live La production automatisée de code avec CodeFluent
Meeting Entities
et toolkits : RdV sur MSDN 2012
2 mars Live Comprendre et mettre en oeuvre le toolkit Azure pour
http://msdn.microsoft.com/fr-fr/ 2012 Meeting Windows Phone 7, iOS et Android
6 mars Live
Nuget et ALM
2012 Meeting
Les offres à connaître 9 mars
2012
Live
Meeting
Kinect - Bien gérer la vie de son capteur
90 jours d’essai gratuit de Windows 13 mars
2012
Live
Meeting
Sharepoint series - Automatisation des tests
Azure 14 mars Live TFS Health Check - vérifier la bonne santé de votre
www.windowsazure.fr 2012 Meeting plateforme de développement
15 mars Live Azure series - Développer pour les téléphones, les
2012 Meeting tablettes et le cloud avec Visual Studio 2010
Jusqu’à 35% de réduction sur Visual 16 mars Live Applications METRO design - Désossage en règle d'un
Studio Pro, avec l’abonnement MSDN 2012 Meeting template METRO javascript
20 mars Live Retour d'expérience LightSwitch, Optimisation de
www.visualstudio.fr 2012 Meeting l'accès aux données, Intégration Silverlight
23 mars Live OAuth - la clé de l'utilisation des réseaux sociaux dans
2012 Meeting votre application