Boost Your Mobile E-Commerce Sales With Mobile Design Patterns

Advertisement

People are increasingly using their smartphones as a replacement for desktop computers, even for activities such as shopping and purchasing. And as more people move away from the desktop and onto mobile-optimized websites to shop for products and services, website creators can use established design patterns to help kickstart a mobile e-commerce project.

Having a good mobile e-commerce experience matters a lot. In fact, recent research has found1 that people are 67% more likely to make a purchase if a website they’ve reached on their phone is smartphone-friendly.

The power of design patterns is that they show you how other designers have solved similar problems so that you are not always reinventing the wheel. They also enable you to design your website in a way that meets the expectations that people develop from the other websites they’ve used, and they encourage you to consider design approaches that you would not have thought of on your own.

In this article, which focuses on smartphones, not tablets, we’ll look at design patterns and approaches used for mobile e-commerce functionality, including the following:

  • Home pages,
  • Site-wide navigation,
  • Suggested search,
  • Search results,
  • Search filtering and sorting,
  • Product pages,
  • Photo galleries,
  • Shopping carts,
  • Checking out with an account or as a guest,
  • Forms.

All the examples in this article are drawn from mobile websites that run in smartphone browsers. Most are taken from large multi-department retailers because they have large product catalogs that require a thoughtful approach to features such as search and filtering and sorting of search results. There are also countless native apps for e-commerce, and many of these patterns can be applied to them as well.

Home Pages

When visited on mobile devices, home pages are often less about content and more about helping users find what they are looking for. Common patterns are simple single-column layouts for promotions and single-column lists of links to featured website areas or product categories. Keyword search is commonly included on home pages, as are links to store locators and registration forms for promotional emails and loyalty programs.

Amazon and Macy’s home pages
Amazon2 and Macy’s93 both use a mix of promotional elements and list menus.

Target and Threadless home pages
Target64’s promotional content takes up more screen space than a simple list but makes a stronger visual impact. Threadless5 uses a dashboard pattern, which is more common in native apps than on e-commerce websites on mobile.

If shoppers are coming to your website to compare prices quickly, then a simple list pattern and search function are probably more desirable. If they are coming to explore promotions and sales, then the approach taken by Target64 may be more appropriate. To answer these questions, you’ll need to mine your analytics to get an idea of what consumers are doing on your website.

Site-Wide Navigation

Beyond using the home page as the main navigational hub, many websites also have navigation menus on most of their pages, usually in the header. This enables shoppers to easily get from one part of the website to another without having to return to the home page.

Lowe's and Best Buy website menus
Lowe’s42117 site-wide menu has icons for each option. Best Buy8’s menu has a two-column layout for navigation and has buttons instead of list items. Lowe’s menu covers the page when it appears, while Best Buy’s pushes the page’s content down the screen.


Macy’s93 has a site-wide menu that contains submenu options. CVS1210 has a two-column menu with an icon for each option. In both cases, the menu is displayed at the top of the page.

As you can see from the screenshots above, there are several ways to design a site-wide menu. Lowe’s42117 design is simple, and the icons add a nice bit of visual polish. The fact that the rest of the page fades into the background when the user chooses to use the navigation helps users focus on their current tasks. CVS1210 seems cluttered in comparison, with two columns of options, each item accompanied by an icon. CVS’ menu also places a lot of tap targets close to each other, which can present usability problems on touchscreens.

It’s interesting that large e-commerce websites usually don’t have many navigation options displayed at once. They try to balance the visual design of the navigation with the information architecture of your website, carefully considering the number of items that should be in the global navigation. Use website analytics to see which menu options shoppers click to help you determine what should be in the menu. Conducting A/B testing and usability tests of different designs to see whether one has too many options and overwhelms people is not just recommended but necessary to find the optimal solution — for your business and for your users.

Suggested Search

Suggested search, also known as type-ahead or autocomplete, displays potential results as soon as a shopper has typed in a few characters. For commonly searched terms, this can be a real convenience to shoppers, especially if the search term is long. One limitation of suggested search is that tapping a wrong character on a virtual keyboard is easy, which would change the suggested results. Showing common “correct” results instead might be useful. Also, consider using an improved Auto-Suggest pattern13 to reduce the amount of typing needed to enter queries, and utilizes slower mobile bandwidth in the most efficient manner.

Office Depot suggested search14
Typing “d-r-a-f” into the search box on Office Depot’s website15 brings several possible results. And mistyping “d-r-a-g” instead of “d-r-a-f” leads to unexpected results for someone who is trying to find drafting supplies. Tapping a letter adjacent to the intended one is a common problem on virtual keyboards.

While designers can’t do anything about people mistyping queries, they can ensure there are other ways to get to product pages from mistyped results, such as drill-down lists for product categories or a site-wide menu of top-level categories. Website managers can also fine-tune their search functionality by suggesting results for “draft” from queries typed as “dragt.” Your ability to do this will depend on the search engine technology you are using.

Search Results

Two primary patterns are used for search results on mobile e-commerce websites: table display and grid display. Tables show a thumbnail photo and some basic information such as product name and price in a compact row. Grids show larger images with less descriptive information. Some websites allow shoppers to switch between the two views.

Zappos and Walgreens search results
Zappos16 shows its search results in a grid to allow for larger photos of its products, a sensible choice in a market like shoe sales. Walgreens17 has a table that includes buttons for finding item in stores and adding items to a shopping cart.

OfficeMax search results18
OfficeMax2019 asks shoppers to select a subcategory for broad search terms like “Paper.” Once a subcategory has been selected, results are displayed as a table. Searches for terms like “Scissors,” which have fewer subcategories, takes shoppers directly to the table view of the results.

Having shoppers select a subcategory can be problematic if it’s not clear where a product fits in a complicated hierarchy. In the OfficeMax2019 example above, someone looking for 8.5 × 11-inch paper for their home printer might not know whether to look in “Copy & multipurpose paper” or “Laser paper.” A better approach might be to list subcategories under search filters, where they can be presented in context with other filters, like “color” and “size.” Regular testing (every 4–6 weeks) with representative users and commonly searched-for terms and top-selling products could give you insight into which approach is better. A/B testing could also reveal whether one approach gets more people to a product page and leads to a higher conversion rate.

Gap search results21
Visitors to Gap’s website22 see a table display by default, with the option to see a grid display. Notice that Gap also retains the search term in the keyword field.

Gap23 lets shoppers choose how to view search results, allowing them to switch from an easy-to-scan list to a view with larger photos. Gap could have retained some product information though — e.g. prices — in its grid display (as Zappo’s does). Details such as price and color make it easier for a shopper to determine which product they want to learn more about.

Retaining the term in the field also reminds shoppers what they searched for and lets them easily narrow the results by adding another word (like “red”) to the search term.

Searching Gap for “men’s tshirts” takes shoppers to a page with no results (not shown), and without linking to search results for “men’s t-shirts.” Gap could improve its search by adding a “Did you mean?”-type question to the results page. Google handles this scenario by listing “mens t shirts” as a suggested query and then presenting results for “men’s t-shirts” if that suggestion is ignored.

Sorting Results

Sorting results helps shoppers organize a large set of results along a continuum of values, usually numerical ones such as price and consumer rating. Common interface patterns for sorting are buttons and <select> menus.

Walmart and Sears search sorting
Walmart2724 lets shoppers select one of three buttons to sort results. Sears uses a similar approach, but with a “segmented control”. JavaScript frameworks such as jQuery Mobile are making these app-like interface widgets more readily available to designers.

J.C. Penney and Eddie Bauer search sorting
J.C. Penney2925 allows for sorting through a <select> menu that is slightly customized in style, while Eddie Bauer26 uses the browser’s default <select> menu. Both trigger the browser’s native control for <select> menus (in these examples, the iPhone picker).

The size and generous spacing between Walmart’s buttons make for better tap targets; although, to be fair, Walmart2724 has only three options, while Sears has four. Sears’ inclusion of an “All” button allows shoppers to get back to the original results page if they don’t find what they want after having sorted. Using a <select> menu is a quite safe choice because it is supported by modern mobile browsers and allows for longer lists of sorting options. However, it also takes a lot of valuable space. These are the types of design trade-offs that can be evaluated with regular testing.

Filtering Results

Filters enable shoppers to narrow their results based on one or more attributes, like color, brand and size. Filters are usually organized by type (called facets), with several values appearing under each facet (for example, color is a facet, and red is a facet value). Common interface patterns for displaying filtering options are <select> menus, drop-down lists and accordion displays. Filtering can be applied when one or more values are selected from within a facet. While allowing a single search to include values from more than one facet is technically possible, it comes with a higher interaction cost and could lead to no results (for example, cross-training athletic shoes that cost less than $75).

CVS and jcpenney search filtering
CVS4828 uses <select> menus in its “Refine” tab for filtering. Selecting a menu option will immediately filter the results. J.C. Penney2925 offers a drop-down list for selecting filters and indicates the number of products that match a filter value. J.C. Penney also allows multiple values from a single facet to be selected on one screen, the trade-off being that the shopper has to tap the “Apply” button.

Kohl's and Threadless search filtering
Kohl’s3130 uses an accordion to expose a set of checkboxes for each filter type. Threadless exposes the values for all of its search facets as buttons. On both websites, selecting a single filter value will immediately filter the results.

Showing the number of items available under each facet value offers greater transparency into what shoppers will get with each selection. Threadless’ approach of showing all available facet values takes up the entire screen, but it offers consumers an at-a-glance view of all filtering choices available to them. Whether you take this approach or use an accordion like Kohl’s3130 will likely depend on how many facet values are present for a given category of products. If your catalog has a high degree of variability in the number of facet values for each category, then you will need to experiment to find the right design. You could optimize the filtering interface for those product categories for which shoppers use filters the most.

Product Pages

Product pages are where e-commerce websites really showcase their products in detail. They are not a “pattern” in the true sense of the word, but rather a collection of patterns that include elements such as tabs, accordions and photo galleries. Two common approaches to product pages are one long page with all of a product’s information or a page with tabs or accordions to allow for progressive disclosure of information as shoppers need it.

Samsung and Dell product pages
Samsung4032 and Dell4133 progressively disclose content on their product pages, which have a lot of information for shoppers. Samsung uses accordions to expose chunks of information, while Dell uses tabs.

Cabela’s and Office Depot product pages
Cabela’s34 and Office Depot35 both use a single long page to display product information. This approach requires more swiping up and down to get to information, but it frees shoppers from having to work with small tabs or manipulate accordion headers. Your choice will depend on the amount of information associated with a product and how the information can be broken down into logical sections.

Long product pages require more scrolling than pages broken into manageable chunks with tabs or accordions. They also require shoppers to put more effort into finding the specific information they are seeking. In my own usability testing, I’ve heard people express preferences for both approaches, but they seem to have an easier time working with a page broken into logical chunks. If you take this approach, make sure any content not initially displayed renders quickly when the shopper taps on the tab or accordion.

The obvious way to accomplish this is to load all of the page’s content at once so that the hidden content appears almost instantly. This approach has an advantage for when the user’s network connection drops while they are switching between sections. The big downside is that all product information has to be downloaded, whether it is actually viewed or not; this adds more load to your servers and uses more of the shopper’s data plan, which could be metered.

Photo Galleries

Photo galleries are particularly critical in e-commerce industries such as apparel and consumer electronics. You might not need to see a wrench from three different angles when shopping at Home Depot36, but more images are better when looking for clothes, shoes or a high-end smartphone or tablet. A few commonly used patterns are the swipeable gallery, “double-tap to zoom”, and thumbnails for selecting photos.

Payless photo gallery
Payless37 uses a swipeable gallery to show its products from different angles. Users can also double-tap to zoom in to see details like stitching and eyelets.

Payless wisely keeps its “Tap tap to zoom” call-out on the screen for several seconds, giving the shopper time to understand how to navigate the page and still notice it. The ability to zoom in to a photo to view a product’s details is critical for apparel and shoes.

Dockers and Levi's photo galleries
Dockers38 (above left) has a swipeable photo gallery, with double-tap to zoom in to details, and shoppers can see a product in different colors. Levi’s39 (above right) takes a similar approach, with the addition of thumbnails to indicate the photo angles in the gallery. Selecting a new color on Dockers’ website causes a full-page refresh, while Levi’s does not.

Levi’s keeps most of the page from refreshing when the shopper changes colors, which at first seems like a better user experience. But, from a brief review of both websites on the same date and at the same time of day, Dockers’ full-page refreshes appeared to run faster from the time I tapped a color swatch to the moment the page with the new photo appeared. Levi’s slowness could have been caused by the five thumbnails needing to be refreshed, in addition to the main photo, or other unseen factors, such as a heavy traffic load. Each approach has its trade-offs.

Samsung and Dell photo galleries
Samsung4032 (above left) and Dell4133 (above right) both use swipeable photo galleries for their products. Samsung incorporates the gallery into an accordion on its product page, while Dell uses a separate page.

Samsung’s approach seems more user-friendly because it has fewer pages to navigate. Both Samsung and Dell go with large high-resolution photos, because apparently image quality is critical when looking at expensive products. One advantage to Dell’s approach is that it allows shoppers to focus on the photos themselves without any distracting page content.

Shopping Carts

Shopping carts usually display products using a table pattern. Besides displaying the contents to be purchased, they also offer additional functionality, such as the ability to save an order, to save a product to a favorites or wish list, to remove products or update quantities, to choose shipping or in-store pickup, to apply promotional or coupon codes, and to check out. Once a product has been added, a shopping cart is commonly reached through an icon in the website’s header or an option in the global navigation menu.

Lowes and Bed Bath and Beyond shopping carts
Each table row in the Lowe’s42117 shopping cart (above left) lets the user remove the corresponding product from their cart, and it includes options for shipping or in-store pickup. Bed Bath & Beyond43 (above right) also allows items to be removed; product quantities may be changed for each item in the table, and a single button farther down updates the page.

Crate and Barrel and Payless shopping carts
Crate & Barrel4944 (above left) has table rows that allow users to remove products, save to favorites and update quantities. Each row also includes shipping information such as cost and delivery time. Payless (above right) also allows consumers to update quantities and remove items; its cart also offers a choice of delivery options, including having the product sent to a Payless store (not shown).

Shopping carts should provide maximum utility because shoppers are close to the final point of purchase. Allowing shoppers to change quantities, remove items and apply promotional or coupon codes without having to go to another page is critical to getting them through the purchasing funnel quickly. If you feel this adds too much content to the page, you can use progressive disclosure to hide some content (such as promo code fields) behind accordions until it is needed.

Checkout

Checkout is more of a process than a pattern, although form patterns can be applied to checkout flows. Many e-commerce websites allow customers who use their websites on mobile to check out with an existing account or as a guest. For people who already have an account, the checkout process is greatly streamlined by using existing payment and shipping information.

Crutchfield and Nordstrom checkout
Crutchfield45 and Nordstrom46 both allow customers to check out as guests or by using their existing account. Both allow mobile shoppers who have checked out as guests to create an account after placing their order, and both support password resetting.

Amazon and Target checkout
Amazon47 asks for an email address on the first page of the checkout, whether the shopper has an account or is checking out as a guest. The experience is very much the same like for users of the website on desktop. Target offers options on the mobile website to sign in with an account, to check out as a guest or to create an account. Both support password resetting.

Allowing customers to either sign in or check out as a guest and to reset their password is a must for mobile e-commerce websites. Also, consider inviting shoppers to create an account on their phone after placing their order, because they have already given you enough information (except for a password) to do so. This could make guests more likely to create an account because the effort should be minimal at this point.

The “Create a Target.com account” button could lead to some abandoned carts if shoppers go down that path and decide it’s too much effort. Confirming the order first and then inviting registration on the invoice page might be better. Limiting the initial checkout screen to two choices could improve conversions because the shopper will have fewer decisions to make while working on a small screen. Fewer choices in critical tasks such as check out usually works better.

Forms

Forms are most commonly used in mobile e-commerce for searching, checking out, registering, and entering coupon and promotional codes. Be aware of a few good practices when designing forms for the small screen:

  • Place form labels above input fields so that they don’t shift off screen when the user zooms into the input.
  • Use HTML5 input types to display the appropriate keyboard for the field being used. For email addresses, use type="email". For numeric fields, like ZIP codes, use type="number" or type="tel" (the latter will display a numeric keypad with larger buttons).
  • Make fields mandatory only when absolutely necessary. This will reduce friction in getting customers through the checkout process.

The best way to handle forms on a smartphone is to use as few of them as possible. You can use geo-location to suggest the shopper’s ZIP code, and you can allow customers to check out using the account information they entered earlier when using your site. Remember that the best form is the one the shopper never has to complete.

CVS and Crate and Barrel checkout forms
CVS4828 (above left) doesn’t bring up a numeric keyboard when the user taps the ZIP code field on the checkout page. This requires one unnecessary tap from the shopper to get the correct keyboard. CVS also aligns labels to the left of form fields, where they could get pushed off screen if the user zooms into a field. Crate & Barrel4944 (above right) has a much more mobile-friendly form. It brings up the large numeric keypad when someone taps the ZIP code field. It also top-aligns form labels so that they don’t slide off the page.

Remember that forms are how shoppers complete their transactions on websites. Pay special attention to them, and do everything you can to reduce the interaction cost of completing them. Sometimes it might even mean trying out something entirely different. For example, Typeform50 recently suggested a new kind of experience for more responsive, simple and user-friendly Web forms. The idea is to ask just one question at a time, but display it prominently, allowing users to type the hotkeys when filling in the form. This is not the option that would work in every situation, but for some forms it might be quite helpful.

Conclusion

With the increasing importance of mobile e-commerce as a source of revenue to retailers, mobile-optimized websites are offering many of the features that shoppers want and expect based on their desktop shopping experiences. And as the research by Sterling Brands and SmithGeiger shows, mobile consumers are more willing to purchase when the website is mobile-friendly.

By using existing design patterns, you can begin to explore different options to more quickly get your e-commerce website ready for the small screen. But don’t stop with existing patterns; use them as a jumping-off point to explore a design and to help you consider options you might not have thought of. And as browser capabilities increase, consider bringing interface design and interaction patterns from native apps into your browser-based smartphone shopping experience.

Resources

(al)

Footnotes

  1. 1 http://www.adweek.com/news/technology/72-consumers-expect-brands-have-mobile-friendly-sites-143968
  2. 2 http://www.amazon.com
  3. 3 http://m.macys.com
  4. 4 http://m.target.com
  5. 5 http://www.threadless.com
  6. 6 http://m.target.com
  7. 7 http://m.lowes.com
  8. 8 http://m.bestbuy.com
  9. 9 http://m.macys.com
  10. 10 http://m.cvs.com
  11. 11 http://m.lowes.com
  12. 12 http://m.cvs.com
  13. 13 http://www.smashingmagazine.com/2011/04/27/mobile-auto-suggest-on-steroids-tap-ahead-design-pattern/
  14. 14 http://www.officedepot.com
  15. 15 http://www.officedepot.com
  16. 16 http://www.zappos.com
  17. 17 http://m.walgreens.com
  18. 18 http://m.officemax.com
  19. 19 http://m.officemax.com
  20. 20 http://m.officemax.com
  21. 21 http://m.gap.com
  22. 22 http://m.gap.com
  23. 23 http://m.gap.com/
  24. 24 http://mobile.walmart.com/
  25. 25 http://m.jcpenney.com/mobile/index.jsp
  26. 26 http://m.eddiebauer.com/home.jsp
  27. 27 http://mobile.walmart.com/
  28. 28 http://m.cvs.com/mt/www.cvs.com
  29. 29 http://m.jcpenney.com/mobile/index.jsp
  30. 30 http://m.kohls.com/
  31. 31 http://m.kohls.com/
  32. 32 http://m.samsung.com
  33. 33 http://m.dell.com/mt/www.dell.com/us/p/?un_jtt_redirect
  34. 34 http://www.cabelas.com/
  35. 35 http://www.officedepot.com/
  36. 36 http://www.homedepot.com/
  37. 37 http://www.payless.com/store/
  38. 38 www.dockers.com
  39. 39 http://us.levi.com/home/index.jsp
  40. 40 http://m.samsung.com
  41. 41 http://m.dell.com/mt/www.dell.com/us/p/?un_jtt_redirect
  42. 42 http://m.lowes.com
  43. 43 http://www.bedbathandbeyond.com
  44. 44 http://m.crateandbarrel.com/
  45. 45 http://www.crutchfield.com/
  46. 46 http://shop.nordstrom.com/
  47. 47 http://www.amazon.com/
  48. 48 http://m.cvs.com/mt/www.cvs.com
  49. 49 http://m.crateandbarrel.com/
  50. 50 http://www.typeform.com
  51. 51 http://www.mobiledesignpatterngallery.com/
  52. 52 http://4ourth.com/wiki/
  53. 53 http://www.uxmatters.com/mt/archives/2010/04/design-patterns-for-mobile-faceted-search-part-i.php
  54. 54 http://www.uxmatters.com/mt/archives/2010/05/design-patterns-for-mobile-faceted-search-part-ii.php
  55. 55 http://searchpatterns.org/
  56. 56 http://www.smashingmagazine.com/2010/06/24/the-ultimate-guide-to-a-b-testing/
  57. 57 http://www.lukew.com/ff/entry.asp?1014
  58. 58 http://diveintohtml5.info/forms.html

↑ Back to topShare on Twitter

Will Hacker is the author of Mobile Prototyping With Axure 7. He’s used Axure for several years as part of his iterative design and prototyping process. Will spent two and a half years working exclusively on mobile design, prototyping, and usability testing, and Axure was one of the main tools in his arsenal. He also has written about prototyping and user experience design for Smashing Magazine and UX Booth, and is a frequent speaker at design events in Chicago. Will is a Lead Interaction Designer at GE Capital, where he works on multi-device designs for commercial lending software. You can follow his tweets at @willhacker or visit his website at willhacker.net.

Advertising
  1. 1

    Great! I was just looking for a post like this. Plenty of ideas and very practical. Good stuff. Our project uses geolocalization for shops and stores so that you can go “window-shopping” with your smartphone. So deciding the right pattern is key for us. It is the first of its class in Spain (you can check it out ‘onegoshop. com’) Thanks a lot, guys.

    0
    • 2

      I am still looking for a mobile site that works better on a smart phone than the same sites “desktop” version does on the same smart phone.

      Every site I visit has major information deficiencies on their smart phone version. Take for example Office Depot. It does not appear possible to check your current gift voucher balance on the mobile version of the site, and yet it is 3 clicks away on the “full” version of their site.

      Many mobile shopping sites also restrict the number of available filters when compared with their desktop versions sometimes to the point of making the search practically impossible on a mobile device.

      I find any site I visit I am constantly viewing the desktop version on my mobile rather than the mobile version: techradar, gsmarena, BBC, Dominos dramatically lose functionality in their mobile context. Many websites do not let you change your password unless you log on to the full version or see important account settings.

      Given that large organisations do not appear to be getting it right is it even possible to design a good mobile site?

      Most of the design patterns you discuss should also be used in the “desktop” context. Minimising forms and offering account creation afterwards are for example great for both context.

      There is one design pattern discussion which you do not go into in your article which is paging vs scrolling vs dynamic scrolling.

      Dynamic scrolling additionally has 2 common variants:
      - Full dynamic scrolling: as you scroll new data is retrieved in chunks.
      - Image only dynamic scrolling. Text is relatively cheap so download it all, but only download images when their placeholder becomes visible allowing smoother scrolling and reduced bandwidth requirements.

      0
      • 3

        Sure it is. I think it also comes down to HOW are these sites creating their mobile image. Is it from a responsive layout or is it a redirect to their m.sitename.com site?

        The difference, I’ve seen, when companies chose to redirect their users to a different theme or site all together, they spend more time hacking away at the information on their site to “streamline the experience”. But when they do this, they leave out a lot of information and remove basic functionality, like you mentioned with changing the password.

        With responsive sites, I rarely see a site that doesn’t allow me to do everything I need to do in order to effectively utilize their tool. There’s really no need to hack anything out, since its all optimized, the most you loose is some billboards and other larger placeholder elements that are really not the “point” of viewing the site.

        Have faith, it can and does get done.

        0
      • 4

        Tesmond: Most of the situations you cite are caused by poor decisions made by the people running the site and not by any limitation of what can be accomplished on the web using a modern smartphone. I subscribe to the Josh Clark philosophy that argues not to limit your site’s mobile experience just because it is being delivered to a small screen. Looking up reward program balances and changing a password are both simple and straightforward activities that can be easily accomplished on the small screen. Whether you deliver your site to smartphones using responsive design or a separate mobile site code base there is no reason to leave out key functions like the ones you mention. That’s just lazy design.

        One situation I have seen is when certain retail programs, say a store brand credit card, are handled by third-party companies who do not support mobile browsing. Again, this is a design problem, not the result of any technical limitation.

        0
  2. 5

    What about the speed at which these designs will “move”? For example, is there a rule about a design that’s likely to be on HSPA+ or 4gLTE, and what about, say, AT&T phones vs. its competitors’ phones? I’m just getting into design for smartphones but they’re too expensive for me to play around with all of them, which would be most ideal for seeing how each really operates.

    0
  3. 6

    This is also a good reference: http://m.magazineluiza.com.br

    0
  4. 7

    Great article. A wealth of examples here. I’m curious about the breakdown between which are m. versions and which of these are responsive layouts (and if there is any difference in the design patterns utilized)

    0
    • 8

      Steve: The vast majority of the sites were m-sites, not responsive designs. I was really surprised by that as I researched the article. My take is that large e-tailers may be outsourcing their smartphone web experience to third parties like Usablenet or other companies, but that is really just a guess.

      0
  5. 9

    Great read. Would be nice to see some Android screenshots here as well though — my guess is that the user experience might be different outside of the quaint land of iOS & Safari.

    0
    • 10

      Pookie Tookie: Most of the sites are very similar on Android, especially newer versions, because they are not leveraging the full capabilities (or any) of HTML5 like Twitter and others are doing with their smartphone web experiences. There’s a lot of room for improvement in browser-based smartphone experiences and when that starts to arrive you may see greater differences between how they are handled in iOS and Android. But one trend I noticed was heavy use of jQuery Mobile, which in fact could lead to even more consistent interaction experiences across operating systems. Time will tell.

      0
  6. 11

    I’m having trouble with how to apply these suggestions “after the fact” especially when using a difficult framework like Magento. It’s nice if you have a mobile-friendly theme and the opportunity to apply the “mobile-first” philosophy at a project’s onset, but how to “upgrade” an existing desktop-only site to be slick and intuitive on mobile?

    0
    • 12

      Ken: This is something a lot of companies are wrestling with. The long term answer would involve better use a services-based architecture that would allow you to pull content into a new presentation layer for smartphone browsers or native apps. A shift to a responsive approach could also work, but that can be a challenge if you are running on an existing CMS that you don’t have total control over. I wish there was an easy answer to your question.

      0
  7. 13

    great article and good reference for developers

    0
  8. 14

    Great article. Thank you very much!!!

    0
  9. 15

    Is very article.
    I’m starting a shop responsive now.
    Thanks Smashing.

    0
  10. 16

    One problem I have with the Target mobile site is that it dumps your entire shopping cart after an unspecified period of time. Especially frustrating to discover this when my shopping cart had a significant number of items in it. If there had been some sort of indicator I would have just saved my shopping for a time when I was in front of my desktop; not a problem I anticipated having from them since the interface was rather seamless otherwise (with the exception of some tagging issues).

    0
  11. 17

    Fantastic resource on creating a slick, easy to use mobile purchasing site for the mobile happy end user. I would just mention that also detecting the specific device that an end user is browsing with can allow you to create even better designs for some of the more popular devices. Using a solution such as 51degrees.mobi, you can detect such devices and tailor websites specifically to their dynamics. Would love to hear a more updated argument between responsive and non-responsive design.

    0
  12. 18

    Venkata Dinesh Kumar

    January 8, 2013 3:35 am

    Fantastic resource on creating a slick, easy to use mobile purchasing site for the mobile happy end user.

    0
  13. 19

    Nice set of examples. Keep eye out for the next edition of the Mobile Design Pattern Gallery in the next couple of months.

    0
  14. 21

    Great article, thanks for that. I’m preparing to set up a mobile shop. This resource is helping a lot. First think then act.

    0
  15. 22

    How do I go about trying to find the answer to a question that I have been asking and searching everyone and everywhere for?

    Q: What does a e-commerce purchase on my boostmobile account activity mean? Or where can I go to find out why its on there and money was subtracted. From my account for this thank you for all your help!

    0
  16. 23

    Thanks, Theresa. Your current edition has been a great resource for me. Can’t wait for the update.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top