1. Confrence prsentele 25 Octobre 2012.CYNTHIASAVARD SAUCIERErgonome@CynthiaSavard@TP1L effet Cupcake Ou comment la bonne utilisation des tendances peut transformer un site muffin en site cupcake ?

2. Attention!Uiliser une tendance simplement pourse vanter de lavoir utilise, cestdangereux et coteux! 3. Quelle est la direnceentre un mun et uncupcake? Pourquoi lunse vend presque ledouble de lautre?2,50 $ 4,50 $ 4. 3. Sprinkles 2. Prparation1. BaseL anatomie des cupcakes 5. 3. Les sprinkles : leffet wow 2. La base : le design1. La Base : les contenusL anatomie des sites web 6. 3. Leffet wow 3.1 Capter lattention, surprendre, divertir3.2 Design motionnel intelligent2. Tendances en design2.1 Design de site de commerce lectronique2.2 Responsive design1. Tendances dans les contenus1.1 Design Poli1.2 Design au Fminin 7. La base, cest lecontenu. Le plus jolides sites web naurapas de valeurcommercial sanscontenu!1.La base 8. Clippy est lexempleclassique de designimpoli. 1.1 Le service poli 9. Un design impoliClippy croyait savoir votre place ce que vous vouliez faire.Surveille vos actions, mais ne se souvient jamais de vos prfrences.Lorsquon ferme sa fentre, il revient la fois suivante.Il est comme les invits qui ne partent pas, peu importe le nombre defois que vous leur demandez... 10. Malgr25 000 heuresde tests utilisateurs,Mr. Clippy fut un si gros chec que sonretrait faisait partie duPITCH DE VENTE de Microsoft XPWhitworth, B., 2005 11. Ce quil faut faire:1. Demander la permission2. Offrir des choix3. Expliquer ces options4. Respecter le choix final 12. 1.2 Le design au fminin 13. Pourquoi?La femme est le CEO de sa famille 14. Entant que CEOElle est responsable de 58 % des achats en ligne80 % des achats de produits She-conomy.com 2009 15. Malgr cela... 1%Disent que les manufacturiers de biens lectroniques les avaient en tte lors de la conception. Croient que les marques les considrent seulement pour71 % les produits de beaut et de nettoyage. Consumer Electronics Association (CEA) 16. a donne des catastrophes :Vous dites un parapluie et une sacoche ? 17. Encore aujourdhui,certaines compagniesfont lerreur de fairedes site pour lesfemmes de faoninnaproprie. 18. Tech tips?Dans la section techtips du site Della, ontrouve ces trucs:Trouver des recettesCompter mes caloriesGuider ma mditation Wow, ils ont si bien compris! 19. Pour plus dinformation Comment parler aux femmes alors? ce sujet, je vousencourage lire lesrfrences fournies lan de ce document. 1. Humain vs texte 2. Scnarios vs caractristiques 3. Diffrence de navigation 4. Fonctions vs motions 20. Certaines industriesutilisent les personas,Attention!cest trs bien, mais ondoit viter le personaclassique de la momon the go.vitez dutiliser le strotype,choisissez pluttlARCHTYPE. 21. le point #4 est un ajoutpersonnel au test deTest BuchannanHolly Buchannan 1. La femme est elle lextrieur de la maison? 2. Joue-t-elle un autre rle que celui de maman ? 3. Est-ce quelle ne fait pas de yoga? 4. Est-ce quelle ne mange pas de la salade ou du yogourt?Flicitations! 22. Vraiment?Je ne suis pas capable de faire a! 23. La prparation, cestlensemble desprocds de mise enforme. Dans le cas duweb, cest le design etles choixtechnologiques.2.La prparation 24. 2.1 Les sites de commerce 25. Cette tude tpublie sur lexcellentsite de SmashingMagazine. Les 100 sites les plus lucratifs en ligneont t tudis 26. Mais vous pouvez enavoir de 4 8 sans tropaecter lutilisabilit devotre processus. En moyenne,il y a 5 TAPES dans le processus dachat. 27. Aujourdhui,81 %des compagnies pensentque leur infolettre estINCONTOURNABLE! 28. Cher 81% des compagnies,Merci de bien vouloir menvoyer unemail de plus par jour, que je ne liraijamais.Sincrement,le monde entier 29. 24%obligent les clients secrer un comptePouvez-vous imaginer la serveuse du McDonald demander votremot de passe avant de vous donner vos croquettes de poulet? 30. 50%demandent de remplir lamme information 2 fois 31. Exemple tir du AppleStore.Je viens de vous donner mon courriel! 32. Pourquoi?Pourquoi les processusdachats sont encorepeu ergonomiques en2012? 1. Cest difficile amliorer 2. Cest peu excitant designer 3. a fonctionne pour les compagnies. 33. 2.2 Responsive Design 34. Pour plus dinformation ce sujet, vous pouvezen apprendre plus dansles rfrencesSite conu pour sadapter aux diffrentes tailles dcran 35. Parce que le web, cest tout a... 36. The good 37. Contenu adapt aucontexte dutilisation! 38. The badUn portefolio qui montre des sites qui ne sont pasmobiles... 39. The ugly 3 h du matin, je cherche le menu, pas la technologie derrire le site. 40. Cest ce qui permet decrer le wow factor . 3. Les Sprinkles! 41. 3.1 Leffet wow 42. Il faut faire 2 des ces 3 lments Surprendre Capter lattention Divertir 43. Comic Sans nest pasdivertissant #JeudiConfesison : jai toujours rv dutilisercomic sans dans une confrence 44. Le site de Typecode estbien fait et amusant.Interactif 45. Celui de Jan Ploch estun bon exemple deParallax. Nouveau 46. Attention!Le parallaxe doit tre utile, bien ralis, ne pasnuire ni la lecture du contenu, ni auxperformances. 47. Le site de Unfold estdicilement navigable.Cest un mauvaisexemple mon avis. 48. jai termin le jeu 3 fois!Ludique 49. Il sagit du stuntpublicitaire ralis parlagence Taxi Gnreux 50. 3.2 Design motif intelligent 51. An emotionally intelligent interaction is any state (orchange in state) of a website/app where the messaging orfunctionality includes attention to details that create auser experience that feels organic and human. Theseinteractions can be a big experience (like when an entirewebsite is down), or a very small experience (such as whenan error state on a form element appears). They can bederived from different elements, including messagingand copy, color and design, and respon- siveness to userinputs and system outputs. Combining each of thesecrafted experiences creates soul and personality for awebsite. And its that emotional connection with usersthat builds lasting loyalty, and raving fans.http://uxdesign.smashingmagazine.com/2012/03/28/give-your-website-soul-with-emotionally-intelligent-interactions/ 52. Cest cette connexionmotionnelle avec lutilisateurqui assure sa loyaut... 53. Jouer au Tic-Tac-Toependant lattente! 54. Facebook Plutt que dcrire son nom complet, Mom suffit. 55. SkypeMon prfr, videmment! 56. Mail #JeudiConfession : Je ne sais pas encore commentfaire un avion en origami... 57. ConclusionUiliser une tendance simplement pour se vanter,cest dangereux et coteux... 58. Mais bien utilises, les tendances permettent unsite rgulier de se transformer en site cupcake 59. CYNTHIAMerciSAVARD SAUCIERErgonomecynthia@tp1.ca@CynthiaSavard@TP1 Questions Commentaires Insultes compliments 60. Rfrences Design Poli : Whitworth, B., 2005, Polite Computing, October, Behaviour & Information Technology. vol. 24, no. 5, September, p353 363 Presentation Clippy : http://infinitevishal.wordpress.com/2010/08/06/the-other-side-of-microsoft-clippy/ http://robotzeitgeist.com/tag/clippy Design au fminin : http://marketingtowomenonline.typepad.com/blog/website-design-for-women/ consumer electronics Association (CEA) She-conomy.com 2009 La femme : http://chapters.aiga.org/resources/content/8/6/3/8/documents/Erica_Eden_presentation.pdf Archetypes et non pas strotypes : http://copernicusconsulting.net/designing-for-women-using-archetypes-not stereotypes/ Comment parler au femmes : http://marketingtowomenonline.typepad.com/blog/website-design-for-women/ http://scienceatlantic.ca/wp-content/uploads/2012/05/2012-Psychology-Conference-Program.pdf http://copernicusconsulting.net/designing-for-women-using-archetypes-not-stereotypes/ Processus dachat 2012 http://uxdesign.smashingmagazine.com/2012/09/04/the-state-of-e-commerce-checkout-design-2012/ http://baymard.com/checkout-usability/benchmark Pier-Luc St-Germain 61. Rfrences et remerciements Responsive Design : http://blog.bleepsystems.com/2012/solving-a-responsive-design-navigation-problem/ http://usability.com/2012/04/24/compromise-happens/ http://blog.whatusersdo.com/2012/06/17/usability-testing-responsive-design-case-study/ Exemples : Authentic Jobs http://www.authenticjobs.com The Happy Bit http://thehappybit.com/portfolio/ La Banquise : http://labanquise.com Typecode: http://www.Typecode.com Jan Ploch: http://www.janploch.de/ il est joli, non? Unfold : http://bo.lt/hbve1#home Facebook : http://www.facebook.com Skype et Mail : exemple tir du blog Little big details ci-dessous Little Big Details : http://littlebigdetails.com/page/2 Google Pacman : https://www.google.com/doodles/30th-anniversary-of-pac-man et http://blog.rescuetime.com/ 2010/05/24/the-tragic-cost-of-google-pac-man-4-82-million-hours/ Taxi Saison des nid-de-poules : http://saisondesnidsdepoule.ca et http://www2.infopresse.com/blogs/actualites/ archive/2012/03/13/article-39422.aspx Illustration du Cupcake : Pier-Luc Saint-Germain(MERCI!): @PierotStGermain Rvision : Jean-Yves Perrodin Commentaires : Jean-Franois Poulin @Jeffpouli