I'm in the process of designing/implementing a filterable object creation palette with categorized results for a visual content creation application. I'm trying to decide how to handle keyboard vs mouse navigation of the results. I expect most users to interact with the application primarily via the mouse but switch to keyboard use when selecting uncommon objects. Users may summon the object creation palette via either the mouse or keyboard. The object creation palette will be central to the application and I expect it to be summoned dozens to hundreds of times per user session.

Keyboard/Mouse Navigation Approaches

There are at least two approaches for handling keyboard/mouse navigation of elements in a list:

Unified Navigation

Many applications and systems unify keyboard and mouse navigation through lists: they maintain a single "focused entry" at any given time, and the last used device overrides the current focused entry. For example, MacOS system menus operate this way. You can hover over an item with the mouse and then press the up arrow key to focus the element above it.

MacOS menu navigation

This seems simple in that there is only a single focused element at a time, but the fact that the focused element jumps when switching from the keyboard to the mouse feels a bit jarring.

Separate Navigation

Other applications maintain two separate focused items at a time, one for the keyboard and one for the mouse. The Visual Studio Code command palette works this way. You can hover over an item with the mouse without affecting the item focused via the keyboard, which means that up to two items may be focused at once:

Visual Studio Code command palette navigation

This is visually a bit more complex in that there are up to two focused elements with different styles. However, the focused element doesn't jump around as the user switches between input devices, and it potentially opens up interaction scenarios where the user hovers over an unfamiliar element to request more information from the system and then decides to press enter to use the element that already has keyboard focus.

Choosing an Approach

I'm curious what factors might make one or the other approach to element navigation more appropriate. Are there any best practices to follow in different situations?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.