You are on page 1of 5

Designing Mobile Shopping Experiences for Touch-enabled Smartphones

Laima Tazmin COMS E6998: Mobile HCI Columbia University lt2233@columbia.edu ABSTRACT In this paper we present a set of design principles for creating mobile shopping sites outfitted for touch-enabled smartphones. The goal is to provide users with an engaging and rich shopping experience that takes full advantage of touch interaction, such as swiping and zooming, and leverages users familiarity with mobile apps. Despite the potential for a huge market of mobile shoppers, the majority of mobile shopping sites do not meet consumers expectations, quickly turning them off with poor site functionality. We explore these design weaknesses with a needs analysis of smartphone users who frequently shop online. We describe one specific application, clothing retail, in which we implement a mobile web app prototype. The results of our preliminary evaluation suggest that users have an increased level of satisfaction and engagement with our approach. INTRODUCTION In the last year, about 60% of smartphone users purchased something non-mobile1 with their phones within a period of six months [1]. Mobile shopping2 sales in 2010 were $2.4 billion, double from the year before, but growth predictions for this year are even more explosive: $9 billiontaking into account the proliferation of smartphones [2,5]. The key finding is that smartphone users are growing more and more comfortable shopping with their mobile devices. Mobile users are already accustomed to transacting on their phones; app stores see an average of 350,000 paid downloads per day and in-app purchases have doubled in six months [3]. Now, these users can make the transition from purchasing virtual goods to physical goods thanks to the large number of available shopping and retail apps. Faster network speeds and better mobile browser capabilities are also encouraging online shoppers turn to the mobile Internet for their shopping needs. A user study by Adobe points out that users actually prefer online shopping through a mobile web browser rather than a native app [4,6]. Access to shopping through a mobile browser achieved the highest user preference (78%) over That is, not a mobile app or virtual good. Mobile shopping (also m-commerce) refers to shopping over the mobile web, as opposed to through an app store.
2 1

other content types. And, at least 61% of mobile users preferred using a mobile browser for carrying out each shopping task. An underlying reason is that a browser offers direct access to information without the added work of downloading or searching for the right shopping app, which is actually hard to do; there are more than 300,000 in Apples app store alone [7]. A more recent study suggests that consumers may even prefer online shopping from their mobile devices to shopping from their PC or laptop [2,8], an indication that m-commerce is closely following the trend of on-the-go media content consumption. While research has shown that mobile users have a considerable interest in shopping with their phones, and the potential for market growth is enormous, user satisfaction is actually still low. In a recent survey, 84% of consumers experienced problems when conducting a mobile transactionfinding them even more frustrating than going to the DMV. After receiving an error message, the second most common complaint was that the app or site was difficult to navigate [9,10]. In an earlier study from 2009, consumers were also likely to abandon mobile purchasing due to poor site functionality from lack of mobile optimization [11]. One striking observation from the current survey is that 85% of shoppers expect their mobile experience to be as good or better than online via a computer. So, not only are mobile shopping sites still underperforming two years later, but expectations from consumers are ultra-high despite certain form factor limitations of mobile devices. In this paper, our motivation is to understand and resolve the dichotomy between the vision of mobile shopping and the reality. Mobile users want to shop on the go; they want instant access to product informationwithout additional downloadand they want the shopping experience on their device to rival their computer. Figuring out how to meet these needs is crucial for achieving the anticipated growth of mobile commerce, and all that follows. In the following sections, we first summarize the relevant concepts that inform our qualitative study, then identify the current design weaknesses of mobile shopping sites, based on a needs analysis of smartphone users who frequently shop online. We conclude with a preliminary evaluation of

a web app prototype that implements the design principles we have derived from the study. RELATED WORK Mobile (and online) shopping is closely related to the idea of exploratory search. Exploratory search is search that goes beyond lookup; when the user has a broad information need, but no specific goal that can be carried out by a keyword query. The information need typically evolves over the period of exploration, as the user better understands what they are after [12,15]. Some example scenarios are planning a vacation or finding the most relevant product. Exploratory search is sometimes also known as browsing [13]. Online shoppers often begin by browsing within a highlevel product category (e.g. dresses); then re-formulate or narrow their product focus (e.g. little black dresses) in response to discovery and observed content. Recently, the notion of exploratory search has expanded to include casual-leisure searching [14]. In these scenarios, users are motivated to kill time or distract themselves with something interesting, without defining a particular domain of information. [14] pooled a large collection of tweets where they observed that users often engage in need-less browsing. Here, finding information is secondary to the experience of finding. We found this particular idea consistent with our needs analysis: our mobile users were usually bored or waiting for something when engaging in mobile shopping. Much research has focused on designing interfaces for exploratory search, with the most common approach being faceted navigation, where data is classified into multiple categorical buckets, called facets. This technique allows the user to browse and narrow search results by named categories without resorting to arbitrary keyword searching. Facet-based interfaces are especially useful for mobile search [13]. FaThumb uses faceted browsing to deemphasize text entry for small devices and improve usability. The user evaluation confirmed that faceted navigation was strongly preferred for under-defined and complex search tasks. We already see this type of categorical navigation standard in e-commerce sites, but find its role for m-commerce even more essential. NEEDS ANALYSIS OF MOBILE SHOPPERS The objective of our study is to capture and translate smartphone users expectations for mobile shopping into well-defined user interfaces and features. For this paper, we chose to focus on a specific domain: clothing retail. Clothing items were the second most popular mobile purchases after physical media products [1]. Ultimately, we intend to derive a long-lasting design

model for mobile commerce, so we made an assumption that smartphones will all become equipped with multitouch screens within the next five years. Thus, we focus on touch-enabled smartphones in our work. The format of our needs analysis is as follows: we surveyed five participants; all were female, early 20s, frequently shop online for clothing (i.e. once a week, on average), and own a touch-enabled smartphone (2 iPhone, 2 Android, 1 Blackberry). We asked questions about their mobile shopping usage, such as how often they do it, and about their views on the shopping experience, such as what they like or dislike the most. On average, participants accessed mobile shopping sites3 a few times per month, with each browsing session lasting 15 minutes. Typical scenarios when using the phone to shop online were in class, in bed, at home and out of reach of computer, and outside waiting for something. These responses were not surprising: a recent study by Yahoo! found that 89% of mobile Internet usage happens at home [16]. In almost all cases, they were boredsymptomatic of casual-leisure search. Our survey also asked participants what kind of information they value the most when looking at products on their mobile phone. The most important were images, including multiple views of the clothing item, followed by price, available sizes and reviews. Participants all expressed dissatisfaction with their shopping experiences. As expected, small screen sizes and connection speeds were common deterrents. One participant admitted that she gave up shopping altogether if a site took too long to load. The rest of the responses related to one of two areas: usability and the desire for richer media interfaces.
Usability

All of the participants complained that images are always too small. Even if the browser supports higher resolutions, the added effort of pinching and zooming is taxing and takes away from the experience. At the same time, users want to be able to view a lot of images in a short amount of time. Here, we see the contradictory demands from mobile shoppers that make it difficult to meet their expectations. Users also dislike complex site navigation, where there are multiple smaller sub-menus, often in the form of drop down menus or text-only links. Part of the reason is that touch screens have an occlusion problem, also called the
3

Mobile shopping sites included both full version sites and sites optimized for mobile devices.

fat finger problem, and improving selection precision with touch is a major point of research today [17,18]. By the same token, none of the participants ever used the cart. They felt that the checkout process on the phone is cumbersome and requires too much typingsomething most touch users want to avoid when lacking physical keyboards. Concern over security also prevented them from purchasing on the phone.
Rich-media and Engagement

Touch-based smartphone users are used to tapping, swiping and zooming, but this mode of interaction is rarely applied to mobile shopping sites. Our participant felt that swiping and zooming would improve her shopping experience. Participants also cited examples of mobile native apps that have rich-media interfaces and full-screen image zoom and videos. In fact, most mobile retail sites lack rich media only 18% of retailers claimed to have it, according to a survey by Adobe [19]. One reason that our users preferred to access the full-version of shopping sites, despite slower loading time, was that mobile sites were too simple and watered-down for their tastes. Most of the participants wanted better integration between mobile sites and the brick-and-mortar stores. An example scenario is finding the nearest store carrying a particular item, or ordering an item for pickup at a storethis type of integration would shift more shoppers away from their laptops to their phones, as predicted. DESIGNING MOBILE SHOPPING SITES Our needs analysis shows that mobile shopping sites have a lot of room for improvement. After capturing these responses, we translated them into a set of guidelines that serve as the basis for our final design model. We also applied several existing general UI guidelines for mobile and touch devices [20,21] to form a more cohesive set of design standards for mobile shopping. In favor of conciseness, we offer our top eight principles for designing mobile shopping sites: Maximize images: Shoppers know what they like when they see it. Make it easier to see product images by maximizing their size, even when listing multiple products. Reduce text: Mobile shoppers care about less information. It really comes down to price, available sizes, and reviews. Take out the rest where it doesnt count, and let the images take up more space. Simplify navigation: This really means strip down the site. Forget drop down menus. Keep a simple but persistent navigation that lets users do a few good things.

Make links tappable: Improve tapping precision by getting rid of text links in favor of buttons. Touch users like buttons, especially big buttons. Let swiping and zooming prevail: This is what smartphone users do every time they use their phones. Leverage users familiarity by supporting swipe and zoom interaction. Forget the search box: Most mobile shoppers dont have a specific product in mind. They also dont want to type. Save space and de-emphasize that search box. Re-think checkout: Standard checkout interfaces just dont work for mobile touch phones. Find ways to encourage users to continue checkout off their phones. Integrate with your offline presence: Mobile shoppers that are on the go will succumb to impulse buys if they just know where to go. We plan to continue to refine and evolve this list. In the next section, we describe a prototype that implements some of these principles. WEB APP PROTOTYPE We built a shopping web app that implements some of our design principles, in order to evaluate them against users. Our first iteration focuses specifically on the interface, rather than complete functionality; we concentrated on creating novel UI features that can shake up current approaches to m-commerce design. We took an existing mobile site and re-implemented it for comparison in later studies. The following sections highlight four major design features.
Homepage and Search

The homepage is stripped of everything but the list of product categories. With the search box hidden, the page is elevated up, allowing the user to see more of the categories at once. Glossy tappable buttons are used for the categories. The search box can be revealed anytime by clicking the friendly search button.
Navigation and Grid View

We borrowed the concept for the navigation from mobile native apps. A persistent bar on top carries the heading to describe the page and the top left button links to the previous page. Another persistent bar on the bottom summarizes the main actions that a user can take: filter, sort and favorites. When users scroll through the page, the bars temporarily fade out to reveal more of the page. The grid view is our variation of the typical format for a category or search results page. We stripped the page of most textual content, leaving only the price, and enlarged the images to fill the rest of the space. We found that two images per row offers the best visual balance without being too crowded or too small.

Gallery View

The gallery view is our all-inclusive approach to casualleisure browsing. Here, we have combined full-screen image zooming and multi-swipe to create a novel browsing experience that allows shoppers to quickly scan through products while enjoying fully enlarged images. After selecting a product from the grid view, a full screen image of the product is shown. At the bottom, there is a tappable button with the price written on it. On the navigation bar, a button on the right saves the image to the favorites list. To navigate, the user can swipe up and down to see more views of the productdots on the right side indicate which view of the product is shownor swipe left and right to continue browsing more styles. The order of the products follows the order in the grid view for consistency. The user has one-click access to more information about the product as well a persistent button to add a product to the favorites list. Favorites List The favorites list is a replacement for the cart. It gives users the option to save products as they view them, without requiring to log-in. The list is saved even when the user is offline. The user can share the favorites list anytime through e-mail. The idea is that once the user is in front of a computer, they can transfer their mobile favorites to their cart by clicking a link sent in the e-mail.
Implementation

The favorites list was another liked feature, though some suggestions for improvements were made. In general, the participants enjoyed the ability to save items without committing to mobile purchasing; but they wanted an automatic way to import the items to their cart when logging in on their computer. Going into my email and clicking a link is too much work, noted one user. Optimizing the mobile check out process will be a noteworthy design challenge going forward. Other comments were related to the information content. In addition to price, the participants wanted available sizes to be shown right away, both in the grid and gallery views. The general tone was I wont bother looking at the item if its not in my size. Users also wanted reviewsthe same point brought up during the survey. Since our first iteration focused on interface design, we did not factor this feedback into our measure of success. However, information content is an essential part of the mobile shopping experience, and we found this extremely useful for future iterations.
Measure of Success

The web app prototype was implemented with JQuery, the JQuery mobile plug-in, HTML5, CSS, and PHP. The app can run in any browser, but is optimized for Android phones and iPhone, with iOS 3.1 or better.
Evaluation

During the pilot run, two of the participants, shortly after browsing the dresses and having never seen them before, verbally expressed interest in buying a particular dress. One actually purchased the dress the next time she was in front of her computer. The participant did not spend extra time looking at it on the computer before buying, she said. This particular event signifies the feasibility, and potential success, of designing shopping experiences that re-route users to checkout on their computers. CONCLUSIONS & FUTURE WORK In this paper, we conducted a needs analysis of mobile shoppers as a first step toward understanding and resolving the dichotomy between the vision of mobile shopping and the reality. With our findings, we formed a set of principles for designing mobile shopping sites, which will evolve into a design model for creating richer and more engaging mobile shopping experiences for users. We parlayed our design principles into a web app prototype, in which we achieved a novel approach to casual browsing through the richly featured and interactive gallery view. Our pilot evaluation of the prototype demonstrated the ease of use and intuitiveness of our design approach. One participant actually purchased an item after using the app, which was a true measure of success. Future iterations will include complete functionality and further study into integrating mobile and offline presence of retailers. ACKNOWLEDGEMENTS Thank you to Kevin Li for teaching the Mobile HCI course this year.

We ran a brief pilot study of our prototype to better understand what features were liked and inform the next iteration. Several participants, including one from our needs analysis, tested the app on their iPhone devices without any explanation or training of the interface. There was no restriction on time; they spent as much or as little time browsing, as they wanted. The reaction was overall very positive. The gallery view in particular was a hit. Users were able to intuitively figure out how to use the multi-swipea sign that certain touch interaction has become commonplace for smartphone users. Participants loved the ability to browse all products while simultaneously viewing full-screen images. One user said, I can tell really quickly what I like or dont like, sothe gallery view is great. Noting the efficiency of swiping, another user said, Since Im so used to it, swiping is really natural and so much faster.

REFERENCES 1. http://www.internetretailer.com/2010/10/15/mobileshoppers-are-buying-movies-clothing-and-more 2. http://www.mobilecommercedaily.com/2011/04/29/m obile-shopping-sales-volume-to-reach-9b-in-2011study 3. http://www.independent.co.uk/life-style/gadgets-andtech/top-mobile-apps-attracting-more-than-300million-downloads-each-day-2182636.html 4. http://www.emarketer.com/Article.aspx?R=1008010 5. http://market2phones.com/2011/04/mobile-shoppingsales-volume-to-reach-9b-in-2011-study/ 6. http://www.internetretailer.com/2011/01/11/mobileshoppers-prefer-m-commerce-sites-over-apps-studyfinds 7. http://www.screenmediadaily.com/marketingsmartphone-retail-mobile-shopping-apps-androidaislebuyer-redlaser-milo-jiwire-shopkick-sundrop0629905.shtml 8. http://wirelessbackhaul.tmcnet.com/news/2011/05/02/5479195.htm 9. http://portal.sliderocket.com/AHJJM/Tealeaf-MobileTransactions-Survey 10. http://emoney.allthingsd.com/20110331/consumerexperiences-with-mobile-shopping-are-low-whileexpectations-are-high/?mod=ATD_rss 11. http://multivu.prnewswire.com/mnr/compete/41839/ 12. White, R.W. and Roth, R.A. Exploratory Search: Beyond the Query-Response Paradigm. Synthesis

13. 14. 15.

16. 17. 18. 19. 20. 21.

Lectures on Information Concepts, Retrieval, and Services 09. Karlson, A.K., Robertson, G., Robbins, D.C., Czerwinski, M. and Smith, G. FatThumb: A Facetbased Interface for Mobile Search. Proc. CHI 06. Wilson, M.L. and Elsweiler, D. Casual-leisure Searching: the Exploratory Search scenarios that break our current models. Lin, Y., Ahn, J., Brusilovsky, P., He, D. and Real, W. ImageSieve: exploratory search of museum archives with named entity-based faceted browsing. Proc. ASIS&T 10. http://www.yadvertisingblog.com/blog/2011/04/20/inf orgraphic-mobile-use-outside-inside-home/ Baudisch, P. and Chu, G. Back-of-device interaction allows creating very small touch devices. Proc. CHI 09, 1923-1932. Baudisch, P. and Holz, C. Understanding Touch. Proc. CHI 11. http://www.internetretailer.com/2010/09/08/richmedia-way-mobile-commerce-survey-says Firtman, Maximiliano. (2010). Programming the Mobile Web: [reaching Users on iPhone, Android, Blackberry, Symbian, and More] . Beijing: OReilly. iOS Human Interface Guidelines (2011). http://developer.apple.com/library/ios/#DOCUMENT ATION/UserExperience/Conceptual/MobileHIG/Intro duction/Introduction.html

You might also like