Navigating with arrow keys

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.

Answer 1

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).

Answer 2

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.")

Answer 3

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.

Answer 4

Take a look at what Microsoft says for Vista applications.

Answer 5

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-...