 |
| Hovering & Tooltips Interaction Events |
Summary:
When we are designing a navigation scheme or a menu, we
should consider user interaction events besides the navigation layout,
appearance, and links. As the user journey begins with the user interactions
with the interface and navigation interface has its own kinds of events.
Intro:
In this series, we are exploring
various aspects of navigation designing for web and mobile. In the first
part of this series, we have seen how navigation symbols take parts in
successful navigation designs and in the second
part of the series, we had explored the target areas further. Now, in this
current third part, we are aiming to dig the most common interaction events in
navigation menus or schemes designing.
Generally, four kinds of
interaction events take place when the users begin interactions with UI and particularly,
on navigation menus or schemes on the web and mobile client devices. They are hovering,
clicking, scrolling, and typing. Among these, hovering may not applicable in
responsive design on mobile devices in particular. However, we will explore
some aspects of hovering interaction events in this post because still half of
our users are coming from desktops and laptops like big screen devices where
pointing devices are in action, not the touch gestures.
Hovering Interaction Event
Mouse over or hovering event is
generally used in case of text links effects, tool tips effects, popup fire-up
events, and now in pop up of navigation menu. Good web designers know that
hovering event on navigation menu may cause accidental opening of menu when
users simply traverse on different parts of the website and crossing the
navigation bars.
At user experience point of view,
it is annoying users and its has simple clue to stop such accidental opening
that is giving a delay of 0.5 seconds when curser arriving on the target area. Of
course, designers should take care once the 0.5 seconds over, hovering event
should take place within 0.1 second otherwise, your users will get bad
impression of your website. The same is true when mouse curser go away from the
active areas of the corresponding menu button and menu itself. There should be
a delay of 0.5 second to close the menu window and it should accomplish within
next 0.1 second.
In mega websites, designers take
help of another workaround and it is to create a temporary invisible target
area in order to avoid accidental appearing or disappearing of popup menu
during traveling to the intended links on window/menu from the main navigation
button.
Tooltips
With hovering interaction, event
tooltips appear as navigation menu for categories and sub-categories items. This
trend is gaining ground due to some obvious benefits of tooltips in UX. However,
using tooltips on hovering is not entirely problem free and it might have
following issues at UX and Usability point of views.
- It is difficult to know that whether tooltips exist or not
- It is possible for tooltips to obstruct the next items in navigation
- There are possibilities of delay problems if they are too short or too long
- Comparison between items become difficult in tooltip hovering interaction event
- Tooltips are useless in responsive design when mobile devices are client-devices
Conclusion
Based on the above-described pros
and cons of hovering interaction event in navigation design, the team of UX
experts and web
designers at Lujayn, for responsive as well as static website
design, take steps carefully and add hovering events in navigation only in
selected cases.
