They may seem similar, but ignore the difference between tap and click interactions at your peril, warns Gene Crawford
From the outside, there is not much difference between a click event on a website and a touch or tap event. As a website user, if you see a link and click or tap it, you get the next page. Technically speaking though, they are quite different.
Under the hood there is a 300ms (+/-) delay between the click and touchstart events in the browser (though there are spec changes being worked up as you read this). This allows for things like pinch zoom, scrolling, the user cancelling a touch event and so on. The result of this delay is a perceived sluggish interface or website. The other difference is in the interaction of a person using a mouse on a desktop computer, compared to a person simply touching the screen of a device.
When working on the design of a site's navigation interactions, it is important to take these two things into consideration – when ignored, they can have significant ramifications. Something as simple as the size of a click target can create a negative user experience.
If the user has to zoom out to target the correct navigation link in a list, they are likely to be annoyed, or even miss their intended target completely. Then if there is a perceived delay after finally hitting the target, the user will think they have made a mistake or that the navigation is faulty.
You might not be able to escape the delay on a touch event in the browser, but you can ensure the mobile view you design can be easily traversed without a mouse.
Here are three sites with notable touch behaviour:
01. Microsoft
microsoft.com
The Microsoft site has a very large, fold-out navigation design. The slight delay when 'touching' the nav items when using the site on a mobile device is quite evident here.
02. Rdio
rdio.com
The site for music streaming service Rdio utilises a slide-out navigation design and loads a semi-opaque background over the page when it loads. This works well for focusing the user on the nav layout across both mobile and desktop devices.
03. Sparkbox
seesparkbox.com
The click targets on web design firm Sparkbox's website are all appropriately sized for people using the site on a mobile device.
