Ecommerce designers, marketers and merchandisers should be just as obsessed with delivering phenomenal tablet experiences as for other devices. But is the optimal experience a scaled-down desktop experience, scaled-up mobile or something totally unique to tablet?
Tablets in Context
Tablets (and phablets) are “in-between” devices. They accommodate desktop design and content reasonably well, with similar conversion rates and average order values. Despite being portable, they’re more frequently used at home, in a leisure, “lean-back” environment. And like smartphones, they’re controlled with touch-gestures, can be used in both portrait and landscape orientation, and support mobile apps.
But as in-between devices, tablets have their own form factors and use context. Unlike smartphones, they’re often shared among members of a household. Due to their size, they’re less likely to be whipped out for spontaneous “mobile moments,” though they may make a bus ride, flight or afternoon at the coffee shop more enjoyable on-the-go (provided there’s decent WiFi, as only one-third of tablets use cellular data).
Though tablets represent a smaller portion of traffic to ecommerce sites, tablet shoppers typically convert higher and spend more per visit than smartphone visitors. According to eMarketer, tablets drove 61% of mobile commerce sales in 2015.
One mobile myth is that smartphones are the preferred device for researching offline purchases, but nearly half of tablet owners indicated they would use them to research offline holiday purchases, and were as likely to check local store information and in-store inventory availability as smartphone owners.
There is no universal tablet context in terms of purchase intent — tablet shoppers are not more likely to want to see certain products, or take certain actions simply because they own or are using a tablet at any given point in time. Tablet conversion rates and basket sizes are higher than smartphones because they have larger, more user-friendly screens, and are more likely to be used at home in a relaxed environment than on-the-go.
Thus, our recommendation is to design for tablets in the way that’s the most user-friendly for your customer. This chapter explores various ways to support wayfinding and present content to in-between screens, with pros and cons of each.
Five Approaches to Tablet Navigation
In my survey of 100 retailers on the Internet Retailer 500, I observed five approaches to tablet navigation. Note: more frequent does not mean “recommended.”
No tablet optimization (45%)
The most common approach to serving tablets is to let the device auto-scale the desktop design. While none of the 45 test retailers using this approach have adopted responsive web design (RWD), this doesn’t mean some of these retailers don’t have an adaptive, mobile-optimized smartphone experience.
“Doing nothing” for tablet may require more pinching and zooming for the visitor, but it also offers a consistent experience for visitors familiar with the desktop version. Smartphone navigation is often so radically different than desktop, that a mobile-optimized design can introduce more friction into the user experience.
Retailers that aren’t ready for a full responsive overhaul and want to optimize for tablet should consider embracing large, blocky home page graphics. JensonUSA and Belk are great examples of this design trend.
JensonUSA’s design features easy-to-tap content blocks that display well on tablets
Belk’s home page features large images and calls-to-action that scales well on tablets
Responsive design that replicates desktop navigation and search in both landscape and portrait modes (33%)
This approach works best for sites with simple header menus that can afford the white space required to make link targets legible and tappable in portrait mode.
Rugs Direct’s tablet site in landscape mode (left), and portrait (right)
More complex sites should avoid this approach. Barnes and Noble pushes the limits on its menu in portrait mode. The lack of white space combined with vertical spacing characters makes it harder to read, and potentially harder to tap.
Responsive design that serves desktop navigation in landscape, and mobile navigation in portrait mode (10%)
Sally Beauty’s tablet site in landscape mode (left), and portrait (right)
Setting responsive breakpoints to collapse the 20-foot-sub menu into a hamburger can be a smart and space-saving move, but effectively serves two experiences to a single device user, which may impact usability and conversion rates — especially if utilities like account, cart and search seem to disappear in portrait mode.
During my visit to Walmart.com, category navigation vanished entirely, along with all customer service links. The search box also switched from scoped (search within a category) to unscoped, another unhappy surprise for tablet users trained on the desktop experience.
Responsive design that replicates mobile navigation in both landscape and portrait modes (10%)
Kenneth Cole’s tablet site in landscape mode (left), and portrait (right)
For sites with many categories, this may be the optimal tablet experience (versus using a mixed-menu, like the examples above). It allows tablet visitors to switch orientation without having to re-orient themselves to a new menu scheme.
Tablet design that replicates mobile navigation across all device, including desktop (2%)
Only two sites in the test group took the “mobile first” approach to design, with design completely consistent across screens, right down to the hamburger menu (or a three “Popeye Cigarette” candy menu).
This approach may work very well for sites where over 60% of visitors come through smartphones. The mobile customer who occasionally uses desktop will appreciate the replicated design, and desktop visitors who continue their journeys on mobile will likewise benefit from the consistent experience. (And for those that do, adding a clear, contextual label to the hamburger icon is very good practice).
Should You Have a Unique Design for Each Device?
Despite the studies that suggest tablet users recline in bed or couch-surf your site whilst channel-surfing their TVs, a tablet visitor can be anywhere, with any intent, at any stage of their purchase journey. Don’t assume tablet visitors are that much different than those using other devices.
Yes, context is important, but the odds that your ecommerce site requires a unicorn of a tablet experience is low. Maintaining three versions of your design is not only unnecessary, but confusing to shoppers that visit your site through multiple devices.
For example, Kay Jewelers’ desktop menus don’t scale intuitively to its tablet and desktop experiences.
Notice how the “Shop” menu disappears on the mobile version, “Account” becomes “Login,” the store locator becomes an icon that competes with the Search button, and tablet search has no button!
Notice also how Kay’s skeumorphic category menu becomes harder to read as it scales up (resembling closed blinds), wasting the extra real estate the tablet affords — it’s rather “blinding!”
Similarly, iHerb’s desktop, tablet and smartphone designs are vastly different.
In addition to completely different look-and-feel, there’s no consistency between how menus, categories, specials or other merchandising zones are presented across devices.
Designing for Tablet Search
Another issue that can happen to search when transitioning from desktop to tablet is it can fade to the background. Ice.com’s search is relatively easy to spot on the desktop site, located proximal to the main category menu.
But the white-on-white search box spans the width of the tablet experience in both portrait and landscape mode. This makes the search box less obvious to spot, whilst the hamburger menu hides in the top-spanning black bar.
Be aware that the human eye fixates on white space, and placing important calls to action in dark bars is a risky design approach.
4 Approaches to Tablet Merchandising and Content
The decision how to present the “meat” of your home page (content and merchandising zones) is important in optimizing the tablet experience. In my test group, I observed four high-level approaches
1. Show consistent content across devices (most popular)
Most sites in the test group serve the same content across devices, however scaled down to fit various screen sizes and orientations.
The advantage of consistency is a consistent user experience, but it may not be the most contextual. Cross-device testing may show that certain merchandising zones have more or less engagement on tablets, and some features may or may not be useful or necessary on smaller screens. Other types of content and merchandising may benefit from modified design, suitable for touch gestures or geolocation.
2. Cut “less important” content from desktop version in tablet design
Kay Jewelers’ desktop site displays graphic category “tiles,” featured products and offers, which don’t appear on its tablet or smartphone versions.
One benefit of dumping content on mobile versions is faster page load speed (unless you’re using responsive design, in which hidden content still lives in the HTML file). If the content is served through a third party tool (such as social galleries), reducing the number of scripts in your code will also help.
Another benefit of streamlining content is reducing the need to scroll, while bringing more attention to the content and calls to action you do present in your mobile versions.
3. Create a contextual tablet design
JCPenney’s mobile experience adds graphic icon navigation and category tiles to its otherwise desktop-consistent content, as does Kohl’s.
While this bulks up pages, offering a graphic and touch-friendly alternative to hamburger menus can delight customers, and achieve the home page goal of successfully guiding the visitor to a deeper page of your site. However, as mentioned in previous chapters on home page merchandising, showing only a selection of categories can lead your visitor to conclude the categories you display are the only categories you offer.
Showing a single product to represent a full category can also lead to frustration when that product is not readily found on the product list page. For example, I disappointingly couldn’t locate the wicked boot depicted in JC Penney’s “Shoes” thumbnail.
4. Scale up the mobile experience
The least common method, Burt’s Bees chooses to apply the same design to tablets as its smartphone layout.
While the design is clean and the menu targets very tap-friendly, Burt’s may be wasting its opportunity to showcase its product and branding with more visual appeal. For example, Burt’s could display categories in graphic tiles, or use storytelling to romance its value proposition or newest product innovations.
Which Tablet Layout is Best for Your Site?
Whether you’re using responsive design, adaptive or a combination approach (covered in-depth in an upcoming chapter), your optimal tablet design is the one that’s most usable.
Consider how menus and search boxes display and behave in portrait and landscape mode, and how content scales in each orientation. Is content easy to “tap”? Is the content you display essential to the shopping experience or does it distract from your most important merchandising zones?
Testing tablet design
There’s no limit to how you can test your tablet experience, but it pays dividends to prioritize your tests. Navigation is your most critical design element, and should be tested first (testing hamburger menus against desktop-like header menus, and how they behave in orientation is a good place to start).
Because home page content typically changes frequently, initial tests should aim to determine the optimal content layout, rather than the optimal graphics or messaging. Think of merchandising zones, rather than specific offers and creative. For example, test whether adding graphic category tiles to home page content reduces bounce rates, increases product page views and add-to-cart, repeat visits and conversion rates. Or, test whether removing content zones from your desktop design impacts these KPIs favorably.
Need help with your tablet design or testing strategy? Drop me a line.
Ecommerce Illustrated is a project of Edgacent, an ecommerce advisory group.