Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Concevoir des Interfaces Utilisateur efficaces et vendeuses

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 40 Publicité

Concevoir des Interfaces Utilisateur efficaces et vendeuses

Télécharger pour lire hors ligne

• 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

• 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

Publicité
Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

Similaire à Concevoir des Interfaces Utilisateur efficaces et vendeuses (20)

Publicité

Plus par Microsoft (20)

Plus récents (20)

Publicité

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 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. 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. 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. 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 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. 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 écran de concept. à l’autre, d’un bouton à l’autre, cette unité d’aspect et de comportement doit être évidente.
  14. 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. 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é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. 17. Connaître les utilisateurs
  18. 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. 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 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. 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é avec métaphores
  37. 37. Console Silverlight
  38. 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. 39. Merci de votre participation ! Questions ? Contact : odahan@gmail.com Dot 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 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

×