I have a gallery of images which scrolls vertically. There is no limit to the amount of images, so the gallery could scroll for a long time. Outside of the gallery, there are "action" buttons which perform tasks on the images selected. Visually, the gallery currently would look something like this (but with more polish) - however, any aspects of the layout may be modified if needed:
The blue square indicates which image is hovered over. The user can scroll through the gallery and select images (adding some sort of selection indicator - not shown here). When ready, they should then be able to navigate to the action buttons. Navigating back should be allowed too. All navigation is to be completed with only arrow keys.
How do I allow the user to navigate this easily and intuitively?
Some solutions I've thought of but dislike
(If any of these are actually good ideas, I'd welcome that, but would need some justification.)
- The user must navigate to the very bottom of the gallery before the down arrow moves to the action buttons (and up arrow to get back).
- This would require a lot of tedious scrolling, and also often requires the user to use action buttons without being able to see which images they selected.
- The left arrow navigates to the action buttons when navigating left from the leftmost image (and similar for right arrow going right).
- This feels unintuitive for the user, and wouldn't be very discoverable. Solutions should be obvious to the user, or at least match predefined expectations.