Gamification: Integrating gaming into your brand strategy
L'effet Cupcake
1. Conférence présentée
le 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 »?
9. Un design impoli
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...
10. Malgré
25 000 heures
de tests utilisateurs,
Mr. Clippy fut un si gros échec que son
retrait faisait partie du
PITCH DE VENTE
de Microsoft XP
Whitworth, B., 2005
11. Ce qu’il faut faire:
1. Demander la permission
2. Offrir des choix
3. Expliquer ces options
4. Respecter le choix final
14. Entant que CEO
Elle 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 pour
71 % les produits de beauté et de nettoyage.
Consumer Electronics Association (CEA)
16. Ça donne des catastrophes :
Vous dites un parapluie et une sacoche ?
18. Tech tips?
Dans la section “tech
tips” du site Della, on
trouve 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 vous
encourage à lire les
références fournies à la
fin de ce document.
1. Humain vs texte
2. Scénarios vs caractéristiques
3. Différence de navigation
4. Fonctions vs émotions
20. Certaines industries
utilisent les personas,
Attention!
c’est très bien, mais on
doit éviter le persona
classique de la “mom
on the go”. Évitez d’utiliser le stéréotype,
choisissez plutôt
l’ARCHÉTYPE.
21. le point #4 est un ajout
personnel au test de
Test Buchannan
Holly 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!
25. Cette étude à été
publiée sur l’excellent
site de Smashing
Magazine. Les 100 sites les plus
lucratifs en ligne
ont été étudiés
26. Mais vous pouvez en
avoir de 4 à 8 sans trop
affecter l’utilisabilité de
votre 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 un
email de plus par jour, que je ne lirai
jamais.
Sincèrement,
le monde entier
29. 24 %
obligent les clients à se
créer un compte
Pouvez-vous imaginer la serveuse du McDonald demander votre
mot de passe avant de vous donner vos croquettes de poulet?
30. 50 %
demandent de remplir la
même information 2 fois
31. Exemple tiré du Apple
Store.
Je viens de vous donner mon courriel!
32. Pourquoi?
Pourquoi les processus
d’achats sont encore
peu ergonomiques en
2012?
1. C’est difficile à améliorer
2. C’est peu excitant à designer
3. Ça fonctionne pour les compagnies.
52. 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/
61. 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
62. 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