Saturday, January 24, 2015

Designing Simple-Predictable-Comfortable Navigation Part 3

Hovering & Tooltips Interaction Events

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.
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.

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

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.

Total Pageviews