Skip to main content

Designing for the web: tap vs click

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

microsoft.com

The Microsoft (opens in new tab) 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

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

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.

Liked this? Read these!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began over a decade ago. The current website team consists of five people: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.