Navigation that Responds on Mouse-Over

Introduction

In this article, we're talking about building Navigational Controls which respond to the users Mouse when they are hovered over. We will call this a responsive navigation for the benefit of the article.

Currently, buttons and controls can be responsive to the user in a variety of ways such as:

• Transitional Effects (switching layouts on iOS)
• Animation (popovers and Panels)
• State Changes of objects (onHover, onPress, onClick etc._
• Formatting of an object (conditional formatting, hide conditions)

This article is going to focus on a different type of interaction a user can have with a button that will happen on the Hover state of an object. Typically a user will interact with a button or control by clicking on it. There is however a pretty simple way to turn almost any object on a layout into an object that will immediately respond to the users mouse when hovered over.

Example File Time

This is a very example-heavy article and as such we recommend downloading and looking through our example file which contains all the examples featured below.

Click here to download the example file.

Not Our First Time Around This Block!

This technique can be utilised in a number of ways and this is not the first time we have covered it on the Weetbicks blog.

In 2014 we wrote two articles that utilised the mouse-over technique.

The first article showed how you could utilise this to produce a sliding-drawer control that could automatically open and close just by the user hovering over it.

While the second article dealt with opening and closing pop-over menus by hovering the mouse over a pop-over button.

This time we're presenting three further examples of how it can be utilised in a navigational sense. Note this is not just some fancy trick. This is something we use in our client solutions to great effect. It does however have to be used carefully and only in circumstances that warrant it.  Not all navigation controls benefit from having a mouse-over triggering them.

Making A Mouse-Over Trigger Possible

As a quick refresher on the technique covered in the two earlier articles, let's look at how we actually initiate a Mouse-Over event. 

To achieve this we require a plugin that is capable of running a script. Our plugin of choice is always BaseElements from Goya.

We simply attach a tooltip to any object we wish to initiate a script.

Tooltip calculations evaluate immediately when the mouse is placed over them, even if they do not immediately appear. This is good because our script is run immediately giving very responsive feedback to the users input. Here is an example showing how frequently a tooltip is evaluated. We are running a script that is incrementing a counter:

We have written a custom function to accept the script name _scriptName and optional parameter _parameter for the script. It looks like this:

If ( not IsEmpty ( Get ( ScriptName ) ) ; "" ; Let ( ~run = BE_ScriptExecute ( _scriptName ; Get ( FileName ) ; _parameter ) ; "" ) )

You might be wondering what the first condition of the IF statement is for. Our tooltip calculation is checking whether a script is already running by looking to see if Get(ScriptName) is returning a script.

This is because tooltips can also respond to the user while a script is running. Every time the user moves their mouse over an object, a new call to the script would otherwise be called, thus creating a stack of hundreds or thousands of scripts to run.

To avoid this, our tooltip calculation will only ever run a script if no other script is running, thus avoiding this issue.

An example of Portal Navigation

So that's the basic technique, there really isn't much to it. Let's look at a few examples, all of which you'll find in the example files.

This is our example files main navigation. As the mouse moves over it, a script is initiated from within the portal to carry out navigation. This is the same control featured in our first navigation article about layout-level navigation. All we had to do was add a tooltip to the existing button.

An Example Of Button Bar Navigation

Here is an example of a button bar used to control navigation within a layout. Much like the portal example, we are using a hidden sliding panel as our sections of the layout, and the button segments control which panel is visible.

In addition to this, we also have two pop-over-based segments which themselves are opened via a tooltip. 

How Do We Avoid Accidental Mouse-Over triggers?

The button bar above is a particularly nice use of this technique because the user tends to move their mouse horizontal across the button bars, and then when they have made a selection their next mouse movement is in a downward direction to either the pop-over or to the panel content.

This horizontal/vertical mouse movement lowers the risk of any potential "accidents" that may arise due to the user inadvertently putting their mouse over a navigation element they didn't wish to select. 

This is a classic issue with this technique. We wish to try to eliminate accidental Mouse-Overs. In reality, this is quite hard to do, which is why using it with caution is advised, not all navigation benefits.

There are a few useful tips to adhere to.

Firstly, the larger the button area selectable the better, e.g. taller portal rows, and larger buttons. This gives more affordance when the user moves their mouse away from the object so that they will not touch another object.

Next, consider adding a "dead-zone" to the navigation, particularly if using a portal. In our example above we actually make the button not quite the full width of the portal, but rather have it cover the text instead. This is usually effective because users tend to Mouse-Over text (whether they realise it or not) and second when a user leaves the portal for the panel to the right, they may head off diagonally up or down. By creating this dead-zone patch we can ensure they leave safely. Here is a dead-zone in yellow:

A Final Example Of Multi-record Selection In Portals

This last example is not strictly navigation but rather has to do with selecting entries in a portal. Here we have a 3-tier portal structure where the user is to select from all 3 portals. The portals may contain fixed values, or they may be conditional in that the values in the second portal change depending on the first, and the values in the third change depending on the second.

Here the mouse movement is up/down, followed by a move to the right for the next portal. Again we run the risk of the user moving diagonally up/down from their selection and so a dead-zone could be used.

In Conclusion

So we've shown a few different use cases of mouse-over for navigation. As mentioned this is to be used with care – there are many situations where standard navigation involving a mouse click is preferable. However, this does have its own use-cases and you may find a good use for it. In our experience, we found the best application is menus that contain a lot of sub-item menus, be it via a panel or pop-over. The users end goal is to get to the sub-level navigation and so not having to click before they get there can often be a nice experience.

Example File

A lot of time and care goes into our example files and we appreciate you taking the time to explore and learn.

You can download the example file here.