Seven techniques for providing a tablet optimised user experience
In ecommerce, tablets are now finally being recognised as an entirely distinct category than smartphones, so the overarching mobile category is no longer relevant.
As such, businesses can’t rely on having a single mobile strategy to cover both devices. Tablet shoppers can expect to be treated to an excellent user experience that fits with the capabilities of their device.
It's a topic we've discussed in more detail in a post about the opportunities that tablets present for marketers, as well as highlighting 10 ecommerce sites that have catered to tablet users by embracing responsive design.
And in order to help sites deliver this experience, Mobify has come up with seven techniques for providing a tablet optimised user experience...
1. Adapt for portrait and landscape viewing
Tablets are most commonly used at home as part of a ‘lean back’ leisure experience, and users often switch between a portrait or landscape view while browsing.
Web pages need to adjust their arrangement through a fluid grid layout when a customer switches from holding a tablet in portrait mode to landscape or vice versa.
2. Create image carousels that can be swiped
We previously blogged stats which show that carousels don’t work on desktop sites, but Mobify recommends using swipeable carousels on tablets to showcase images, hero offers and featured content.
For example, fashion retailer Stella and Dot uses carousels for exactly this purpose.
3. Let navigation elements breathe
Drop down menus and other navigation menus that fly out when you roll over them are useful on a desktop site, but on a tablet they can be annoying because they hide content until the user tries to close the menu.
Instead of creating stacked user interface elements, the report suggests using accordions to push content down the page or let customers navigate to a custom landing page.
4. Hint and reveal (AKA progressive disclosure)
If your website contains a lot of information it is a good idea to mask some of it so as not to overwhelm the user.
Progressive disclosure hints at content beyond the frame of the device, and then reveals that content when the user swipes, taps or scrolls to access it.
By hinting at content, you keep the page looking neat while at the same time showing customers the action available to them so they can discover the content they’re seeking.
5. Bigger buttons are better
A major part of delivering a decent user experience is about making it easy to navigate around the site, which means the calls-to-action need to be large and easy to click.
Apple recommends a minimum target of 44x44 pixels, but in general the bigger, and more obvious, the better.
Electronics retailer Currys uses large, green CTAs that are not only easy to click, but really stand out against the rest of the page.
6. Up the font size
Small fonts are a pain to read on any screen size, so it’s best to make the font as big as possible without compromising the overall look of the page.
Mobify recommends increasing the font size to at least 14px on a tablet screen. For example, the font on Skinny Ties’ responsive website is extremely easy to read.
7. Banish ‘pinch and zoom’
Though pinching and zooming does have a place in navigating maps or looking at photos, forcing users to pinch and zoom while browsing the web can lead to a poor user experience.
By maximizing the button, font and image sizes you can ensure that customers can comfortably view the content without zooming, which should then allow you to disable the pinch and zoom function.