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

  • 1
    Sometimes pushing your users off a cliff is innovative. More so in paragliding than web development though...
    – aslum
    Jul 19, 2013 at 13:49
  • aslum, even if this particular idea doesn't work well enough, how else can you innovate? Jul 20, 2013 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, 2013 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! Jul 21, 2013 at 15:45
  • 1
    That looks like a dropdown to me, just without the dropping (and the possibility to go backwards). Jul 22, 2013 at 15:18

5 Answers 5


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.



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.

  • 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" ? Jun 4, 2013 at 20:47
  • 1
    +1 for sketching. I'd love to see more sketches in answers.
    – JohnGB
    Jun 5, 2013 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, 2013 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, 2013 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. Jun 5, 2013 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.


How about something like this solution?


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.

  • thanks for an interesting idea. I'm interested to see what others think of this. Jun 6, 2013 at 11:35

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:


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.


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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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