Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 4 down vote favorite
1

The key action on a page is selecting "I'm in" (meaning "I'm committed", which can also be deselected). The logical choice of controls is a checkbox:

[ ] I'm in

I'd like to give this action elevated prominence and integration with other actions by displaying it as a large button with an icon:

--------------
|    ICON    |
|            |
| [ ] I'm in |
--------------

My concern is that first-time users might miss the unchecked state and assume a large box saying "I'm in" indicated they're already "in".

What visual cues could be used to leave no doubt the call to action is to click the button to set the state? I'm open to having the use of the combined button and checkbox challenged if alternative ways of giving prominence are suggested.

[EDIT] As some of the suggestions have highlighted, the unchecked state means "interested" rather than be as strong as "I'm out". Interesting how this impacts some of the options.

share|improve this question
Talking with someone about this I realize the core issue may be the phrase "I'm in", which describes a state, rather than an action for the button such as "Commit". Unfortunately, I'm at a loss to come up with an action phrase that matches the energy and informality of "I'm in". "Join in" is close, but confusing as the user has already joined the discussion; this action is committing to the project, but "commit" is too formal for the context. – Kris Braun Aug 1 '12 at 19:44

3 Answers

up vote 5 down vote

Lighten the image significantly when out so that the checkbox becomes more obviously the control requiring interaction, and the current state becomes more clearly indicated.

Additionally, you might consider an iOS style slider that makes the current state and the required transition more obvious.

enter image description here

share|improve this answer
Good, these are the kinds of cues I was hoping for. I'm not sure how clear fading the button icon (which is a monochrome image rather than a photo) will be for someone who has never seen it highlighted. As mentioned above, "interested" is the other state rather than "out", so I don't think a toggle showing "interested" will make it clear clicking will transition to "in". – Kris Braun Aug 1 '12 at 12:48
up vote 0 down vote

Can you use UI to make it more obvious? Also, I've said it before and I'll say it again, I would recommend using spoken-style English rather than technical words. This way you can make it more obvious to the user what the buttons do.

In terms of UI recommendation I think a traffic light indicator for those who aren't colour blind when combined with a descriptive sentence should do the job. See demo below:

http://jsfiddle.net/tjharrop/BM66H/

share|improve this answer
I like the use of colors to signal states. To solve the first-time user issue, both states and colors would likely need to be displayed at the same time. Red is likely too strong for unchecked in this case; perhaps gray. – Kris Braun Aug 1 '12 at 12:56
Looking at your jsFiddle, it sounds like you're advocating being more verbose. I'm not sure -- for such a central and repeated UI component, the cognitive load of parsing a whole sentence is something I'd like to avoid. I'm hoping the sum of minimal labeling and visual cues can communicate everything in a blink. – Kris Braun Aug 1 '12 at 12:58
Yeah you raise a very good point - I don't really pay much attention to that though - I mean, we're walking bytes here! But I see your point; it builds up system-wide. – TJH Aug 1 '12 at 13:27
up vote 1 down vote

Add another inverted "selectable" :-)

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
Yes, I considered something like this. But leaving the box unchecked doesn't imply something as strong as "I'm not in" -- there will be a separate button to leave/mute the discussion. Conceptually, there are three states: in, interested and out. The user is by default in the interested state and the call to action is to move to the "in" state. – Kris Braun Aug 1 '12 at 12:37
Of course, you're suggestion could be applied using "I'm interested" as the second option. I'd want to make it much less prominent. Vertical space might become an issue, but it has potential. – Kris Braun Aug 1 '12 at 12:45
OK. But you're talking about various issues here. 1) You want to add some button-ish action element. 2) You want to inform the user about the current state. 3) You actually have 3 states to worry about. It might be wise to consider these separately, and don't mix them all together in a single UI-control. – Jørn E. Angeltveit Aug 1 '12 at 12:52
Yes, I've already decided to split out action to mute/delete the event to elsewhere, making it less prominent, since it's not as common or desired. So my main challenge is how to begin in the "interested" state and make it clear action is required to move to the "in" state. – Kris Braun Aug 1 '12 at 13:01

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.