Im trying to integrate an online / offline User Interface element in my application ( web app) I have some trouble getting it matches with the other user interface elements, and wonder what you guys here think of it - and in best practice could recommend any existing status online/offline user interface components.

State 1: default status online
State 2: on click change to online/offline

enter image description here

Clicking the up and down you just gets popup with the 2 options red for offline , green for online.

  • I seek for other ways of changing and displaying online/offline to get a better idea what other options I might have
  • If you are satisfied with a response, would you Accept it?
    – msanford
    Commented Oct 20, 2014 at 22:09

2 Answers 2


I would draw your attention to an accessibility concern with using colour. To cite WCAG 2.0:

1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)

I would suggest, then, using a combination of colour and imagery, for example, as these Adium chat status icon packs do (or at least in that spirit). So, perhaps a circle with an inscribed cross for offline.

Reinforcing visual information is almost never a bad thing, anyway.

EDIT: Inline example, taken from the above web site: Adium chat status icons


I think that the colored dot is a good, recognizable indicator of status but I would suggest changing the offline indicator to a grey or dark dot rather than red. In applications like gchat (and other IM interfaces) a red dot only means unavailable, not offline.

  • 2
    Please don't ever suggest that an interface use only color to indicate a difference in state, even if other people do so. There are many people who do no perceive color in the same way as others and there is nothing more disenchanting than not being able to use something as well as your neighbor, regardless of the reason.
    – cdeszaq
    Commented Mar 9, 2012 at 14:01

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.