The Cupcake Effect
description
Transcript of The Cupcake Effect
Th! Cupcak! EffectOr, how clever use of current trends can turn a “muffin site” into a
“cupcake site”
@CynthiaSavard
CYNTHIA SAVARD SAUCIERUX specialist
@TP1
Presentation delivered on October 25, 2012
Warning!Using a trend merely to earn bragging
rights is dangerous and costly!
$2.50 $4.50
What is the difference between a muffin and a cupcake? Why is one almost double the price of the other?
Anatom" of # cupcak!
1. Base
2. Mix
3. Sprinkles
4,50$
3. Sprinkles: Wow! factor
1. Base: Content
2. Mix: Design
Anatom" of # $%it!
4,50$
3. Wow! factor
3.1 Capture attention, surprise, entertain
3.2 Emotionally-intelligent design
2. Design trends
2.1 E-commerce website design
2.2 Responsive design
1. Content trends
1.1 Polite design
1.2 Design for women
1. Th! bas!
The base is content. Even the most attractive websites will have little value without content!
1.1 Polit! design
Clippy is the best example of “impolite” design.
Clippy claims to know what you want to do.
He monitors your actions, but does not remember your preferences.
Even if you close his window, he keeps coming back.
He’s the guest that never knows when to leave, no matter how many times you ask him to...
Impolit! design
Mr. Clippy was such a spectacular failure, his demise was part of the
SALES PITCH
Despite
for Microsoft XP.
25,000 hoursof user testing,
Whitworth, B., 2005
1. Ask permission
2. Offer a choice
3. Explain the options
4. Respect the final choice
What &hould b! don!:
1.2 Design fo' women
A woman is the CEO of her family.
Wh!?
She is responsible for 58% of online purchases
80% of product purchases
A& th! CEO
She-conomy.com 2009
Ho"ve#...believe that electronics manufacturers have their needs in mind when developing products.1%
believe that brands only consider the female market for cleaning and beauty products.
Consumer Electronics Association (CEA)
71 %
This leads to catastrophes like:
A rain cape and a shoulder bag, you say?
Even today, many companies make the mistake of creating inappropriate sites for women.
Tech tips?
Find recipesCounting calories Guided meditations
Wow, they got everything right!
In the Tech Tips section of the Della website, we find the following “tips”:
1. Human vs. text
2. Scenarios vs. characteristics
3. Different navigation
4. Function vs. emotion
How to $pea% to womenFor more information, check the reference section at the end of this presentation.
Warning!Avoid using stereotypes.
Rather, choose an
ARCHETYPE.
Certain industries use personas - which is great - but we must avoid the classic “busy mom on the go” persona.
1. Do you feature a woman outside of the home?
2. Do you feature a women in a role other than “mother”?
3. Is she NOT doing yoga?
4. Is she eating something other than salad or yogurt?
Buchanan test
Congratulations!
Point #4 is my own personal addition to the Holly Buchanan test.
Really?
I can’t do that!
2. Th! mix
The mix comprises all aspects of the layout. In the case of web, this means design and technological choices.
2.1 E-commerc! &ites
The 100 most profitable websites online
$r! analyzed.
This study was published by the excellent website for Smashing Magazine.
5 STEPSin the purchase process.
On average, they haveAlthough you can have between four and eight steps, without impacting optimization of the purchase process.
of companies think that their e-newsletter is
Toda!,
ESSENTIAL.
81 %
Dear 81% of companies,Thank you for sending me one more email each day that I have no intention of ever reading.Sincerely, Everybody
require clients to create an account profile.
24 %
Can you imagine being asked for a password every time you order chicken nuggets at McDonald’s?
ask that information be entered twice.
50 %
But I just gave you my email address!
Example from the Apple Store.
Wh"?
1. It’s hard to improve.
2. It’s not exciting to design.
3. It works for the companies.
Why is the purchase process still not user-friendly in 2012?
2.2 Responsiv! design
Websites designed to adapt to differently-sized screens.
For more information, check the reference section at the end of this presentation.
Because the web includes all of these...
The good
Content is adapted to the user’s context!
The bad
A portfolio that features sites that aren’t optimized for mobile devices...
The ugly
At 3 a.m. I don’t care about the technology behind the site. I just want my poutine menu!
3. Th& $prinkles!
This is what delivers the Wow! factor.
3.1 Th! Wow! facto#
Surprise
Attention-grabbing
Entertainment
Requires two of th! following:
Comic Sans is not “fun”.
#ThursdayConfessions: I have always dreamed of using Comic sans in a presentation.
Interactiv&
The Typecode website is well made and entertaining.
New
The Jan Ploch site is a good example of parallax.
Warning!Parallax must be practical and well developed, and not interfere with the reading of content or performance.
The Unfold site is hard to navigate and is a bad example of parallax, in my opinion.
Fun!
I completed the game three times!
Generous
This was a publicity stunt staged by the Taxi agency.
3.2 Emotionall!-intelligent design
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 responsiveness 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/
It’s the emotional connection with the user that keeps them coming back...
Play Tic-Tac-Toe while you wait!
Instead of writing her full name, why not just “Mom”?
My favourite... obviously!
Skype
#ThursdayConfessions: I still don’t know how to make a paper airplane :(
ConclusionUsing a trend merely to earn bragging rights is
dangerous and costly...
If used wisely, however, these trends can turn a regular site into a “cupcake site”.
Than% you!QuestionsCommentsInsults
@CynthiaSavard
CYNTHIA SAVARD SAUCIERUX specialist
Compliments
@TP1
ReferencesPolite design: 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 for women: http://marketingtowomenonline.typepad.com/blog/website-design-for-women/consumer electronics Association (CEA)She-conomy.com 2009
Women: http://chapters.aiga.org/resources/content/8/6/3/8/documents/Erica_Eden_presentation.pdf
Archetypes, not stereotypes: http://copernicusconsulting.net/designing-for-women-using-archetypes-not-stereotypes/
How to speak to women:
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/
Purchase process in 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/
Examples: 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 and 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
Cupcake illustration: Pier-Luc Saint-Germain(THANK YOU!): @PierotStGermainRevision: Jean-Yves PerrodinFeedback: Jean-François Poulin @JeffpouliIsn’t it cute?
References and acknowledgements