The Cupcake Effect

Download The Cupcake Effect

Post on 27-Jan-2015

103 views

Category:

Design

0 download

Embed Size (px)

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

<ul><li> 1. Presentation deliveredon October 25, 2012CYNTHIASAVARD SAUCIERUX specialist@CynthiaSavard@TP1 The Cupcake Effect Or, how clever use of current trends can turn a muffin site into a cupcake site</li></ul> <p> 2. Warning!Using a trend merely to earn bragging rights is dangerous and costly! 3. What is the dierencebetween a mun 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! factor2. Mix: Design1. Base: ContentAnatomy of a website 6. 3. Wow! factor3.1 Capture attention, surprise, entertain3.2 Emotionally-intelligent design2. Design trends2.1 E-commerce website design2.2 Responsive design1. Content trends1.1 Polite design1.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 impolitedesign.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.Hes 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 PITCHfor 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 purchasesShe-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 nd the followingtips: 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. text2. Scenarios vs. characteristics3. Different navigation4. Function vs. emotion 20. Certain industries usepersonas - which is Warning!great - but we mustavoid the classic busymom on the gopersona.Avoid using stereotypes. Rather, choose anARCHETYPE. 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 cant 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 theThe 100 most profitableexcellent website forSmashing Magazine.websites onlinewere 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 createan account profile.Can you imagine being asked for a password every time you orderchicken nuggets at McDonalds? 30. 50%ask that information beentered 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. Its hard to improve.2. Its 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 theusers context! 38. The badA portfolio that features sites that arent optimized formobile devices... 39. The ugly At 3 a.m. I dont 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 ofusing 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 its 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. Its 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. SkypeMy favourite... obviously! 56. Mail #ThursdayConfessions: I still dont 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 SAUCIERUX specialistcynthia@tp1.ca@CynthiaSavard@TP1QuestionsCommentsInsults Compliments 60. References Polite design: Whitworth, B., 2005, Polite Computing, October, Behaviour &amp; 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 acknowledgementsResponsive 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.aspxCupcake illustration: Pier-Luc Saint-Germain(THANK YOU!): @PierotStGermainRevision: Jean-Yves Perrodin Isnt it cute? Feedback: Jean-Franois Poulin @Jeffpouli </p>