Profile picture of Daniel Schwarz

6 min read

Designing tap targets: UI design best practices

Tap targets play a key role in any app or website’s interface. Follow these design conventions to ensure a smooth user experience.

3D visual of tap target design in UI

Illustrations by {name}

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

A badly designed tap target such as a button, link, or form field can cause users to become lost, confused, and frustrated.


If users aren’t able to find the tap target, aren’t sure what it does, aren’t able to click it, or if it doesn’t respond to the user’s interaction, then they will likely start to think that the website or app is broken or doesn’t cater to their needs.


So how do we master the art of designing tap targets, and in turn improve the overall user experience of our app or website?


Let’s take a look.



1. Write clear tap target copy


Backgrounds, shadows, rounded corners, and other visual attributes are used to draw attention to tap targets, but it’s important to remember that it’s the tap target copy that we’re bringing attention to. A tap target that successfully draws attention means nothing if users aren’t quite sure what it does.

Besides, ‘ordinary’ text links don’t display many of these visual attributes, so writing tap target copy that’s actionable, consistent, and easy to understand is one of the most (if not the most) important thing to consider when designing them.

When writing tap target copy (or any kind of UI copy, in fact), a ‘less-is-more’ approach is the most effective. This allows us to communicate directly and clearly, which lowers the cognitive load for users. Let’s take a look at a few examples.



Be crystal clear


While there’s totally nothing wrong with creating personality within an app or website design, humor is better suited in combination with marketing gimmicks, product descriptions, and so on, and not so much with microcopy. The opportunity to sound ‘different’ is rarely worth sacrificing the opportunity to be crystal clear, particularly when it comes to tap targets.

  • Bad example: “Grab a bite”

  • Good example: “Browse cafés”



Grab a bite versus Browse cafes: clear copy in tap target design


Motivate users to take action


In order for users to feel motivated to interact with a tap target, the wording should ideally contain a verb (the action) and a noun (the subject of the action). This will make the tap target sound actionable and urge users to interact with it.

  • Bad example (verb only): “Browse” (browse what?)

  • Bad example (noun only): “Cafés” (do what with cafés?)

  • Good example (verb + noun): “Browse cafés” (crystal clear)



Optimize word count


Generally, shorter UI copy is better because that’s fewer words that users have to try to interpret, and as a result that’s less frustration and cognitive load that users are subjected to.

  • Bad example: “Browse all cafés”

  • Good example: “Browse cafés” (“all” isn’t needed)

However, the word “all” in the ‘bad’ example above isn’t necessarily bad so long as there are similar links that hint towards a specific subset of cafés (where the word “all” is the differentiator between those links). If two tap targets do (or link to) something different, then this should be obvious from the UI copy alone, so beware of shortening UI copy so much that it’s hard to distinguish from tap targets of a different nature.


Try reading UI copy over and over until it ‘feels right,’ and when in doubt try asking other people too.


So in a scenario where there are multiple but similar tap targets, the following UI copy would be more distinguishable:

  • “Browse cafés in London”

  • “Browse cafés in New York”

  • “Browse all cafés”



Maintain consistency


As mentioned above, it’s fair to assume that two differently-worded tap targets don’t do (or link to) the same thing, which is why if they do, then they should use the exact same wording.


Let’s assume that a tap target links to the login page of your product and its UI copy reads “Log in” — the following two examples would then be inconsistent with this UI copy and therefore confusing to users:

  • “Log in” (original)

  • “Login” (inconsistent)

  • “Sign in” (inconsistent)

Using “Log in” consistently results in a better user experience.



Placeholders vs. labels (and why it matters)


Placeholders and labels are sometimes misused and seen as interchangeable, but this is incorrect. In fact, they have two very specific uses and their default behaviours reflect this.


Placeholders are used to display valid examples of acceptable input, which is why placeholder copy automatically disappears as users begin to replace it with their own input. Labels, on the other hand, describe the nature of the form field, so a typical label + placeholder combination should read something like this:

  • Label: “Full name”

  • Placeholder: “Avery Smith”

Form fields that use placeholders in place of labels run the risk of users forgetting what they were supposed to type into the field. A form field should always utilize both, correctly.



Placeholders vs. labels in tap target design


2. Increase clickability by optimizing size and spacing


While the WCAG (Web Content Accessibility Guidelines) recommends that targets be at least 44 by 44px in size, Google recommends 48 by 48px. However, there’s no reason why we can’t go even larger than this, since larger targets are easier to tap and click. Fitts’ Law, written in 1954, explains that the amount of time required for a user to interact with a target depends on its size.


It’s worth noting that labels are also tap targets, so web developers will usually ‘wrap’ form fields inside the label to increase the target size, even if this isn’t visually obvious.


Fitts’s Law also states that tap targets should have enough spacing to prevent accidental mis-taps. Google’s Lighthouse audit recommends at least 8px between different tap targets.


Lastly, contextually relevant tap targets should be within thumb-range on mobile devices. While this isn’t feasible for every scenario (because of limited screen real estate), taking a mobile-first approach to design allows us to prioritize the most important tap targets at least.



Tap targets should be large and spaced out


3. Increase findability with better visual affordance


Affordances in UI design are visual attributes that indicate what users are able to do with an object. By utilizing well-known design conventions we can include these visual affordances and in turn help users recognize when an object is interactive.


Affordances for tap targets include shadows, rounded corners, and in the case of ordinary text links, underlines.


Icons are also important, and can sometimes even replace UI copy entirely. For example, an [x] icon might imply that an object can be removed or dismissed, and a [+] icon might imply that users can contribute or seek additional information.


Following these design conventions will improve usability significantly.



'Follow' tap target with visual affordance


4. Establish visual hierarchy


Clear visual hierarchy indicates to users the level of importance of each tap target. As a result, this diverts their attention to the ‘right’ tap target (i.e. the one that will help them achieve their objective). On top of following all usability best practices for tap targets, we also should try to create a range of different tap target styles, some of which don’t demand as much attention. Less-demanding styles include:

  • Ghost buttons

  • Smaller buttons

  • Lower contrast buttons

  • Buttons reduced to links

Remember: when everything stands out, nothing stands out. That’s why there must be a clear visual hierarchy that we can leverage to steer the user’s attention in the right direction when needed.


Maintaining a design system is an excellent way of ensuring correct usage of visual hierarchy. This is due to the fact that designs systems help to maintain multiple variations of multiple design components while reducing the number of unnecessary variations. Winding up with too many unnecessary variations is known as ‘design debt’ and this level of visual inconsistency is definitely something that we want to avoid.



Ghost buttons in tap target design