enter image description here

I have an icon that looks like a chat bubble to send a message to a user. Now, you can send a message both to an online and offline user. I'm trying to have two different icons.

Right now they are only separated by color, where the online icon is filled with green. However, I want a visual indicator that is not dependent on color.

I have considered adding a slash over the icon but then I'm afraid the users will believe that you can't send a message to a offline user. Any suggestions?

  • Does the user click on the icon itself or is there a separate button? Can you share some screenshot / wireframe to give more context?
    – Luciano
    Nov 17, 2016 at 9:57
  • @Luciano user clicks on the icon to get a popup where he can send message to the user. Updated the post with new screenshot
    – Tn Hn
    Nov 17, 2016 at 10:09
  • Maybe put a cross over it when a user is offline ? Maybe like that: puu.sh/sT25Q/156135a91d.png
    – SitiSchu
    Dec 18, 2016 at 0:31
  • @SitiSchu I've already addressed this problem in the original post. I'm afraid the user will believe that you can't send message to offline user.
    – Tn Hn
    Dec 19, 2016 at 10:17
  • Yeah that might be a problem...I think the only way will be through colors @Tn Hn
    – SitiSchu
    Dec 20, 2016 at 23:02

1 Answer 1


You could use filled / empty to differentiate both states. Skype does that: if the user is offline, the icon is empty. Else, it's filled with the color representing the user's status (Away / DND / Online). You can see at a glance who's online and who's not, and that is independent of the colors you choose for your icon' states.

Skype states

  • 1
    But isn't that using a color indicator? What about colorblind people?
    – Tn Hn
    Nov 17, 2016 at 10:23
  • that is using color/no color. Make sure the icon/background color combination passes on color blindness tests (the icon color should not be that subtle anyway)
    – Luciano
    Nov 17, 2016 at 10:26

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.