Improving e-commerce with delight

The foundations of every e-commerce - or any web site/app we design and build for that matter - are to be; functional, reliable and usable.

Whilst that can often be enough to convert your users to customers, there is an additional layer that we should be looking to add and that is pleasure.

This talk explores how adding pleasure and delight to our e-commerce user interfaces through the means of animations and interactions. Improving our user’s experience and as a result those precious conversions.

Talk given at General Assembly's 'The E-Commerce Economy' event in London on 09/06/2015

Transcript

1. delight improving e-commerce with General Assembly -
2. Ben MacGowan @benmacgowan @creativejar
3. Breaking Borders / Reading, UK
 breakingborde.rs ConfConf CONFCONF / TBC, UK
 CONF-CONF.COM
4. @benmacgowan gratuitous animations the era of https://speakerdeck.com/benmacgowan/
 the-era-of-gratuitous-animations-1 human perception the speed of https://speakerdeck.com/benmacgowan/
 the-human-perception-of-speed
5. “ ” @benmacgowan Good UI animations have purpose, personality, and alignment with your message - they just feel right. - Val Head
6. @benmacgowan “ ” I believe we can do more with motion than purely entertain. We can use motion graphics to teach, to engage, and illustrate our conclusions. - Sarah Allen
7. @benmacgowan Icon by by mathies janssen Why can we not apply this logic to e-commerce?
8. @benmacgowan functional reliable usable pleasurable
9. @benmacgowan “ ” On the average web page, users have time to read at most 28% of the words during an average visit - Jakob Neilson http://www.nngroup.com/articles/how-little-do-users-read/
10. @benmacgowan Attention ratio 6:1 1:1 3.71% 5.28% http://www.slideshare.net/kissmetrics/the-7-principles-of-conversion-centered-design-33665294
11. @benmacgowan give them what they want Visuals & rich experiences
12. @benmacgowan Testimonials vs. http://www.slideshare.net/kissmetrics/the-7-principles-of-conversion-centered-design-33665294
13. @benmacgowan Large product images increase sales by 9% https://vwo.com/blog/larger-product-images-increase-conversion-rate/
14. @benmacgowan Context of use
15. @benmacgowan uplift in 
 new trial starts 45% http://www.slideshare.net/kissmetrics/the-7-principles-of-conversion-centered-design-33665294
18. @benmacgowan “ ” As elements respond to our interactions, it sometimes is a little easier to comprehend what just happened when we sprinkle in the element of time. A built in intentional delay in the form of an animation or transition, respects cognition and gives people the required time to understand a change in size or position. - GoodUI
19. @benmacgowan 31% LIFT IN EMAIL SIGN-UPS
20. @benmacgowan
21. @benmacgowan
22. @benmacgowan
23. @benmacgowan How can we delight rather than frustrate?
24. @benmacgowan Click designed by Rohan Gupta from the Noun Project Photo credit: https://www.flickr.com/photos/spavaai/2536426227 expectation
25. @benmacgowan Rabbit designed by Thomas Hirter from the Noun Project Photo credit: https://www.flickr.com/photos/martijnvandalen/5280691005 distraction
26. @benmacgowan Theater designed by Diego Naive from the Noun Project emotion
27. @benmacgowan People designed by Naomi Atkinson from the Noun Project demographic
28. @benmacgowan Chat designed by Ed Harrison from the Noun Project Photo credit: https://www.flickr.com/photos/91591049@N00/12461846804 BRand messaging
29. @benmacgowan
30. @benmacgowan
31. @benmacgowan functional reliable usable pleasurable
32. thank you @benmacgowan