Tap vs. Click: Tablet Optimization
There has been a lot of talk in the past year about optimizing usability and conversion paths for mobile. With the focus on capturing those fickle mobile users, tablet interfaces risk becoming the middle child: tablets are not as universal as desktops and laptops, but not as critical as smartphones.
New metrics on the habits and value of tablet users show just how critical it is that your responsive landing pages are highly optimized for tablet users.
According to the Adobe Digital Index, tablet page views exceeded smartphone page views by 70% in February 2013. The same study found that tablet users spend 54% more per online order than smartphone users, and 19% more than people on desktop or laptop computers. During 2012, tablet traffic doubled in each country analyzed.
Those are some pretty sweet numbers.
A Refresher on Responsive Design
Responsive design is the practice of adapting a website’s interface so the same site renders well on desktop, smartphone and tablet screens. Elements are rearranged, emphasized or hidden based on the type of device. This gives users an optimized experience, regardless of their screen size.
A little over a year ago, Google came out strongly in favor of responsive design, citing benefits such as: a single URL, no redirection, and the ease with which the Googlebot can crawl a responsive site. In other words, responsive sites may well rank better in Google, because Google likes them.
Optimal Landing Page Design for Tablets
How do you tweak your responsive design so tablet users have an easy (read: high conversion) experience on your site? Make it big, bouncy, and fun.
With all landing pages, you want to eliminate menus and any other distractions that will take users away from your one core conversion goal. We’ll take as our starting point that you are building an optimized landing page (not a landing page with menus and the like). However, we will address menu navigation, because there are instances when you use a menu on a landing page (for example: on a microsite, or when that client asks you to put the top navigation back).
1. Finger-sized Buttons and Menus
Think about the difference between clicking with a mouse and tapping a touch screen. Remember that the average adult finger is about 50 pixels wide. Then ask yourself if users with large fingers or less-than-perfect coordination will be able to tap a link on your site without erroneously choosing the option next door.
Put simply, buttons and menu links on tablet landing pages need to be larger than your finger tip:
- Make buttons at least 50 pixels wide
- Add more white space around buttons
- If a menu is necessary, increase padding around menu items
Better yet, if your landing page contains a hero image or other large conversion optimized area, why not make this larger area clickable for the conversion?
2. Web copy: Don’t Make them Squint and Zoom
Just because you can make users zoom doesn’t mean you should. Imagine your target customer sitting on the couch, browsing and swiping on her tablet. She should be able to understand your landing page — and do what you want her to do — with minimal effort.
Don’t be afraid to make the text on your landing page very large and very clear. Where possible, use photos and icons to indicate the next step without making users read or think about it. Include that list of benefits, but don’t let it get in the way of the core purpose of the page.
If you must include a paragraph of text on your landing page for SEO or other purposes, make it easier to read by increasing the font size a point.
3. Make Your Forms Appear Easy
A user’s willingness to fill in a form is where smartphone and tablet landing page design can diverge. While smartphone usability dictates that you should avoid forms unless absolutely necessary, tablets are exceptionally form friendly, provided that you create the perception of ease.
Tablet users have mixed feelings about using a touchpad to enter data. But with limited calling functionality on most tablets, a form fill may be your best conversion option. The key: make the form fill process appear as easy as possible.
Once again, think about finger size. Users must be able to easily select and tap the form. Wherever possible in forms, allow users to select by tapping a larger area. For example, rather than tapping only a radio button, activate the text and area surrounding the radio button, while ensuring there is enough space between options.
Designing for Tablet: An Easy Win
Given the strong metrics generated by tablet users, it’s time to take a step back from your next responsive design project and devote extra attention to tablet usability.
Perhaps fewer users view your landing page on tablet, but they are more valuable; recent studies show that tablet users spend more online per order, and are generally more affluent. With tablet shipments expected to outpace desktop computers in 2013 and laptops in 2014, the scales are quickly tipping in favor of tapping over clicking. Be ready.