Comment la bonne utilisation des tendances peut transformer un "site muffin" en "site 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 »?

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érence
entre un muffin et un
cupcake? Pourquoi l’un
se vend presque le
double de l’autre?
2,50 $ 4,50 $

4. 3. « Sprinkles »
2. Préparation
1. Base
L ‘anatomie des cupcakes

5. 3. Les sprinkles : l’effet « wow »
2. La base : le design
1. La Base : les contenus
L ‘anatomie des sites web

6. 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

7. La base, c’est le
contenu. Le plus joli
des sites web n’aura
pas de valeur
commercial sans
contenu!
1.La base

8. Clippy est l’exemple
classique de design
impoli.
1.1 Le service poli

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

12. 1.2 Le design au féminin

13. Pourquoi?
La femme est le CEO de sa famille

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 ?

17. Encore aujourd’hui,
certaines compagnies
font l’erreur de faire
des site “pour les
femmes” de façon
innapropriée.

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!

22. Vraiment?
Je ne suis pas capable de faire ça!

23. 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.
2.La préparation

24. 2.1 Les sites de commerce

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.

33. 2.2 Responsive Design

34. Pour plus d’information
à ce sujet, vous pouvez
en apprendre plus dans
les références
Site conçu pour s'adapter aux différentes tailles d'écran

35. Parce que le web, c’est tout ça...

36. The good

37. Contenu adapté au
contexte d’utilisation!

38. The bad
Un portefolio qui montre des sites qui ne sont pas
mobiles...

39. The ugly
À 3 h du matin, je cherche le menu, pas la technologie derrière le site.

40. C’est ce qui permet de
cré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 est
bien fait et amusant.
Interactif

45. Celui de Jan Ploch est
un bon exemple de
Parallax.
Nouveau

46. Attention!
Le parallaxe doit être utile, bien réalisé, ne pas
nuire ni à la lecture du contenu, ni aux
performances.

47. Le site de Unfold est
difficilement navigable.
C’est un mauvais
exemple à mon avis.

48. j’ai terminé le jeu 3 fois!
Ludique

49. Il s’agit du stunt
publicitaire réalisé par
l’agence Taxi
Généreux

51. 3.2 Design émotif intelligent

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/

53. C’est cette connexion
émotionnelle avec l’utilisateur
qui assure sa loyauté...

54. Jouer au Tic-Tac-Toe
pendant l’attente!

55. Facebook
Plutôt que d’écrire son nom complet, «Mom» suffit.

56. Skype
Mon préféré, évidemment!

57. Mail
#JeudiConfession : Je ne sais pas encore comment
faire un avion en origami...

58. Conclusion
Uiliser une tendance simplement pour se vanter,
c’est dangereux et coûteux...

59. Mais bien utilisées, les tendances permettent à un
site régulier de se transformer en « site cupcake »

60. CYNTHIA
Merci
SAVARD SAUCIER
Ergonome
cynthia@tp1.ca
@CynthiaSavard
@TP1
Questions
Commentaires
Insultes compliments

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