What is the best way to indicate the user that the edit can also lead to delete?

Question

I'm sorry if my question may seems confusing, let me explain.

I'm building an app (http://uncovr.it) and here's a page details :

You can edit the name of your instance (here, Prestaddons) by clicking on the pencil.

When clicking on the pencil, a modal will open with a form containing the instance name in a text field.

I choosed this way instead of an inline edition because I plan to add more fields.

I initially thought about adding the "Delete" button in that modal too, but a new user that never opened the edit modal will never know where to find the delete button.

So I'm mixed with too feelings :

1. Choose an icon that says "Edit or delete your instance"
2. Put the delete button elsewhere. In that case, where would be best appropriate ?

Thank you for your help!

Answer 1

Here, the 'Edit', as you stated, only applies to modifying the name of the 'Instance'. As the 'Edit' action is really 'Rename instance', I would call it this (or just 'Rename') explicitly and make 'Delete' a separate action. I have not had success with placing 'Delete' under an 'Edit' entry point; I have observed it to be the last place users look. Its a bit like putting the 'Shut down' option under the 'Start' menu.

Answer 2

Conceptually at least deleting could could fit under an Edit option.

This being said, Its better to have action options related to a specific item presented upfront, as users can see both the information and actions permitted in one location. this will reduce the number of steps required to perform a task and will add transparency to your solution.

You also need to take into concideration that a delete option will not be used as much as an edit option. so when users do need it they will be actively looking for it and will have no difficulty finding it. In both cases you should not overwhelm the user with too many options.

So if i was you i would explore my options and would give preference to exposing CTA upfront but if you can't do that than delete within Edit will do just fine.Hope this helps

Information architecture and usability

just wanted to add that from a categories point of view, Edit, Delete or Add are generally presented together but Edit is definitely a broader category of actions. so if your are looking at this from an IA point view, your solution is sound as from a usability point of view exposing all options is better.

Answer 3

The pencil pretty clearly implies that you are editing only the title, given it's location and that it's not clear what is all specific to the "instance" in your screenshot. A gear implies settings. A wrench is pretty vague in meaning.

I would probably include an "Edit" option next to "Informations" (but it's a little unclear what those options do normally--are they tabs?). Another option would be to move the URL and "Copy" box a bit and put an edit button there (you could also hide the URL with a "Share" button). That placement would imply to me that you are editing the whole instance and not just the title. In either case, I would probably include the Delete option in the popup. Finally, don't just rely on an icon. Use the word "edit" and possibly no icon at all.

Answer 4

I agree with Ash that the 'Edit' action is actually a Rename action: if the only change a user can make is to the name, it's not 'Edit' in the sense of making changes to the parameters of the Instance. I also think that 'Delete' is an action at a different level of the structure of the application. The Edit/Rename is in the context of the name of the Instance; Delete in the context of the Instance itself, i.e the container that has a name.

So in this case the Delete should ideally be available in any context where a user can make changes to the Instance. For example, if there's a list view (Instances link in sidebar nav?), I would like to see a direct action to delete Instances. For list view you might even consider a UI pattern where there's a 'gear + dropdown caret' mechanism that has Rename and Delete Instance in the drop down.

But I would not attach Delete Instance to the Edit/Rename interaction. It would be like having a Delete document button in the Rename document modal of a Google Doc, you'd be deleting the container of the object you're interacting with.