The Cupcake Effect

  • 1,226 views
Uploaded on

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

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

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,226
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
20
Comments
2
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. Warning!Using a trend merely to earn bragging rights is dangerous and costly!
  • 3. What is the differencebetween a muffin and acupcake? Why is onealmost double the priceof the other? $2.50 $4.50
  • 4. 3. Sprinkles 2. Mix 1. BaseAnatomy of a cupcake
  • 5. 3. Sprinkles: Wow! factor 2. Mix: Design 1. Base: ContentAnatomy of a website
  • 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. The base is content.Even the mostattractive websites willhave little value withoutcontent! 1. The base
  • 8. Clippy is the bestexample of “impolite”design. 1.1 Polite design
  • 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. 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. What should be done:1. Ask permission2. Offer a choice3. Explain the options4. Respect the final choice
  • 12. 1.2 Design for women
  • 13. Why?A woman is the CEO of her family.
  • 14. As the CEOShe is responsible for 58% of online purchases 80% of product purchases She-conomy.com 2009
  • 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. This leads to catastrophes like: A rain cape and a shoulder bag, you say?
  • 17. Even today, manycompanies make themistake of creatinginappropriate sites forwomen.
  • 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. 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. 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. 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. Really? I can’t do that!
  • 23. The mix comprises allaspects of the layout.In the case of web, thismeans design andtechnological choices. 2. The mix
  • 24. 2.1 E-commerce sites
  • 25. This study waspublished by the The 100 most profitableexcellent website forSmashing Magazine. websites online were analyzed.
  • 26. Although you can havebetween four and eightsteps, withoutimpacting optimization On average,they have 5 STEPSof the purchaseprocess. in the purchase process.
  • 27. Today, 81 % of companies think that their e-newsletter is ESSENTIAL.
  • 28. Dear 81% of companies,Thank you for sending me one more emaileach day that I have no intention ofever reading.Sincerely,Everybody
  • 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. 50 %ask that information be entered twice.
  • 31. Example from theApple Store. But I just gave you my email address!
  • 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. 2.2 Responsive design
  • 34. For more information,check the referencesection at the end ofthis presentation. Websites designed to adapt to differently-sized screens.
  • 35. Because the web includes all of these...
  • 36. The good
  • 37. Content is adapted to theuser’s context!
  • 38. The badA portfolio that features sites that aren’t optimized formobile devices...
  • 39. The ugly At 3 a.m. I don’t care about the technology behind the site. I just want my poutine menu!
  • 40. This is what deliversthe Wow! factor. 3. The sprinkles!
  • 41. 3.1 The Wow! factor
  • 42. Requires two of the following: Surprise Attention-grabbing Entertainment
  • 43. Comic Sansis not “fun”. #ThursdayConfessions: I have always dreamed of using Comic sans in a presentation.
  • 44. The Typecode websiteis well made andentertaining. Interactive
  • 45. The Jan Ploch site is agood example ofparallax. New
  • 46. Warning!Parallax must be practical and well developed,and not interfere with the reading of content orperformance.
  • 47. The Unfold site is hardto navigate and is abad example ofparallax, in my opinion.
  • 48. I completed the game three times! Fun!
  • 49. This was a publicitystunt staged by theTaxi agency. Generous
  • 50. 3.2 Emotionally-intelligent design
  • 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. It’s the emotional connectionwith the user that keeps themcoming back...
  • 53. Play Tic-Tac-Toe whileyou wait!
  • 54. FacebookInstead of writing her full name, why not just “Mom”?
  • 55. Skype My favourite... obviously!
  • 56. Mail #ThursdayConfessions: I still don’t know how to make a paper airplane :(
  • 57. ConclusionUsing a trend merely to earn bragging rights is dangerous and costly...
  • 58. If used wisely, however, these trends can turn a regular site into a “cupcake site”.
  • 59. CYNTHIAThank you! SAVARD SAUCIER UX specialist cynthia@tp1.ca @CynthiaSavard @TP1 Questions Comments Insults Compliments
  • 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. 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