UI pattern: Hover and Switch

I’m sure others have already found a better label for this, but there’s an interesting UI pattern which I call [[Hover and Switch]]. An active area of the client window (e.g. a tab bar) controls the content of the client window (e.g. a browser window). But instead of having to click on an item in the active area, hovering over it for a certain duration of time (e.g. 100 ms) causes the client area to change. Now that the switch has been triggered, simply moving your mouse in the client area causes further switches without any delay. (A similar mechanism is used for showing info bubbles or “speed tips” in many applications.)

This UI pattern is used, for example, by the Tabbrowser Preferences extension to ease browser tab navigation in Firefox: no more clicking required. I can see few reasons not to apply it to taskbar navigation, console tab navigation, preferences navigation, and many similar situations. A problem is, of course, that you may sometimes accidentally cause the switch to trigger. So this kind of pattern can only be used where an accidental switch can never be problematic. In any case, the reduced amount of mouse clickery in my opinion more than compensates for the occasional accidental switch, the likelihood of which is greatly reduced with the time delay.

In fact, after enabling this extension, I found myself hovering over console tabs and taskbar buttons in the expectations that they would switch in the same way. When a user interface is so effective that it changes your expectations in other applications, it deserves a closer look.

One seemingly related idea is to use the scrollwheel to navigate the active area. KDE does this for many of its tabs and task switchers (try it in Konqueror or in the tasklist). The scrollwheel navigation is useful when you want to quickly view the content of a large subset of possible client areas, e.g. cycle through all browser windows. The Hover and Switch approach also allows this – simply move the mouse to the left left or right – while at the same time making it possible to precisely select the client area you wish to view.

2 Comments

  1. checkout http://www.dontclick.it/ which takes this to an interesting level.

    in flash, but i’ve been looking into implementing a similar in javascript for the ueberinterface.

  2. Cool link, thanks. Added it to the wiki.

Leave a Reply

Your email address will not be published.

*