Here are two similar examples of a typical menu bar.
What would you expect as an active hover area for click? Should it be the same or different in these two examples? Does the device matter? What do you think?
Add a comment
|
3 Answers
As a general rule, you want to make the interaction area as large as possible to aid with touch interfaces. The counterbalance to this is that you need to make the button area visually cohesive, so it affords the interaction.
Given this principle, I would suggest you go for option A in both examples.
It is worth noting, however, that A only holds in example 1 because the container constrains the area that could be a link - in a larger area or an area where the container isn't distinct from the background a user might expect the interactive area to only expand to cover the single line of links/dividers.
In the following example there is no obvious vertical constraint so users might expect only to be able to interact with the element as its height is visually defined by the vertical bars:
download bmml source – Wireframes created with Balsamiq Mockups
Definitely A. This style of menu bar is emulating a basic button and a button includes the padding. Also, the bigger the hit area the easier it is for the user.
There was a study that was conducted which determined 13px x 13px minimum optimum touch-point.
Didn't find the doc. But a potential google hit.
Hope that helps. All the best! Nash
