1. DES105 8 Fv. 13h00 palais des congrs Paris 7, 8 et 9 fvrier 2012

2. Concevoir des InterfacesUtilisateur Efficaces &VendeusesDES105Mercredi 8 Fvrier 2012Olivier DahanDirectionMVP Silverlight 2012MVP Silverlight 2011MVP CAD 2010MVP C# 2009 3. 60 minutes pourComprendre ce quest le Design de logiciel Sa nature Ses mthodesComprendre comment se crent les bonnes UIComprendre que le Design nest pas la cerise sur le gteau mais unepartie non ngociable du processus de cration dune applicationmoderneComprendre comment mieux planifier et intgrer le Design dans laconception de vos logicielsComprendre le travail du Designer pour mieux grer la collaborationavec ce professionnel et vous viter les dconvenues 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 aprsBinding View non ViewModeldesigneString Activity TextBlock"Active" "Inactive"$$$ !Binding View ViewModeldesigneString Activity Animation"Active" "Inactive"dun UserControl Bool ActiveNew/Old Properties,ConvertersICommand , 5. ObjectifConcevoir des UI efficaces et vendeusesEfficacesRendre la tcheplus aise, rendrelutilisateur plusintelligent, plus Vendeuseshabile Savoir sduire sur une dmo, savoir plaire sur le long terme1er constat : UI efficace et vendeuse = Bonne UX ! Donc un bon Design ! 6. Raisons RationnellesCommerciales Seul lien entre le code et Battre la concurrence, Attirer le lutilisateurclient, Crer le besoin Romantiques Economiques Art, Beaut, SductionRentabilit, Meilleur ROI Pratiques Stratgiques Ergonomie, Rapidit dexcutionImage de marque, Fidlisation des tches, gain de tempsdesclients, Positionnementmdias,Obsolescenceprogramme 7. Un nouveau paradigme1976 : Algorithms + Data Structures = Program (Niklaus Wirth)2012 : Design + Code = Application Un bon Design consiste en unecommunication efficace, pas en dcorations audtriment de la lisibilit. Vitaly Friedman Un Design de qualit communique avec son public. Il dlivre le message quil est cens diffuser. Rien de plus, rien de moins. Paul Scrivens 8. Limportance du Design Quand mme votre concierge possde un IPhone vousne pouvez plus fournir de logiciels au look XP ! - OlivierDahan.Laquelle de ces UI vous fait peur, laquelle vous fait rver ? Pourquoi ? 9. Quest ce que le Design ? Le gnie dun bon Designer nest pas dfini par son habilet reprsenter le monde tel quil le voit, mais par son habilit entrane le reprsenter comme les autres sattendent le voir. Nishant Kothary MS Creative Director Mix Online. 10. Smantique & SyntaxeSmantique Le sens. La recherche du sens de ce qui doit tre DesignLa Syntaxe Le contrle de lusage correct de la grammaire dans la construction des phrases dun langage, le Design. Relation entre les grilles, la structure gnrale, le texte, les dessins. 11. Le PragmatismeUn projet parfaitsmantiquement etsyntaxiquement mais quepersonne ne comprend estun chec !Approche ralisteChercher informer plusqu plaireLa clart des intentions doitsimposer et les artefactsdoivent tre auto-explicatifs. 12. La PertinenceLa recherche des racines de ce quon doit Designer amne dfinir le champ des solutions possibles qui sont appropries.La recherche de la spcificit de tout problme pos.La pertinence guide le choix des couleurs, des formes, desmdias utiliser, soit en les prcisant directement soit enpermettant dliminer ceux qui, a contrario, ne sont pasappropris.La pertinence est locale-sensitive, contextuelle, socio-culturellement lie la cible vise. Il ny a pas de pertinenceabsolue (sauf rares codes internationaux et trans-gnrationnels comme SOS ). 13. LunitUn bon Design reflte une unit Dun objet lautre, dun crande concept. lautre, dun bouton lautre, cette unit daspect etde comportement doit trevidente. 14. La Puissance VisuelleNous aimons les Designsvisuellementpuissants Les Designsconceptuellementfaibles, aux formes, couleurs et texturesmal dfinies nimpressionnent pas, nemarquent pas.Il y a une infinit demanires pour rendre uneexpression puissante : jeude couleurs, dchelles, defontes, de graisses 15. LElgance intellectuelleLlgance intellectuelle na rien voiravec llgancedesmanires.Cest une force cratrice quonretrouvedanslesstatuesgrecques, les toiles de laRenaissance, dans certainsthormes mathmatiques, dansdes formules de physique commeE=MC2 P.V = m.r.T 16. Le processus dun bon DesignEmpathie, Personas, Navigation,Feedback Schmas commandes Papier, fakusersdirecteurs....e, Blend rels, tests Sketching utilisabilit Le problme rsoudreConnatre Users PrototypageInteraction Design EvalutationLe BriefRlesSpcifications & Information Design ItrationRpartitionRles : contact Analyse Paysage Design visuelclient, user, informatique polish Dcisions.Contenu tonalit, typos, DocumentaContexte, conc applicationcouleurs tionurrents, bonnespratiques, term DivergenceConvergenceinologie 17. Connatre les utilisateurs 18. Les buts de lutilisateurIl veut accomplir une ou plusieurs tchesprcises, le plus vite possible, le plussimplement possibleLutilisateur naime pas se sentir idiot , une bonne UI doit savoir leguider en accord avec ses buts, safaon de pense, de procder.(Sentiment de proximit, empathie).Il faut connatre parfaitement ces tchespour proposer des mthodes originales etIl est parfois forc dutiliser leefficaces pour les raliserlogiciel, autant attnuer le rejetSil choisit lui-mme : ne pasdcevoir son attente !Dans tous les cas il faut bien connatrechaque profil dutilisateur pour rpondre ses besoins 19. Les PersonasPersonne fictive qui reprsente un groupe cible.Lors de la cration on lui assigne des attributs (ge, sexe,mtier, hobbies)Cela permet de crer des scnarios dutilisation (quonretrouvera en miroir gnralement dans les Use CasesUML) en accord avec le public vis.Trs utilis pour lamlioration de lergonomie des logicielset des sites Web.Utilis aussi pour la stratgie de promotion, le marketingafin que application + promotion soient en cohrence 20. Exemple de PersonaNom:Caroline DupondSexe: FProf: Directrice des ventesFam.: Mre de famille active, 2 enfantsNote: Utilise souvent la fonction loupe de sonPCpour afficher ce qui lintresse en plusCaroline Dupond est la foisgros. une mre de famille vivant en banlieue et une directrice des ventes dunesocit dinformatique. Elle partage son temps entre sa lunettes. travail et des week-ends de loisir enPorte des semaine aufamille : balades en vlo avec ses enfants, manifestations sportives, et quelques fois des repas seule avecson mari dans des restaurants de la capitale avant ou aprs avoir assist une pice de thtre, plusrarement un film .Caroline mne une vie active, mais sans une suite dassistants 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.Ne avec une vision dgrade, Allison utilise un agrandisseur dcran sur son ordinateur portable et uneloupe pour lire les menus et les signes. Son logiciel de grossissement dcran agrandit son cran dordinateur la maison et au travail, lui permettant de lire un texte et voir les images. Elle sappuie galement sur unlecteur dcran pour lire le texte haute voix, ce qui rduit galement la fatigue oculaire et des maux de tte.Cette combinaison de produits amliore les diffrents 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 Nol en dcouvrant ses cadeaux. 21. LhabiletDbutant pendant un temps assez court, lutilisateursarrtera aux solutions quil a trouv sans plus jamaischerch 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 etque lutilisateur naime pas - La majorit des utilisateursne fera AUCUN effort pour comprendre et rejettera lafaute sur le systme 22. Les schma directeurs Approche du logiciel en fonction da priori personnels, sociaux, culturels, de rflexes, de schmas directeurs qui dpendent desconnaissances passes relatives au domaine du problme trait par lapplication.Lutilisateur va sattendre ce que lapplication suivecertains modles, un certainschma de fonctionnement. 23. Cognitive Friction Dfini 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 rsistance rencontre parlintellect humain quand il est confront un systmecomplexe de rgles qui changent en mme temps quele problme volue. Une Rgle : si lutilisateur ny comprend rien cest que votre interface est bonne jeter, cest aussi simple que a Exemples : Menu dmarrer pour arrter Windows XP Plus de croix pour fermer les applis sous Windows 8 Le Menu dmarrer type Windows 7 de Windows 8 qui nouvre pas demenu et qui renvoie sur le menu Metro Style Table de caractres de Windows qui donne un code abscons et non le ALT-xxx qui permettrait de sen servir Le dialogue de conflit de fichier la copie de Vista/7, incomprhensible 24. Pour le plaisir 25. On en trouve partout ! 26. Sur la piste dune bonne UX 27. Lapprentissabilit (learnability)Question essentielle se poser : Lutilisateur peut-il rapidement dcouvrir lapplication etapprendre sen servir efficacement ?Ne pas confondre avec la 1re impression qui est souventtrompeuse grce un design accrocheur.Cela se mesure avec des panels dutilisateurs testeurs etdes choix dUI diffrents.Si vous ne pouvez pas runirun panel mme restreintdutilisateurs pour tester vosUI : arrter la conceptionde logiciels 28. LUtilisabilit Le degr dintuitivit et de productivit de lUI Cela se mesure aussi Assigner un tcher raliser, chronomtrer. Changer lUI et recommencer. Choisir la meilleure ! Une haute utilisabilit permet aux utilisateurs deffectuer toutes les tches courantes directement, sans dtour. Utilisabilit Apprentissabilit Les bta sont un moyen gratuit pour les diteurs de remplacer un large panel dutilisateurs testeurs 29. La ClartClart, lisibilit, priorit linformation, cest lessentieldune UI russie et dune bonne UX.Viser une conception pacifie , calme . Metro Styleest un bon exemple.Objets aux formes douces, simples, reconnaissables quelil repre, trie facilement, des fontes lisibles, jeu sur lestailles sans mlanger plusieurs fontesCration de groupes visuels qui respectent la smantique.Une rgle : se concentrer sur la clart plutt quajouterdes infobulles car lUI nest pas claire 30. La libert dactionSouplesse relle, lutilisateur ne doit pas se sentir pig dans un choix, une procdure.Le retour en arrire doit tre videntLe droit lerreur est essentielGuider sans limiterNe pas proposer de choix qui ne sont pas de lacomptence de lutilisateurProposer des choix par dfauts, masquer certainesoptions en fonction du profil de lutilisateur=> une fois encore : Bien connatre les utilisateurs ! 31. Utiliser les bonnes mtaphoresLes mtaphores sont essentielles : elles font venir lemonde rel de lutilisateur dans lespace du logicielUne mtaphore russie supprime le besoin dunlibell, dune bulle daide, elle participe la clart, lalisibilit, la mise en avant de linformation.La plus clbre : la corbeille (Mac et PC)La notion de bureau , de dossier , rpertoire , document , ce sont desmtaphores tellement videntes quon a du mal en sortir(les tuiles de Windows 8 arriveront-elles dtrner lanotion de bureau ?)Attention : elles sont culturelles ! Dans le doute mieux vautun texte quune mtaphore dessine ou filme (nonlocalisable). 32. Ne pas abuser des mtaphores!Les mtaphores hyperralistes ne sont pas forcment les meilleures 33. Design en action 34. ExempleDes outils de surveillance de NAS VB + Windows Forms 35. Exemple design ReadyNasMonitor (E-Naxos, WPF) 36. Exemple design avecmtaphores 37. Console Silverlight 38. Autres confrences Le livre de recette du design et de lergonomie pour le dveloppeur (DES101) Mise en pratique de lergonomie et du design sur un exemple concret : Mishrareader (DES201) Au cur dun projet Kinect innovant (DES202) 2012 : les utilisateurs prennent le pouvoir ? (KEY202) Blend 4 pour les Designers (et pour les dveloppeurs) (DES203) Retour dexprience sur la conception et la construction dune applicationMETRO pour WP7 (DES103) 39. Merci de votre participation !Questions ?Contact : odahan@gmail.comDot Blog :www.e-naxos.com/blog 40. Pour aller plus loin Prochaines sessions des Dev CampsChaque semaine, les10Live Open Data - Dvelopper des applications riches avec le fvrierDevCamps2012 16 Meeting protocole Open DataALM, Azure, Windows Phone, HTML5, OpenData fvrierLive Meeting Azure series - Dvelopper des applications sociales sur la plateforme Windows Azure2012http://msdn.microsoft.com/fr-fr/devcamp 17Live Comprendre le canvas avec Galactic et la librairie fvrier Meeting three.js2012Tlchargement, ressources 21 fvrierLive La production automatise de code avec CodeFluent Meeting Entitieset toolkits : RdV sur MSDN2012 2 mars Live Comprendre et mettre en oeuvre le toolkit Azure pourhttp://msdn.microsoft.com/fr-fr/2012 Meeting Windows Phone 7, iOS et Android 6 mars Live Nuget et ALM2012 MeetingLes offres connatre 9 mars2012Live Meeting Kinect - Bien grer la vie de son capteur 90 jours dessai gratuit de Windows 13 mars2012Live Meeting Sharepoint series - Automatisation des tests Azure 14 marsLive TFS Health Check - vrifier la bonne sant de votrewww.windowsazure.fr 2012 Meeting plateforme de dveloppement 15 marsLive Azure series - Dvelopper pour les tlphones, les2012 Meeting tablettes et le cloud avec Visual Studio 2010 Jusqu 35% de rduction sur Visual 16 marsLive Applications METRO design - Dsossage en rgle dun Studio Pro, avec labonnement MSDN 2012 Meeting template METRO javascript 20 marsLive Retour dexprience LightSwitch, Optimisation dewww.visualstudio.fr 2012 Meeting laccs aux donnes, Intgration Silverlight 23 marsLive OAuth - la cl de lutilisation des rseaux sociaux dans2012 Meeting votre application