View Categories

Designing for the Touchscreen World

An e-commerce website on a phone.
  • Oct 01, 2012
  • 0
  • by A2 BizDev

There’s no debating it; tablets (and smartphones) are taking over computing. A site or web app that is perfectly usable with a mouse on a desktop or a touchpad on a laptop may be totally unworkable on a tablet where the only input device is a finger and a touchscreen.

On the surface (no pun intended), touchpads and touchscreens may seem to be identical and an interface that works for one should work for the other; right? Nope. Not remotely. A touchpad is much more like a mouse, a touchscreen is a whole different beast with different needs, advantages and disadvantages.

To cite one repeat offender; drop down menus which only appear on mouseover/hover state. These are often a user nightmare on tablets, where there is no “hover state” generally speaking. If you’re designing a site for today or tomorrow, it’s probably best to abandon all interface elements that trigger on hover and focus on click/touch events as the reliable and easy source of customer interaction.

Beyond the different input needs of touchscreen devices, the generally smaller screens present a different set of challenges. The smaller screens mean that either your site must be simpler with larger interactive elements (buttons, links, etc.), or users will have to zoom in and only view a portion of your page at a time; which means that everything they need to see to make a choice and decide what to interact with needs to fit in that view at once. If a user has to scroll around while filling out a form, or deciding what button to press, it’s going to be much more frustrating than using a site where the designer has put the thought and effort in to make the site usable.

A lot of modern sites are being designed under a Responsive paradigm; which means the site recognizes what kind of resolution / device it’s being presented on and adjusts itself to better suit the device in question. This is obviously great, and more and more Responsive templates are coming out for popular web platforms like WordPress, Drupal, etc. But if you find yourself in a situation where pursuing a Responsive design is not viable, the minimum you should do is test your site on touchscreen devices and see how usable it is. Better yet, observe someone else who is unfamiliar with your site attempting to use it on a mobile device. Note what elements work and what don’t, and see what can be adjusted to make life easier for these users.

For most sites, sooner rather than later, more of your visitors will be on touchscreen devices will outnumber those coming from PCs and laptops. It’s better to be ready for them now than trying to fix it down the road once it’s already a major problem.