Element-web: Consider circles vs squares vs squircles for avatars

[turt2live]

Related: https://github.com/vector-im/riot-web/issues/8743

Also to save us from getting a billion comments, please +1 the appropriate comment below. +1ing this post gets it on the radar.

[turt2live]

Squares

[turt2live]

Circles

[turt2live]

Squircles (rounded squares)

[bmisiak]

How about: Squircles for rooms, circles for people avatars?

The line between rooms/people/bots, to me, seems very blurry in Riot. While the sidebar sections are separate, avatars appear all over Riot and I am never quite sure what it is I am mindlessly clicking. I feel like this distinction would help users instantly discern group rooms from people.

As a bonus, it allows us to remove the little human icon:

It ends up being a little cleaner.

[HansJK]

I would say that the cleanest design would be to just stick to circles. Having multiple shapes make it look messy. It would be better to just find a better way to separate Direct chat form room groups. This won't make sense to none techy users. Follow the design principle "don't make me think".

If you would to implement this idea, then make sure the community icons are circles, because it look much cleaner with circles.

[fladd]

Circles for communities

Squircles for rooms

Squares for people

[gerroon]

I stick to my original idea. I recommend

circles for people (or direct chat)

squares for rooms

The semantic is very simple. Human faces are oval or circular, and rooms are squarish by nature.

[fladd]

And what shape do communities have? (They are currently also round).

[gerroon]

The communities can have the squircles.

[fladd]

Wouldn't that put them semantically between rooms and people, while they actually are above both of them?

[matrixes]

If a community is a mix of people (circles) and rooms (squares), then I'd say a squircle would fit nicely, as it represents a merge of the two first collections.

[HansJK]

Communities and Rooms should be circles, because it's a circle of people, and it looks better.

[fooness]

Please consider just leaving this decision to the user or custom theme author. There’s no consensus on this topic, and there won’t be.

Adding an option for the user or custom theme author to define the shape (round, rounded rectangular, or rectangular) for any element that’s round/rounded now, would be the best in my opinion, i.e. most flexible and anyone can enjoy riot-web as they want.

Adding a toggle setting for round rounded (as it is now) or rectangular/square could be as simple as setting * { border-radius: unset; } or * { border-radius: unset !important; } … but I guess there’s also a much nicer solution to this.