Building a Better Menu - The Delay

Written by David Charney
Posted: April 5, 2009 (11 months, 1 week ago) | 0 comments

There are a few tricks of the trade used when developing menu systems that I wanted to discuss. First, the goal is to build an intuitive, usable system that gets or leads the user to where they want to go. We don’t want our users getting frustrated and then tell everyone how annoyed they were using our menus. So in this installment of Building a Better Menu we are going to discuss… wait for it… the delay.

Delays can be used to smooth out usability by keeping sudden, unexpected events from occurring. You can use the example below to recreate these events.

The Problems

• The user may need to roll the mouse past the menu to reach something lower or higher on the page. What we don’t want is the sub-items to suddenly pop open as we know the user does not intend to interact with the menu.
• The user rolls over the first main-menu and a list of sub-items appears. They then need to move the mouse to the last item available. Unfortunately the second main-menu button is in the way and as the user moves their mouse towards their destination, the sub-items to the second menu appears. The user then has to go back, reopen the first main-menu sub-items, and move the mouse along this menu to keep the switch from occurring.

Wrong - Without Delay

Solving the Problem With a Delay

Placing a half second (or less) delay on the script that opens the sub-item can stop this from occurring. Below I have the same menu with the delay adjustment. I could even reduce the delay to .2 -.4 seconds and still get the effect I desire.

Right - With Delay

The Tech

I used Flash for my example, but there are too many scripting languages and with every language there are just as many approaches to designing a menu. Adding a delay is not always just a simple task. In some cases a timer needs to be written. This timer needs to keep track of when you first rollover the menu item and discontinue on rollout (else the menu will pop up after the user leaves the button). I used the Tweener class and used a simple delay to get the desired effect: Tweener.addTween(this, {delay:0, onComplete:onOver});

If the delay is too long the user may think they need to click the button. This is OK as long as the user clicks the button at the same time the rollover takes effect but setting the delay at about .3 or .4 seconds will usually resolve this.