3

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:

Selection buttons

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?

  • I could think of some ways to simplify this, but I'm thinking: are labels even necessary? In my opinion, a 'drag and drop' feature can also do the trick, right? Then you'd only need to display "upload all" and "remove". – Max de Mooij Mar 20 '16 at 22:33
  • I foresee some confusion stemming from the [⌃ Select previous] and the [⌄ Next file] buttons. As the look like complementary actions, the wording should also be complementary. Or, the second one should lose the icon for example. – Juan Lanus Mar 22 '16 at 20:11
  • Certainly not clear to me the difference between up and previous or next and down. – paparazzo Jul 20 '16 at 22:45
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:

example redesign

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.

  • That looks nice, thank you. I believe the color differences are enough to separate the buttons in the first row, without the need for increased space - but still, this is an interesting way to solve the problem. – fri Apr 18 '17 at 12:27
0

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

enter image description here

or another option

enter image description here

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.