Conceptually similar but actionably different choices in a modal

Question

I have a modal in which users can choose between

1. removing a user entirely
2. withdrawing the user while leaving an archival entry in the list
3. cancelling out of the modal without taking any action

My concern is that remove / withdraw / cancel are all similar concepts, and if users meaning to withdraw the user removed the user instead, all the information associated with the user entry will have been deleted, which makes this rather undo-able. For technical reasons, a delayed undo option (à la Gmail's undo sent email function) is not viable at the moment.

I'm planning on grouping options 1 and 2 to the bottom left of the modal to make it clear that option 3 (over on the bottom right, because I'm anecdotally convinced that most accidental clicks happen over there in the bottom right) just closes the modal.

Questions:

• How should I present the choices in the modal so that it's clear what each option does?
• Are there better word choices for the options?
  The original plan was to use "Cancel" an awful lot, but as per various other questions here we endeavoured to not do that. I am also not permitted to use "delete" because deleting people is bad.

Answer 1

I would recommend going with a simple approach like this

^{download bmml source – Wireframes created with Balsamiq Mockups}

I would recommend putting the archiving or withdrawing option as the primary call to action as you want that to be the primary interaction and not have the user be accidentally deleted. Since there is some confusion about what archival means, I would suggest putting some explanatory text below it.

Make the deletion of the user your secondary call to action and ensure it does not as strongly as your primary call to action as you dont want it competing for attention. The delete call to action is also placed on the right to ensure its the secondary CTA the user sees after scanning from left to right and is lead from the first CTA.

To quote this article

Prioritize It’s important to prioritize the call to action buttons on your page if there’s more than one. This can be done in a number of ways, but the most common are through the use of color and size.

Use color to highlight the most important button on a page, or to make the less important ones seem less prominent. Or use size to make the most important button stand out (by making it larger) and de-emphasizing the less-important ones.

With regards to the cancelling aspect of the modal, most users are accustomed to the idea of clicking on the X to cancel a modal. To quote this smashing magazine article

To improve functionality, always provide an exit button in an upper corner of the window. It is standard practice to use a simple circular button with an “x” graphic, which is clean and quite obvious for the user. In the lightbox shown below, you can clearly see the exit button.

Answer 2

In this case it sounds like one option is just an extension of the other (they both remove the user, but one also removes the archive record)... You could use a checkbox to confirm that second action.

^{download bmml source – Wireframes created with Balsamiq Mockups}

You could also use a popup to accomplish the same thing...

^{download bmml source}

I've read some of the discussion on using cancel... I think that's more along the lines of not using Cancel for an action because most people understand it to be a lack of action...

• Remove: I want to remove.
• Withdraw: I want to withdraw.
• Cancel: I don't want to do anything.

Answer 3

I would use a radio button for this interaction. It allows you to default to the safer of the two actions. It also allows the user time to consider the two options and think about the difference before making a selection. Sort of verify before click rather than after. Keeps the interaction together on one page.

For the wording I would use delete user and archive user. I believe you are right that people are accustomed to the archive option due to gmail. As with any interaction, time and testing will tell. For the button, I would use perform action, the wording puts the button in the same context as the radio selectors.

You could also include some instructional copy to clarify, but I don't believe that will be necessary.