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”
Warning!Using a trend merely to earn bragging rights is dangerous and costly!
What is the diﬀerencebetween a muﬃn and acupcake? Why is onealmost double the priceof the other? $2.50 $4.50
3. Sprinkles 2. Mix 1. BaseAnatomy of a cupcake
3. Sprinkles: Wow! factor 2. Mix: Design 1. Base: ContentAnatomy of a website
The base is content.Even the mostattractive websites willhave little value withoutcontent! 1. The base
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.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...
Despite25,000 hoursof user testing,Mr. Clippy was such a spectacularfailure,his demise was part of theSALES PITCH for Microsoft XP. Whitworth, B., 2005
What should be done:1. Ask permission2. Offer a choice3. Explain the options4. Respect the final choice
As the CEOShe is responsible for 58% of online purchases 80% of product purchases She-conomy.com 2009
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)
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 ﬁnd the following“tips”: Find recipes Counting calories Guided meditations Wow, they got everything right!
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
Certain industries usepersonas - which is Warning!great - but we mustavoid the classic “busymom on the go”persona. Avoid using stereotypes. Rather, choose an ARCHETYPE.
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!
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/
It’s the emotional connectionwith the user that keeps themcoming back...
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
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