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.

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
share|improve this question

2 Answers 2

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.

share|improve this answer
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 Mar 9 '12 at 14:01

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

share|improve this answer

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.