l'effet cupcake
DESCRIPTION
Comment la bonne utilisation des tendances peut transformer un "site muffin" en "site cupcake"?TRANSCRIPT
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!
Plutôt que d’écrire son nom complet, «Mom» suffit.
Mon préféré, évidemment!
Skype
#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
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