Advances in e-commerce user interface design


Published on

To remain competitive, e-commerce user interfaces need to evolve as customer behaviors and technologies change. This paper describes several new user interface features that designers may want to add to their e-commerce offerings. The features include social media connections, storefronts on social media sites, automated product recommendations, dynamic product customization, dynamic product contextual simulation, flash sales, and mobile commerce.

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • If you want a copy of this presentation, please send me an e-mail
  • This is what I’d like to talk to you about today We’re an an HCI conference, why e-commerce interaction is a good area in which to work Talk about the popularity of e-commerce with Internet users
  • Use user interface design features to drive sales
  • Why is e-commerce user interface design worth talking about? a good area for interaction designers? Must make it easy for users to find products and buy products If the UI design is good people are likely to buy more on the site Designers valued because they help bring in money
  • Great field to work in because it is very popular E-commerce is growing
  • Due to time, I had to pick three design features but there are more in my paper
  • Social commerce is the use of e-commerce on social media sites When you talk social media, you have to talk about Facebook “ Fan” = “Like”
  • Social media sites include Facebook and WordPress blogs Make your social commerce site highly interactive – two way communication Amazon Sweepstakes: Sears Sweepstakes: Dunkin Donuts polls: Sears questions: Dunkin Donuts discussions:
  • Several vendors can help you create e-commerce on your Facebook page A few do the checkout right on Facebook, but most link you to the existing Web site. Use tools from Aggregate Markets, Payvment, Storefront Social, and Usablenet to create a storefront tab on your Facebook page. Cartfly to embed an Amazon storefront in your Facebook or MySpace social networking page or your Blogger or WordPress blog. Facebook storefront by Alvenda (8thbridge). Facebook stores here take users to the stores’ e-commerce sites for purchase. Borders storefront on Facebook is by StorefrontSocial. Purchases link to YouBrandInc storefront on Facebook uses Payvment. NineWest and Vans are by Fluid Social.
  • CartFly is used on the CMC Design Studio page on WordPress Affiliate Easel for Amazon plug-in on WordPress WordPress also has its own e-commerce plug-in and do PayPal or Google Checkout ( Apparently you can add a PayPal shopping cart to Blogger.
  • Exploits the capabilities of the Web; not available in brick and mortar stores Shoppers personalize products
  • $175 for the custom Dwade basketball shoes $42 for custom Barbie “Laudi Vidni” backwards is “Individual” Exploits the power of the Web to allow customers to design customized products
  • Can e-mail the customized Barbie info to a friend or parent
  • Addresses one of the major challenges of buying on the Web – buyer cannot see what the item looks like on them (like clothes) or in their environment (like art)
  • Augmented reality by Metaio Demo: Capture images and share to Facebook Go to to purchase by product name (link currently broken)
  • Upload your own photo, then customize makeup, including “amount” Buy the products listed Share to Facebook or Twitter
  • Customize size, hair, skin color of each member of the wedding party Dress each member of the wedding party Select “photo” background Print “photo” and shopping list to take to appointment
  •, select product, select “FRAME IT” Select product, select “view in room” images Use user interface design to increase the chances someone will make a purchase
  • The retailer got a 57% increase in the look-to-buy conversion rate for shoppers who used their Virtual Fitting Room compared to shoppers who used their traditional style and size guide.’s virtual dressing room increased their clothing sales an average of 3.1 times and decreased the number of packages returned by 28%
  • User interface design can drive the needs of the business
  • Advances in e-commerce user interface design

    1. 1. Advances in e-commerce user interface design Lawrence Najjar Austin, TX USA 1 HCI International 2011 Conference, Orlando, FL USA
    2. 2. Agenda Introduction Purpose Why e-commerce interaction design? Popularity of e-commerce Advanced user interface design features Conclusion 2
    3. 3. Lawrence Najjar introduction Ph.D. in engineering psychology Over 20 years experience in interaction design User experience design consultant Experience with many areas of interaction design  For e-commerce:,, (Najjar, 2001, 2005, 2011a, 2011b) 3
    4. 4. PurposeBecause user interface can drive sales: Describe new, innovative user interface design features designers may want to add to e-commerce sites 4
    5. 5. Why e-commerce interaction design? Many user interface design challenges Constant updates Good interaction design makes money (Battey, 1999; Spool, 2009; Tedeschi, 1999, 2002; Wixon & Jones, 1992) Interaction designers are valued 5
    6. 6. Popularity of e-commerce Over 85% of Internet users worldwide have made online purchase (Nielsen, 2008) In US, 8% of all retail sales via e-commerce (Schonfeld, 2010) 6
    7. 7. Advanced user interface design features Social commerce Dynamic product customization Dynamic product contextual simulation 7
    8. 8. Social commerce Facebook is second most visited Web site in the world (Alexa, n.d.) & most visited site in the US (Saba, 2010) Most e-commerce users interact with social media and follow a brand on Facebook (Adregate Markets, 2010) Fans of brands in Facebook spend US$136.38 per year on the brand compared to non-fans (Taylor, 2010) 8
    9. 9. Social commerce & user interface design Let fans buy from your social media sites Create social selling experience on social media site  “Like” button on product pages  Special deals for people who “Like” your social media storefront  Customer comments  Sweepstakes  Polls  Questions  Discussions 9
    10. 10. Storefronts on Facebook 10
    11. 11. Storefronts on WordPress 11
    12. 12. Dynamic product customization Allow users to dynamically customize products, see the results, then purchase 12
    13. 13. Dynamic product customization examples 13
    14. 14. Dynamic product customization: Barbie Styled by Me 14
    15. 15. Dynamic product customization: Barbie Styled by Me 15
    16. 16. Dynamic product contextual simulation Allows users to see customized products on simulations of themselves, their group, or their living space Simulate product in realistic environment to support easy purchase decision 16
    17. 17. Dynamic product contextual simulation: JC Penney & Seventeen 17
    18. 18. Dynamic product contextual simulation: Stila Cosmetics 18
    19. 19. Dynamic product contextual simulation: David’s Bridal 19
    20. 20. Dynamic product contextual simulation: 20
    21. 21. Dynamic product contextual simulation: Hawes and Curtis1 4 2 5 3 21
    22. 22. Conclusions To keep shoppers engaged & increase sales, add new user interface design features that:  Support the needs of the business  Your users want. 22
    23. 23. Contact meE-mail: lawrence_najjar@yahoo.comWeb site: 23
    24. 24. References ABI Research (2010, February 16). Shopping by mobile will grow to $119 billion in 2015. Retrieved from$119+Billion+in+2015 Adregate Markets (2010, April 20). Adregate Markets brings true social shopping to Facebook with ShopFans secure social commerce application. Retrieved from Alexa (n.d.). Top sites. Retrieved from Batista, A. (2010, July 22). New m-commerce guide suggests strategies to leverage smartphones for conversion. Retrieved from Battey, J. (1999, April 19). IBM’s redesign results in a kinder, simpler Web site. Infoworld . Retrieved from Budde, P. (2009, October). Global digital economy – E-commerce & m-commerce trends & statistics. Retrieved from Deatsch, K. (2010, July 23). 3 out of 4 retailers have a mobile strategy in place, study finds. Retrieved from Keane, M. (2010, May 27). comScore: Flash buying sites are making people spend more money online. Retrieved from mobiThinking (2011, March). Global mobile statistics 2011: All quality mobile marketing research, mobile Web stats, subscribers, ad revenue, usage, trends… Retrieved from Najjar, L. J. (2001). E-commerce user interface design for the Web. In: Smith, M. J., Salvendy, G., Harris, D., Koubek, R. J. (eds.) Usability evaluation and interface design: Proceedings of HCI International 2001, vol. 1, pp. 843—847. Mahwah, NJ: Lawrence Erlbaum. 24 Najjar, L. J. (2005). Designing e-commerce user interfaces. In R. W. Proctor & K-P, L. Vu., (Eds)., Handbook of human factors in Web design (pp. 514-527). Mahwah, NJ: Lawrence Erlbaum.
    25. 25. References Najjar, L. J. (2011a). Advances in e-commerce user interface design. In G. Salvendy & M. J. Smith (Eds.), Human Interface and the Management of Information. Interacting with Information, Part II, HCI International 2011, Lecture Notes in Computer Science 6772 (pp. 292-300). Heidelberg: Springer. Najjar, L. J. (2011b). Designing e-commerce user interfaces. In K-P. L. Vu & R. W. Proctor (Eds.), Handbook of human factors in Web design (Second edition) (pp. 587-598). Mahwah, NJ: Lawrence Erlbaum. Nielsen Company (2008, February). Trends in online shopping. Retrieved from Ryan, S. (2010, October 12). The m-commerce revolution is here. Retrieved from Saba, J. (2010, December 30). Facebook tops Google as most visited site in U.S. Retrieved from Schonfeld, E. (2010, March 8). Forrester forecast: Online retail sales will grow to $250 billion by 2014. Retrieved from Spool, J. M. (2009, January 14). The $300 million button. Retrieved from Taylor, V. (2010, June 11). A brand’s Facebook fans are valuable customers. Retrieved from’s-facebook-fans-are-valuable-consumers/ Tedeschi, B. (1999, August 30). Good Web site design can lead to healthy sales. The New York Times e-commerce report. Retrieved from Tedeschi, B. (2002a, November 18). E-tailers are putting the multimedia tinsel back on their shopping sites this holiday season. The New York Times e-commerce report , pC6. 25
    26. 26. References Wixon, D., & Jones, S. (1992). Usability for fun and profit: A case study of the design of DEC RALLY version 2 . Internal report, Digital Equipment Corporation. Cited in Karat, C., A business case approach to usability cost justification. In Bias, R. G., & Mayhew, D. J. (1994). Cost-justifying usability . San Diego: Academic Press 26