UX: Designing a Better Multi-state Button

This comment from an user sums the very scenario and the issue, I recently encountered while designing a product –

“I have been using Toggle Button to “Add” and “Remove” elements to a collection using simple Toggle Button (one with state visible at a time) which had following states.
ADD (if button wasn’t clicked ever)
REMOVE (if the button was previously clicked and an item was now part of the collection)
BUT this always pinched me as for a novice user (age 50+), it was initially hard to understand what has happened and why is button asking to “Remove” even before I learned that item was now part of the collection. The missing bit in this case was a notification message which would say “Item Successfully Added”. I am using a Javascript Based Status Message which appears on the top of screen (using http://twitter.github.com/bootstrap/javascript.html#alerts) but since it was visually displaced from the element of interaction, I only solved a part of the problem for some users.”

With this in mind, lets deep dive.



The Product:

A Public Contact Search facility, from where you can search, select and bookmark your preferred contacts in your own contact list.

Scenario:

  • User found Joe’s contact in the public contact search facility.
  • Adds Joe to his Contact List.
  • Gets a confirmation that Joe is added to his List.
  • Has an option “Manage” the contact addition (imagine it opening a popup to confirm other things, including an option to delete Joe from his Lists)
  • Whenever Joe’s contact is visited in future (public), the user gets this understanding that Joe is already in his List.

Four clear actions are:

 

  • Add Joe to contact list
  • Get confirmation on the addition.
  • Manage Joe’s listing in future
  • If Joe’s contact is visited in future through public contact search facility, get a clear understanding that Joe is already in the user’s contact list (and hence the option to Manage the contact).

Without much talking, here’s what I came up with — ”A Multi-state UI Button With Inline Notification” that tries to fulfil all of the above.

addKOL_joe.gif
A multi-state UI button with inline notification

Solution

  1. A multi-state button that gives importance to notifications and its vicinity.
  2. A persistent notification helps to understand the context, at any later point of time.
  3. Thoughtful copy makes the CTA — making the button actions (with a suggestion to what they will do) more clear. Context is the word.
  4. Motion design helps make the transition between states more meaningful and avoids the instant switch.
  5. Works good for mobile too, except the hover state.
  6. In cases of smaller button, or bigger notifications, the notification text could be placed in the very near vicinity of the button.

This is just an exercise that fit well with the product at hand, but I am sure could be applied elsewhere too (Here’s a similar solution, but applied to a different problem — one I recently shared on an UX forum). It obviously demands more real state, but then the goal is to make better experiences and not just save more real estate. Right?
B2o3PWXCQAADiWb.png

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s