📜 ⬆️ ⬇️

Hover state: how the link should behave when hovering

This reasoning was an expanding commentary on the publication of the dezmaster dezmaster, who published an article today entitled " Hovering Links: Do We Need a Reaction? ". To be honest, I have been tormented by similar questions for a long time (= And finally, I managed to keep order in my head a little.

The main point of all I have said is: the force of the response to the mouse cursor reduces the aiming time (just like the size of the link, and its distance from the cursor), and therefore reduces the time between our desire and its realization. However, at the same time, too strong a reaction can depress our senses and cause irritation.

In summary, the context in which the link is placed determines the degree of contrast of the states of the link that we should apply. The following contexts are distinguished: the link among the pictures, in the text, among the links, in the menu, in repetition, in the publication.

')

Aiming costs

Hovering over a link is the obvious labor cost between our desire and its realization. The sooner we understand that the mouse is aimed and the link is ready to click, the less energy we spend on the aiming itself, and the fuller our experience of satisfaction.

The aiming work involves not just moving the cursor along the plane, but also the effort spent on the realization that everything is done as it should. This can be felt by trying to first get from afar into some large link, such as the site logo, and then - from a smaller distance - into the usual link in the text.

The time spent on awareness of the fact that we did everything right can be much more significant than the time for the physical movement of the mouse cursor. This is influenced not only by the size of the link, its distance from the mouse cursor and the difference from the rest of the content - but also, not least, by the dynamic link response when hovering.

The clearer the link, and the more responsive it is to targeting, the faster we will realize that the targeting is completed and the work is completed.

In addition to purely technical aiming, the user is forced to face other problems. After all, any click is a decision. To make a decision, you need to understand which elements of the page are responsible for what and reduce the risk of their misuse to a minimum. And any uncertainty about the accuracy of understanding the meaning - again, spends additional time.

In such cases, additional highlighting of links can help reduce user risks. The more contrast the state of the link during the hover, the more emphasized the importance and seriousness of the consequences that follow after the click. And vice versa.

Contrast and context

However, a large contrast has a downside: if the link changes too much, it can result in a faster depletion of our senses and cause legitimate irritation. Especially when you consider that sometimes we touch the links by chance, following the cursor to some very different goal.

So there can be no universal solution, you need to look for a middle ground: to make the link’s reaction quite distinct, but at the same time not to overdo it. In other words, we need to choose the right contrast between the active and inactive state of the link. This contrast is strongly tied to the context surrounding the link.

By default, when you hover over a link, the mouse cursor takes the form of an index finger. This is a reaction that in itself creates some kind of contrast. The question is, how much is it enough?

Link among the pictures

So, if the link is not in the text, but among objects that react to mouse sliding with the default arrow cursor (pictures, headings with large indents), then apparently simply changing the cursor to the index finger will not be enough.

The index finger is not much different from the default arrow: roughly the same size, black pixel contour, white fill. When you quickly move the cursor, you may not notice the transformation of one into another: especially considering that we do not follow the cursor, but focus our eyes on what lies under it.
If we have to transfer the focus from the content to the cursor — to see if it has changed its state — we are spending extra energy. It would be optimal not to focus your eyes on the mouse at all, always to look through.

Conclusion: for links from the specified context, the contrast should be enhanced by changing the state of the links themselves when hovering.

Link in the text

The situation looks very different for links placed in the text. The cursor above the text is of a completely different nature, shape and size, rather than the cursor above the link. It is clearly visible that the contour of the arm seems to swing open, unfolds from a collapsed state.

Therefore, for links in the text, you can opt out of additional enhancement of the contrast of states.

Link among the links

Often many links are concentrated in the same place, for example, in the tag cloud. In this case, when moving through links, we will not notice a change in the cursor: it will always remain in the shape of the index finger.

It is obvious that links that are crowded together require an increase in the contrast of their states with additional animations of color, underlining, or size when hovering.

Links in the menu

Links that are far from the main place of clicks are hard to hit, plus it is also almost impossible to accidentally slide over them. An example of such links are all sorts of menu items.
For such links it is more logical to make the difference of states more contrast. In addition, the menu items should show the user that he does not just open another page on the Internet, but follows a certain structure, the correct orientation in which will allow him either to get or not to get what he wants.

Repeat Links

Links that repeat their structure and relative position from element to element of the page - such as managing links for posts or comments, cause the user's habit of using himself. In addition, such links are often used. On the one hand, the user already knows how to more accurately calculate his movements, and on the other, he would not want to experience constant pressure on his senses.

For such links, it is better not to enhance the contrast of states.

Links in content change

And another example of the importance of contrast. When the user creates a publication. At this point, he commits an act that can sometimes be irreversible. In this case, the contrast of the states of the publish button would be very useful. Unfortunately, the standard HTML button is far from perfect.

Source: https://habr.com/ru/post/16435/


All Articles