Designing tap targets: UI design best practices

Profile picture of Daniel Schwarz

{date}

{#hash1}

{#hash2}

Illustrations by {name}

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

6 min read

3D visual of tap target design in UI

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. 

Get our latest stories delivered straight to your inbox →

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.