Two objects in a container

What are Tap Targets? (a.k.a. Hot Spots)

A tap target is a container that is placed around objects that a designer intends for a customer to tap in order to complete an implied action. It is best practice to place objects within a container that is larger then the objects themselves; especially if the objects are smaller then 24px. That way, when you tap the container, there is a bigger surface area for the interface to recognize what your finger wants to tap. Designing a tap target this way yields a higher accuracy of the customer completing the task. So, the larger the (in this case invisible) container, the higher the probability that the tap will be successful.

Three examples of objects placed within a tap target

If you have like objects clustered together (like a few navigation objects) then it would be best practice to give each container equal dimensions for each similar tap-able item. For example, if you have four items in your navigation and each tap-able container includes a grouping of an icon + text, let’s make sure that the container surrounding the grouping is approximately the exact same width and height for each four clusters. You can achieve this level of consistency very easily by placing the objects into an auto layout. (instead of leaving them floating independently, putting them in frame, or grouping them)

Left: Not Advised Right: Best Practice

When you ensure consistency across like components, this earns the customer’s trust and provides a consistent, predictable, and smooth experience for them. Another bonus to this is the engineer that you will pass these designs off to will have a consistent architecture to build the composition from.

Consistent tap target dimensions and consistent padding

Once you place your objects into an auto layout and perfect your padding & dimensions, I recommend you then create a component of that architecture; then create children of that component to populate the composition.

A container of content made into a component

Thanks for reading. Feel free to ask me questions about this in the comments. Happy to answer them.