How do I display two different actions on a page that have basically the same behaviour?

Question

I am designing an application where I can share a call plan with friends and family. For this I have a requirement to provide actions to block a user from using a product and also to delete a user from said product.

Blocking a user means:

• If I am blocked from the service, the account holder will still be able to see my details, however I won’t be able to use the service until the account holder unblocks me.

Deleting a user means:

• If I am deleted from the service, I will be deleted from the records, however I will be able to resign in to the service.

I am struggling with this. How can I clearly differentiate these two actions?

Answer 1

I think that these actions have something in common, so I think you may put them under the "Revoke access" action with details hidden behind the confirmation dialog. It will not only limit the number of actions visible on the page (and it will be easy to use) but also make the difference more clear:

And in a case user was already blocked there will be two different options at her profile page, saying something like, "User has been blocked: 'Restore access' or 'Remove user permanently'?" with own confirmations, explaining the procedure.

Answer 2

How you actually implement this will depend on your UI, but assuming that you have a list of users under each service you could do something like this:

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

Or have a check box by each name and a single "Block" and "Delete" button that act on all checked items:

^{download bmml source}

While the end result may well be the same - you won't be able to use the service - the actions are in fact different.

Answer 3

To differentiate actions, i would use icons (trash, ban).

To offer multiple operations per interaction, alter the table grid in a way that every row has its own operation buttons (like fig. 1), which change state when selected. Then add a primary + secondary action at the top and bottom of the grid (apply, reset).