Tap targets are essential for making sure all website content is user-friendly across the portfolio of devices your site may be accessed on. Put simply, a tap target is an area on a web page that a user will interact with in order to carry out a command. Web links, buttons, adverts and forms are all examples of tap targets.
When designing a tap target, it should have sufficient space around it in order that a user can select the target they are choosing rather than any other in its vicinity.
Teams engaged in web design in Richmond should also consider the impact a smaller screen may have on the usability of tap targets, as a site viewed on a 10-inch tablet will be scaled differently on a smaller mobile phone. Due to this, buttons and other tap targets will be smaller, potentially adding usability issues.
How Are Tap Targets Sized?
Before we consider the way in which tap targets are affected by the size of a screen, it is important to understand how an entire page is scaled.
Web page display on different-sized screens is determined by elements such as the font size used, any media properties such as video or images and other such design features on a page. Tap targets will be scaled with these images for responsive pages when they are displayed on a smaller screen.
How Big Should They Be?
A tap target’s size should relate directly to its importance. A top-level element such as a menu or call to action icon should be a minimum of 48 pixels square, according to Google.
When links in text are used to create a tap target, people can often think that they need to zoom right into the page in order to access this. So long as guidelines for legible text have been followed, these links should not prove to be problems, so long as these links do not crowd each other.
If tap targets are unable to be sized as per the minimum expectations laid out by Google, they must be separated by at least 32 pixels. If a tap target error is being returned on SEO tools, it is more than likely that this is due to targets being too close together rather than too small.
Other Tap Target Issues
If links are presented as a list, these can often present far too close together when viewed on a mobile device. Employing a larger line height within your code can help ensure that list items are spaced appropriately.
Button sizes should be automatically rendered and work in line with the text surrounding them. If your text is legible, your buttons are likely to be usable. Check on this by viewing your page on a mobile device and seeing if you can interact with it properly.
