12

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:

enter image description here

  • Make them visible only on mouse hover or on focus. – Fez Vrasta Sep 8 '17 at 6:43
  • How often are your users clicking on 'Download' vs 'Delete'? – icc97 Sep 8 '17 at 9:44
  • 1
    @FezVrasta: Why? – Heinzi Sep 8 '17 at 11:50
  • 2
    @Heinzi because you don't want your UI polluted with buttons that the user will probably never use, show the relevant pieces of UI only when the user will actually need them. – Fez Vrasta Sep 8 '17 at 13:57
17

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.

  • That makes sense, is there any rule which recommends the delete button to be less prominent? – OM The Eternity Sep 6 '17 at 9:21
  • 4
    No rule for that but you might want to include a sanity check ("are you sure?") if an accidental delete will be difficult to reverse. – Andrew Martin Sep 6 '17 at 10:21
  • 3
    Or put one at the far left of the row (to the left of the filename), and the other at the far right (where the icons are in the screenshot). – psmears Sep 6 '17 at 12:53
  • 1
    @AndrewMartin An "Undo" button that shows up once you press delete would be better IMO. – heinrich5991 Sep 7 '17 at 6:57
  • 1
    @heinrich5991 It primarily depends on the specific action. There are plenty of actions that are difficult to undo, are time sensitive, or session sensitive (think a site designed to be friendly to people using two different tabs, or an administrator that wants to undo an action but the browser crashed for whatever reason) that makes a cautious approach more desirable. – Thebluefish Sep 7 '17 at 20:48
31

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.

enter image description here

  • 21
    I dislike this because it then takes two clicks to download the file. This is particularly annoying if you need to download a lot of files. It also hides the primary action (download the file) and makes it harder to spot in the first place. – thirtydot Sep 7 '17 at 9:29
  • 5
    @thirtydot A developer's perspective is noted. I get into these talks with devs more often at work :) All I can suggest you is broaden your thinking in UX research. – DPS Sep 7 '17 at 9:35
  • 4
    @thirtydot Taking more than one click to complete a task is not necessarily bad UX - I like this solution more than the one I suggested as it's more extensible and therefore more futureproof! – Andrew Martin Sep 7 '17 at 10:07
  • 11
    There isn't enough information in the question to give a real answer. If the desired interaction with the page is to often download files and to rarely delete them, then you really do want a single click download with a very obvious "download" icon. You could also have a menu, like this: i.stack.imgur.com/nwkeh.png (Google Contacts). Notice how they don't hide the common actions behind a menu? – thirtydot Sep 7 '17 at 10:26
  • 3
    @thirtydot Please suggest that as an answer so I can upvote it :) – Yates Sep 7 '17 at 13:43
21

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:

download icon left of the filename, both underlined as a link, delete button on the right end of the table row

  • 1
    A link for downloading a file is the most natural thing to have. It's how the web has worked since it's inception. – icc97 Sep 8 '17 at 9:51
11

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

Mockup of the new design. Contains a table, each containing (in order left-to-right), a checkbox, file name, file type, a date and a download button. Above the table are the left-aligned Download and Delete buttons, marked in different colours for quick recognition.

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.

  • The problem with this option is if you need an additional click. You need to click every item anyway to select it, so you still need to click to delete it. This is faster if you have to then click an extra time to confirm it though, but only with more than 2 items. If batch actions are required, this can be separate functionality. – Nzall Sep 7 '17 at 8:32
  • 1
    @Nzall The point of making deletion into an action with an additional click is to protect the files from being accidentally deleted when you are trying to download them, which is an issue with the UI from the question image. I'm not sure you can have deletion as an additional first-class action alongside download if you want to prevent that. Consider most file managers - opening a file is a first-class action (double-click or single-click to open), deleting a file is a second-class action where you either select and press Delete on keyboard, or right-click and choose delete. – Pabru Sep 7 '17 at 13:39
  • 1
    @Nzall you could also allow shift + click operations which would speed up bulk multiple clicks. Also a delete operation requires a page reload, so pretty much for every case other than a single delete this option is faster. – icc97 Sep 8 '17 at 9:56
  • @icc97 If you use JavaScript or whatever to shuffle the page elements around after deleting one, there wouldn't be much of a need for a page reload. But I still stand by my answer really. – Pabru Sep 8 '17 at 15:46
4

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.

3

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.

1

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.

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.