search

mumble-voip / mumble-theme

A simple and modern Mumble theme.
The Unlicense
32 stars 20 forks source link

Adjust channel lock icons to adhere to the MetroMumble colour scheme #31

Closed ghost closed 3 years ago

ghost commented 3 years ago

I cleaned up both lock icons. I also changed them such that they use the shades of red and green that are present elsewhere in the theme. I also changed the ear icon to an outlined avatar as I think this reads better. (also the human ear just feels a bit weird if I'm honest)

This isn't part of the PR, but I also suggest renaming 'ear.svg' to 'listen.svg' or something like that to improve clarity even if you reject this PR.

I have undone the changes made to the ear icon as there was no consensus. As suggested by in https://github.com/mumble-voip/mumble-theme/pull/31#issuecomment-739575550, I have dedicated this PR to just the lock icons so that they can be added before the release of 1.4.0. I will open a new PR for further discussion on the listening icon.

Krzmbrzl commented 3 years ago

It would be good if you provided some images that show the new icons :point_up:

For reference these are the changed icons (first the old one and then the new one according to this PR):

Ear

ear_old

ear

Lock locked

lock_locked_old

lock_locked

Lock unlocked

lock_unlocked_old

lock_unlocked

Krzmbrzl commented 3 years ago

@chili-b are the red and green tones you used for the looks the same tones that are used in other Mumble icons?

Looking at the icons here on GitHub I still prefer the stronger tones I originally used for them but as has been mentioned in #28, it's inconsistent with the rest of the UI. Thus if you have chosen the colors to match the tones used throughout the rest of the UI, I'm totally fine with the changes you made to the lock icons :+1:

The ear on the other hand is a different issue. I see how using the proposed icon instead of an actual ear stays closer to the icon set we already have. Thus this is a plus for consistency. On the other hand this could also be a drawback in this case as the feature related to the ear icon is completely new and therefore it might be worth it to have a new icon for it (in order to clearly communicate that this is a new feature...

I think ultimately though the choice here should only be made by comparing the icons within the UI instead of as individual icons.

I will prepare a few screenshots that we can then compare side-by-side...

Krzmbrzl commented 3 years ago

Okay so here we go:

Mumble_oldEarIcon Mumble_newEarIcon

I think I still prefer the old ear icon over the new one. But that could be due to me already being used to the "old" ones...

Another advantage I see in with the old icons is that I could tell more quickly in which channel MyUser actually is in and which channels that user only listens to (simply because the listener icon is completely different from a user's icon).

Another issue with the proposed icon is that users could think that it marks a new transmission state (similar to silent, speaking, shouting, whispering). It could of course be debated whether listening to a channel should indeed be seen as a new state in this area :thinking:

Krzmbrzl commented 3 years ago

I think we'll need a few more opinions on this topic.

/cc @davidebeatrici @Kissaki @ZeroAbility @toby63

ghost commented 3 years ago

To answer your question: Yes, I copied the hex codes for the red and green tone from the regular not-talking indicator and self-mute icon respectively.

I think that your concern about users confusing listen with a new transmission state is valid, but I'm leaning more towards saying it's okay because in the rest of the theme, transmission is always indicated by a change in colour as well as two curved lines on each side of the icon. Neither of these features are present in my proposed icon.

toby63 commented 3 years ago

Thx for pinging me :slightly_smiling_face:.

Regarding:

ghost commented 3 years ago

I have another suggestion for the listening indicator: Perhaps the link icon could be incorporated as users listening to channels is somewhat analogous to linking channels. I think that while the radio tower is related to the behaviour, the icon should try to avoid introducing new metaphors if possible.

toby63 commented 3 years ago

I have another suggestion for the listening indicator: Perhaps the link icon could be incorporated as users listening to channels is somewhat analogous to linking channels. I think that while the radio tower is related to the behaviour, the icon should try to avoid introducing new metaphors if possible.

I think the link icon will not be understood.

Krzmbrzl commented 3 years ago

Using the chain would definitely be an option.

What was also suggested in our meeting today was to use just the head of the current avatar icon (aka: a green circle) and then put some simple headphones on that and then use this as the icon for listeners.

Kissaki commented 3 years ago

All great arguments here, thank you all for the very constructive discussion.

Although this may not happen now or ever, I’d love to see a design documentation that shows and describes the icons with argumentation why they are used, for a feature and in relation to others.

I agree with all of your arguments.

Listening in results in a similar thing like linking channels. So we have a connection here. At the same time, it is on a user level. I do not think linking works here, because the user is an actor, not a structuring object/room. I may be worth thinking about replacing the link icon in the future for a more consistent icon theme between the two, but for now we can just look at the user.

We also make linked channels cursive, so this may be worth a thought, but I think it's ultimately not helpful and more confusing.

I am a little confused by the screenshot with the ear-icon replacement. Where am I as a user in this screenshot? I see two "listen in" actors in two channels. Am I in a different channel that is not visible?

If the user listens in from another channel I would say they are more, closer connected to you. So the icon should be stronger rather than weaker. The suggested ear replacement is definitely a lot weaker than the default all green. So I think that icon would go against intuition and be misleading.

My suggestion would be to try and use the ear, or even a simpler ear, and remove the "realistic" coloring. Simplify the ear icon to something that fits our icon and color scheme.

Other users listening in to you is represented quite well with an ear icon [directed at you].

toby63 commented 3 years ago

I think we should keep in mind that the icons are very small, so a too detailed approach is maybe not good.

How about keeping the avatar but giving it a different colour? Or different colours (lika two colours for example).

Update: Just noticed that black would be bad for the dark theme... But still some other colour could be used (green, blue and purple are already in use). This would indicate that the user is not really there, but still there (like a phantom).

toby63 commented 3 years ago

Oh and I support @Kissaki's idea of a documentation. I added a seperate issue for tracking that: #33.

Krzmbrzl commented 3 years ago

I am a little confused by the screenshot with the ear-icon replacement. Where am I as a user in this screenshot? I see two "listen in" actors in two channels. Am I in a different channel that is not visible?

The local user (aka "you") is the one highlighted in bold font. The screenshots are thus taken from different client's perspectives because I messed up on selecting the same one for the second screenshot xD

We also make linked channels cursive, so this may be worth a thought, but I think it's ultimately not helpful and more confusing.

Listeners are already rendered in italics

If the user listens in from another channel I would say they are more, closer connected to you. So the icon should be stronger rather than weaker. The suggested ear replacement is definitely a lot weaker than the default all green. So I think that icon would go against intuition and be misleading.

I don't think I would follow this argument here. I would consider a user that is in the same channel as I am to be "closer" to me than someone that is only listening to what is spoken in my channel :thinking:

My suggestion would be to try and use the ear, or even a simpler ear, and remove the "realistic" coloring. Simplify the ear icon to something that fits our icon and color scheme.

Hm - let me see what I can come up with :thinking:

Other users listening in to you is represented quite well with an ear icon [directed at you].

That I definitely agree on :+1:

I think we should keep in mind that the icons are very small, so a too detailed approach is maybe not good.

Absolutely. That's what makes this so hard ^^

How about keeping the avatar but giving it a different colour? Or different colours (lika two colours for example).

Even though that would of course be possible, I think it just wouldn't represent what this is supposed to stand for really well :thinking:

Krzmbrzl commented 3 years ago

Here are a few more suggestions for the ear icon:

Bunny ears

ear_bunny

Green ear

ear_green

Headphones

ear_headphones

Bunny ears: I don't think they quite fit into the rest of the theme Green ears: The shape still has the same complexity Headphones: This one will probably be harder to recognize on first glance

The problem I faced when trying to reduce the ear shape's complexity was that as soon as I take away strokes from it, it's no longer recognizable as an ear (imo) :thinking:

ghost commented 3 years ago

image What about representing the idea of listening instead of the ear itself using something like this? The avatar is smaller than the regular one, so that should help with recognition as well

toby63 commented 3 years ago

:thinking: Honestly I don't think any of the suggestions are good (no offense).

What about this:

  1. Some kind of robot icon: https://duckduckgo.com/?t=ffab&q=bot+icon&iax=images&ia=images (Would also be good for Bots by the way).

  2. A tag like "Listener": This would make things very clear and we wouldn't need a symbol. In combination we could use a different coloured avatar.

Krzmbrzl commented 3 years ago

@chili-b I think I like your suggestion :+1: We probabky have to experiment with the size relations of the avatar vs the sound wave but the general idea is pretty nice. And it should also fit ibto the existing icons nicely.

@toby63 I don't think I like the idea of a robot icon. I would approve it for actual bots but listeners are no bots.

And I'm not really sure what you mean by "tag". Where do you want to display such a tag?

toby63 commented 3 years ago

I don't think I like the idea of a robot icon. I would approve it for actual bots but listeners are no bots.

:thinking: I guess you are right. Maybe something else:

  1. A symbol that resembles a placeholder...
  2. A greyed out avatar? (though that would be against @Kissaki's argumentation)

And I'm not really sure what you mean by "tag". Where do you want to display such a tag?

I found a better word for it now: a label, just like labels on Github it could be behind the username or before it. Some programs add them to the username (without special colouring etc.), like [Admin] user1.

toby63 commented 3 years ago

Just had a crazy idea, what about a vanishing avatar? You know, like star trek beaming. :smile:

toby63 commented 3 years ago

Regarding the lock icons: I just noticed that lines thickness is a too thin imo (I know "perfectionism" :roll_eyes: :smile: ). But look at this screenshot from @Krzmbrzl: https://github.com/mumble-voip/mumble/pull/3929#issuecomment-569495834. I would:

  1. increase the thickness of the lines (they could be nearly as thick as the central line (strike-through) in muted_suppressed.svg) and
  2. maybe fill the lock with colour instead of the keyhole.
Kissaki commented 3 years ago

So far I like the green icon and also the idea of extending the existing user icon with additional state. Between the two, from the screenshots without gui context, I think I still prefer the ear though.

What's the problem with the ear complexity? Is it an issue on small sizes?

Kissaki commented 3 years ago

If the user listens in from another channel I would say they are more, closer connected to you. So the icon should be stronger rather than weaker. The suggested ear replacement is definitely a lot weaker than the default all green. So I think that icon would go against intuition and be misleading.

I don't think I would follow this argument here. I would consider a user that is in the same channel as I am to be "closer" to me than someone that is only listening to what is spoken in my channel 🤔

I agree someone in my channel is closer to me. They also hear me. But someone in another channel listening in is closer to me than someone in another channel not listening to me. I guess at the moment we do not have separate icons for own vs other channel though, ppl that can hear and those who can not. :)

Kissaki commented 3 years ago

I think we should split this PR. There seems to be two concerns here. The lock icons color, which was discussed and seemingly quickly decided upon. And the ear icon which we are still discussing.

@chili-b Can you split the two? They are separate concerns, and can be resolved at different speeds and independently.

Kissaki commented 3 years ago

If it is about small sizes, how about filling the inner ear black to reduce complexity? Sketchup something like

ear16 ear24 ear32

What’s our icon size? 24px?

A weaker color than black would now be better. But I think this could work.

Krzmbrzl commented 3 years ago

A greyed out avatar?

This one is actually already used in 1.4.0

What's the problem with the ear complexity? Is it an issue on small sizes?

I assume so. Though personally I did not have concerns ^^

If it is about small sizes, how about filling the inner ear black to reduce complexity?

I guess that could work. However as it stands to me it is now rather hard to recognize this as an ear without knowing that that's what it's supposed to be :thinking: Maybe we'd have to adjust the outline a bit as well...

toby63 commented 3 years ago

Just sayin, the ear is really "horrible". No offense, it's not about the specific design.

It is not only about the perception and size. It is also about the ear itself, it is something weird, "ugly", "scary", not fitting into the rest of the design. It reminds me of the classic theme, which also had this weird mouth and stuff.

It is only an advice, but I would stick to the design decision xpoke made and leave such stuff out.

If you can't find a better solution, use one of the ideas by @chili-b.

A greyed out avatar?

This one is actually already used in 1.4.0

Just to clarify, I don't mean a grey avatar, I mean one with less colour, slightly lighter green tone for example.

I also still prefer an icon with the avatar:

toby63 commented 3 years ago

Here is an example for a two-coloured avatar:

listener_avatar1a_32px listener_avatar1a_120px

toby63 commented 3 years ago

@Krzmbrzl Could you maybe split the PR (so you could merge at least the correctly coloured locks), as you now start to release dev snapshots of 1.4? And discuss the ear issue in one of your meetings :slightly_smiling_face: ?

Krzmbrzl commented 3 years ago

I currently don't have a lot of time and since this is nothing urgent, I don't think I'll get to it any time soon. If @chili-b splits the PR though, I'll happily merge the changes to the lock icon.

The ear suggestion currently need to be put in the software in order to get some proper screenshots. I did not get to doing that yet for the reasons mentioned above. So if someone wants to speed up the process, it'd be very helpful if these screenshots were created by someone else than me :point_up:

toby63 commented 3 years ago

The ear suggestion currently need to be put in the software in order to get some proper screenshots

Yes you are right, that would probably be helpful. I will see if I have time to do that.

toby63 commented 3 years ago

So here is an overview of how the different icon concepts would look in Mumble:

Black Ear by Kissaki: grafik

Headphones by @Krzmbrzl: grafik

Empty Avatar with Send by @chili-b : grafik

Vertical-Cut avatar (green/white) by me: grafik

Vertical-Cut avatar (green/grey) by me: grafik

Original Avatar for Comparison: grafik

My oppinion:

  1. The UI parts are in general too small; maybe this should be changed.
  2. The black ear looks at least much better and more fitting than the original ear, still I don't like this using "body parts".
  3. None of these does a good job in explaining it's purpose at first sight...

What about using a different symbole? Like an arrow -> or two slash lines \\ (maybe in green and black), or something like that. I also still like the idea of adding some kind of label, like listener, behind it.

Krzmbrzl commented 3 years ago

Thanks for creating the screenshots :+1:

My favorite would in fact be the headphone avatar. The line width of the headphone has to be increased but in terms of visibility and symbolic meaning this is the best option we have so far :thinking:

The UI parts are in general too small; maybe this should be changed.

Nah I don't think so. Making the icons larger would mean that a single user entry requires more space which will make you loose overview more quickly with growing users. And enlarging all icons just be did not found a good icon for one particular use-case yet seems a bit of an overkill anyways :shrug:

Like an arrow -> or two slash lines \ (maybe in green and black), or something like that.

How would that represent someone listening?

If we are looking for a different symbol a microphone might be something to investigate (listening is kinda similar to someone recording what is spoken from a different room) :eyes:

I also still like the idea of adding some kind of label, like listener, behind it.

So if User is the name you'd want something like

<icons> User  (listener)

? Given that listeners don't show any other tags (afaik) this should be okay, I guess. Would have to look at that in code though. If we find a nice icon for it, I think a tag is superfluous though :thinking:

toby63 commented 3 years ago

headphones: I think from the examples shown here this actually is one of the most distinct icons (compared to the regular avatar) that has the advantage of symbolizing the act of listening reasonably good.

I almost agree with the "most distinct" argument, but I think that we only recognize the headphones as such, because we know it (if you know what I mean). Regarding the interpretation: I think users might associate that with something different (like a user who uses a headphone :smiley: ).

Empty avatar [...] Maybe this could be changed by increasing the line width in the image?

I think this could only work for the avatar itself, but not for the send symbol next to it.

vertical cut (green/white): This does look strange imo (given that the white part basically merges with the background vertical cut (green/gray): Looks a lot better but probably suffers the same issues in the dark theme, the other one does in the lite theme

You are probably right about that. I already added an edge to it, but it's not really visible. And yes it would need a different second colour.

The UI parts are in general too small; maybe this should be changed.

Nah I don't think so. Making the icons larger would mean that a single user entry requires more space which will make you loose overview more quickly with growing users. And enlarging all icons just be did not found a good icon for one particular use-case yet seems a bit of an overkill anyways shrug

The overview is an argument. I think that the very small size is indeed a problem, because you cannot really recognize anything. In the real client it is even worse than on the screenshots. Thus my alternative with a label or a very clear symbol is the only solution I see if we keep the sizes as they are.

Like an arrow -> or two slash lines \ (maybe in green and black), or something like that.

How would that represent someone listening?

Well an arrow can mean the same thing as an old proposal with the link symbol. Two slash lines would indicate that the user is not really there.

If we are looking for a different symbol a microphone might be something to investigate (listening is kinda similar to someone recording what is spoken from a different room) :eyes:

I remember we already discussed this, but I might be wrong. A microphone is also very hard to recognize at that size. I suggested a radio station (like it was used in the old theme), but you did not like that.

So if User is the name you'd want something like

<icons> User  (listener)

Yes. But I would like to have real label, not just text added to the username. Though the text could be an intermediate solution.

If we find a nice icon for it, I think a tag is superfluous though thinking

I think we will not find any icon that represents it perfectly, so this would be a clear and visible information.

Krzmbrzl commented 3 years ago

I almost agree with the "most distinct" argument, but I think that we only recognize the headphones as such, because we know it (if you know what I mean). Regarding the interpretation: I think users might associate that with something different (like a user who uses a headphone smiley ).

Fair enough. I think users initially thinking about the other client using headphones before realizing what this actually means is not too bad though since at least this would still be about the act of listening (to some degree anyways) which I think speaks for its symbolic character.

In the end however I think that we either have to find more volunteers to evaluate the screenshots or make a decision based on our opinions even though it could be that we recognize certain images (better) because we know what it's supposed to be :shrug:

A microphone is also very hard to recognize at that size.

But maybe better than some of the other approaches since a mic can stand for itself and does not need an auxiliary icon next to it (e.g. a head) to make sure what it is supposed to be. Thus it could use more of the available space for the actual icon.

Yes. But I would like to have real label, not just text added to the username.

So what would be a "label" for you? 'cause you say that icons are too small but it is not text that you had in mind. That now makes me wonder what kind of label you are thinking about :thinking:

toby63 commented 3 years ago

more volunteers

Thats probably a good idea, but they would need to be tested "blind", so they don't know the meaning and we ask them what this symbole means in their oppinion. I might ask some friends; but then you only get the oppinion through me, which is not verifiable.

But maybe better than some of the other approaches since a mic can stand for itself and does not need an auxiliary icon next to it (e.g. a head) to make sure what it is supposed to be. Thus it could use more of the available space for the actual icon.

In general that would be true, but a microphone is more complicated than other items imo. It involves very detailed forms (to be recognizable as microphone).

So what would be a "label" for you? 'cause you say that icons are too small but it is not text that you had in mind. That now makes me wonder what kind of label you are thinking about thinking

What I mean is not just adding text to the username like username (text), but to have a real label behind the username like username coloured label with text. I think there already was a feature request for that somewhere...

But to clarify, that is not a must-have, a simple text would be good as well (i think).

Krzmbrzl commented 3 years ago

Ah okay so sonething like a colored badge. Yes I think there is a FR for thst indeed.

ghost commented 3 years ago

I think we should split this PR. There seems to be two concerns here. The lock icons color, which was discussed and seemingly quickly decided upon. And the ear icon which we are still discussing.

@chili-b Can you split the two? They are separate concerns, and can be resolved at different speeds and independently.

Sorry for the late response. I forgot that this PR was still open. I've undone the changes made to ear.svg so the only files modified are the lock icons.

Krzmbrzl commented 3 years ago

Thanks :+1: