Your SlideShare is downloading. ×
0
Conférence présentéele 25 Octobre 2012.                                                                                   ...
Attention!Uiliser une tendance simplement pour    se vanter de l’avoir utilisée, c’est        dangereux et coûteux!
Quelle est la différenceentre un muffin et uncupcake? Pourquoi l’unse vend presque ledouble de l’autre?                      ...
3. « Sprinkles »                2. Préparation                1. BaseL ‘anatomie des cupcakes
3. Les sprinkles : l’effet « wow »            2. La base : le design            1. La Base : les contenusL ‘anatomie des s...
3. L’effet « wow »  3.1 Capter l’attention, surprendre, divertir  3.2 Design émotionnel intelligent2. Tendances en design ...
La base, c’est lecontenu. Le plus jolides sites web n’aurapas de valeurcommercial sanscontenu!                        1.La...
Clippy est l’exempleclassique de designimpoli.                       1.1 Le service poli
Un design impoliClippy croyait savoir à votre place ce que vous vouliez faire.Surveille vos actions, mais ne se souvient j...
Malgré25 000 heuresde tests utilisateurs,Mr. Clippy fut un si gros échec que sonretrait faisait partie duPITCH DE VENTE   ...
Ce qu’il faut faire:1. Demander la permission2. Offrir des choix3. Expliquer ces options4. Respecter le choix final
1.2 Le design au féminin
Pourquoi?La femme est le CEO de sa famille
Entant que CEOElle est responsable de 58 % des achats en ligne                      80 % des achats de produits           ...
Malgré cela... 1%    Disent que les manufacturiers de biens électroniques les avaient en tête       lors de la conception....
Ça donne des catastrophes :                      Vous dites un parapluie et une sacoche ?
Encore aujourd’hui,certaines compagniesfont l’erreur de fairedes site “pour lesfemmes” de façoninnapropriée.
Tech tips?Dans la section “techtips” du site Della, ontrouve ces “trucs”:                          Trouver des recettes   ...
Pour plus d’information                           Comment parler aux femmes alors?à ce sujet, je vousencourage à lire lesr...
Certaines industriesutilisent les personas,                              Attention!c’est très bien, mais ondoit éviter le ...
le point #4 est un ajoutpersonnel au test de                                      Test BuchannanHolly Buchannan           ...
Vraiment?            Je ne suis pas capable de faire ça!
La préparation, c’estl’ensemble desprocédés de mise enforme. Dans le cas duweb, c’est le design etles choixtechnologiques....
2.1 Les sites de commerce
Cette étude à étépubliée sur l’excellentsite de SmashingMagazine.                 Les 100 sites les plus                  ...
Mais vous pouvez enavoir de 4 à 8 sans tropaffecter l’utilisabilité devotre processus.                             En moyen...
Aujourd’hui,        81     %        des compagnies pensent        que leur infolettre est        INCONTOURNABLE!
Cher 81% des compagnies,Merci de bien vouloir m’envoyer unemail de plus par jour, que je ne liraijamais.Sincèrement,le mon...
24        %          obligent les clients à se            créer un comptePouvez-vous imaginer la serveuse du McDonald dema...
50    %demandent de remplir lamême information 2 fois
Exemple tiré du AppleStore.                        Je viens de vous donner mon courriel!
Pourquoi?Pourquoi les processusd’achats sont encorepeu ergonomiques en2012?                         1. C’est difficile à a...
2.2 Responsive Design
Pour plus d’informationà ce sujet, vous pouvezen apprendre plus dansles références    Site conçu pour sadapter aux différe...
Parce que le web, c’est tout ça...
The good
Contenu adapté aucontexte d’utilisation!
The badUn portefolio qui montre des sites qui ne sont pasmobiles...
The uglyÀ 3 h du matin, je cherche le menu, pas la technologie derrière le site.
C’est ce qui permet decréer le “ wow factor “.                           3. Les Sprinkles!
3.1 L’effet wow
Il faut faire 2 des ces 3 éléments     Surprendre     Capter l’attention     Divertir
Comic Sans n’est pas  «divertissant»         #JeudiConfesison : j’ai toujours rêvé d’utiliser                        comic...
Le site de Typecode estbien fait et amusant.                          Interactif
Celui de Jan Ploch estun bon exemple deParallax.                         Nouveau
Attention!Le parallaxe doit être utile, bien réalisé, ne pasnuire ni à la lecture du contenu, ni auxperformances.
Le site de Unfold estdifficilement navigable.C’est un mauvaisexemple à mon avis.
j’ai terminé le jeu 3 fois!                Ludique
Il s’agit du stuntpublicitaire réalisé parl’agence Taxi                           Généreux
3.2 Design émotif intelligent
An emotionally intelligent interaction is any state (orchange in state) of a website/app where the messaging orfunctionali...
C’est cette connexionémotionnelle avec l’utilisateurqui assure sa loyauté...
Jouer au Tic-Tac-Toependant l’attente!
Facebook Plutôt que d’écrire son nom complet, «Mom» suffit.
Skype        Mon préféré, évidemment!
Mail       #JeudiConfession : Je ne sais pas encore comment                              faire un avion en origami...
ConclusionUiliser une tendance simplement pour se vanter,          c’est dangereux et coûteux...
Mais bien utilisées, les tendances permettent à unsite régulier de se transformer en « site cupcake »
CYNTHIAMerci                          SAVARD SAUCIER                          Ergonome                          cynthia@tp...
Références             Design Poli :             Whitworth, B., 2005, Polite Computing, October, Behaviour & Information T...
Références et remerciements                     Responsive Design :                     http://blog.bleepsystems.com/2012/...
L'effet Cupcake
Upcoming SlideShare
Loading in...5
×

L'effet Cupcake

6,119

Published on

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

Published in: Design
3 Comments
29 Likes
Statistics
Notes
  • très intéressante, agréable et ludique présentation. Merci
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • La version la plus récente est sur notre page LinkedIn par contre: http://www.linkedin.com/company/tp1.
       Reply 
    Are you sure you want to  Yes  No
    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
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
6,119
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
114
Comments
3
Likes
29
Embeds 0
No embeds

No notes for slide

Transcript of "L'effet Cupcake"

  1. 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. 2. Attention!Uiliser une tendance simplement pour se vanter de l’avoir utilisée, c’est dangereux et coûteux!
  3. 3. Quelle est la différenceentre un muffin et uncupcake? Pourquoi l’unse vend presque ledouble de l’autre? 2,50 $ 4,50 $
  4. 4. 3. « Sprinkles » 2. Préparation 1. BaseL ‘anatomie des cupcakes
  5. 5. 3. Les sprinkles : l’effet « wow » 2. La base : le design 1. La Base : les contenusL ‘anatomie des sites web
  6. 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. 7. La base, c’est lecontenu. Le plus jolides sites web n’aurapas de valeurcommercial sanscontenu! 1.La base
  8. 8. Clippy est l’exempleclassique de designimpoli. 1.1 Le service poli
  9. 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. 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. 11. Ce qu’il faut faire:1. Demander la permission2. Offrir des choix3. Expliquer ces options4. Respecter le choix final
  12. 12. 1.2 Le design au féminin
  13. 13. Pourquoi?La femme est le CEO de sa famille
  14. 14. Entant que CEOElle est responsable de 58 % des achats en ligne 80 % des achats de produits She-conomy.com 2009
  15. 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. 16. Ça donne des catastrophes : Vous dites un parapluie et une sacoche ?
  17. 17. Encore aujourd’hui,certaines compagniesfont l’erreur de fairedes site “pour lesfemmes” de façoninnapropriée.
  18. 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. 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. 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. 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. 22. Vraiment? Je ne suis pas capable de faire ça!
  23. 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. 24. 2.1 Les sites de commerce
  25. 25. Cette étude à étépubliée sur l’excellentsite de SmashingMagazine. Les 100 sites les plus lucratifs en ligne ont été étudiés
  26. 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. 27. Aujourd’hui, 81 % des compagnies pensent que leur infolettre est INCONTOURNABLE!
  28. 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. 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. 30. 50 %demandent de remplir lamême information 2 fois
  31. 31. Exemple tiré du AppleStore. Je viens de vous donner mon courriel!
  32. 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. 33. 2.2 Responsive Design
  34. 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. 35. Parce que le web, c’est tout ça...
  36. 36. The good
  37. 37. Contenu adapté aucontexte d’utilisation!
  38. 38. The badUn portefolio qui montre des sites qui ne sont pasmobiles...
  39. 39. The uglyÀ 3 h du matin, je cherche le menu, pas la technologie derrière le site.
  40. 40. C’est ce qui permet decréer le “ wow factor “. 3. Les Sprinkles!
  41. 41. 3.1 L’effet wow
  42. 42. Il faut faire 2 des ces 3 éléments Surprendre Capter l’attention Divertir
  43. 43. Comic Sans n’est pas «divertissant» #JeudiConfesison : j’ai toujours rêvé d’utiliser comic sans dans une conférence
  44. 44. Le site de Typecode estbien fait et amusant. Interactif
  45. 45. Celui de Jan Ploch estun bon exemple deParallax. Nouveau
  46. 46. Attention!Le parallaxe doit être utile, bien réalisé, ne pasnuire ni à la lecture du contenu, ni auxperformances.
  47. 47. Le site de Unfold estdifficilement navigable.C’est un mauvaisexemple à mon avis.
  48. 48. j’ai terminé le jeu 3 fois! Ludique
  49. 49. Il s’agit du stuntpublicitaire réalisé parl’agence Taxi Généreux
  50. 50. 3.2 Design émotif intelligent
  51. 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. 52. C’est cette connexionémotionnelle avec l’utilisateurqui assure sa loyauté...
  53. 53. Jouer au Tic-Tac-Toependant l’attente!
  54. 54. Facebook Plutôt que d’écrire son nom complet, «Mom» suffit.
  55. 55. Skype Mon préféré, évidemment!
  56. 56. Mail #JeudiConfession : Je ne sais pas encore comment faire un avion en origami...
  57. 57. ConclusionUiliser une tendance simplement pour se vanter, c’est dangereux et coûteux...
  58. 58. Mais bien utilisées, les tendances permettent à unsite régulier de se transformer en « site cupcake »
  59. 59. CYNTHIAMerci SAVARD SAUCIER Ergonome cynthia@tp1.ca @CynthiaSavard @TP1 Questions Commentaires Insultes compliments
  60. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×