Element-web: The new globe icons are unrecognizable

[dkasak]

As the title says, the new globe icons are pretty much unrecognizable. None of the users (around 10 of them) who I've switched over to Matrix have been able to tell what it is meant to represent. I've also had trouble recognizing it myself, but then I remembered that there was previously confusion about locks and discussion about switching over to globes, which is the only thing that made it click.

• OS: Arch Linux
• Version: 1.7.1

[dkasak]

I've just now seen a screenshot of Element's light theme where the problem is a bit less pronounced due to swapped colours, but still quite problematic IMO.

[t3chguy]

They do also have a tooltip

[odiferousmint]

Oddly enough I do not have those icons in Element (Arch Linux, element-desktop-1.7.1), but I did have them in Riot. IIRC there was an icon for the room being encrypted and having everyone verified in the room. Is this a bug or is it intended? All I see right now is just the room icons. I do not see those icons that is being referred to here and is displayed in that screenshot.

I did submit an issue for not having tooltips for the room icons themselves which is problematic when I want to see the list of rooms through icons only (takes up less space). It used to have a tooltip showing the name of the room.

Edit: it is intended, it does not display those encryption icons anymore.

[odiferousmint]

I will just upload it here; I think the encrypted icon should be more visible with the dark theme:

[turt2live]

@odiferousmint that's an entirely different problem.

[odiferousmint]

@odiferousmint that's an entirely different problem.

Well, the encryption icons are indeed unrecognizable on both Element Desktop and Element Android with the dark and the black theme. It is just too dark. For the time being I am resorting to using the light theme. Do you want me to create a new issue for this with screenshots?

[t3chguy]

I spun that off to https://github.com/vector-im/riot-web/issues/14649

[niquewoodhouse]

My favourite description of the current icon is a dolphin flexing their arm 🤣 Not. the. best. icon. ever. 🤦

Here are some rough alternatives, I would be interested to know if any of these feel more like a globe to anyone, or if any of the non-globe options feel like a more appropriate way to say "this is a public room" and why. Please feel free to be as honest as you can - if anything feels like a dolphin its good to hear 😄

At the moment, these icons are 8x8, here are some 8x8:

We could boost to 10x10, which gives a tiny bit more space for complexity:

Here are some of the most different with the same existing size (8x8) (in context and light theme). Click to see them at actual size.

Globe 2

Globe 3

Hash

[odiferousmint]

I personally prefer the hash ones, specifically the one in the last screenshot.

[dkasak]

I too like the hash ones provided that they are intuitive for this purpose to a representative sample of users.

On a small non-representative sample of users I've shown this to, the wireframe globe with the densest lines was preferred. I tend to agree that's most recognizable as a globe as I had the same idea.

[niquewoodhouse]

Thanks for the info @dkasak @odiferousmint 👍

I also liked hash, and in some wider testing it was the most popular, but at the moment the hash is used to mean different things across different apps in Element. So I think we'd have to make quite a few non-room list web amends to make this consistent. Would really like to do that but it would delay a 'quick' fix.

In some further testing of the globes metaphor there wasn't much of a discernable difference between the wireframe and fill versions. Because the latest icon language in Element uses fills to communicate most things, in a design review it was decided to try the fill version and see if confusion continues at the same pace. The fill version is based on a couple of globe icons used by large web products (e.g Facebook, Chrome) but refined to be 8x8.

I can totally see the need to take a more comprehensive look at this in the future, but it should be scoped accordingly to make public make sense across all platforms for consistency.

Design link.

[dkasak]

@niquewoodhouse: Sorry, I didn't quite get what was decided as the solution from your last comment. Are you saying the current icon will be kept without changes? The Figma link requires you to be logged in so it didn't help much.

[532910]

I'd say matrix-org/matrix-react-sdk#5106 doesn't fix this.
Globe should look so: https://duckduckgo.com/?q=globe+icon&iax=images&ia=images