DES105 – 8 Fév. – 13h00                   palais des                   congrès                   Paris                   7...
Concevoir des InterfacesUtilisateur Efficaces &VendeusesDES105Mercredi 8 Février 2012Olivier DahanDirection               ...
60 minutes pour…  Comprendre ce qu’est le Design de logiciel     Sa nature     Ses méthodes  Comprendre comment se créen...
Please…. Avant, pas après…                                        Binding               View non       ViewModel          ...
ObjectifConcevoir des UI efficaces et vendeusesEfficacesRendre la tâcheplus aisée, rendrel’utilisateur plusintelligent, pl...
Raisons         Rationnelles                            Commerciales   Seul lien       entre   le   code   et   Battre la ...
Un nouveau paradigme  1976 : Algorithms + Data Structures = Program (Niklaus Wirth)  2012 : Design + Code = Application  «...
L’importance du Design« Quand même votre concierge possède un IPhone vousne pouvez plus fournir de logiciels au look XP ! ...
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’i...
Sémantique & Syntaxe  Sémantique    Le sens. La recherche du     sens de ce qui doit être     Designé  La Syntaxe    Le ...
Le Pragmatisme  Un projet parfait  sémantiquement et  syntaxiquement mais que  personne ne comprend est  un échec !  Appro...
La Pertinence  La recherche des racines de ce qu’on doit Designer amène à  définir le champ des solutions possibles qui so...
L’unitéUn bon Design reflète une unité   D’un objet à l’autre, d’un écrande concept.                       à l’autre, d’un...
La Puissance VisuelleNous aimons les Designsvisuellementpuissants                 Les       Designs      conceptuellement ...
L’Elégance intellectuelle          L’élégance intellectuelle n’a rien à          voir    avec     l’élégance      des     ...
Le processus d’un bon Design                  Empathie, Persona                          s,               Navigation,     ...
Connaître les utilisateurs
Les buts de l’utilisateurIl veut accomplir une ou plusieurs tâchesprécises, le plus vite possible, le plussimplement possi...
Les Personas  Personne fictive qui représente un groupe cible.  Lors de la création on lui assigne des attributs (âge, sex...
Exemple de Persona                              Nom:        Caroline Dupond                              Sexe:       F    ...
L’habileté  Débutant pendant un temps assez court, l’utilisateur  s’arrêtera aux solutions qu’il a trouvé sans plus jamais...
Les schéma directeurs Approche du logiciel en fonction d’a priori personnels, sociaux, culturels, de réflexes, de schémas ...
Cognitive Friction Défini par Alan Cooper dans son 2d livre en 98 « the inmates are running the asylum : why High-Tech pro...
Pour le plaisir…
On en trouve partout !
Sur la piste d’une bonne UX
« L’apprentissabilité »(learnability)  Question essentielle à se poser :    L’utilisateur peut-il rapidement découvrir l’...
L’Utilisabilité   Le degré d’intuitivité et de productivité de l’UI   Cela se mesure aussi     Assigner un tâcher à réali...
La Clarté  Clarté, lisibilité, priorité à l’information, c’est l’essentiel  d’une UI réussie et d’une bonne UX.  Viser une...
La liberté d’action  Souplesse réelle, l’utilisateur ne doit pas se sentir  « piégé » dans un choix, une procédure.  Le re...
Utiliser les bonnes métaphores  Les métaphores sont essentielles : elles font venir le  monde réel de l’utilisateur dans l...
Ne pas abuser des métaphores!Les métaphores hyperréalistes ne sont pas forcément les meilleures
Design en action
Exemple          Des outils de surveillance de NAS               VB + Windows Forms
Exemple designé           ReadyNasMonitor (E-Naxos, WPF)
Exemple designé avecmétaphores
Console Silverlight
Autres conférences• Le livre de recette du design et de lergonomie pour le développeur (DES101)• Mise en pratique de lergo...
Merci de votre participation !  Questions ?Contact :         odahan@gmail.comDot Blog :        www.e-naxos.com/blog
Pour aller plus loin                                               Prochaines sessions des Dev Camps  Chaque semaine, les ...
Prochain SlideShare
Chargement dans…5
×

Concevoir des Interfaces Utilisateur efficaces et vendeuses

405 vues

Publié le

• 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

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
405
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1
Actions
Partages
0
Téléchargements
14
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Concevoir des Interfaces Utilisateur efficaces et vendeuses

  1. 1. DES105 – 8 Fév. – 13h00 palais des congrès Paris 7, 8 et 9 février 2012
  2. 2. Concevoir des InterfacesUtilisateur Efficaces &VendeusesDES105Mercredi 8 Février 2012Olivier DahanDirection MVP Silverlight 2012 MVP Silverlight 2011 MVP CAD 2010 MVP C# 2009
  3. 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. 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. 5. ObjectifConcevoir des UI efficaces et vendeusesEfficacesRendre la tâcheplus aisée, rendrel’utilisateur plusintelligent, plus Vendeuseshabile 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. 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. 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. 8. L’importance du Design« Quand même votre concierge possède un IPhone vousne pouvez plus fournir de logiciels au look XP ! » - OlivierDahan. Laquelle de ces UI vous fait peur, laquelle vous fait rêver ? Pourquoi ?
  9. 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. 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. 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. 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. 13. L’unitéUn bon Design reflète une unité D’un objet à l’autre, d’un écrande concept. à l’autre, d’un bouton à l’autre, cette unité d’aspect et de comportement doit être évidente.
  14. 14. La Puissance VisuelleNous aimons les Designsvisuellementpuissants 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. 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. 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épartitionRôles : contact Analyse Paysage Design visuel client, user, informatique « polish » Décisions. Contenu tonalité, typos, DocumentaContexte, conc application couleurs… tionurrents, bonne spratiques, term Divergence Convergence inologie
  17. 17. Connaître les utilisateurs
  18. 18. Les buts de l’utilisateurIl veut accomplir une ou plusieurs tâchesprécises, le plus vite possible, le plussimplement 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âchespour proposer des méthodes originales et Il est parfois « forcé » d’utiliser leefficaces 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îtrechaque profil d’utilisateur pour répondre àses besoins…
  19. 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. 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 plusCaroline Dupond est à la foisgros. une mère de famille vivant en banlieue et une directrice des ventes d’unesociété d’informatique. Elle partage son temps entre sa lunettes. travail et des week-ends de loisir en Porte des semaine aufamille : balades en vélo avec ses enfants, manifestations sportives, et quelques fois des repas seule avecson mari dans des restaurants de la capitale avant ou après avoir assisté à une pièce de théâtre, plusrarement un film .Caroline mène une vie active, mais sans une suite d’assistants technologiques, elle ne serait pas en mesurede 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 uneloupe pour lire les menus et les signes. Son logiciel de grossissement décran agrandit son écran dordinateurà la maison et au travail, lui permettant de lire un texte et voir les images. Elle sappuie également sur unlecteur 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 deCaroline, lui permettant de se concentrer sur ce qui importe le plus, comme le visage de sa fille quand elleexplose de joie à Noël en découvrant ses cadeaux.
  21. 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. 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. 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. 24. Pour le plaisir…
  25. 25. On en trouve partout !
  26. 26. Sur la piste d’une bonne UX
  27. 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. 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. 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. 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. 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. 32. Ne pas abuser des métaphores!Les métaphores hyperréalistes ne sont pas forcément les meilleures
  33. 33. Design en action
  34. 34. Exemple Des outils de surveillance de NAS VB + Windows Forms
  35. 35. Exemple designé ReadyNasMonitor (E-Naxos, WPF)
  36. 36. Exemple designé avecmétaphores
  37. 37. Console Silverlight
  38. 38. Autres conférences• Le livre de recette du design et de lergonomie pour le développeur (DES101)• Mise en pratique de lergonomie et du design sur un exemple concret : Mishra reader (DES201)• Au cœur dun projet Kinect innovant (DES202)• 2012 : les utilisateurs prennent le pouvoir ? (KEY202)• Blend 4 pour les Designers (et pour les développeurs) (DES203)• Retour dexpérience sur la conception et la construction dune application METRO pour WP7 (DES103)
  39. 39. Merci de votre participation ! Questions ?Contact : odahan@gmail.comDot Blog : www.e-naxos.com/blog
  40. 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 dun Studio Pro, avec l’abonnement MSDN 2012 Meeting template METRO javascript 20 mars Live Retour dexpérience LightSwitch, Optimisation de www.visualstudio.fr 2012 Meeting laccès aux données, Intégration Silverlight 23 mars Live OAuth - la clé de lutilisation des réseaux sociaux dans 2012 Meeting votre application

×