What should the sequence be for Download and Delete buttons?

Question

I have two icons for each row in a table: Delete and Download.

But I feel the Download button should be before the Delete button. Please help me to understand what the sequence should be as per guidelines and what the thoughts behind it.

Below is the screenshot of what I have currently:

Answer 1

There is no hard rule for this and it would be different in every case but I would recommend putting the task that you want your users to perform, or the task they they are likely to perform most, at the right-hand end of the row.

'Reading Gravity' suggests that this is the most likely place for the reader's eye to skip to after reading the file name at the left-hand end of the row.

Answer 2

Placing those icons upfront will create confusion and users might take wrong action (clicking on unintended row) because of the repetition.

Think of using the vertical three dots approach and place the actions inside a dropdown. Keep the destructive action (delete) as last option.

Answer 3

I would recommend not to put them directly next to each other at all to prevent mistakes. Downloading and deleting are two very different actions, happening with different frequency. I would make the click area for the more common download larger by including the file name in a link:

Answer 4

Make deletion possible only on a selection basis

I would suggest adding a checkbox for each row and an Action Bar on the top with the Delete button. This makes deletion possible on a per-selection basis, like so (my mockup of the changes):

Edit this mockup on CodePen.io

Pros, Cons and Other considerations

Pros

• Deletion, which is a dangerous and potentially irreversible operation, has been moved out of the way, into a location where it's harder to trigger by accident.
• Checkboxes add a way of carrying out deletion on multiple files at once, which may be a useful feature if the list grows to tens or hundreds of items. Users will surely appreciate not having to click on each file individually to trigger deletion when cleaning up the list.
• Checkboxes don't have to be limited to just selecting for deletion. In my example, the Action Bar has a Download button - you could implement a feature where all selected files would be packed up into a ZIP on the server-side and sent to the user as a single download file (power users would especially appreciate this). Download isn't the only possible operation either - moving files between categories or a myriad of other actions could be added too.

Cons

• Novice users who are not familiar with this pattern may get easily confused. Adding icons instead of (or alongside) labels may alleviate that (my mockup doesn't have them because I couldn't figure out how to get them to show up in the code).

Other considerations

• You could consider adding a drop-down menu in addition to the Action Bar like in @DPS's answer. To accommodate power users, you could make it also show up as a right-click menu for each row.
• Deletion is now a more deliberate act which requires an extra step on the user's side to trigger - this may or may not be beneficial, depending on what you want.
• This is just a simple mockup, feel free to substitute text for icons, change layout/colours, etc.

Please note: I'm not a professional UX expert, so please take my answer with a grain of salt or two.

Answer 5

Put the delete button as far from other controls as possible.

For example, on many desktop systems the window controls and menus are at the top of the window. The window controls are typically on the right. That tends to mean that the user keeps the cursor more towards the right, so the most common/safe option is usually on the far right, often at the bottom.

Therefore, on such a system you would probably put the delete button in the bottom left corner. It's the most out of the way place, that requires the user to move the greatest distance to reach and this reduces the chance of it being accidentally clicked.

Answer 6

If you have to make them visibile, probably, I would would agree with you. I would place the download before the delete. Probably because user eye would catch it earlier and I would definitely place a positive value first. If he’d want to delete the element he would proceed to the right searching for something else.

The ellipses solution is more scalable and focused but you should also look at the use cases. If a user would want to download multiple elements, unless you have massive actions, he would have to click twice per row.

Answer 7

I'm not sure what the "standard" approach for this is but what you've shown here looks backwards to me. Normally I'd expect the most common actions to be on the left with the less common actions to the right (reverse for RTL layout). So download should come before delete. Similarly a "rename" or "edit" option would come before download (if your application is aimed at cloud-based usage) or between download and delete (if your application is designed for offline editing and the cloud-based editing functions are second-priority).

Obviously also make sure that your delete option has a confirmation with it to prevent users accidentally clicking the wrong button. Make sure that this confirmation is visually different from less dangerous prompts that are shown so that users don't automatically click the "OK" button without reading the question.