The Cupcake Effect

62
Th Cupcak Effect Or, how clever use of current trends can turn a “muffin site” into a cupcake site@CynthiaSavard CYNTHIA SAVARD SAUCIER UX specialist @TP1 Presentation delivered on October 25, 2012
  • Upload

    tp1
  • Category

    Design

  • view

    107
  • download

    0

description

Six interesting trends in user experience: Polite design, Design for women, Responsive design, E-commerce website design, Emotionally-intelligent design and Wow! Factor.

Transcript of The Cupcake Effect

Page 1: 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

Page 2: The Cupcake Effect

Warning!Using a trend merely to earn bragging

rights is dangerous and costly!

Page 3: The Cupcake Effect

$2.50 $4.50

What is the difference between a muffin and a cupcake? Why is one almost double the price of the other?

Page 4: The Cupcake Effect

Anatom" of # cupcak!

1. Base

2. Mix

3. Sprinkles

Page 5: The Cupcake Effect

4,50$

3. Sprinkles: Wow! factor

1. Base: Content

2. Mix: Design

Anatom" of # $%it!

Page 6: The Cupcake Effect

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

Page 7: The Cupcake Effect

1. Th! bas!

The base is content. Even the most attractive websites will have little value without content!

Page 8: The Cupcake Effect

1.1 Polit! design

Clippy is the best example of “impolite” design.

Page 9: The Cupcake Effect

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

Page 10: The Cupcake Effect

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

Page 11: The Cupcake Effect

1. Ask permission

2. Offer a choice

3. Explain the options

4. Respect the final choice

What &hould b! don!:

Page 12: The Cupcake Effect

1.2 Design fo' women

Page 13: The Cupcake Effect

A woman is the CEO of her family.

Wh!?

Page 14: The Cupcake Effect

She is responsible for 58% of online purchases

80% of product purchases

A& th! CEO

She-conomy.com 2009

Page 15: The Cupcake Effect

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 %

Page 16: The Cupcake Effect

This leads to catastrophes like:

A rain cape and a shoulder bag, you say?

Page 17: The Cupcake Effect

Even today, many companies make the mistake of creating inappropriate sites for women.

Page 18: The Cupcake Effect

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

Page 19: The Cupcake Effect

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.

Page 20: The Cupcake Effect

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.

Page 21: The Cupcake Effect

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.

Page 22: The Cupcake Effect

Really?

I can’t do that!

Page 23: The Cupcake Effect

2. Th! mix

The mix comprises all aspects of the layout. In the case of web, this means design and technological choices.

Page 24: The Cupcake Effect

2.1 E-commerc! &ites

Page 25: The Cupcake Effect

The 100 most profitable websites online

$r! analyzed.

This study was published by the excellent website for Smashing Magazine.

Page 26: The Cupcake Effect

5 STEPSin the purchase process.

On average, they haveAlthough you can have between four and eight steps, without impacting optimization of the purchase process.

Page 27: The Cupcake Effect

of companies think that their e-newsletter is

Toda!,

ESSENTIAL.

81 %

Page 28: The Cupcake Effect

Dear 81% of companies,Thank you for sending me one more email each day that I have no intention of ever reading.Sincerely, Everybody

Page 29: The Cupcake Effect

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?

Page 30: The Cupcake Effect

ask that information be entered twice.

50 %

Page 31: The Cupcake Effect

But I just gave you my email address!

Example from the Apple Store.

Page 32: The Cupcake Effect

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?

Page 33: The Cupcake Effect

2.2 Responsiv! design

Page 34: The Cupcake Effect

Websites designed to adapt to differently-sized screens.

For more information, check the reference section at the end of this presentation.

Page 35: The Cupcake Effect

Because the web includes all of these...

Page 36: The Cupcake Effect

The good

Page 37: The Cupcake Effect

Content is adapted to the user’s context!

Page 38: The Cupcake Effect

The bad

A portfolio that features sites that aren’t optimized for mobile devices...

Page 39: The Cupcake Effect

The ugly

At 3 a.m. I don’t care about the technology behind the site. I just want my poutine menu!

Page 40: The Cupcake Effect

3. Th& $prinkles!

This is what delivers the Wow! factor.

Page 41: The Cupcake Effect

3.1 Th! Wow! facto#

Page 42: The Cupcake Effect

Surprise

Attention-grabbing

Entertainment

Requires two of th! following:

Page 43: The Cupcake Effect

Comic Sans is not “fun”.

#ThursdayConfessions: I have always dreamed of using Comic sans in a presentation.

Page 44: The Cupcake Effect

Interactiv&

The Typecode website is well made and entertaining.

Page 45: The Cupcake Effect

New

The Jan Ploch site is a good example of parallax.

Page 46: The Cupcake Effect

Warning!Parallax must be practical and well developed, and not interfere with the reading of content or performance.

Page 47: The Cupcake Effect

The Unfold site is hard to navigate and is a bad example of parallax, in my opinion.

Page 49: The Cupcake Effect

Generous

This was a publicity stunt staged by the Taxi agency.

Page 50: The Cupcake Effect
Page 51: The Cupcake Effect

3.2 Emotionall!-intelligent design

Page 52: The Cupcake Effect

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/

Page 53: The Cupcake Effect

It’s the emotional connection with the user that keeps them coming back...

Page 54: The Cupcake Effect

Play Tic-Tac-Toe while you wait!

Page 55: The Cupcake Effect

Facebook

Instead of writing her full name, why not just “Mom”?

Page 56: The Cupcake Effect

My favourite... obviously!

Skype

Page 57: The Cupcake Effect

Mail

#ThursdayConfessions: I still don’t know how to make a paper airplane :(

Page 58: The Cupcake Effect

ConclusionUsing a trend merely to earn bragging rights is

dangerous and costly...

Page 59: The Cupcake Effect

If used wisely, however, these trends can turn a regular site into a “cupcake site”.

Page 60: The Cupcake Effect

Than% you!QuestionsCommentsInsults

@CynthiaSavard

CYNTHIA SAVARD SAUCIERUX specialist

Compliments

@TP1

[email protected]

Page 61: The Cupcake Effect

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

Page 62: The Cupcake Effect

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