Tips for Tablet Commerce Usability



You may recall late last year, we posted 10 mobile web design best practices taken from our friends at Mobify’s 50 tip stash. Today we’re doing it again — this time for tablets. Enjoy these 3 killer tips, and read them all in the ebook Tablet Web Design Best Practice Guide.

1. Turn off autocorrect and auto-capitalize on form fields.

Autocorrect and auto-capitalize are very helpful on touch screen devices for texting and composing email, but they can be very problematic when filling in forms. Email addresses and user names are rarely autocorrectible the first time you input them into your device, and names and addresses can be auto-incorrected without the user noticing. Auto-capitalize is also problematic for user names but the most problematic for password entry, which often is masked to the user, who can’t figure out why his or her input keeps failing with every try. Make sure to turn them off using autocapitalize=”off” and autocorrect=”off” for the appropriate fields.

2. Use native UI elements.

Instead of trying to push a desktop element like a drop-down menu into a responsive design, use a simple media query to substitute native UI elements that are already optimized for mobile. Ideeli uses native selection menus with larger touch targets using this tactic.


3. Remove broken hovers.

Hovers don’t always work on tablets and can behave wonky even when they do — hello accidental activation! It’s recommended hovers be turned off, with the information contained behind them included somewhere on the page.

When viewing the lululemon site on a desktop, users see a quick-view button hovering on a product. Clicking that quick view opens up the product in a modal. Since the hover paradigm does not work on touch devices, a tablet user bypasses the quick view and navigates to the product page instead. For example, Lululemon links directly to product pages from category pages, nixing the Quick View feature.


Reprinted by permission.

About the author: Linda Bustos

As Director of Ecommerce Research at Elastic Path, Linda Bustos works with some of the world’s largest companies to help improve conversion rates and profitability on the Web. In addition to writing the Get Elastic blog since 2007, Linda’s articles have appeared in Mobile Marketer, CMO Magazine, E-Marketing + Commerce, and Search Marketing Standard. She is a frequent speaker at industry events, including XCommerce, Conversion Conference, and Affiliate Management Days.

In 2010, Linda earned a spot on the DMNews Top 30 Direct Marketers Under 30 list. She has served as faculty for the Banff New Media Institute’s Career Accelerator Program and Marketing Profs University, and has appeared as one of the Top 100 Influential Marketers of the year in 2008 and 2009. Prior to joining Elastic Path, Linda worked agency-side, specializing in usability and SEO.

You are seconds away from signing up for the hottest list in New York Tech!

Join the millions and keep up with the stories shaping entrepreneurship. Sign up today.