Which do you generally prefer: a mouse click or a tap on the screen?
Although both generally lead to the same thing, there is a world of difference between the two. We have been using desktops and laptops over the decades and used to click events everywhere. However, with more and more people using smart phones and androids for a variety of functions, touch is now becoming not just a required but an expected desktop experience.
About 300 milliseconds of delay exist between the events pertaining to click and touch-start in a browser. Such a delay leads the users towards actions such as scrolling, cancelling the event and pinch zooming. The size of the target is another thing that is to be considered while designing your website. The target needs to be clearly visible and clickable. The user should not be required to zoom in or zoom out in order to click or tap on the target.
An ideal website is one that offers user experiences that work on both mouse as well as touch devices. Nevertheless, there may be times where users may input both these methods, even simultaneously.
So, then how do you support touch and mouse together?
This is what you need to do….
Use the natural order: Create an order for the events and make sure you don’t process the other event that has been triggered simultaneously. In case of a tap on a particular element in a web page that is not exactly mobile responsive, make sure you include a delay of 300 milliseconds between the processing of mouse events and touch-start events.
Make sure the Mousemove Events don’t get fired by Touch: This will keep things separate and make sure there is no confusion or further delays that may be annoying to the users.
Increase the size of the touch targets: When compared to mouse moves, finger touches or taps are not that precise or accurate. Therefore, you need to make sure you increase the size of the touch targets. You can do this by increasing the padding. This will minimize the incorrect taps.
Keep your touch handlers contained: It is better to keep your touch handlers limited only to those elements that require them. This is because touch elements usually take off too much of bandwidth. Avoid touch handlers on elements that scroll.
Avoid multiple touch events: Multiple touch events can affect your application badly. While designing your website you need to determine the number of touch points that your hardware can support and use only that many touch events.
By using these guidelines you should be able to build excellent interactive experiences, which will work well with mouse input, touch input, or even both simultaneously. If you cannot avoid the delay in case of touch events, you can always design a mobile view that can be easy to navigate without using a mouse. For example. the mobile version of MotoCMS website is fairly easily to navigate.
Here are a few websites that seem to have achieved this in the best way:
Microsoft.com: The website of Microsoft is designed using the fold-out navigation method. You will come across a slight delay when you touch the navigable items from your mobile device.
Rdio.com: This is a music streaming website that uses a slide-out navigation design. As the page loads, you see a semi-opaque background over the page. This way it increases the focus of the user on its navigation layout, whether he/she is using a mobile device or a desktop.
Sparkbox or seesparkbox.com:This website has very appropriately sized click targets for people who are browsing the website through their mobile devices.
Very soon, taps and touches are going to transform the designs of websites forever. It is good you start looking out for tools that can help make this easier for you.