Enlarged Clickarea


User need to click on an item


Enlarge the click area to include neighboring areas

From www.iht.com

Use when

The items are relatively small and hard to click in combination with the fact that clicking in other related areas does not have a significant meaning.


When reading a news article it is logical that a click on the news-blurb will open up the entire article. Instead of clicking on the link 'read entire article' (or similar), users can simply click in the entire area of the news blurb. This can also be done when Paging is used. When an article spans multiple pages, clicking on the last section can equal 'go to the next page", see the example from www.iht.com above.

Enlarging the effective 'clickarea' is an advanced feature that users can gradually discover. However, it is important to give some form of feedback to indicate that the enlarged area is in fact clickable. Highlighting the 'real' button or link on mouseover is usually the most obvious solution.


According to Fitts' law, the time needed to select an object is proportional with its size. Simply put, larger objects are easier to select! Therefore is is good practice to make clickable objects as large as possible, even if the object is visually smaller.

More Examples

At www.zibb.nlThe entire news blurb is clickable and not just the 'read more' link.

Google's 'next' button is also enlarged. For going to the next page, users can click anywhere in the dotted area:

plml logo


0 comments have been added to this pattern

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below