L'effet Cupcake

  • 5,412 views
Uploaded on

Comment la bonne utilisation des tendances peut transformer un …

Comment la bonne utilisation des tendances peut transformer un
"site muffin" en "site cupcake"?

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • très intéressante, agréable et ludique présentation. Merci
    Are you sure you want to
    Your message goes here
  • La version la plus récente est sur notre page LinkedIn par contre: http://www.linkedin.com/company/tp1.
    Are you sure you want to
    Your message goes here
  • Une belle présentation c'est comme une boîte de bons cupcakes, c'est meilleur quand ça se partage :) merci TP1
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
5,412
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
108
Comments
3
Likes
28

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Conférence présentéele 25 Octobre 2012. CYNTHIA SAVARD SAUCIER Ergonome @CynthiaSavard @TP1 L ‘effet Cupcake Ou comment la bonne utilisation des tendances peut transformer un « site muffin » en « site cupcake »?
  • 2. Attention!Uiliser une tendance simplement pour se vanter de l’avoir utilisée, c’est dangereux et coûteux!
  • 3. Quelle est la différenceentre un muffin et uncupcake? Pourquoi l’unse vend presque ledouble de l’autre? 2,50 $ 4,50 $
  • 4. 3. « Sprinkles » 2. Préparation 1. BaseL ‘anatomie des cupcakes
  • 5. 3. Les sprinkles : l’effet « wow » 2. La base : le design 1. La Base : les contenusL ‘anatomie des sites web
  • 6. 3. L’effet « wow » 3.1 Capter l’attention, surprendre, divertir 3.2 Design émotionnel intelligent2. Tendances en design 2.1 Design de site de commerce électronique 2.2 Responsive design1. Tendances dans les contenus 1.1 Design Poli 1.2 Design au Féminin
  • 7. La base, c’est lecontenu. Le plus jolides sites web n’aurapas de valeurcommercial sanscontenu! 1.La base
  • 8. Clippy est l’exempleclassique 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 préférences.Lorsqu’on ferme sa fenêtre, il revient la fois suivante.Il est comme les invités qui ne partent pas, peu importe le nombre defois que vous leur demandez...
  • 10. Malgré25 000 heuresde tests utilisateurs,Mr. Clippy fut un si gros échec que sonretrait faisait partie duPITCH DE VENTE de Microsoft XP Whitworth, B., 2005
  • 11. Ce qu’il faut faire:1. Demander la permission2. Offrir des choix3. Expliquer ces options4. Respecter le choix final
  • 12. 1.2 Le design au féminin
  • 13. Pourquoi?La femme est le CEO de sa famille
  • 14. Entant que CEOElle est responsable de 58 % des achats en ligne 80 % des achats de produits She-conomy.com 2009
  • 15. Malgré cela... 1% Disent que les manufacturiers de biens électroniques les avaient en tête lors de la conception. Croient que les marques les considèrent 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 aujourd’hui,certaines compagniesfont l’erreur de fairedes site “pour lesfemmes” de façoninnapropriée.
  • 18. Tech tips?Dans la section “techtips” du site Della, ontrouve ces “trucs”: Trouver des recettes Compter mes calories Guider ma méditation Wow, ils ont si bien compris!
  • 19. Pour plus d’information Comment parler aux femmes alors?à ce sujet, je vousencourage à lire lesréférences fournies à lafin de ce document. 1. Humain vs texte 2. Scénarios vs caractéristiques 3. Différence de navigation 4. Fonctions vs émotions
  • 20. Certaines industriesutilisent les personas, Attention!c’est très bien, mais ondoit éviter le personaclassique de la “momon the go”. Évitez d’utiliser le stéréotype, choisissez plutôt l’ARCHÉTYPE.
  • 21. le point #4 est un ajoutpersonnel au test de Test BuchannanHolly Buchannan 1. La femme est elle à l’extérieur de la maison? 2. Joue-t-elle un autre rôle que celui de « maman »? 3. Est-ce qu’elle ne fait pas de yoga? 4. Est-ce qu’elle ne mange pas de la salade ou du yogourt? Félicitations!
  • 22. Vraiment? Je ne suis pas capable de faire ça!
  • 23. La préparation, c’estl’ensemble desprocédés de mise enforme. Dans le cas duweb, c’est le design etles choixtechnologiques. 2.La préparation
  • 24. 2.1 Les sites de commerce
  • 25. Cette étude à étépubliée sur l’excellentsite de SmashingMagazine. Les 100 sites les plus lucratifs en ligne ont été étudiés
  • 26. Mais vous pouvez enavoir de 4 à 8 sans tropaffecter l’utilisabilité devotre processus. En moyenne,il y a 5 ÉTAPES dans le processus d’achat.
  • 27. Aujourd’hui, 81 % des compagnies pensent que leur infolettre est INCONTOURNABLE!
  • 28. Cher 81% des compagnies,Merci de bien vouloir m’envoyer unemail de plus par jour, que je ne liraijamais.Sincèrement,le monde entier
  • 29. 24 % obligent les clients à se créer 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 lamême information 2 fois
  • 31. Exemple tiré du AppleStore. Je viens de vous donner mon courriel!
  • 32. Pourquoi?Pourquoi les processusd’achats sont encorepeu ergonomiques en2012? 1. C’est difficile à améliorer 2. C’est peu excitant à designer 3. Ça fonctionne pour les compagnies.
  • 33. 2.2 Responsive Design
  • 34. Pour plus d’informationà ce sujet, vous pouvezen apprendre plus dansles références Site conçu pour sadapter aux différentes tailles décran
  • 35. Parce que le web, c’est tout ça...
  • 36. The good
  • 37. Contenu adapté aucontexte d’utilisation!
  • 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 derrière le site.
  • 40. C’est ce qui permet decréer le “ wow factor “. 3. Les Sprinkles!
  • 41. 3.1 L’effet wow
  • 42. Il faut faire 2 des ces 3 éléments Surprendre Capter l’attention Divertir
  • 43. Comic Sans n’est pas «divertissant» #JeudiConfesison : j’ai toujours rêvé d’utiliser comic sans dans une conférence
  • 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 réalisé, ne pasnuire ni à la lecture du contenu, ni auxperformances.
  • 47. Le site de Unfold estdifficilement navigable.C’est un mauvaisexemple à mon avis.
  • 48. j’ai terminé le jeu 3 fois! Ludique
  • 49. Il s’agit du stuntpublicitaire réalisé parl’agence Taxi Généreux
  • 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 it’s 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. C’est cette connexionémotionnelle avec l’utilisateurqui assure sa loyauté...
  • 53. Jouer au Tic-Tac-Toependant l’attente!
  • 54. Facebook Plutôt que d’écrire son nom complet, «Mom» suffit.
  • 55. Skype Mon préféré, évidemment!
  • 56. Mail #JeudiConfession : Je ne sais pas encore comment faire un avion en origami...
  • 57. ConclusionUiliser une tendance simplement pour se vanter, c’est dangereux et coûteux...
  • 58. Mais bien utilisées, les tendances permettent à unsite régulier de se transformer en « site cupcake »
  • 59. CYNTHIAMerci SAVARD SAUCIER Ergonome cynthia@tp1.ca @CynthiaSavard @TP1 Questions Commentaires Insultes compliments
  • 60. Références 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 féminin : 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 stéréotypes : 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 d’achat 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. Références 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 Révision : Jean-Yves Perrodin Commentaires : Jean-François Poulin @Jeffpouli