The Cupcake Effect


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
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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 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.
  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 @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: Design for women: consumer electronics Association (CEA) 2009 Women: Archetypes, not stereotypes: stereotypes/ How to speak to women: Purchase process in 2012 Pier-Luc St-Germain
  61. 61. References and acknowledgements Responsive design : Examples: Authentic Jobs: The Happy Bit: La Banquise: Typecode: Jan Ploch: Unfold: Facebook: Skype and Mail: exemple tiré du blog “Little big details” ci-dessous Little Big Details: Google Pacman: et 2010/05/24/the-tragic-cost-of-google-pac-man-4-82-million-hours/ Taxi Saison des nid-de-poules: et 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.