Menu flickering is when a user moves the mouse towards a sub-category, and instead activates another parent category, causing the hover activated drop-down to change.

Let’s take the example of a home furnishings retailer. They have the following categories: 

Furniture

Rugs

Decor

Kitchen

Outdoor

 

Furniture has the following subcategories and sub-sub-categories:

Living Room Furniture Sofas & couches Benches Recliners Coffee Tables TV stands Bookshelves Accents and chairs Ottomans

Bedroom Furniture Beds Nightstands Headboards Dressers and Chests Armoires and Wardrobes Mattresses Kids Beds

 

Menu flickering occurs when a customer (let’s say Jonah) is interested in beds. So he instinctively moves his mouse from “Furniture” in a direct diagonal path to “Beds”. But since the path of the mouse pointer passes directly underneath “Rugs”, it activates that category’s subcategories and makes Furniture’s subcategories disappear.

This can be very disorienting and leaves customers confused for a moment. Many customers will recover, navigate back to “Furniture” and move the mouse pointer straight down to around the middle of “Living Room Furniture” and then to the left in order to avoid activating “Rug”’ subcategories.

While this is a minor inconvenience, it can still be incredibly annoying if it happens repeatedly to the same customer (which it does).

 

How to deal with menu flickering

Implement a 300ms delay

Since the drop-down is hover activated, it’s best to implement a delay of about 300 milliseconds before a drop-down is changed. This is long enough to avoid accidental drop-down changes while not so long as to make customers think your menu is unresponsive.

 

Implement mouse tracking

A mouse tracking algorithm is a slightly more high-tech solution but it’s more elegant. It analyses the path and speed of the mouse to determine the action a customer intends to make.