L'effet Cupcake
description
Transcript of L'effet Cupcake
![Page 1: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/1.jpg)
L ‘effet Cupcak!Ou comment la bonne utilisation des tendances peut transformer
un « site muffin » en « site cupcake »?
@CynthiaSavard
CYNTHIA SAVARD SAUCIERErgonome
@TP1
Conférence présentée le 25 Octobre 2012.
![Page 2: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/2.jpg)
Attention!Uiliser une tendance simplement pour
se vanter de l’avoir utilisée, c’est dangereux et coûteux!
![Page 3: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/3.jpg)
2,50 $ 4,50 $
Quelle est la différence entre un muffin et un cupcake? Pourquoi l’un se vend presque le double de l’autre?
![Page 4: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/4.jpg)
L ‘anatomi! des cupcakes
1. Base
2. Préparation
3. « Sprinkles »
![Page 5: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/5.jpg)
4,50$
3. Les sprinkles : l’effet « wow »
1. La Base : les contenus
2. La base : le design
L ‘anatomi! des "ites #b
![Page 6: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/6.jpg)
4,50$
3. L’effet « wow »
3.1 Capter l’attention, surprendre, divertir
3.2 Design émotionnel intelligent
2. Tendances en design
2.1 Design de site de commerce électronique
2.2 Responsive design
1. Tendances dans les contenus
1.1 Design Poli
1.2 Design au Féminin
![Page 7: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/7.jpg)
1.L$ bas!
La base, c’est le contenu. Le plus joli des sites web n’aura pas de valeur commercial sans contenu!
![Page 8: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/8.jpg)
1.1 L! "ervic! poli
Clippy est l’exemple classique de design impoli.
![Page 9: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/9.jpg)
Clippy 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 de fois que vous leur demandez...
Un design impoli
![Page 10: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/10.jpg)
Mr. Clippy fut un si gros échec que son retrait faisait partie du
PITCH DE VENTE
Malgré
de Microsoft XP
2 5 0 0 0 h e u r e sde tests utilisateurs,
Whitworth, B., 2005
![Page 11: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/11.jpg)
1. Demander la permission
2. Offrir des choix
3. Expliquer ces options
4. Respecter le choix final
C! qu’il faut fair!:
![Page 12: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/12.jpg)
1.2 L! design au féminin
![Page 13: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/13.jpg)
La femme est le CEO de sa famille
Pourquoi?
![Page 14: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/14.jpg)
Elle est responsable de 58 % des achats en ligne
80 % des achats de produits
Entant qu! CEO
She-conomy.com 2009
![Page 15: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/15.jpg)
Malgré cel!...Disent que les manufacturiers de biens électroniques les avaient en tête lors de la conception.1 %Croient que les marques les considèrent seulement pour les produits de beauté et de nettoyage.
Consumer Electronics Association (CEA)
71 %
![Page 16: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/16.jpg)
Ça donne des catastrophes :
Vous dites un parapluie et une sacoche ?
![Page 17: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/17.jpg)
Encore aujourd’hui, certaines compagnies font l’erreur de faire des site “pour les femmes” de façon innapropriée.
![Page 18: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/18.jpg)
Tech tips?
Trouver des recettesCompter mes calories Guider ma méditation
Wow, ils ont si bien compris!
Dans la section “tech tips” du site Della, on trouve ces “trucs”:
![Page 19: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/19.jpg)
1. Humain vs texte
2. Scénarios vs caractéristiques
3. Différence de navigation
4. Fonctions vs émotions
Comment parle! aux femmes alors?Pour plus d’information à ce sujet, je vous encourage à lire les références fournies à la fin de ce document.
![Page 20: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/20.jpg)
Attention!Évitez d’utiliser le stéréotype,
choisissez plutôt
l’ARCHÉTYPE.
Certaines industries utilisent les personas, c’est très bien, mais on doit éviter le persona classique de la “mom on the go”.
![Page 21: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/21.jpg)
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?
Test Buchannan
Félicitations!
le point #4 est un ajout personnel au test de Holly Buchannan
![Page 22: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/22.jpg)
Vraiment?
Je ne suis pas capable de faire ça!
![Page 23: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/23.jpg)
2.L" préparation
La préparation, c’est l’ensemble des procédés de mise en forme. Dans le cas du web, c’est le design et les choix technologiques.
![Page 24: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/24.jpg)
2.1 Les "ites d! commerc!
![Page 25: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/25.jpg)
Les 100 sites les plus lucratifs en ligne
ont été étudiés
Cette étude à été publiée sur l’excellent site de Smashing Magazine.
![Page 26: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/26.jpg)
5 ÉTAPESdans le processus d’achat.
En moyenne, il y aMais vous pouvez en avoir de 4 à 8 sans trop affecter l’utilisabilité de votre processus.
![Page 27: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/27.jpg)
des compagnies pensent que leur infolettre est
Aujourd’hui,
INCONTOURNABLE!
81 %
![Page 28: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/28.jpg)
Cher 81% des compagnies, Merci de bien vouloir m’envoyer un email de plus par jour, que je ne lirai jamais.Sincèrement, le monde entier
![Page 29: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/29.jpg)
obligent les clients à se créer un compte
24 %
Pouvez-vous imaginer la serveuse du McDonald demander votre mot de passe avant de vous donner vos croquettes de poulet?
![Page 30: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/30.jpg)
demandent de remplir la même information 2 fois
50 %
![Page 31: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/31.jpg)
Je viens de vous donner mon courriel!
Exemple tiré du Apple Store.
![Page 32: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/32.jpg)
Pourquoi?
1. C’est difficile à améliorer
2. C’est peu excitant à designer
3. Ça fonctionne pour les compagnies.
Pourquoi les processus d’achats sont encore peu ergonomiques en 2012?
![Page 33: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/33.jpg)
2.2 Responsiv! Design
![Page 34: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/34.jpg)
Site conçu pour s'adapter aux différentes tailles d'écran
Pour plus d’information à ce sujet, vous pouvez en apprendre plus dans les références
![Page 35: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/35.jpg)
Parce que le web, c’est tout ça...
![Page 36: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/36.jpg)
The good
![Page 37: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/37.jpg)
Contenu adapté au contexte d’utilisation!
![Page 38: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/38.jpg)
The bad
Un portefolio qui montre des sites qui ne sont pas mobiles...
![Page 39: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/39.jpg)
The ugly
À 3 h du matin, je cherche le menu, pas la technologie derrière le site.
![Page 40: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/40.jpg)
3. Les Sprinkles!
C’est ce qui permet de créer le “ wow factor “.
![Page 41: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/41.jpg)
3.1 L’effet wow
![Page 42: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/42.jpg)
Surprendre
Capter l’attention
Divertir
Il faut fair! 2 des ces 3 éléments
![Page 43: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/43.jpg)
Comic Sans n’est pas «divertissant»
#JeudiConfesison : j’ai toujours rêvé d’utiliser comic sans dans une conférence
![Page 44: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/44.jpg)
Interactif
Le site de Typecode est bien fait et amusant.
![Page 45: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/45.jpg)
Nouveau
Celui de Jan Ploch est un bon exemple de Parallax.
![Page 46: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/46.jpg)
Attention!Le parallaxe doit être utile, bien réalisé, ne pas nuire ni à la lecture du contenu, ni aux performances.
![Page 47: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/47.jpg)
Le site de Unfold est difficilement navigable. C’est un mauvais exemple à mon avis.
![Page 48: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/48.jpg)
Ludiqu!
j’ai terminé le jeu 3 fois!
![Page 49: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/49.jpg)
Généreux
Il s’agit du stunt publicitaire réalisé par l’agence Taxi
![Page 50: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/50.jpg)
![Page 51: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/51.jpg)
3.2 Design émotif intelligent
![Page 52: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/52.jpg)
An emotionally intelligent interaction is any state (or change in state) of a website/app where the messaging or functionality includes attention to details that create a user experience that feels organic and human. These interactions can be a big experience (like when an entire website is down), or a very small experience (such as when an error state on a form element appears). They can be derived from different elements, including messaging and copy, color and design, and respon- siveness to user inputs and system outputs. Combining each of these crafted experiences creates soul and personality for a website. And it’s that emotional connection with users that builds lasting loyalty, and raving fans.
http://uxdesign.smashingmagazine.com/2012/03/28/give-your-website-soul-with-emotionally-intelligent-interactions/
![Page 53: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/53.jpg)
C’est cette connexion émotionnelle avec l’utilisateur qui assure sa loyauté...
![Page 54: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/54.jpg)
Jouer au Tic-Tac-Toe pendant l’attente!
![Page 55: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/55.jpg)
Plutôt que d’écrire son nom complet, «Mom» suffit.
![Page 56: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/56.jpg)
Mon préféré, évidemment!
Skype
![Page 57: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/57.jpg)
#JeudiConfession : Je ne sais pas encore comment faire un avion en origami...
![Page 58: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/58.jpg)
ConclusionUiliser une tendance simplement pour se vanter,
c’est dangereux et coûteux...
![Page 59: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/59.jpg)
Mais bien utilisées, les tendances permettent à un site régulier de se transformer en « site cupcake »
![Page 60: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/60.jpg)
MerciQuestionsCommentairesInsultes
@CynthiaSavard
CYNTHIA SAVARD SAUCIERErgonome
compliments
@TP1
![Page 61: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/61.jpg)
RéférencesDesign Poli : Whitworth, B., 2005, Polite Computing, October, Behaviour & Information Technology. vol. 24, no. 5, September, p353 – 363 PresentationClippy : 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.pdfhttp://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/benchmarkPier-Luc St-Germain
![Page 62: L'effet Cupcake](https://reader033.fdocument.pub/reader033/viewer/2022052506/557dd52dd8b42a4c238b4c40/html5/thumbnails/62.jpg)
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.comThe Happy Bit http://thehappybit.com/portfolio/La Banquise : http://labanquise.comTypecode: http://www.Typecode.comJan Ploch: http://www.janploch.de/Unfold : http://bo.lt/hbve1#homeFacebook : http://www.facebook.comSkype et Mail : exemple tiré du blog “Little big details” ci-dessousLittle Big Details : http://littlebigdetails.com/page/2Google 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!): @PierotStGermainRévision : Jean-Yves PerrodinCommentaires : Jean-François Poulin @Jeffpouli
il est joli, non?
Références et "emerciements