Presence Lamps/Circles are hard to read

element-hq / element-web

A glossy Matrix collaboration client for the web.

https://element.io

GNU Affero General Public License v3.0

11.14k stars 1.98k forks source link

Presence Lamps/Circles are hard to read #14550

Open ghost opened 4 years ago

ghost commented 4 years ago

Problem The presence lamps in the room roster next to the profile pictures of users are hard to read, as they use white and green. This may be a problem for users who are colourblind, in bright environments, or have cheap monitors.

Solutions

Change the color scheme to something with more contrast, i.e. black/grey and lime green
use a graphic instead of solid colors, i.e. a full circle for online users and a ring/hollow circle for offline users
only have lamps for users who are online, and do not have lamps for users who are offline.

any other suggestions would be handy

t3chguy commented 4 years ago

The app supports custom themes which can change the colour however they wish.

The states are Online/Away/Offline and are combined with a tooltip which should be more than plenty for accessibility?

turt2live commented 4 years ago

I don't think custom themes can get at these colours.

t3chguy commented 4 years ago

the green is based on $accent-color - you're right about the other two though

ghost commented 4 years ago

The states are Online/Away/Offline and are combined with a tooltip which should be more than plenty for accessibility?

that's a start, but it's far too slow. it requires the user to physically scan the contact with the mouse.

ghost commented 4 years ago

also, if you wanted to put this same system in a phone app or some other touch input system, mousing over is impossible

t3chguy commented 4 years ago

There are a lot of accessible technologies which will correctly report the presence in that case, this app is not designed with touch or phone support in mind.

t3chguy commented 4 years ago

Also a lot of touchscreen laptops/desktops have hover support via their pens

ghost commented 4 years ago

Right, my mistake

MacLemon commented 4 years ago

The states are Online/Away/Offline and are combined with a tooltip which should be more than plenty for accessibility?

This is forcing people with a visual impairment to target the tiny bubble with their pointing device, wait 2s for the tool tip to appear, and then having a chance to read the tooltip. They must do this for every entry to get a grasp on the status.

This is not how accessibility or usability works.

Only distinguishing things by colour is already considered a bad UI choice for non-colour-vision-impaired people. The badges must distinguish by at least two criteria, for example colour and shape. So that if I cannot recognize one of them, for example colour, then I still can recognize them by their shape. (You can continue that by substituting position, colour contrast, brightness contrast, etc.)

In addition, there's more colours, people without bullets confusing multicoloured bullets

and textured bullets which are even harder to make out, depending on the room icon. a textured bullet

t3chguy commented 4 years ago

wait 2s for the tool tip to appear

What? It happens onMouseOver, it should be immediate.

niquewoodhouse commented 4 years ago

Solutions

Change the color scheme to something with more contrast, i.e. black/grey and lime green use a graphic instead of solid colors, i.e. a full circle for online users and a ring/hollow circle for offline users

any other suggestions would be handy

Could do a moon/snooze visual for away

Hollow circle for away

only have lamps for users who are online, and do not have lamps for users who are offline.

I'm not sure why there are presence visuals for people who are offline and why that needs differentiating from people who are completely offline (so have no circle) Does anyone know in what context a specifically "offline" circle is useful?