Actions through buttons and alternative ideas

Question

In the following image, you can see a screenshot of the current look of a "Contacts" panel I created. In the area I have highlighted (bottom) there are two buttons to add and remove contacts respectively. I am having certain doubts as to whether the users will find this technique visually appealing and/or friendly.

First of all is the current technique of making certain actions available to users working?

In any case, what alternatives are there?

How can I boost the user's experience through the alternatives? Why?

In the same way, is there a better way of offering a "return" or "cancel" action other than by inserting a button in the panel's header? (This doesn't apply to the Panel shown).

Any help would be appreciated.

Answer 1

I guess it's important to know how users are going to use this laytout, for particular users who will need to manage their own contact lists bulk actions are not a key feature, I mean you usually delete just one contact at a time and add one contact at a time.

If you are looking for something focused on users which manage long lists of contacts (enterprise or profesional use) and need to delete massively then you'll need the feature but, in this event, maybe you also need to add a mass import feature...

With the current information this is what I suggest:

Some points that you should keep in mind:

• I guess edit option should also be added next to the delete action icon.
• With action buttons on the right you need to pay attention to characters limitation.
• Dependind on the data required to add a contact the quick add feature suggested should be improved but basically it should allow you to add basic information to create the item and then add more info if needed (just like google calendar events works ie.)

I hope this may be helpful for you :)

Answer 2

I would recommend using + (addition) and ✖ (removal) next to each "contact" in the list (right aligned).
If the user is able to select several contacts remember to highlight the ones already added with a different colour and dim/grey out the ones removed.

This technique has another advantage: you need less clicks to do the same tasks.
The title will have to be changed: an order is easier to grasp than binary choices (something like Select Contacts instead of Remove or Add Contacts).

Answer 3

You could show the Delete button only on selected item(s) in the list (highlighting the row) so that it's always right near to where you have just selected, rather than having to jump all the way to the bottom each time, although if Edit was also to be an option in this context - I would consider making that the inline action with the contact name, but you haven't mentioned the need for edit...

Yes, there is the matter of having to discover the Delete button by having to select a contact first, and so it depends whether you think your users can handle this and if there's a way to teach users this easily. One option is that you just select the first contact by default.

Then you can put a Done button where you had the Remove button.