Designed to be touched

By: Chris Gibbins | January 31st, 2010

Apple’s new iPad will make ‘Touch’ an even sexier way to browse the net, which will inevitably lead to a greater number of touch-screen users visiting your website. And as ‘touch-ing’ websites is quite a different experience from moving a cursor around the screen with a mouse, it’s never been so important to design and test your site for touch-screen interaction.

‘Un-touch-able’ functionality

Just how do you interact with a website’s mega drop-down (fly-out) menu using a touch-screen interface like an iPhone? Well it’s pretty difficult because there’s no cursor to hover over the main menu links. Tapping the link will normally just take you to the landing page without triggering the drop-down menu! Only if you had perhaps read the developers reference library would you know to tap the link and hold for a second or two, which usually replicates the mouse roll-over behaviour and makes the menu appear.

So unfortunately, the majority of iPhone or iPod Touch users end up navigating the old fashion way via the ‘visible’ links on the landing pages, and do not benefit from the convenience of the mega drop-down menu.

Some other touch-screen phones require two taps of the screen to follow a link and therefore support a slightly better mega drop-down experience.

It (almost) goes without saying that relying on mouse-only functionality for critical tasks and actions on your website is a really bad idea. However, just making your website accessible will not be a good enough solution to satisfy this new generation of touch-screen users.

Optimising the touch-screen user experience

Many websites have already recognised the importance of delivering an alternative ‘mobile’ version designed specifically for smaller screen resolutions and to work without a mouse. Usually the website detects the ‘user agent’ (the device you’re browsing with) and redirects you to the ‘mobile’ version of the site. Or they simply use conditional CSS to dish up an alternative look and feel.

Based on the positive results of mobile usability testing, Jakob Nielsen concluded in his February 17 2009 alertbox article that “sites must develop specialized designs that optimize the mobile user experience”.

iPhone Web Apps have taken this specialisation approach to a completely different level. And moving even further away from the browser, the BBC have even created a version of their iPlayer specifically for the Nintendo Wii!

Up until now the main driver for designing specialised versions has usually been the small screen resolution of the mobile phone. But screen resolution is not a big problem on the iPad and these new touch-screen users will expect nothing less than “the best browsing experience” as promised by Steve Jobs. They will expect all the convenience of the mega drop-downs, dynamic zoom and pan functionality and any other ‘rich interaction’, to be fully operational and yet ‘touch friendly’.

Ultimately there are two ways to meet these high expectations and to ensure that your website delivers a great touch-screen user experience:

Develop an alternative ‘touch-screen’ version of the site (in addition to your ‘mobile’ version).
Progressively enhance the existing dynamic areas of your site (where necessary), by building in a ‘touch-screen’ layer of functionality, using best practice front-end development such as DOM scripting.

In most circumstances the latter will be the best approach, but in either case testing the usability of the optimised version with real ‘touch-screen’ users is critical for the success of the project.