Best way to present toggles for sharing on other social networks?

Question

I'm trying to come up with a way to display toggles for whether you want to share your status on Facebook, Twitter or Tumblr. This is intended for a web application.

I looked at a couple of other sites to see how they do it:

Foursquare's iPhone app has a nifty little icon that disables when clicked and enables when clicked again.

Hoot Suite displays avatars from all my social networks and then lets me click on them to enable or disable sharing. This is clear enough to use, but takes up too much space to be implemented in my design.

LinkedIn uses modified icons for the social networks. So, instead of using the regular rounded-corners square icons, it uses a blue bird for twitter for example and puts a checkbox next to it,

This is a mock profile design that I'm working on. This website allows users to link to different social networks and then displays those in the form of icons on the user's profile. So say, if I visit someone's profile, I can click on the Facebook icon there to be taken to their Facebook profile.

I'm also trying to implement the ability to share or not share using these social networks. I used to have checkboxes there, with text like "Share on Facebook" right next to it. But that would be too crowded if I want to put in 3 options.

If I use the square icons for toggling, they will look too similar to the icons next to the avatar and confuse the users, hence the circular icons idea. But is that still too confusing? Is there a better way to implement this that will be more intuitive?

Answer 1

You might have been ok with the checkboxes but you don't need long labels next to each one - maybe just one label that applies to all - plus tooltips over the logos (and over the word share for good measure!).

For example, the image below is a mockup of one way of doing it.

Answer 2

Those are two great examples. I like Foursquare's execution (generally speaking), but it's not very intuitive. Many users are unaware that clicking the "Friends" icon mutes the check in altogether.

HootSuite's treatment is simple and extremely intuitive. The error message that displays when no networks are checked is also quite useful and is not condescending. If you can use the LinkedIn method (size-wise), but the HootSuite or LinkedIn functionality, I think you'll have a winner.

Considering your spacing challenge and attempting to avoid confusion, I'm reminded of some iPad executions (can't remember the apps off-hand) where the selected network(s) display differently when selected. It's like the last image you presented. Once someone clicks on the icon, it gives visual feedback that it's active and supports learnability efforts. I'm thinking this can resolve the confusion and spacing issues.

When I remember the apps I'm referring to, I'll let you know.

I hope this helps.

Answer 3

I think the way Untappd does it when checking into a beer is best. Completely clear.