Button text based on previous button's context

Question

There's a table with a list of files that need to be tagged before uploading. The table might get longer than the page height, so it's scrollable, and above it there are buttons that work on selected items:

As you can see, I tried to save horizontal and vertical space by omitting labels, and put the context on buttons themselves. Thus, Next file assumes the user has already read Select previous, and makes a connection that results in "Select next file". Similarly with moving selection and removing selected items.

Aside from Upload all (which uploads all, not just selection) and perhaps Remove, the blue buttons are rarely used. The order doesn't really matter much - except when the user really wants the files to be displayed next to each other - and selecting can be done via clicking the item on the table or a checkbox next to it (for multi-selection).

Is this layout acceptable, especially from accessibility point of view? Are there any guides or studies that touched upon this exact subject?

Answer 1

Another way to think about this is to group the actions into three types:

1. actions that change which item is selected
2. actions that edit the selected item
3. other actions

(Btw, I assume the "select previous" and "next file" buttons exist because because of some system limitation that doesn't allow another, more direct way to select a file — e.g. using a mouse to click the file to select it, which would be the most straightforward option and obviate the need to have these two buttons.)

Using that framework you could lay out and group the buttons thusly:

• "Select previous" and "next file" both change the active file selected, so should be visually grouped together.
• "Move selection up", "Move selection down", and "Remove" all fall under #2 and should be grouped together. Since "Remove" is the most common action based what your description, that should probably go first.
• "Upload all" doesn't affect anything specific but actually serves as a sort of "submit" button for everything, so I would ensure it's visually separate from the other actions, perhaps both in location and size.

Something like this, perhaps:

Note that I also used labels separate from the buttons to tie together the "select" and "move" buttons instead of only putting the label on one button. I think this is a bit more conventional and more clear.

Something else I would change in your design is the color of the "move" and "select" buttons as those have distinct actions. The similarity in color implies a relationship that doesn't necessarily exist.

Answer 2

Almost there, I think previous suggestions of the option of being able to re-order by dragging with an indication icon that you'll be able to do so, with also almost a key to show what it does if you do not know.

Also, I wouldn't remove the buttons if their rarely used but maybe let the options breathe and create a segment in between them with a horizontal rule :-) It allows it to be easily scanned and more programmable.

I'd tweak it along like this and would find the UX more pleasing.

EDIT: Oops, clearly misplaced the re-order...but you get what I'm saying :)

or another option