Loading Form...
Thank you
Sep 23, 2011 | 6 minute read
written by Linda Bustos
Continuing in our series on mobile design strategy, today's post focuses on mobile product pages, including product information, calls to action, navigation and merchandising.
Purpose of product pages
Throughout this series, we approach design considering the conversion goal(s) for the page type with the understanding that the conversion goal for most pages is a click through to the next step in the buying process, not a completed sale. Product pages exist to inform and romance the customer into buying a given product from your shop. Top "converting" product pages include enough descriptive content and imagery to assure the customer it is a suitable product, and must be supported by a usable UI and shop-specific value propositions for why your site is the best place to purchase the product.
The challenge with mobile product pages is fitting everything into less space, and this is obviously more challenging on smartphones than tablet devices. Though mobile shopping is likely to be more popular on tablets than smartphones, consumers use their phones to look up product availability, compare reviews and prices in-store and on-the-go, click through mobile email campaigns, web applications or land on product pages through QR code links - oh my! So considering the small space constraints when designing for mobile is very important.
Images
Bigger is better for product pages, especially for items with fine detail. Use tight shots (less surrounding background/white space) and try to fill the full width of the screen, or offer "enlarge image" links. Leave enough room below the image for the title to encourage scrolling below the fold to discover additional product information. Crutchfield does this very nicely.
Ralph Lauren makes good use of space with a large image and clear alternate images.
Just remember that images increase page load time. Optimize your images to reduce file size and consider a content delivery network to reduce the impact.
Descriptions
How to squish all your juicy copy into a small screen size? One idea is to use tabbed boxes, which I propose are susceptible to "banner blindness" and should always be user tested before adopted on your mobile site. Did you notice them in the Ralph Lauren screen above? Can you spot them on Crate and Barrel?
Stacked menu buttons may be better noticed, but their styling is very important. I recommend colored menus to draw the eye, rather than the subtle whitish-gray buttons used by Crutchfield and others.
As with horizontal "bars" in web design, wide call to action buttons like the Crutchfield example above may "stop" the eye from navigating below them. My suggestion would be to test narrower add to cart buttons for this reason. Contrary to web best practice, "bigger" is not necessarily more conspicuous.
Moosejaw's smaller, jelly bean red buttons are hard to overlook - but their horizontal stacking could be problematic on small touch screens, more vertical spacing or horizontal arrangement could be tested. (However, I appreciate Moosejaw's use of buttons rather than drop-down configurators for product size/color options.
Contrast the red with the lime green "click to call" button. The low contrast between the button color and white text makes it difficult to read, not to mention its small size. Make sure buttons are large enough to decipher what they are for!
A side note on drop down menus - test how they work on various devices. Proflowers' delivery scheduling is near impossible to understand the way it renders on the iPhone.
Item Added to Cart
If you don't take the customer directly to your shopping cart page after an item is added to cart, it's crucial to make it very obvious the product was indeed added to cart. There are various ways to handle this on the web, but they don't always port over nicely to small screens.
ASOS and Crate and Barrel choose to notify the customer at the top of the page, but again, these notices may be barely noticeable - make sure you user test or even A/B test taking the visitor directly to the cart vs. keeping them on the product page. Measure exit rates and successful cart initiations.
If a given product is not suitable, a secondary goal of the product page is to successfully point users back to your product selection, most likely the category page or the next product in the category.
Breadcrumb navigation is helpful to hone in on the exact location you wish to return to (and showing it at the top and bottom of a page is helpful) - but again, remember link target size! It's easy to mis-tap a link with tiny text.
The Ralph Lauren example (left) and Crate and Barrel (right) show additional ways to navigate - previous/next arrows and prominent "back to category" buttons.
To save you the scroll-up, here again is the Crutchfield screen shot showing the large product image. The downside of such a gigantic graphic is it dwarfs the "back to category" button, which is unfortunately styled in overlook-me-black. Remember, design variables are often inter-dependent. A best practice on one variable can negatively impact another!
Merchandising
Another way to support navigation and product discovery is to display product recommendations. For mobile product pages, I recommend showing alternative products, rather than cross-sells (unless items can be added to cart concurrently with the product being viewed), unlike Ralph Lauren. Your page goal is a click on the add to cart button or successful navigation to a product category or alternative, suitable product, and cross-sells is a click away from the goal. True "upsells" such as a more expensive item within the product line or a value bundle is okay.
Once again, the user and business goal of the mobile product page is a click through - either a successful "add to cart" or a click back to a list of alternative products or a substitute. In other words, keep the user on the site! Measure your A/B and usability tests with these metrics in mind.
As for what to test, my suggestion is to first make sure your description content is easy to find. Consider user testing tabbed content vs. vertical menus and back to category / next product navigation. User testing will reveal the "why" behind the "what" of user behavior, and can often be completed in a day or two, whereas mobile traffic may be too low to run a quick A/B test, but you could also test this with an A/B experiment. Next, experiment with value propositions - messaging and placement - with A/B testing. After you've nailed down these essentials, look at button styling, secondary calls to action, merchandising and so on.
Next up: cart review pages.
Looking for help with mobile commerce strategy? Contact the Elastic Path consulting team at consulting@elasticpath.com to learn how our ecommerce strategy and mobile strategy services can improve your business results.