1

Context

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?

1 Answer 1

0

I think that for simple and short lists where the navigation is basically a linear traversal of the the list (up and down) the difference between keyboard where you have to press up or down versus clicking on an exact row really depends on the particular task you want to perform and which one is quicker or more accessible .

For complex lists where the navigation is non-linear, it seems like a combination of keyboard and mouse can be easier when you are switching between different types of tasks. This is where only having one type of navigation means that for some tasks it will be easier, and some tasks it will be more difficult.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.