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.

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 toggles
Foursquare's iPhone app has a nifty little icon that disables when clicked and enables when clicked again.

Hoot Suite social toggles
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 social toggles
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,

Social toggles mockup

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?

share|improve this question
add comment

3 Answers

up vote 1 down vote accepted

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.

enter image description here

share|improve this answer
add comment

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

share|improve this answer
3  
For those without access - how does Untappd do it? I see this screenshot but how do they show the 'to share or not' state of each network? Welcome to ux.se by the way! –  Roger Attrill Aug 16 '11 at 20:45
    
This screenshot shows the Twitter share toggle. Instead of greying it out, it's dimmed down in color imgur.com/9Xslh –  hidrees Aug 16 '11 at 21:47
1  
+1 I agree it is clear on Uptappd, but the reason there are so many down-votes on this answer is because people often leave very descriptive answers on here, and screenshots if they are necessary, as they are in this case. I have never used Untappd but after seeing it I completely agree with you. Another thing is people usually back up their answer with more explanation or references (if available). Don't get discouraged by the negative reaction to your first answer, people just have a certain expectation and way of doing things on this site and it sometimes takes people some acclimation. :) –  Matt Rockwell Aug 17 '11 at 14:18
add comment

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

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.

share|improve this answer
add comment

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.