Consider circles vs squares vs squircles for avatars

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

Consider circles vs squares vs squircles for avatars #9058

Closed turt2live closed 2 years ago

turt2live commented 5 years ago

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

turt2live commented 5 years ago

Squares

turt2live commented 5 years ago

Circles

turt2live commented 5 years ago

Squircles (rounded squares)

bmisiak commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

Circles for communities

Squircles for rooms

Squares for people

gerroon commented 5 years ago

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 commented 5 years ago

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

gerroon commented 5 years ago

The communities can have the squircles.

fladd commented 5 years ago

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

matrixes commented 5 years ago

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 commented 5 years ago

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

fooness commented 4 years ago

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.

turt2live commented 2 years ago

From design: we're using squares for spaces and circles for users, so the concepts have meaning now. We might revisit this in the future, though it'll be through the context of design.

Thanks for the opinions raised, everyone :)