0
Presentation deliveredon October 25, 2012                                                                                 ...
Warning!Using a trend merely to earn bragging   rights is dangerous and costly!
What is the differencebetween a muffin and acupcake? Why is onealmost double the priceof the other?                          ...
3. Sprinkles             2. Mix             1. BaseAnatomy of a cupcake
3. Sprinkles: Wow! factor          2. Mix: Design          1. Base: ContentAnatomy of a website
3. Wow! factor  3.1 Capture attention, surprise, entertain  3.2 Emotionally-intelligent design2. Design trends  2.1 E-comm...
The base is content.Even the mostattractive websites willhave little value withoutcontent!                            1. T...
Clippy is the bestexample of “impolite”design.                        1.1 Polite design
Impolite designClippy claims to know what you want to do.He monitors your actions, but does not remember your preferences....
Despite25,000 hoursof user testing,Mr. Clippy was such a spectacularfailure,his demise was part of theSALES PITCH         ...
What should be done:1. Ask permission2. Offer a choice3. Explain the options4. Respect the final choice
1.2 Design for women
Why?A woman is the CEO of her family.
As the CEOShe is responsible for 58% of online purchases                     80% of product purchases                     ...
However... 1%    believe that electronics manufacturers have their needs       in mind when developing products.       bel...
This leads to catastrophes like:        A rain cape and a shoulder bag, you say?
Even today, manycompanies make themistake of creatinginappropriate sites forwomen.
Tech tips?In the Tech Tips sectionof the Della website,we find the following“tips”:                           Find recipes ...
For more information,                          How to speak to womencheck the referencesection at the end ofthis presentat...
Certain industries usepersonas - which is                             Warning!great - but we mustavoid the classic “busymo...
Point #4 is my ownpersonal addition to the                                         Buchanan testHolly Buchanan test.      ...
Really?          I can’t do that!
The mix comprises allaspects of the layout.In the case of web, thismeans design andtechnological choices.                 ...
2.1 E-commerce sites
This study waspublished by the                        The 100 most profitableexcellent website forSmashing Magazine.      ...
Although you can havebetween four and eightsteps, withoutimpacting optimization                         On average,they ha...
Today,     81       %         of companies think that         their e-newsletter is     ESSENTIAL.
Dear 81% of companies,Thank you for sending me one more emaileach day that I have no intention ofever reading.Sincerely,Ev...
24         %        require clients to create          an account profile.Can you imagine being asked for a password every...
50    %ask that information be    entered twice.
Example from theApple Store.                   But I just gave you my email address!
Why?Why is the purchaseprocess still not user-friendly in 2012?                          1. It’s hard to improve.         ...
2.2 Responsive design
For more information,check the referencesection at the end ofthis presentation.    Websites designed to adapt to different...
Because the web includes all of these...
The good
Content is adapted to theuser’s context!
The badA portfolio that features sites that aren’t optimized formobile devices...
The ugly           At 3 a.m. I don’t care about the technology           behind the site. I just want my poutine menu!
This is what deliversthe Wow! factor.                        3. The sprinkles!
3.1 The Wow! factor
Requires two of the following:     Surprise     Attention-grabbing     Entertainment
Comic Sansis not “fun”.    #ThursdayConfessions: I have always dreamed of                using Comic sans in a presentation.
The Typecode websiteis well made andentertaining.                       Interactive
The Jan Ploch site is agood example ofparallax.                          New
Warning!Parallax must be practical and well developed,and not interfere with the reading of content orperformance.
The Unfold site is hardto navigate and is abad example ofparallax, in my opinion.
I completed the game three times!                Fun!
This was a publicitystunt staged by theTaxi agency.                       Generous
3.2 Emotionally-intelligent design
An emotionally intelligent interaction is any state (orchange in state) of a website/app where the messaging orfunctionali...
It’s the emotional connectionwith the user that keeps themcoming back...
Play Tic-Tac-Toe whileyou wait!
FacebookInstead of writing her full name, why not just “Mom”?
Skype        My favourite... obviously!
Mail       #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”.
CYNTHIAThank you!                          SAVARD SAUCIER                          UX specialist                          ...
References             Polite design:             Whitworth, B., 2005, Polite Computing, October, Behaviour & Information ...
References and acknowledgements                  Responsive design :                  http://blog.bleepsystems.com/2012/so...
The Cupcake Effect
Upcoming SlideShare
Loading in...5
×

The Cupcake Effect

1,371

Published on

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

Published in: Design
2 Comments
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,371
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
Comments
2
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "The Cupcake Effect"

  1. 1. Presentation deliveredon October 25, 2012 CYNTHIA SAVARD SAUCIER UX specialist @CynthiaSavard @TP1 The Cupcake Effect Or, how clever use of current trends can turn a “muffin site” into a “cupcake site”
  2. 2. Warning!Using a trend merely to earn bragging rights is dangerous and costly!
  3. 3. What is the differencebetween a muffin and acupcake? Why is onealmost double the priceof the other? $2.50 $4.50
  4. 4. 3. Sprinkles 2. Mix 1. BaseAnatomy of a cupcake
  5. 5. 3. Sprinkles: Wow! factor 2. Mix: Design 1. Base: ContentAnatomy of a website
  6. 6. 3. Wow! factor 3.1 Capture attention, surprise, entertain 3.2 Emotionally-intelligent design2. Design trends 2.1 E-commerce website design 2.2 Responsive design1. Content trends 1.1 Polite design 1.2 Design for women
  7. 7. The base is content.Even the mostattractive websites willhave little value withoutcontent! 1. The base
  8. 8. Clippy is the bestexample of “impolite”design. 1.1 Polite design
  9. 9. Impolite designClippy 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 manytimes you ask him to...
  10. 10. Despite25,000 hoursof user testing,Mr. Clippy was such a spectacularfailure,his demise was part of theSALES PITCH for Microsoft XP. Whitworth, B., 2005
  11. 11. What should be done:1. Ask permission2. Offer a choice3. Explain the options4. Respect the final choice
  12. 12. 1.2 Design for women
  13. 13. Why?A woman is the CEO of her family.
  14. 14. As the CEOShe is responsible for 58% of online purchases 80% of product purchases She-conomy.com 2009
  15. 15. However... 1% believe that electronics manufacturers have their needs in mind when developing products. believe that brands only consider the female market for71 % cleaning and beauty products. Consumer Electronics Association (CEA)
  16. 16. This leads to catastrophes like: A rain cape and a shoulder bag, you say?
  17. 17. Even today, manycompanies make themistake of creatinginappropriate sites forwomen.
  18. 18. Tech tips?In the Tech Tips sectionof the Della website,we find the following“tips”: Find recipes Counting calories Guided meditations Wow, they got everything right!
  19. 19. For more information, How to speak to womencheck the referencesection at the end ofthis presentation. 1. Human vs. text 2. Scenarios vs. characteristics 3. Different navigation 4. Function vs. emotion
  20. 20. Certain industries usepersonas - which is Warning!great - but we mustavoid the classic “busymom on the go”persona. Avoid using stereotypes. Rather, choose an ARCHETYPE.
  21. 21. Point #4 is my ownpersonal addition to the Buchanan testHolly Buchanan test. 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? Congratulations!
  22. 22. Really? I can’t do that!
  23. 23. The mix comprises allaspects of the layout.In the case of web, thismeans design andtechnological choices. 2. The mix
  24. 24. 2.1 E-commerce sites
  25. 25. This study waspublished by the The 100 most profitableexcellent website forSmashing Magazine. websites online were analyzed.
  26. 26. Although you can havebetween four and eightsteps, withoutimpacting optimization On average,they have 5 STEPSof the purchaseprocess. in the purchase process.
  27. 27. Today, 81 % of companies think that their e-newsletter is ESSENTIAL.
  28. 28. Dear 81% of companies,Thank you for sending me one more emaileach day that I have no intention ofever reading.Sincerely,Everybody
  29. 29. 24 % require clients to create an account profile.Can you imagine being asked for a password every time you orderchicken nuggets at McDonald’s?
  30. 30. 50 %ask that information be entered twice.
  31. 31. Example from theApple Store. But I just gave you my email address!
  32. 32. Why?Why is the purchaseprocess still not user-friendly in 2012? 1. It’s hard to improve. 2. It’s not exciting to design. 3. It works for the companies.
  33. 33. 2.2 Responsive design
  34. 34. For more information,check the referencesection at the end ofthis presentation. Websites designed to adapt to differently-sized screens.
  35. 35. Because the web includes all of these...
  36. 36. The good
  37. 37. Content is adapted to theuser’s context!
  38. 38. The badA portfolio that features sites that aren’t optimized formobile devices...
  39. 39. The ugly At 3 a.m. I don’t care about the technology behind the site. I just want my poutine menu!
  40. 40. This is what deliversthe Wow! factor. 3. The sprinkles!
  41. 41. 3.1 The Wow! factor
  42. 42. Requires two of the following: Surprise Attention-grabbing Entertainment
  43. 43. Comic Sansis not “fun”. #ThursdayConfessions: I have always dreamed of using Comic sans in a presentation.
  44. 44. The Typecode websiteis well made andentertaining. Interactive
  45. 45. The Jan Ploch site is agood example ofparallax. New
  46. 46. Warning!Parallax must be practical and well developed,and not interfere with the reading of content orperformance.
  47. 47. The Unfold site is hardto navigate and is abad example ofparallax, in my opinion.
  48. 48. I completed the game three times! Fun!
  49. 49. This was a publicitystunt staged by theTaxi agency. Generous
  50. 50. 3.2 Emotionally-intelligent design
  51. 51. An emotionally intelligent interaction is any state (orchange in state) of a website/app where the messaging orfunctionality includes attention to details that create auser experience that feels organic and human. Theseinteractions can be a big experience (like when an entirewebsite is down), or a very small experience (such as whenan error state on a form element appears). They can bederived from different elements, including messagingand copy, color and design, and responsiveness to userinputs and system outputs. Combining each of thesecrafted experiences creates soul and personality for awebsite. And it’s that emotional connection with usersthat builds lasting loyalty, and raving fans. http://uxdesign.smashingmagazine.com/2012/03/28/give-your-website-soul-with-emotionally-intelligent-interactions/
  52. 52. It’s the emotional connectionwith the user that keeps themcoming back...
  53. 53. Play Tic-Tac-Toe whileyou wait!
  54. 54. FacebookInstead of writing her full name, why not just “Mom”?
  55. 55. Skype My favourite... obviously!
  56. 56. Mail #ThursdayConfessions: I still don’t know how to make a paper airplane :(
  57. 57. ConclusionUsing a trend merely to earn bragging rights is dangerous and costly...
  58. 58. If used wisely, however, these trends can turn a regular site into a “cupcake site”.
  59. 59. CYNTHIAThank you! SAVARD SAUCIER UX specialist cynthia@tp1.ca @CynthiaSavard @TP1 Questions Comments Insults Compliments
  60. 60. References Polite design: Whitworth, B., 2005, Polite Computing, October, Behaviour & Information Technology. vol. 24, no. 5, September, p353 363 Presentation Clippy: 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.pdf http://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/benchmark Pier-Luc St-Germain
  61. 61. References and acknowledgements 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.com The Happy Bit: http://thehappybit.com/portfolio/ La Banquise: http://labanquise.com Typecode: http://www.Typecode.com Jan Ploch: http://www.janploch.de/ Unfold: http://bo.lt/hbve1#home Facebook: http://www.facebook.com Skype and Mail: exemple tiré du blog “Little big details” ci-dessous Little Big Details: http://littlebigdetails.com/page/2 Google 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!): @PierotStGermain Revision: Jean-Yves Perrodin Isn’t it cute? Feedback: Jean-François Poulin @Jeffpouli
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×