Definition of element clickable area
When creating code for a button or another clickable element, it is necessary to clearly define the boundaries of its activity, which are user-friendly. In this matter there is no definitely right decision, since much depends on the situation and page design. Let’s briefly look at a few cases representing examples of various design options.
In some of the navigation menus found on the network, the click perception area of the mouse (its clickable area) is rather paradoxically defined. As an example, you can take the main navigation menu of the WebProNews site: At first glance it may seem that this menu is quite simple – the entire area of the button should be the clickable zone of each button. But actually it is not. In the presented example, only the text itself is sensitive to a click; for this reason, when you move the mouse pointer, a rather strange effect takes place, not the one that is expected – the buttons close to the edges of the button do not respond to a mouse click. (* This also applies to the menu of my site (the bottom of the header is a menu containing rubrics). But what can you do – a template. After the holidays I’ll definitely fix this mess.): Of course, you shouldn’t expect any spectacular design solution on a site like this.
This resource is quite good in terms of providing news on network technologies, but at the same time, the site is somewhat spammed with a heavily cluttered and unpleasant design. Let’s look at a better design option in which you can observe a slightly different approach. Below is a fragment of the Design Pro navigation menu: Dealing with the Design Pro navigation menu, we see only text links presented as menu items, not buttons, as in the previous example (WebProNews site). In this case, it would be logical to assume that the text of the menu elements and a small space (several pixels) around it are clickable. But the designers expanded this area a bit, which may seem a bit strange solution, but still much better than in the case of WebProNews: Something similar can be seen on the Dribble website: At first glance, the additional navigation menu (containing “Popular” is a popular, “Everyone” – for everyone, etc.) it may seem that we are dealing with ordinary text links. But pointing to the elements of this menu, the mouse cursor reveals that the active area of the elements is much wider than just the text, and extends far below it: Most likely, the designers who participated in the development of the Design Pro and Dribbble websites had good reasons for doing so. Actually, the approach used in these cases makes it much easier for the user to determine the area of activation of the menu item, and given that most people go to the Dribbble site again, then most likely they will not be surprised at such a design of the navigation menu having experience with it by previous visits to the site.
However, there are several divided opinions on this subject. In some cases it will be more convenient if only the text of the menu item is clickable. Sometimes a more successful option is to call the situation when, when you hover the mouse over a menu item, the visual effect of activating an element extends to its entire clickable area (as implemented in the main menu of the Dribbble site). It all depends on the specific situation and design decision. From time to time there are more sophisticated design cases. As a vivid example of such a case, you can call the menu, when you hover the mouse over the elements of which, they change color and a small icon appears to the left of the text. There are cases when the rightmost part of the menu item, although sensitive to the mouse cursor, visually activates the item, but is not included in the clickable area of the menu item. As an example, you can take the reference block “Cool Stuff & People I Like”, located in the right sidebar of the ImpressiveWebs homepage (* Author Lauis’s website.) Something similar can be seen on CSSwizardy when working with the right sidebar (sidebar) A: Everything looks pretty simple: text links with icons.
But the question is, should the clickable area of the elements in question be limited to the left edge of the pictogram and the rightmost part of the text? In this case, the available clickable area is too large and extended far to the right: Let’s consider the opposite case. Take a look at the links of the sidebar, made on the website No Starch Press: In this case, the active area of menu items is minimal and not expanded to the right. Even the visually imperceptible extension of the clickable area of menu items, as it was done in the cases discussed above, on Design Pro, Dribbble and CSS Wizardry sites is not applied here. The option when only text links are clickable is less acceptable in terms of usability.
For vertical menus, an invisible user extension of the clickable area of the elements will only benefit. But as regards the solution used on the Design Pro site, it would be preferable to reduce the active zone of the navigation menu items. As already mentioned, the most acceptable way to design a clickable element is the case when, when you hover over an element, the entire active zone is visually highlighted, and when clicked, the corresponding menu item is activated (* This way the navigation buttons for adjacent posts on my site are decorated. Which are under comment form.). Typically, this approach is used when implementing drop-down menu lists, as done on the Twitter Bootstrap framework component site: The Bootstrap site and its components have a high-quality design.
All the clickable elements used are intuitive due to the well-chosen size of the clickable area and its visual design, without any riddles or surprises discussed above. Conclusion In any case, web designers always make decisions based on certain conditions and therefore the information presented in the article should be perceived by each developer individually with possible amendments for a specific situation. In most cases, it is quite acceptable if the clickable area of an element is not determined quite correctly. However, this issue is of vital importance when it comes to developing an attractive, intuitive and user-friendly web user interface.