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.

Attention!Uiliser une tendance simplement pour

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

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?

L ‘anatomi! des cupcakes

1. Base

2. Préparation

3. « Sprinkles »

4,50$

3. Les sprinkles : l’effet « wow »

1. La Base : les contenus

2. La base : le design

L ‘anatomi! des "ites #b

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

1.L$ bas!

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

1.1 L! "ervic! poli

Clippy est l’exemple classique de 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...

Un design impoli

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

1. Demander la permission

2. Offrir des choix

3. Expliquer ces options

4. Respecter le choix final

C! qu’il faut fair!:

1.2 L! design au féminin

La femme est le CEO de sa famille

Pourquoi?

Elle est responsable de 58 % des achats en ligne

80 % des achats de produits

Entant qu! CEO

She-conomy.com 2009

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 %

Ça donne des catastrophes :

Vous dites un parapluie et une sacoche ?

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

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”:

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.

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

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

Vraiment?

Je ne suis pas capable de faire ça!

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.

2.1 Les "ites d! commerc!

Les 100 sites les plus lucratifs en ligne

ont été étudiés

Cette étude à été publiée sur l’excellent site de Smashing Magazine.

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.

des compagnies pensent que leur infolettre est

Aujourd’hui,

INCONTOURNABLE!

81 %

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

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?

demandent de remplir la même information 2 fois

50 %

Je viens de vous donner mon courriel!

Exemple tiré du Apple Store.

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?

2.2 Responsiv! Design

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

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

The good

Contenu adapté au contexte d’utilisation!

The bad

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

The ugly

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

3. Les Sprinkles!

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

3.1 L’effet wow

Surprendre

Capter l’attention

Divertir

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

Comic Sans n’est pas «divertissant»

#JeudiConfesison : j’ai toujours rêvé d’utiliser comic sans dans une conférence

Interactif

Le site de Typecode est bien fait et amusant.

Nouveau

Celui de Jan Ploch est un bon exemple de Parallax.

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

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

Ludiqu!

j’ai terminé le jeu 3 fois!

Généreux

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

3.2 Design émotif intelligent

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/

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

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

Facebook

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

Mon préféré, évidemment!

Skype

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 à un site régulier de se transformer en « site cupcake »

MerciQuestionsCommentairesInsultes

@CynthiaSavard

CYNTHIA SAVARD SAUCIERErgonome

compliments

@TP1

cynthia@tp1.ca

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

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