Optimizing Mobile Product Pages

Product detail pages make or break whether a product is added to cart. Images, content and calls-to-action must be optimized for the mobile context, along with the right navigation elements to help mobile shoppers fill their baskets.

Handling Product Images

Clearly indicate image controls

The most common design pattern for carousel navigation is “nav dots,” which are easy to overlook, especially when overlaid upon product images.

image-dots

Pointers and arrows can be equally subtle and unclear.

no-image-thumbs

The safest approach is to clearly show product image thumbnails. Not only do they make it obvious that more images are available, they give some context around the images’ views. A shopper might want to hone directly on a purse’s top view, for example (below, right).

image-thumbs

Support swipe-right

It’s also important to support swipe-right and left to navigate the image gallery. This gesture’s not limited to Tinder-like apps, it’s a conventional way to browse image sets quickly on many websites and social networks.

Many mobile commerce sites, like Staples, neglect to support the gesture. The only way to scroll through thumbnail images is to tap the “ghost dots” below the image.

support-swipe-right

Make zoom obvious

Like making alternative images obvious, over-communicating image zoom is useful on the “small screen.”

Both Ashley Stewart’s magnifying icon and Blair.com’s “Tap to Zoom” overlay are more clear than a simple white + sign (which often blends into a product image’s background).

tap-to-zoom

Avoid loading zoomed images in a new window

Mobile users often don’t expect a new page to load, and may not be able to intuitively find their way back to the product page. Instead, keep them on the product detail page, and serve lightboxes that support touch-controlled zoom and pan. You can’t expand an image wider than a smartphone’s screen, but you can support close-up views with this method.

lightbox-zoom

As with any lightbox, ensure the close-control is easy to see, and that alternatively, the user can escape the lightbox by touching the shaded area “underneath.”

Remember that hover doesn’t work on touch devices. Avoid instructing visitors to hover on mobile devices.

hover-effect-pdp

Product page navigation

Don’t make users rely on the back button

It’s important to offer mobile users a way back to their last viewed product list from product detail pages (many mobile commerce sites don’t). This can be in the form of breadcrumb links (provided they’re large enough to read and tap, and aren’t stacked too close together vertically) or “back to” buttons (not to be confused with a browser’s native “back” button – which tends to appear and disappear as a user scrolls and pauses on a page).

back-to-results

Some mobile sites, like Office Depot (above, left) truncate breadcrumb links to fit the screen, rendering them unreadable. A much more usable approach is to use a larger, tap-friendly button that takes the customer back one step, like Edwin Watts Golf (above, right).

Consider previous and next buttons

Both FrenchToast and Ashley Stewart show previous and next buttons, but place them in different locations on the product detail page.

prev-next-pdp

Ideally these navigation links appear both at the top and bottom of product pages, as the customer may decide to view another item after viewing just the product image, or after scrolling through the whole page. (It’s also a good idea to include a “Back to [category] or [search]” button at the bottom of product pages).

Navigating product content

Desktop screens have plenty of room to present product content like descriptions, item details, reviews, Q&A and size guides. But even on desktops, shoppers typically have to scroll to view all content.

To fit the small screen, most mobile product detail pages allow customers to expand and collapse content.

edwinwatt-description

Edwin Watt Golf supports expand and collapse

Retailers should consider whether all content blocks should be collapsed by default, all expanded or only certain sections expanded. Some products are so well recognized or understood by consumers that descriptions are less influential to the purchase decision, such as printer paper, chewing gum and laundry soap. These purchases are driven by brand and price. For other products, images do the selling.

When product descriptions (or other blocks of content) are critical to the purchase decision, consider expanding them by default.

But keep in mind that your page design has a massive impact on engagement with other content blocks. The human brain loves to take shortcuts and is drawn to white space, while users scan and read a page from top to bottom. Ensure expanded selections appear first, with collapsed links placed below.

The Description button atop the expanded Reviews section on OzoneBilliards.com (below, left) is very easy to overlook. Urban Outfitters, on the other hand (and opposite side) places collapsed links below its expanded description. With a clean, minimalist design, users are more likely to notice secondary content links.

default-description-expand

Some retailers choose to truncate content sections with a link to “show more,” like Staples (below, left). Office Depot also truncates its description, unfortunately it’s not clear that more content lies behind Office Depot’s > pointer. Most users will assume the three visible bullet points are the full text due to its placement, and lack of label text.

description-truncation

Forward and back sliders (> and <) load content in new screens, which accommodates long content blocks like product reviews better than expand and collapse. However, it’s critical that clear “back” links are visible so customers don’t have to invoke the browser’s back button. review-back-button

Office Depot (above, left) requires customers to find the browser back button to return to product details. Vat19 (above, right) offers an escape route

Be careful with tabbed content

Tabs are another method for squeezing more content into a small space. However, they are often not conspicuous enough for customers to notice or engage with them.

description-tabs-1

80’s Tees’ (below, right) bold use of colored highlight makes the tabs stand out.

description-tabs

If you currently used tabbed content on your mobile site, ensure you’re tracking taps and engagement with tabbed items. A/B testing against the expand and collapse approach is a worthwhile exercise if tab engagement is low.

Use “back to top” links

Product detail pages can be as long as category and search lists, so use “back to top” buttons to help customers reach breadcrumb and global navigation quickly.

back-to-top-pdp

What a dead-end looks like (above, left) versus a great back to top option (above, right)

Content layout

Content placement

Many mobile commerce sites choose to place description and other content blocks below cart buttons. Because Add to Cart is the most important call to action on the product page, placing it lower on a mobile page makes it harder to spot — the hypothesis being higher placement leads to higher add-to-cart rates.

However, the various forms of product content have an influence on the purchase decision, so it’s not as simple as this. Cart buttons, depending on how they’re styled, often resemble the end of a page, which may discourage some customers from scrolling further.

Both Active Ride Shop (below, left) and Payless Rugs (below, right) place product descriptions below Add to Cart.

page end

Active Ride Shop’s minimalist design doesn’t necessarily look like the “end of the page,” supporting continued eye flow, while Payless Rugs’ value Add to Cart content block contains value proposition badges that look like the end of the page.

Frenchtoast is another example. Its page-width service proposition bar appears to be the end of the page, but important content lies “after the jump.”

scroll-buster

Ditto Accessory Geeks. Both the curved edges of the product specs section and the service proposition bar discourage further scrolling to important content.

more-below-fold

It’s also important that Add to Cart buttons stand out from other links, and should be styled in a contrasting color to the website’s theme. Every mobile commerce site should test placement of Add to Cart (above and below) the product description, and consider the impact of design elements that “stop” natural eye flow.

Brownies.com (below, left) styles its Add to Cart button very similarly to its content headers. Harrod’s (below, right) uses contrasting black, but this color may not be bold enough to convert as high as a brighter button.

description-after-cta

The order that content is stacked can also impact engagement. Review content conventionally appears at the bottom of a product page, and on mobile devices, is followed by customer service links and other footer-menu content.

When product details and size information are placed below reviews and Q&A, they are less associated with the product description, though they are the most closely related to it.

content-order

Content formatting

Web copywriting best practices like paragraph spacing, bullet points and concise sentences apply all-the-more to mobile devices. Keep in mind that a single sentence (or product title) can span up to six lines on a smartphone in portrait mode — you may want to separate individual sentences by spaces.

product-description-text

Don’t forget landscape mode — ensure content looks great when flipped sideways.

product-page-landscape

Pin Add to Cart

A very effective way to keep an important call-to-action at your user’s fingertips is to “pin” it to the top or bottom of the screen. As the user scrolls, the call-to-action stays put.

eBags pins the Add to Cart button to the top of the screen, keeping the product title and price continually in context.

pinned-cart-button

Staples pins Add to Cart with quantity configuration to the bottom of the screen, making it easy to access by thumb, though product name and price rolls out of a user’s view as he scrolls down the page.

pinned-to-bottom

When testing a pinned call-to-action against a control of no pin, ensure to include test versions where the element is pinned to the top and the bottom of the screen.

Product configuration

For products that contain multiple SKU variants like size, color or material, the customer must apply selections before adding an item to cart.

Avoid native drop-down menus

When mobile dropdown menus invoke the device’s native UI, you lose control of the experience — and it may not be the experience you want.

The current version of iOS, for example, invokes a “spinner” menu that can be unwieldy, and only shows one selection in focus at a time (Android menus are more user friendly).

A common native UI zoom glitch is that the page zooms in when the menu is invoked, and fails to zoom back out after a selection is made, forcing the customer to pinch the screen back to size after every selection. For products with multiple attributes to configure, this becomes a real pain in the fingertip.

dropdown-zoom

The best design patterns are those that allow configuration without invoking native UI. For example, Jegs pulls the native menu for quantity selection (below, left), while 1000 Bulbs (below, right) supports tapping + or -.

quantity-config-mobile

Another benefit of customized dropdowns is the flexibility to add context. For example, both Dungarees (below, left) and Poppin (below, right) carry products with creative, non-conventional color names like “Dusk” and “Virginia Walnut.” Poppin’s dropdown includes color swatches so customers can understand the difference between selections, a feature not possible with native UI.

Dropdowns-on-pdps

Non-native dropdowns are also the preferred pattern for attributes with only one or two options, where pulling up a dropdown spinner feels unnecessary to the user.

Note: When a color selection has been applied, it should update the main product image to provide visual feedback and reassurance that the right selection was applied.

Another approach is to show all selection options as finger-friendly, tappable buttons, with a border or fill highlight to show which selections have been applied (below, left). Alternatively, radio buttons may be used for selections that require contextual detail, like GlassesUSA’s Lens Packages (below, right).

buttons-and-radio-buttons

Make error callouts clear

When a customer accidentally misses an attribute selection, it’s important not just to call it out, but to be very clear which section was missed. Several test sites disable and gray out the Add to Cart button until the right selections had been applied, which can give customers who aren’t aware they’ve “missed something” the impression that the button (or entire site) is broken.

Ideally, you allow the customer to click Add to Cart and provide specific feedback to which selections need attention. One approach is to use a lightbox overlay (below), which is more obvious than an alert, but requires the customer to actively close the box, and look for the erroneous selection.

frenchtoast-error

Inline callouts, like White House Black Market’s (below) instantly highlight the erroneous section, and allow customers to make quicker corrections. White House Black Market adjusts the page position so the section in question appears at the top of the page.

inline-error-message

Avoid pre-selections

When default colors or sizes are applied, the wrong configuration can unwittingly be added to cart. Avoid pre-selecting any options, especially size.

default-config

Product recommendations

There are three typical ways mobile product pages display product recommendations: carousel, gallery and expand / collapse list.

Carousels must support swipe right and left navigation and present visual indication that more recommendations are available.

Airsplat (below, left) places < and > pointers in the header, rather than the sides of the product image. It appears there’s only one product recommendation in the gallery. Bellaluna Toys’ design (below, right) is more clearly recognized as a carousel.

bad-vs-good-carousel

Planet Blue (below, left) and Ashley Stewart (below, right) show scannable galleries. It’s a good idea to A/B test carousels against galleries to determine which achieve higher click through and attachment rates.

fashion-no-carousel

Keep in mind that product recommendations can distract a customer from adding the product viewed to cart, and unlike desktop experiences, recommended products can’t be opened in new tabs. Consider testing product recommendations against no recommendations, measuring Add to Cart rate and conversion rate.

ParentGiving uses the expand and collapse method to show accessory cross-sells (as well as related category recommendations). A great A/B experiment would be to test this section expanded by default versus collapsed by default.

expand-crosssell-and-related-categories

Notice ParentGiving supports direct add-to-cart from the product page, as does Rough Country (below, right). 1000 Bulbs (below, left) bakes quantity configuration into its carousel, and it’s possible to include this feature in a gallery list as well.

add-to-cart-from-crossell

Product detail pages pack a lot of content, and on mobile devices, this content must be arranged and formatted in a way that allows customers to reasonably scan information without too much scrolling.

Due to size and touchscreen properties of smartphones, elements like image zoom, drop-down menus, product configuration and navigation between content types should be considered in this context. Expand and collapse content sections, on-page drop-down menus, swipe gestures and pinned calls-to-action are all mobile-specific design elements you should consider in your mobile product page experience.

There are no hard-and-fast rules for content placement, but decisions should be made in light of both product context (are purchases influenced more by certain content types than others?) and the types of content involved.

Need help with your mobile product page design? Drop me a line.

Ecommerce Illustrated is a project of Edgacent, an ecommerce advisory group.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *