This is the 5th in a series of 8 articles on mobile usability that draw on findings from our mobile e-commerce usability report.
When defining, designing and structuring your mobile commerce site; should you slim down content and features, or try to stuff it all in the mobile version as well? During our mobile commerce usability study the test subjects encountered mobile e-commerce sites adopting widely different approaches. It turned out that some approaches had dire outcomes. Here’s a glimpse into the complex dilemma of what content and features to share across the mobile and desktop versions of an e-commerce site.
Content should be the same
First off, it is very important to distinguish between both the type of site (e-commerce sites versus other websites), and between content and features. The following observations from the test sessions are specifically for an e-commerce context and user behavior might differ if your mobile site is a news portal, blog, company site, intranet, web service, etc.
Now with regards to the amount of content you should have in the mobile version, the findings are clear: during testing, a limited set of content lead to endless misunderstandings, poor shopping experiences and abandonments. The problem with limited content on the mobile site is that users very often don’t realize it is limited as they expect (and thus assume) all content will be available. Reduced content in the mobile version was particularly problematic for two specific types of content: 1) product catalog, and 2) Help & FAQ content.
(Note that there’s a distinction between having all “content” and having all “features” on your mobile site. Our research shows that you must have all content, but that features may differ where sensible.)
Product catalog
One of the tested mobile sites, H&M, only offered a highly limited product catalog and as a result, the subjects had, by far, the worst overall shopping experience at their site. It turns out that limiting the product catalog in the mobile version introduces an incredible complex communication task: telling the customer that something is missing, communicating what the missing content is, explaining why it was omitted, and directing the customer to where they can find it.
H&M’s mobile site, with a limited catalog, mislead the subjects to believe the entire product catalog was there.
The mobile version of H&M featured 10-20 selected products and then dedicated the rest of the site to fashion news, events, etc. However, those 10-20 featured products mislead every single test subject to believe that the site featured the entire product catalog because they were able to find some products and thus figured the rest of the catalog had to be somewhere on the site. Some subjects ended up leaving the site after spending more than 10 minutes only looking for the entire product catalog, never realizing it wasn’t there.
This tendency was observed in other scenarios as well. For example, when a search query returned no results and the subject had already tried a few synonyms, they always ended up concluding that the site didn’t carry that particular item. Never considering that it might “just” be left out of the mobile version.
Considering how severe it is when users misunderstand limited product catalogs and given how incredibly difficult it is to explain, your mobile site should always feature the full product catalog. (Or have no catalog at all to clearly communicate to users that this isn’t a mobile commerce site.)
Help pages
Now the issues during testing were not related to limited product catalogs only. It proved equally important to mobile help sections, which at many sites were severely limited compared to the desktop version. Often only offering basic help or help relating to mobile devices (cookies, rendering issues, etc.).
At REI, one subject found it ironic that he could visit the mobile “Help” (first image), then the “FAQ”, and then the “Help: Shopping & Products” (second image), all without finding any indication of delivery methods and speed, but that when he left the mobile site for the full-site, he located the “Shipping Info” help page within seconds (third and fourth image).
In many cases something as trivial as learning more about the site’s shipping speed and costs, or the basic terms for returning an item, turned out to be so difficult for the subjects that they often gave up on the task. Typically because the info simply wasn’t there in the mobile version, or because it was buried somewhere in a 30 screen long Terms & Conditions legal text.
Form can be different
While the entire product catalog and all the help and static page information must be in the mobile version, the form of that content can change for the mobile context (and often should).
Best Buy divided the product description into concise sections with short bolded headers for easy scanning and slightly more in-depth (but still very brief) descriptions in a lighter grey.
A good example of where a mobile-optimized format makes sense is product descriptions. On mobile, the product page description should be optimized for a mobile context with short and easily scannable bullet points and additional info in collapsed sections instead of displaying them directly at the product page or separate sub-pages (which often cause scope confusion on mobile commerce sites).
Similarly static help pages can be optimized for the mobile context where the 4” screen impose a need for text and copy to be very concise and easy to scan (typically with much narrower sections and sub-headers, prioritized order, etc).
In summary, all content (as in: “information and answers for your users”) must be in the mobile version, however, the formulation, formatting and position doesn’t have to be the same as the desktop version. So you must have the entire product catalog on your site, but the product page can look different. Your help section must include information on shipping speeds and cost on both mobile and desktop, but the layout of that shipping table can look different.
Features can be different
Our mobile usability research was only conclusive when it came to all content being featured on the mobile site; when it comes to features, the observations differ, and you will most often need to judge and test it on a case by case basis.
Animating carousels on the homepage are a good example of a feature that shouldn’t be on the mobile site despite being on the desktop site as they suffer from severe interaction issues due to lack of hover state on touch devices.
For example, in the prior article in this series “Mobile Product Pages: Always Offer a List of Compatible Products” we described how removing compatibility list would be an oversimplification of the mobile product page. Whereas, keeping an animating carousel on the homepage (which is a quite common feature at most large desktop e-commerce sites) proved to cause great difficulty on the mobile sites in the cases it displayed anything other than products (e.g. when displaying features, site navigation, help, events, etc).
Furthermore the mobile site will often benefit from additional features that are not necessarily meaningful to the desktop version: location detection (via GPS), larger product images in landscape mode, context dependent search scope, smart defaults based on the user’s context, etc. Therefore, you may remove and add features to the mobile site where sensible.
User Expectations
Like so many other things in usability, this boils down to user expectations. Users expect all the products to be available on the mobile site; after all, why would a mobile site carry less products when the site / brand is the same? The same goes for product descriptions and help text – you’d expect to be able to find the same information since the selected product or shipping speeds shouldn’t change depending on the device you’re using to order. Meanwhile, you’d expect layout and formatting to change, after all, the screen is so much smaller. And you might be positively surprised when the mobile site detects that you’re physically in their store and offer you a “Ship for free to this store” option.
So to answer the question we started out with – “When defining, designing and structuring your mobile commerce site; should you slim down content and features, or try to stuff it all in the mobile version as well?” – we can say that all content (products and pages) should be in the mobile site but the articulation and formatting of the content may be different, and the site’s feature set should be different where it makes sense.
