l'effet cupcake

of 62 /62
L ‘effet Cupcak Ou comment la bonne utilisation des tendances peut transformer un « site muffin » en « site cupcake »? @CynthiaSavard CYNTHIA SAVARD SAUCIER Ergonome @TP1 Conférence présentée le 25 Octobre 2012.

Upload: tp1

Post on 15-Jun-2015

6.074 views

Category:

Design


1 download

DESCRIPTION

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

TRANSCRIPT

Page 1: L'effet Cupcake

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

Attention!Uiliser une tendance simplement pour

se vanter de l’avoir utilisée, c’est dangereux et coûteux!

Page 3: L'effet Cupcake

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

L ‘anatomi! des cupcakes

1. Base

2. Préparation

3. « Sprinkles »

Page 5: L'effet Cupcake

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

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

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

1.1 L! "ervic! poli

Clippy est l’exemple classique de design impoli.

Page 9: L'effet Cupcake

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

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

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

1.2 L! design au féminin

Page 13: L'effet Cupcake

La femme est le CEO de sa famille

Pourquoi?

Page 14: L'effet Cupcake

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

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

Ça donne des catastrophes :

Vous dites un parapluie et une sacoche ?

Page 17: L'effet Cupcake

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

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

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

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

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

Vraiment?

Je ne suis pas capable de faire ça!

Page 23: L'effet Cupcake

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

2.1 Les "ites d! commerc!

Page 25: L'effet Cupcake

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

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

des compagnies pensent que leur infolettre est

Aujourd’hui,

INCONTOURNABLE!

81 %

Page 28: L'effet Cupcake

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

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

demandent de remplir la même information 2 fois

50 %

Page 31: L'effet Cupcake

Je viens de vous donner mon courriel!

Exemple tiré du Apple Store.

Page 32: L'effet Cupcake

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

2.2 Responsiv! Design

Page 34: L'effet Cupcake

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

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

Page 36: L'effet Cupcake

The good

Page 37: L'effet Cupcake

Contenu adapté au contexte d’utilisation!

Page 38: L'effet Cupcake

The bad

Un portefolio qui montre des sites qui ne sont pas mobiles...

Page 39: L'effet Cupcake

The ugly

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

Page 40: L'effet Cupcake

3. Les Sprinkles!

C’est ce qui permet de créer le “ wow factor “.

Page 41: L'effet Cupcake

3.1 L’effet wow

Page 42: L'effet Cupcake

Surprendre

Capter l’attention

Divertir

Il faut fair! 2 des ces 3 éléments

Page 43: L'effet Cupcake

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

Interactif

Le site de Typecode est bien fait et amusant.

Page 45: L'effet Cupcake

Nouveau

Celui de Jan Ploch est un bon exemple de Parallax.

Page 46: L'effet Cupcake

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

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

Page 49: L'effet Cupcake

Généreux

Il s’agit du stunt publicitaire réalisé par l’agence Taxi

Page 50: L'effet Cupcake
Page 51: L'effet Cupcake

3.2 Design émotif intelligent

Page 52: L'effet Cupcake

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

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

Page 54: L'effet Cupcake

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

Page 55: L'effet Cupcake

Facebook

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

Page 56: L'effet Cupcake

Mon préféré, évidemment!

Skype

Page 57: L'effet Cupcake

Mail

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

Page 58: L'effet Cupcake

ConclusionUiliser une tendance simplement pour se vanter,

c’est dangereux et coûteux...

Page 59: L'effet Cupcake

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

Page 60: L'effet Cupcake

MerciQuestionsCommentairesInsultes

@CynthiaSavard

CYNTHIA SAVARD SAUCIERErgonome

compliments

@TP1

[email protected]

Page 61: L'effet Cupcake

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

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