Navigating with arrow keys
-
22-07-2019 - |
Question
What are some generally accepted practices for navigating between irregularly placed and sized elements in a canvas (such as controls on a form) using the arrow keys?
For example, if the currently focused element is a tall element (A) whose height encompasses three shorter elements to the right of it (B, C and D):
####### #######
# # # B #
# # #######
# #
# # #######
# A # # C #
# # #######
# #
# # #######
# # # D #
####### #######
Which of these elements should be focused when the user presses the Right
arrow? The top element (B)? The one in the center (C)?
What if D was focused before the use user moved focus to A by pressing Left
? Should focus return to D when the user subsequently presses Right
?
I'm wondering if there are some published guidelines for these scenarios.
Solution
I haven't looked into any specific guidelines or anything, but it seems that in the first case, when you're on A and you push Right, it should go to B.
If you're already on C or D when you push A, it probably makes sense to go back to that one. I'm less sure about this one, because the user might have gone to A from the bottom as a "shortcut" to get to B (This makes sense if there are a lot of elements in the right column, so instead of going (Up-Up-Up-Up-Up-Up you go Left-Right).
OTHER TIPS
I think it's also important to note what element 'B' is that you're navigating to. Suppose B is a text box. If you go from A to B, will you assume the user wants to enter input and automatically focus their cursor in the text box? This would give a user immediate use of typing into the box, but immediate problems if he/she wanted to move to C or D instead.
I think it's more important to give the user feedback on which field he/she is in. Windows controls tend to suck for showing a well highlighted field, while in OS X, you get a distinctive highlight around the control that is selected (in most cases).
Just make it a point not to get in the way of the user if they want to go somewhere else. Don't lock down their keyboard after moving into A-D if they only want to move to another element.
In general, navigating through controls should follow the user's natural reading order. In Western cultures, that's left-to-right, top-to-bottom. This has been a usability standard at Microsoft going back to the excellent The Windows Interface Guidelines for Software Design and Microsoft Windows User Experience.
In your example, navigation through the controls should go A-B-C-D-A-...
If you're on A and you hit right, you should go to B.
If you're on D, and you hit Left, there are two options: "going left", which is A, or "going back", which would mean going to B. If you choose the second way, there's no place to get lost, although it can look a bit weird at first.
That said, if you choose the first way, I think the proper would be going to B: no need to remember where you were, just where you are, to know where you'll be. ("State is bad. Don't make the user think about it.")
Take a look at what Microsoft says for Vista applications.