What's the problem?

The watch icon is very confusing. I think everybody agrees because the icon is associated to a status - but it is an action in fact. So people are not sure if you click do you watch or stop watching.

So we need to find either:

• icons that are completely different from the actual ones ( the icons must have a transparent background to satisfy dark or white background) -> Icons. There are 4 icons (watch, watch structure) - perhaps more...
• organize the icons in a way it is evident it is a status or an action.

There are actually two aspects of the design for those icons, which are somewhat independant of one another: Interaction Design and Graphical Design. They are discussed below.

Interaction Design

The main issue here is:

• Should the icon represent the State of the watches, or the Action that will happen when you click on it.
• What should happen when you click on the icon.

I (alain_desilets) feel pretty confident about the following answers (especially the first of the two):

• The icon should represent the State of the watches
• When you click on the icon, you should get a popup menu with the two options: Turn watches OFF, Turn watches ON, with the current option being selected by default. Also, the popup should repeat the icons, and the icons should represent the state you will end up in if you click on it. marclaporte: +1 because representing the state is not easy.

The reason I am confident in those answers are that:

• This is how state icons are implemented in applications like Skype and Yahoo (see below in this page).
• When I did a small usability test on that, users were very consistant in their interpretation of the icons as a state (i.e. they were unanimous as to what state it referred to), whereas they were split 50-50 as to the action that would take place if they clicked on the icon (i.e., half said it would turn them off, and half said it would turn them on). This trend was the same, no matter what icon was presented to the subject (there were about 6 variants that were presented).

I(sylvieg) thinks it is bad idea to put a status icon in the middle of action icons

• alain_desilets: Take a look at the GoogleDoc example below. They mix state icons with popupmenu icons, and action icons. And Google is renowned for the quality of their User Interaction design.

I suggest we vote on this proposal here:

Do you agree with that proposal:

AD +1
SG -1

Graphical Design

The other aspect, is what the icons should actually look like. The graphical design itself splits in three considerations.

What should be the basic metaphor used for the icons. An eye, a surveillance camera, a Bell, eyeglasses, ML: it could be an envelope to convey that an email alert will be sent...
?

Please vote on your choices:

• Eye: AD +1 (familiar, recognizable even at small scale, and does convey that it has something to do with watches)SG-1 except if the eye is gray and an eye is more like a status than a tool
• Surveillance camera: AD +1 (but ONLY if we can design it so people recognize it as being a camera)
• Bell: AD -1 (evokes more something with multimedia or sounds in my mind)
• Eye glasses: AD +1

How should this basic metaphor be modified to generate the two icons:

• Greyed out or not: AD -1 (grey looks like it's inactive, as in YOU CAN'T CLICK ON THIS BUTTON, AND IF YOU DO, NOTHING WILL HAPPEN AT ALL) SG: +1 exactly
  • ML: How about greyed out but with a little arrow to indicate there are choices, and those choices would be like the status in Skype?
    • AD: Can someone provide an example taken from a mainstream product, where greying out is used to convey the sense of an item being "off", but still clickable. In general, there is a strong convention of grey meaning that an item is currently non-clickable. I think it's dangerous to deviate from that convention.
      • ML: Skype Status is greyed out and clickable
• "Annotated" with something that conveys status
  • Green checkmark (on): AD +1 (commonly used to signal "on", or "enabled")
  • Green plus sign (on): AD -1 (good for signaling addition of something to a list, but this is about turning on or off).
  • Do not enter sign (off): AD +1
  • White X in red full circle (off): AD +1
  • Minus sign (off): AD -1 (good for signaling removal of something from a list, but this is about turning on or off).
  • Outline around the icon to signal that it's "on" (AD +10 ;-))
  • "closed" or "off" version of base metaphor (ex: closed eye vs opened eye): AD +1

Proposed alternatives

Please list your proposal there:

luci

• here's couple of suggestions using a "surveillance" watch cam icon (made from scratch):
  
  • alain_desilets: I like the surveillance camera metaphor, but when I first looked at the icons, I couldn't make out what the oblique rectangle was. It's only after reading your text that I could, sort of see that it was a surveillance camera. but I still had to work hard to see it. I'm not saying it's a bad idea... if we can design the visuals so that it's clearer that it's a camera, it might be a good one.
  
  luci: is this any better recognizable cam shape ?
  

sylvieg

• replace monitor this page: with and put the + and - icon
• use for 'monitor this page' , and stop monitoring
  • alain_desilets: The glasses icons is pretty clear, I think. But I am not sure about the + and - signs. It's not a convention that I have seen used outside of Tiki. Also, it has a strong connotation of "action", and based on my usability tests, I think it's best to use the visuals to convey state (because when people interpret the icon in terms of state, they are conistent, but not when they interpret it in terms of action). Also, regarding the use of grey to convey the off state, I am ambivalent on it. On the one hand, I have seen that being used in different producct, but on the other hand, when a menu or button is greyed out it usueally means (at leas on windows) that this object is currently non clickable. I think the right way to use grey is to make the status part of the icon turn grey, but not the whole thing. For example, have an eye or glasses icon with a small green check mark which turns grey when watches are off. However, when I tried that variant in my test, it didn't fare well. The 7 people who responded to the question asking what state it refered to thought watches were "on". And of the four who asnwered the question about what would happen if you clicked on it, half said turn on, and half said turn off (that 50-50 split was pretty consistent across all icons, when I asked people what action would happen).

alain_desilets

Here are some variants that are based on the eye icon with state annotation in the bottom right.

Here is a variant with the open/closed eye (note that the idea of a closed eye was suggested by many of the subjects in Alain's usability test):

How about this:

• I see very clear advantages to this one, and so far, it's my preferred alternative.
  • In all the sites and products I have looked at, this is how binary state icons are handled.
  • Note: It can be made to work against dark page backgrounds by putting an opaque, light yellow background in the "on" version of the icon (on top of adding the black outline). Haven't done here, cause no matter how I try, when I try change the background colour to yellow, it turns out flesh colour (must be something in the PNG file that I don't understand... graphical design is not my forte).
  • The eye keep its current meaning of "watches are off, click icon to turn them on".
  • We are just replacing the highly idiosyncratic eye with red X by a standard convention used in GoogleDocs, MS-Word, OpenOffice, and many others to indicate that an icon is in the "on" or "selected", or "active" state.
  • We use almost no realestate to indicate the "on" state (just a border), so we have more room to add other kinds of annotations (ex: small group icon to denote group watches).

marclaporte

• The confusion is because we have the icon which is a state and an action. Is this really necessary. How about a checkbox next to an eye (on mouse-over of either, you have a help message)?

So whole zone would be clickable to set/unset. If we get fancy, it could be an AJAX refresh.

• SG: I like this one... and what about the be sure to put the watch not on the same line that the actions

Click to monitor: Click to stop to monitor:

• AD: I like it too, except for two things:
  • It's highly non-standard (haven't seen this convention used elsewhere)
  • It probably suffers from the same issue as the eye with outline, in that if there is a dark background, then you won't see the outline around both items, and you won't be able to tell if the check mark is: tied to the eye, tied to the icon on its left, or an item by itself.
  • For me, it's a choice between the checkbox-eye combo, and the eye-with-and-without-outline one, although I have a preference for the eye-with-and-without-outline one.

• AD: I actually tried this one with 12 subjects or so, and it was one of the options that fared the worst. People didn't know what to make of the empty checkbox at the bottom right. In fact, they didn't recognize it as an empty checkbox at all.

I think this will help a lot. Can we do now?

Rick wrote: "Can't we reuse the same implementation that the File Gallery has? When you list galleries, the Action icon is a pop-up/droplist menu."

NelsonKo

Not sure about this one. I get a lot of complains as well. If it is
next to something like an edit button, then it makes sense that it is
an action (but there are a lot of people who prefer it as status). I
suggest that we use a combination icon where both the eye,and the
"cancel" eye is seen side by side, and there is a highlighted green
box around the current status.

Xavi

or an eye with a radio button:

"eye icon:
( ) y / ( ) n"

just some quick thought about it

Ricks99

As I suggested earlier, I think a simple combo/droplist is the way to go:

In the first example, the user is currently watching the page (because the eye icon is in color). The only possible option is to STOP watching the page (noted by the red NO sign).

In the second example, the user is not watching the page (because the eye is gray). The only possible option is to START watching the page (noted by the green check).

• alain:I could ALMOST go with the picklist as you propose above, but with one important modification. It seems that you propose that the icon in the toolbar should always be the same variant (the eye with a down arrow), and that only the two variants displayed in the popup window should have state information. I haven't seen that in any of the products I have looked at. In all the products I have looked at, the icon in the toolbar represents the current state. When you click on it, you see icons for the various states you might want to get to. With what you propose, the user can't tell what state the watches are in without clicking on it and opening the popup. I think that's a flaw, and it seems supported by the fact that mainstream products don't do it that way.
• alain: With that modification, this would be my second preferred choice after the option of having an eye with or without a black outline and yellow background.
  • (rick) The problem with using color is that it won't work will all themes. It works in windows apps because the toolbar is a standard color.
    • Alain: Having both a black border and an opaque light yellow background for the "on" version of the icon garantees that it will work against all page backgrounds. The dark outline will work for light page backgrounds, and the light yellow opaque icon background will work for light coloured page background.
• alain:I would avoid using the second drop-list (the one where grey is used to convey the "off" state). In windows, when an icon or button is grey, it almost always means that this icon or button cannot be clicked on (or that if you click on it, nothing will happen).
• alain:The reason why this drop down list is only my second choice, is that I have not seen this convention used for binary states. I have seen it used a lot for N>2 states, but for binary states, the commonly used convention seems to have the icon look either "selected" or "not selected", by surrounding it with a black outline, and changing the background colour a bit.

(rick)
Yes, it is a binary state, but we're trying to do 2 different things:

• Use an icon for status (i.e., on / off)
• Use a button for function (i.e., change status).
  • Alain: I agree that the icon needs to convey these two things. My point is that the way that this is dealt with in all products I have seen so far (for the case of binary options) is to change the background and the border of the icon to make it look "on". The popup menu is used for cases where the icon can have more than 2 states. If you don't agree with me, please provide examples of mainstream products that us a popup for a binary state. Let's argue based on evidence as much as possible, not on personal opinion.

Good point about the gray icon. How about:

• Alain: In my little usability test (12 subjects or so), I tried the variant with a green versus a grey checkmark. Like you, I expected this to work really well. But to my surprise, the grey checkbox was one of the worst. People didn't know what it meant. On the other hand, the green checkmakr and the do not enter sign were pretty clear (and I got the idea of the do not enter sign from you btw).
• luci: it looks more complicated, why not something like this:
  watch-unwatch.png or watch-unwatch-nogray.png (better no gray icons as they indicate disabled stuff)
  • (alain): Excellent Luci! When looking at Rick's proposals above, I was assuming that in the popup menu, the icons would be accompanied by text that provides more explanation. Maybe that's what you had in mind Rick, but it wasn't explicit from your pictures. In all the producst I have seen, the popup works that way, i.e. you the menu gives you icons and a textual explanation.
    • I (rick) disagree. If we're going to add text to the icon (which implies that the icon is not clear), then let's go with the #Much_Simpler_Solution and forget the icon issue completely.
      • (alain): Rick, are you saying that the UI specialists at Yahoo and Skype are doing it wrong? Their popup menus for the online status have both icons and text.
      • luci: IMHO the main issue and the big problem with the watch icon is the misunderstanding: it is not a tool icon but a status icon and it will be never clear because of that... that is why other apps use the "clarification" text next to the status icons... without it, the multiple status options wouldn't be understandable using just an icon. as i see it, dropdown is the best option for this multiple watch status change and the icon is just additional goodie (look and feel eye candy) which helps a bit the usability and UI but is not mandatory...
        • (alain) I agree with you, and that's what the UI specialists at Yahoo and Skype seem to think too.
  • (alain): However... it's important that the texts for the two options be consistent with each other. For example, you have one proposal where the two options say: "watching" and "unwatch". The first caption says "You are currently watching", and the second one says "click here to stop watching". I think it would be better if the two captions said something like this: "watch", "don't watch", and if the one of the two which is currently active was selected by default. This is how it's done in mainstream products (I hate to harp on this point, but instead off trying to guess the correct behaviour, we should look at how it's done by organisations that have UI specialists at their disposal).
  • (alain): Oh, and it's important that the captions in the popups describe the state that you will end up with when you click on that choice. That seems to contradict what I have been saying since the beginning, i.e. the icon should reflect the current state, not the state you get to when you click on the button. But that's for the icon that you click on to open the popup. The icons that are displayed in the popup menu should be the opposite, i.e. they should tell you the state you will end up with. If you think that this is wrong and inconsistent, I would again urge you to look at how it's done in mainstream products. That's exactly how it's done everywhere.

The icon now clearly shows status: = on; = off;

• Alain: No they don't. In my usability test, most people didn't have a clue what the red X over the eye meant. I have never EVER seen that convention used anywhere. Some people said that they couldn't even see that it was an eye behind the red X.
  • +1 what Alain says... the red cross doesn't clearly show anything — luci

The only (major?) drawback I see is that this is directly opposite of the current usage.
Additionally, the dropbox could be used to also hold the category watch buttons.

• Alain: Rick also suggested that we consolidate the icons for different types of watches (group, structure, personnal). I moved discussion about this to the end of the page (cause it's another kettel of fish altogehter, and very complex I think): #Consolidation_of_icons_for_different_kinds_of_watches.

daniam

Here is my suggestion.

I beleive that this icon should be unique and not generic like eveyone is trying to make it look like. We should think outside the box for this problem.

I've drawned samples of what this "unique" icon should or could look like:

Smaller, off course, this would be the permanent look of the icon:
tiki-browse_image.php?imageId=106
and
tiki-browse_image.php?imageId=108

Please remember that this icon is probably the one that is most clicked on when a user starts using TikiWiki. It's not about re-inventing the wheel, it's about making users understand that this "click to monitor" buton icon is unique to Tiki (even if it may not!)

Daniel.

Much Simpler Solution

(rick): Of course, instead of all these icons and buttons, we could simply move the WATCH stuff to the wiki action bar (i.e., at the bottom of the page) and simply use a text button Watch Page or Stop Watching Page.

I, for one, have never fully under stood why:

• Some options use an icon at the top of the page (like PRINT, SAVE TO NOTEPAD, etc.)
• Some options use a text button at the bottom of the page (like REMOVE, RENAME, PERMS, etc.)
• Some options use both (like at the top and EDIT at the bottom).
• (alain): Very good point rick! I was wondering about that too. We could use the Wikipedia approach and have a Watch/Unwatch button. IO could go with that too. That would be my third choice at this point.
  • (alain): Note that even if we take that route, I would like to bring this discussion about state icons to a conclusion. There may be cases in the future where we NEED to use an icon as opposed to a textual button for a state, and I don't want us to have to go through that whole discussion again. It seems we are pretty close to an agreement on what the right thing to do is in those cases.
• (alain) Here's an interesting reference on when to use icons: http://www.uidesignguide.com/2008/04/02/when-should-i-use-icons-and-when-shouldnt-i/. Quoting from it:
  • When To Use Icons
    • The functions you are representing are common and existing mental models. Icons that fall in to this category include print, save, pdf etc.. Pretty much everyone on the web can identify a print icon and understands that something is going to get printed when clicked.
    • If space is tight in your application and future implementations may make this problem worse. In this case you really need to look at the application as a whole (we will be doing this in later examples) and identify similar functions idea for icons.
    • If using an icon would help spatially an visually withlearn ability. An example of this would be if there are many secondaryfunctions in your application in the same area. In this instance too muchtext even if the text clearly states the function can hinder the visual recognition.
  • Studies have proven humans can recognize pictures faster then text.
  • So, I think it makes sense to use an icon for Edit, Print, cause they are universal. Having a redundant Edit button is OK. I think. For watches, I think the eye is pretty good at conveying what it means. But for things like History, how would you depict that graphicall? In that case, a textual button probably makes more sense.
  • That said, maybe the buttons should be at the top of the page (i.e. closer to the icons), instead of at the bottom. But that's a whole new debate ;-).

How it's done in other sites or applications

On Wikipedia

They don't use icons for watches. Instead, it's just a textual label "Watch" / "Unwatch".

On Skype

Here is how it's done in Skype (focus on the green checkmark in the lower left corner).

click on that icon and you get:

In summary:

• The graphical design of the icon conveys informaation about the status.
• When you click on it, it opens a poppup menu with the various possible states. Interestingly enough, at that point, the icons in the menu convey the state that you will get to when you click on it (in other words, it's now conveying information about the action).
• Yet, I have never been confused by that dialog.

(rick)
This seems identical to my drop-list proposal. The icon represents current status, with the items in the drop list representing possible actions.

• Alain: OK, I had misunderstood your proposal. It looked like you were proposing that the icon in the toolbar should always appear the same (eye with a down arrow) and that the "on" and "off" variants of the icon should only be displayed in the pop up menu that appears when you click on the icon. So, it sounds like we are in agreement. In that configuration the picklist is my second best favorite for a binary state (with the dark outline and light background being my first). BTW: The picklist as you propose is my FIRST choice for the case of an icon with N > 2 states.

On Yahoo

Here is an example of how it's done in Yahoo(focus on the happy face at the top).

click on that icon and you get:

In summary:

• This is pretty much like the Skype example, except that the base icons for the various states have little in common (at least for online and busy). Icon conveys state information, you click on it and you get a menu, and at that point, icons convey action information.

On GoogleDocs

Here is how the enabling and disabling the spell checker is done on GoogleDocs

In summary:

• Icons indicate state (spell check is on if the icon is surrounded by an outline, which is a common way of conveying the sense of being "active"). Actually, this is a nice, universal convention which could work with any icon which can be in either on or off states!
• No popup to disambiguate the action.

On Windows Media Player

This one is interesting, because on the same toolbar, it mixes several status icons (ex: shuffle icon) which are state based, with one (the play button) which is action based.

This may sound like a bad design, but it's consistent with something I read, which said that, if the system already gives you clear cues of its state, then you should have the icon indicate the action. In the case of the play button, you know that the system is in a play state, because you see the video moving or your hear the song play. So that icon is action based. But for the shuffle mode, you don't know the state until the end of the current track. So that one is status based.

ML: on a toolbar, it's more obvious to see what is active or not because you have something to compare with. Our watch icon could be alone or next to the print icon...

AD: Marc, you mean that if all you see is an eye with a border around it, you can't tell that it's selected, because there are not other borderless icons to tell you that with a border is "special"? I think that's a good point. But what are the chances that the watch icon will be all by iself?

ML: not that much. Most of the time, it's watch and edit, and perhaps print.

In MS-Word

Here is how MS-Word deals with that issue in the case of the Track Changes icon

Track changes off:

Track changes on:

In Summary:

• Very similar to the example from Google Docs and Windows Media Player, ie:
  • Icon almost the same
  • "Enabled" state is indicated by having a black outline AND a light yellow background.
  • Note: The light yellow background would address the issue raised by Sylvie regarding situations where the pages's background is already dark. In that situation, the dark outline would not show, but the light yellow background would still show. In cases where the page background is already light yellow, then the black outline would show.

Careful not to reinvent the wheel

I (Alain Désilets) think we should be careful not to reinvent the wheel. Instead, we should look at how this issue of state/action icons is addressed in mainstream sites and products. See the How it's done in other sites section for an analysis of Yahoo,
GoogleDocs, Skype, Windows Media Player and MS Word.

As far as I know, none of the people involved in this discussion (including me) are specialised in UI design, so we should not kid ourselves and think that our own pet solutions to this issues will be better than what trained UI specialists have chosen to use at Yahoo, Google, Skype or Microsoft. For sure, when we are faced with a UI issue that is unique to Tiki, we should not be afraid to innovate and invent our own solutions, but this is not the case here.

When I look at the the How it's done in other sites section, I see some clear common trends.

Trend1: When an icon can only be used to change a state (ex: spell-checker on/off, user online/busy/away), then the icon displayed in the toolbar always represents the current state, NOT the state you will end up in when you click on the icon. (Note: in case where clicking on an icon opens a popup menu, the icons in the popup then represent the state you will end up with. But the icon that you clicked to open the popup still represented the state in which the application was when you clicked on the button).

Trend2: In all cases where the icon represents a binary state, the UI conveys everything it needs to convey within the space of a single icon. No need for checkbox-icon combo, or two icons side by side, or radio buttons-icon combos.

Trend3: When the icon is binary, i.e. it can have only two states, then a single icon is displayed in one of two variants. The two variants are very similar, except that the "on/active/selected" variant is made to look "highlighted", by surrounding it with a black outline and/or, making its colours more "vibrant", and/or having a slightly different background colour.

Trend4: When the icon can have more than 2 states, the most common solution is to display a single icon whose appearance varies with the state. The different variants are either completely different from one another (ex: smiley face versus do not enter sign), or are almost the same, except for a small annotation in the lower right corner (ex: green checkmark, a red X, etc). When you click on the icon, a popup menu is opened listing all possible states. This solution is used in Skype and Yahoo for the user's online state. A less common situation for the N>2 state situation, is to have completely different icons displayed side by side, where the active one is highlighted (again, by surrounding it with a black outline, and/or making its colours more "vibrant", and/or having a slightly different background colour). You can see this in the GoogleDocs example, for the alignment style. Note however that this last approach is never used when the icon has only 2 states.

Based on the above, I say that for the watches, we should go for the solution described in Trend3, because we are dealing with a binary state. If we come across non-binary states in tiki, then I would go either one of the solutiions described in Trend4 (I prefer the popup menu myself, cause it takes less real-estate).

Regarding the solution described in Trend3, sylvieg pointed out that a dark outline will not work on a dark page background, which is a good point. But we can deal with that in the same way as in the MS-Word example, i.e. the "on/active/selected" state would have both a dark outline, and a light yellow background. The light yellow background is guaranteed to work against dark page backgrounds, and the dark outline is guaranteed to work against a light yellow page background.

If I have failed to convince you that we should stick to a convention that is already used by other mainstream products, and if you insist on creating our own idiosyncratic UI convention, then my choice would be the eye-and-checkbox combo proposed by Marc. It seems to be the clearest among all the non-standard solutions that have been proposed here. But this is a distant second choice for me, and i still think it would be a mistake to do it.

Consolidation of icons for different kinds of watches

Rick propose that we could consolidate different types of watches in a single icon.

• I (rick) meant that the watch/unwatch is not necessarily a binary option. Potentially there are lots of different ways to "watch" a page. Consider these three samples:

In the first sample I am currently watching the page via:

• Specific page watch
• Structure watch

In the second sample I am currently watching the page via:

• Structure watch
• Group watch

In the third sample I am not watching the page.

The use of check boxes with droplists is a very common UI technique. For example, FF uses it to toggle the Status Bar (View > Status Bar) on and off.

• (rick) If we're going to fix it, we might as well fix it. The point is, this is not a binary situation. This is an issue for all watch icons. Currently, you could have as many as 3 different WATCH icons (plus text notification if you're watching the page via a category. This is a UI mess. As an end-user I care only:
  Am I "watching" the page? That is, will I get notification if the page changes? Either yes or no. In my 3-sample, above, there are only two possible icons to show status: the eye icon (which means yes, I am watching the page) or the eye with red "NO" mark (which means no, I am not watching the page). The drop list contains the options of why am I watching the page? Is it because I am watching the page directly, because it is part of a structure, etc. So in alain's question: Later on, someone else sets a group watch for group X on that page, and I happen to be a member of X. Which state should the icon display? The "state" is still that you're watching it (i.e., the EYE icon. The only thing that would change, the droplist would have a check next to the Group watch (in addition to the Page watch).

• (alain) I like the idea of consolidating the various kinds of watches somehow, cause it's true that it's a bit hard to understand right now. However, I doubt that we will be able to convey all the relevant info about all the kinds of watches in a single icon. Here's why.
  • (alain) It seems to me that there are two main user perspectives w.r.t. to watches for a page. I will call them the OrdinaryUser (who cannot set group watches) and Admin (who can set group watches) perspectives. As an OrdinaryUser, what I want to know, when looking at a page, is "Am I watching this page or not, and how can I change that?". As an Admin, I will care about this too (to the extent that an Admin is also an OrdinaryUser), but I will also care about "Is there a group that is watching thisem page or not, and how can I change that?"
  • (alain) Note that for now, I am making abstraction of whether I, or a group, is watching the page directly, or indirectly (through a structure or category watch). I'll get to that later.
  • (alain) If we are to use a single icon, then as an Admin, this icon would have to communicate both those types of information to me. There can be 4 states:
    • State 1: I am watching the page, and so are some groups
    • State 2: I am watching the page, but NO group is watching it
    • State 3: I am NOT watching page, but some group (of which I am not part of) is watching it.
    • State 4: I am NOT watching the page, and neither is any group
  • (alain) I think these state descriptions are not very intuitive, even when spelled out textually, because they are in fact affecting two orthogonal dimensions. If they are difficult to describe textually, they will be even harder to describe iconically.
  • (alain) So, I think we still need at least two icons. One for Personal watches, and one for Group watches. For one thing, if I am an Ordinary user and don't have permission to set group watches (probably 95% of the users of a given site), then there is no point in making the icons overly complicated and hard to understand.
  • (alain) On the other hand, I don't think we need separate icons for Structure or Category watches (don't know if there is such a thing as a category watch actually). Let's look at the Personal watch icon first. If the personal watch icon is on, it means that I am watching this page, either directly (i.e. a Personal watch on this specific page), or indirectly (ex: through a personal watch on a structure, or a group watch on this particular page, or even a group watch on a structure!). As Rick has pointed out earlier, as an Ordinary user, I probably don't care about those distinctions. All I want to know is if I am watching this page or not, and how to change that.
  • (alain) If the Personal watch icon is in the "off" state and I click on it, and then click on the "on" state icon in the popup, then it's easy. A personal watch is added for me on this particular page. That's easy.
  • (alain) If the Personal watch is in the "on" state and I click on it, and then click on the "off" state in the popup, then it's more complicated, because it depends on the exact reasons why I was watching this particular page. In the case where the icon was "on" because of a personal watch on that specific page, I think the system should just remove that personal watch. But if the user was watching the page throgh one or more indirect ways, then the system should displays the various ways in which he is watching that page, and allow him to turn some or all of them off. If at the end of this the result is that there are no direct or indirect watches for that user on that page, then the icon would go into a "off" state. But if there was at least one way in which the user was still watching the page, then the icon would remain in the "on" state. The dialog for changing the Personal watches could look something like this:

• (alain) Now, let's look at the Group watch icon. Similarly to the Personal watch icon, it can have only two states "on", meaning that at least one group is watching the page, and "off", meaning that no group is watching the page.
• (alain) If the Group watch icon is in the "off" state, then when I click on it, it should open a dialog for adding group watches to this page. That's easy.
• (alain) If the Group watch icon is in the "on" state, then it's more complicated, because a group may be watching it directly, or indirectly through a structure. Again here, the system should open a dialog showing all the ways in which different groups are watching this page, and making it possible to turn some of them off. If at the end of all this, it turns out that no group is watching this page (either directly or indrectly through a structure), then the icon would become in the "off" state. But if there was still at least one group watching the page (directly or indirectly), then it would remain in the "on" state. The dialog for changing group watches could look something like this:

Related threads

• http://old.nabble.com/The-proverbial-watch-icon-to26212407.html#a26212407
• http://old.nabble.com/Icon-for-monitor-versus-icon-for-status-or-action-to17282874.html#a17315605

Related links

• On/Off buttons in jQuery: http://widowmaker.kiev.ua/checkbox/
• http://www.bootstrap-switch.org/
• https://github.com/twbs/bootstrap/issues/1935#issuecomment-10879210
• http://bootsnipp.com/snippets/featured/sexy-radio-butons

• WatchIcon