2

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:

gallery mockup

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

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

If you want it to feel intuitive to the user, and can only use arrow keys, then I would suggest one of the following design changes:

  1. Move the buttons to the side of the gallery. Then you can use the left or right keys (depending on which side you choose) to navigate to the buttons.

  2. Make the gallery scroll horizontally instead. This option then allows the user to easily use the down key to navigate to the buttons without needing to scroll the entire gallery. This option is best if you have a limited amount of display width to work with.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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