What is the best place to put the delete button?

Question

Well, this maybe the simple question but it has given me a headache for days.

I'm making an app, from design, code, etc.... The app is a note app, user can select multiples of them, and then can archive or delete them, it will look like this:

But someway I found it a little weird, and not so well designed, so my question is which is the best way to make a delete button when have a list like this?

Answer 1

One thing you can do to improve usability, is think not just about position, but about understanding of the icon from the user point of view.

Right now, your Cancel icon looks like the most visible with the red circle.

The order might not matter as much if:

• The icons and functions are clear
• The actions have enough space to be easily tappable on mobile
• The labels are straightforward

Try making some buttonlike structures for the main actions, and use a 'cancel' link to abandon. If needed, you could use a red outline for the Delete button to indicate it's a destructive action.

I've added some text showing how many notes are selected, especially as mobile has limited space to see all notes and their state:

Answer 2

Along with what Mike said, I had a couple of points too.

• I think with the multi-select, there could be several actions that can be taken, for example: share, delete, favorite, download, etc..,. So maybe a panel that shows all these actions in one place would make the task of taking an action easier for the user.
• Also, while letting the user multi-select, there should also be a feature to "select all" in case there's a long list of notes.
• Another thing that I noticed in Mike's design was the mention of the number of notes selected which could be helpful for the user but is currently not highlighted enough.

Keeping these points in mind, here's a quick wire: