keyboardnavigationusabilityspatial

Navigating with arrow keys


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