The mobile web has grown exponentially and searches on mobile devices far exceed desktop searches.
Google has prioritised mobile search as the trend is increasing – it is difficult to imagine not using your mobile phone to search google.
And yet we still use the terminology of ‘click and collect’ as though we all use desktop PCs.
This is where ‘Tap Targets’ are important.? We are not really clicking but tapping.
Whilst clicking with a mouse is very accurate, tapping on a touchscreen is not.
To ensure great web experiences we need to make these tap targets large enough for our fingers.
The average finger is 48 pixels in width and height.
Tap targets shouls also be spaced to ensure that pressing one link does not overlap and press on another.
We recommend 8 pixels on all sides.
?
What makes a page touchscreen ready?
Making a page touchscreen ready requires following certain technical best practices:
- Make your site/business logo a link to your homepage. A study by Google [PDF] found that participants usually expected tapping the logo at the top of a page to take them back to the homepage, and became frustrated if it didn?t work.
- Increase navigation/menu padding by 5-10 pixels or more if your design allows.
- Use text that?s big enough to read on smaller screens.
- use an easy-to-read font
- Make sure the tap targets for your links and buttons are far enough apart. The average width of the index finger for most adults translates to about 45-57 pixels.
- For app promotions or discount popups, participants preferred easily dismissible banners as opposed to large interstitials. These types of alerts could result in lower rankings anyway.
Make any links on your page visible by using a contrasting color. The same goes for any calls-to-action like click-to-call buttons. If there are any forms that your users are supposed to fill, make sure the field sizes are big enough and that the spacing is adequate to avoid unintended navigation which can be very annoying.
Use heatmaps on your pages to see where users are spending the most about of time and where they click on your pages to get an idea of bottlenecks, hotspots and potential pain points.
Touchscreen readiness and SEO
A page?s touchscreen readiness impacts search engine optimization by ensuring a user experience optimized for mobile devices. A page can?t be mobile friendly without being touchscreen ready.