Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Combining two separate toggle buttons (follow/unfollow + another for whether that "follow" is public/private) seems like an elegant solution to the spacing and aesthetic problems of having two buttons.

I've never seen this before, so I'm either innovating or pushing my users off a cliff.

Will the small learning curve that's not perfectly intuitive be worth the benefits?

Does this seem easy enough for users to understand?

bothsider.com "three toggle" button

share|improve this question
1  
Sometimes pushing your users off a cliff is innovative. More so in paragliding than web development though... –  aslum Jul 19 '13 at 13:49
    
aslum, even if this particular idea doesn't work well enough, how else can you innovate? –  Mark Gavagan Jul 20 '13 at 15:48
    
I'm all for innovation, I just don't generally want to be the one pushed off the cliff the first time. –  aslum Jul 21 '13 at 3:17
    
Hi aslum. Would you please add a bit more to your comment? I'm interested to learn more about your thinking. Thank you! –  Mark Gavagan Jul 21 '13 at 15:45
    
That looks like a dropdown to me, just without the dropping (and the possibility to go backwards). –  Ulrich Schwarz Jul 22 '13 at 15:18

5 Answers 5

What about adding a tooltip that appears one time after the first instance of a user clicking the "follow" button, advising of how the "three toggle" button works?

For example*:

This is now on the Zurb Foundation's "Joyride" tour for new users

*This is now on our "tour" for new users (thanks to Zurb Foundation's "Joyride" - http://zurb.com/playground/jquery-joyride-feature-tour-plugin)

share|improve this answer

How about something like this solution?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The idea is that your simple, single Follow button will change into a segmented button when it you are already in following mode. Clicking on the main part of the button will toggle if you follow at all or not, but in following mode, you can also click on the second segment of the button that will toggle the privacy mode. I do like the feature that the text changes from Following to Unfollow on hover, though you should consider that with increased use of touch devices, hover is not available everywhere.

I think the bottom arrow from Follow to Following publicly is something to think about. I think I would expect that to work if I just (by mistake?) clicked the main button area in public Following mode, so I can easily correct my mistake. But I would also expect that by default, following would be private. So, maybe you should only return to the public Following state if your just came from there, and not if it was longer ago. Say, for as long as you're on the page or something like that.

share|improve this answer
    
thanks for an interesting idea. I'm interested to see what others think of this. –  Mark Gavagan Jun 6 '13 at 11:35

The following is my solution. Using the regular follow and following button, add an additional icon (doesn't have to be an eye) to distinguish whether the 'follow' is private or public.

A button-like object should not have three states.

example

Updated

Another solution I thought of was a slider-like function: example2

When the user has it selected to public or private, the label at the top should change to 'Following' instead of just 'Follow' (Just thought of that now) ..

You could also create a dial (circular)... so 0 is neutral state, then follow public, and follow private.... though I think that the horizontal view is easier to design around.

share|improve this answer
    
Thanks for your answer rubysoho. Do you mean universally never under any circumstances when you write "A button-like object should not have three states" ? –  Mark Gavagan Jun 4 '13 at 20:47
1  
+1 for sketching. I'd love to see more sketches in answers. –  JohnGB Jun 5 '13 at 0:40
1  
@MarkGavagan In the real world, for any button/switch like object, there is only two states. It has been engrained since we've ever seen the first button, so my answer is yes to your question. Though I was thinking last night and I thought of another solution. I will repost below. –  rubysoho Jun 5 '13 at 15:54
4  
I agree. I have to question, how does one know what the third state is...or even that one exists? And if a 3rd state exists, could there be a 4th, 5th or 6th? The cognitive load in cycling through a button and counting the number of states would be extremely high because the user has to keep track of the number of states in addition to what each state is and where it falls in the sequence. –  wootcat Jun 5 '13 at 16:45
1  
@MarkGavagan the only instance I can think of when it's okay for a button to have 3 states is when pressing the button once affects only the next action, and pressing it twice affects all following actions until it is turned off. Examples of this would be Shift/Caps-Lock on mobile phones, or selecting tools in Omnigraffle. –  Daniel Cortes Jun 5 '13 at 17:12

Multiple modes in UI are bad. So don't strive to place everything in one control. My proposition is on the image. Follow button opens dialog where user could choose an option. You can place some hints and explanations inside so everything will be clear for user.

Follow interaction

You should also visualize current following mode. It could be appropriate icon on the Follow button.

share|improve this answer

Both of the solutions you describe have great potential for confusion. Using a simple push button as a toggle is problematic (I know twitter gets away with it, nevertheless...) but a 3 state toggling push button is extremely confusing. And of course on touch UIs the hover change won't be available.

The most clear and easiest to understand is with 2 groups of 2 radio buttons or 1 group of 2 checkboxes:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The 2 check boxes has enough info to be complete, but I might use the 2 groups of 2 radio buttons because it has extra (redundant) info which makes it more clear.

This extra stuff might seem to be not very elegant, but it's really necessary. A certain amount of info is required (an amount definitely lacking in a 3 state button) and it is the challenge of the designer to make that info (or inputs) fit well.

share|improve this answer

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.