Optimizing for Today's Tablet Shoppers

Ken Burke
by Ken Burke 03 Feb, 2013

The numbers don't lie. Tablets are taking over ecommerce. 


The latest indicators of the tablet phenomenon surfaced over the 2012 holiday kick-off weekend. Data captured across several MarketLive merchants revealed the following statistics:


**Tablet traffic accounted for 8-19 percent of total shopping traffic from Thanksgiving through Cyber Monday


**Total sales from tablet devices ranged from 7-17 percent, with iPads representing a disproportionate 94 percent majority


**Tablet shoppers converted as much as 38 percent higher and average order sizes were up to 15 percent greater


Tablets also figure prominently in pre-sale consumer activities. More than half of tablet users have looked up product and price information, searched for store location, or read customer reviews at least once in the last month and 17 percent have done so almost daily. Unfortunately, with respect to their tablet experiences, more than 40 percent of tablet users report that they regularly experience problems such as site crashes, functionality breakdowns and formatting issues.


So if you're looking to boost sales, optimizing your ecommerce site for tablet users could give you just the edge you need. Admittedly the tablet landscape continues to evolve rapidly and is not without a few challenges brought by the growing array of new devices. Still, deploying a few key optimizations to tailor your online shopping experience for tablet visitors, without committing to native app development or to a complete, responsive design influenced re-platform, is an efficient, winning approach.  What follows is a few of the recommendations for tablet optimizations.


The Need for Speed


The bar is high. According to Compuware, more than two thirds of tablet users expect websites to load just as quickly, or quicker, than they would on a desktop computer - in two seconds or less. A challenge, since tablet access is often via 3G or slow, public Wi-Fi networks. However, following a few basic development guidelines can rev up your site's performance across all devices and networks:


-  Make sure all page images are highly optimized. Consider using a CDN (Content Delivery Network) to help.

-  Limit the number of animations on each individual page.

-  Remove legacy/unused JavaScript, CSS and tags.

-  Reduce the number of 'Include' files.


The Significance of Swipe


Tablet users expect to be able to use their fingers to swipe, zoom and pinch. If key areas of your site aren't swipe-able these visitors are more likely to abandon out of frustration. Presenting a slightly modified, swipe-friendly experience to these visitors is one of the most important tablet optimizations you can make:


-  Modify featured content. Swipe-friendly features keep users browsing and shopping. Replace static feature areas and button controlled sliders with scrolling, swipe-able content.


-  Update product carousels. On the desktop, product carousels are a great way to showcase top-selling products and special product assortments using a minimal footprint. Detect tablet visitors and switch from button to swipe control for improved satisfaction and increased exposure.


-  Adjust alternate views. On your product detail pages, make it easy for users to switch between alternate images with a simple swipe.


"Tap-Ability" and Finger-Friendly Design


Good gesture-based interface design recognizes that tablet users "tap." The easy click precision of the mouse arrow is almost impossible with finger access, so some of the most effective tablet optimizations you can tackle are to make sure key areas are "tap-ready:"


-  Be "fat-thumb" friendly. Make buttons large and bright. Replace tightly clustered, small text menus with well-spaced buttons or larger text links, separate long category lists into small groups, and always be sure to surround all clickable elements with ample white space. These tactics improve click accuracy and activity and are proving equally successful as desktop enhancements.


-  Replace hover interactions. The hover states used in navigation drop-down menus, button designs and to bring up quick view and "more info" windows can be extremely effective on desktop sites but can be almost impossible to control on many tablets. Often completely unsupported, they can result in frustrating click errors as tablet visitors make repeat attempts to open and close hover content. Instead, use fixed place buttons and links to invoke drop-downs and modal windows. Tip: don't forget to incorporate large, finger-friendly visual cues including large close buttons to facilitate easy, accurate window exits.


-  Create "tap-ready" order options. Replace product configuration drop-downs, such as color, size and other order options with "tap-on, tap-off" design elements. Color swatches, boxes with sizes inside and other picture-based elements are efficient and effective.


-  Eliminate Flash animation. The ubiquitous use of Flash in website design presents challenges unique to Apple devices since the technology is unsupported. Although the adoption of Android and Windows devices is on the rise, iPad ownership and shopping visits are disproportionately large. To eliminate the frustration caused by broken content displays, replace Flash functionality with JavaScript, HTML5 and in some cases, static content. 

(Example: large, easy-tap buttons in a tablet-ready, accordion checkout.)






Save Typing, Save Sales


Consumers generally prefer to use tablets over mobile phones for online shopping, yet one in five finds tablets as cumbersome as phones when it comes to entering information (Forrester Research).  The right adjustments to search and forms will mitigate many tablet abandons and directly impact conversion and sales. Prefill or suggest content to limit typing wherever possible, and when there is no alternative:


-  Help site search users with predictive, "type ahead" search suggestions.

-  Prefill forms anywhere possible.

-  Always invoke the appropriate keyboard for each field, e.g. alpha for name fields, numeric for zip code fields, etc.

-  Make form fields large enough and long enough for the text required. 

-  Deploy clickable plus/minus signs for quantity adjustments.

-  Use drop downs when there's no other alternative.


(Example: This merchant's leverages good site search, improving the customer experience.)



If You Build It, Will They Come? 


What is your best option for implementing a tablet strategy? Should you modify your laptop/desktop website for tablet visitors? Re-platform using responsive design techniques? Build a special tablet application?  At present, the prevailing approach seems to be adopting a wait-and-see attitude to gain a clearer understanding about the primary needs, expectations and behavior of tablet shoppers. Most consumers surveyed by Forrester within the last year still generally prefer the "traditional" site during their shopping experience.  


One already proven certainty is that a modest, immediate investment in an improved tablet experience can have a measurable impact on satisfaction and sales, and many of the same optimizations even enhance your desktop site effectiveness. Whether not to you decide to ultimately invest in building a separate app for tablet users, or to update your platform around responsive design, it's still vital to start optimizing for tablet traffic as quickly as possible.