RedUX : Stop Flashing Me! : UX Patterns
What’s the proper way to reveal hidden content to a user? We dig in a little bit to put some data to this question.
Recently, while working on a heatmap visualization, I started wondering about the best way to enable the user to reveal deeper information about the key areas of the map.
If we think back to the early days of the web, at some point, hyperlinks as a navigation device gave way to drop down menu navigation. These were normally placed right below the header image, and just above the ubiquitous and much loved “Banner Advertisement”. Sliding your mouse over any of the menu items on your way to something else on the page, would cause the drop down to immediately deploy to its open state. This made for a little bit of visual fun, as you could glide the mouse across the top area, watching menus spring into existence and then out again. What was not so fun, was to try and navigate with these spasmodic controls. Say you were going to click on that banner ad to purchase your twenty second Furby. If you happened to trigger a menu drop, and it extends to obscure the banner add, you now need to move off the menu to release the drop down, then move back to get to your click target. Frustrating at best. Equally frustrating, was that just a minor overshoot on a deep menu, would trigger a collapse of the menu, forcing you to return the mouse to the top to extend the menu again.
So we need to add a bit of intelligence, to better understand our user’s intentions while they are navigating the page. We can do this by paying close attention to their mouse movements. The key is to not trigger an event until that intention is established….or at least estimated. If the user is no longer moving the pointer, but has stopped over a trigger, we can assume with a reasonable confidence that this trigger point is of interest to them. How long do we wait before showing the hidden content? Turns out that there is a great article on this subject by Nielsen Norman, a group that specialize in interface usability. Here is a summary of the navigation flow from their article.
1. Mouse cursor enters target area: display visual feedback within 0.1 seconds.
2. Wait 0.3–0.5 seconds.
3. If cursor remains stopped within target area, display corresponding hidden content within 0.1 seconds.
4. Keep displaying the exposed content element until the cursor has left the triggering target area or the exposed content for longer than 0.5 seconds.
So let’s look a little deeper in to these steps. In step 1, “feedback within 0.1 second” is related to changing the button or other target to its “hover” state. This visual feedback informs the user that the page recognizes that they are over an active target, and is also important to help the user feel that the page responsive and not slow or lagging. Next up is the 300-500 millisecond wait. This wait is to ensure user intent is to see what additional information ( menu, popup, tooltip ) is attached to the target and is not mousing by on their way to something else on the page. Number 3, If after the wait, the mouse is still over the target, display the content within .1 seconds. Again, no lag. Number 4 is that once the information displayed, we still monitor the mouse hover state, and don’t hide the attached information until the mouse has left the area for at least a half a second. This signals the page that the user has actually left the target, and gives the user a chance to recover if they accidentally moused out.
These measures provide a much better interaction for the users. Human’s are inaccurate navigators. They pause, they miss, they over shoot, they get frustrated at their own inaccuracies. Building in these delays and trigger timings allows forgiveness for these navigation inaccuracies, without penalizing the users for being human.
I’ve tried to give a quick over view here, to inform your designs. If you have more time, please read the full Nielsen Norman article here… https://www.nngroup.com/articles/timing-exposing-content/
