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.

Stack Exchange's tag popup card/thingy has a star which you can toggle between "Favorite" (gold star), "Ignored" (red cross), and "Normal" (grey star).

Favorite:
gold star before the word "favorite"

Ignored:
red X cross before the word "favorite"

Normal:
grey star before the word "favorite"

This is not intuitive at all, thanks to the grey star meaning "Normal." One would expect a 2-option toggle when clicking on it results in the star becoming gold.

What is a better way to present this?


For those who are interested for accessibility reasons, here's the HTML code:

 <span class="tm-sub-info">
  <a title="toggle this tag between favorite, ignored, and normal" class="tm-favorite-clear">★</a> 
  5 followers 
  <span class="tm-sub-links" style="float:right;"><a class="tm-se-subscription" title="subscribe for email notifications on this tag">subscribe</a> 
  <span style="color:#727272;">|</span> <a href="/feeds/tag/user-interaction" title="add this tag to your rss reader">rss</a></span>
</span>

(The anchor tag has a class that cycles through tm-favorite, tm-favorite-ignore, and tm-favorite-clear.)

share|improve this question
    
My question here is what is the difference between Not following a tag and ignoring it? Do you even need the third option in the first place? Why would I want to ignore a tag? How many people actually ignore tags in the first place? I would start there with this functionality first as it would help inform what the interaction should be. –  Chris Janssen Dec 2 '11 at 18:44
    
@ChrisJanssen Ignored tags are faded/hidden from view. Not followed are just "normal" tags (ie: not highlighted). It's like "Like," "Indifferent" and "Dislike." I, for example, hate the facebook, ror and iphone tags and I don't want to see these questions. But I am indifferent to c and c++ questions. –  NullUserException Dec 2 '11 at 18:46
1  
IMO An empty star makes much more sense than the silver star for "normal". –  Ben Brocka Dec 2 '11 at 19:17
    
I guess I am asking how that effects the list of questions. It seems to me that a list of "All Questions" should show a list of all questions, not a filtered list. It seems like this feature of "ignoring" is making up for a missing feature of a "My Feed" situation that only show questions that I am following. The style of ignore really, to me, has a diminishing return as most questions should have more than one tag, so a question that has Facebook and User Research is still going to show up because of User Research, so you really only hide those questions only tagged with Facebook. –  Chris Janssen Dec 2 '11 at 19:23
    
@BenBrocka I think the intention was that the silver star is "empty" as you stated, just someones visual design version of that. I agree that a star with a border only would better inform that state then the solid gray star. –  Chris Janssen Dec 2 '11 at 19:24
show 1 more comment

6 Answers

A dropdownlist is the way to go. (IMHO)

enter image description here

enter image description here

share|improve this answer
    
Now, thats a simple answer to the question, but I would rather discuss the look and layout for this tag-feature as a whole. How many people signs up for a newletter or rss feed? Is is more important for the user to edit the tag or find the top tag users, than it is to be able to follow the tags? I don't know the answers to these questions, but I guess that the SE-developers have some background data (and some business goals) when they design these features. –  Jørn E. Angeltveit Nov 30 '11 at 12:03
1  
They really push the subscribe feature, I'd love to know some hard data on what % actually use RRS/subscribe though. I doubt it's that many. I've also accidentally subscribed to email alerts when I meant to "follow" the tag. –  Ben Brocka Dec 2 '11 at 19:18
add comment

Ok, I see the code... well perhaps the best option is the drop list as mentioned by Jørn E. Angeltveit, an alternative more grafic pretty could be your code but the title that change after the click, something like: Default title: Click for tag it as Favorite; second title: Click for tag it as ignore; Third title: Click for tag it to normal.

Another alternative could be: two button: "Favorite" and "Ignore" and when I press, for example, "Favorite" it is substitude by a "Normal" button.

share|improve this answer
    
Thanks, Filippo! Before the system will allow you to post comments, you need 50 reputation points. It's not labelled, as far as I can tell, but you currently have 11 points. New users start out with 1, and you got +10 because I just up voted this "answer." –  Patrick McElhaney Dec 2 '11 at 18:41
    
Added descriptions and the HTML code. Hope that helps! –  Patrick McElhaney Dec 2 '11 at 19:06
    
@ Patrick McElhaney : thanks for your edit! I change my answer to a more appropiate answer! –  Filippo1980 Dec 3 '11 at 8:50
add comment

In this case I would go to Google+ aproach. You should have mute option in auxiliar dialog and visible Favorite/+1 icon. Muted tags should have subtle diferent colors and text/icon indicator. However, as a user, I prefer twitter functionality: Independent Favorite/Unfavorite button and Follow/Unfollow button.

share|improve this answer
add comment

I agree that the button looks like it should be binary on/off. Furthermore, the ignore function is completely hidden and undiscoverable, since it is hidden behind an icon that represents its complete opposite.

I propose making the star either on/off, and adding a second ignore icon that also overrides and turns the star off (if it were previously turned on).

share|improve this answer
add comment

I would go for the two toggle option with the star being the indicator for favorite and the no star option being the indicator for lack of interest .However to denote a negative connotation to the tag,I would give an alternative to completely ignore it as a separate button /icon which just marks it as ignored

Though there will still be two clicks,the affordance of what each click does would enable users to determine what the action stands for

share|improve this answer
    
It's important that the "ignore" option is to emphasize the tag, it's not like blocking a user so they disappear. It certainly makes sense as a cohesive control (plain emphasis->emphasis -> less emphasis) but the way it is presented does not help, nor does the unusual use of the term "ignore" –  Ben Brocka Dec 2 '11 at 19:41
add comment

From the two answers from Mervin and jrosell it seems the OP's contention of a tristate element is not correct. The star, representing a bistate is fine, and perhaps should not have taken an extra third avatar.

Also, as the OP says, grey star meaning "Normal" is odd, it could just be white or something.

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.