Adjust channel lock icons to adhere to the MetroMumble colour scheme

[ghost]

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 #31 (comment), 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]

It would be good if you provided some images that show the new icons ☝️

---

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

Ear

Lock locked

Lock unlocked

[Krzmbrzl]

@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 👍

---

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]

Okay so here we go:

---

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 🤔

[Krzmbrzl]

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

/cc @davidebeatrici @Kissaki @ZeroAbility @toby63

[ghost]

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]

Thx for pinging me 🙂.

Regarding:

• The Lock icons:

  • Colour:
    Yes I think using the original colours is good.
    Though I now think the red tone is a bit too orange (not just here, but in the other official icons as well), maybe we could test slightly different colours for the red icons.
    I would like to have a tone that is a little more red, but still a bit darker; @Krzmbrzl's icon is a bit too bright imo.

  • Unlocked state:
    The unlocked icon can be used as is (it's ok), though I would maybe change it, so it represents the open state a bit better; two ideas:
    - a hanging lock (the lock is turned by 20 degrees maybe)
    - a green key symbol (instead of a lock)

• The ear icon:
  I agree with @chili-b that the human ear looks weird, so we should use something else.
  Nonetheless I also agree with @Krzmbrzl that the "empty" avatar is not sufficient for this.
  How about a radiostation type of icon (duckduckgo search) ? I just remembered that something similar was used in the classic theme for the avatar. Nonetheless I think that something like this could clearly indicate the purpose of the icon.

  In addition one idea:

  • It would be good if a user could see a short explanation of the symbol (like "user is listening to the channel")

[ghost]

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]

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]

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]

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]

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]

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

[Krzmbrzl]

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 🤔

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 🤔

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

That I definitely agree on 👍

---

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 🤔

[Krzmbrzl]

Here are a few more suggestions for the ear icon:

Bunny ears

Green 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) 🤔

[ghost]

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]

🤔 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]

@chili-b I think I like your suggestion 👍
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]

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

🤔 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]

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

[toby63]

Regarding the lock icons:
I just noticed that lines thickness is a too thin imo (I know "perfectionism" 🙄 😄 ).
But look at this screenshot from @Krzmbrzl: mumble-voip/mumble#3929 (comment).
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]

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]

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]

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]

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

What’s our icon size? 24px?

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

[Krzmbrzl]

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 🤔
Maybe we'd have to adjust the outline a bit as well...

[toby63]

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:

• show only half of the avatar (vertical cut, left side green, right side white)
• different colours (green and black)
• "vanishing avatar" (beaming effect) (though it is a bit difficult with the small size)

[toby63]

Here is an example for a two-coloured avatar:

[toby63]

@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 🙂 ?

[Krzmbrzl]

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 ☝️

[toby63]

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]

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

Black Ear by Kissaki:

Headphones by @Krzmbrzl:

Empty Avatar with Send by @chili-b :

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

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

Original Avatar for Comparison:

---

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]

Thanks for creating the screenshots 👍

• green ear: I still think that turning the ear green makes it even harder to recognize as such
• 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.
• empty avatar: I really liked the idea when looking at a larger image but in the client it seems like it is barely visible. Maybe this could be changed by increasing the line width in the image?
• 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

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 🤔

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 🤷

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) 👀

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 🤔

[toby63]

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 😃 ).

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) 👀

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]

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 🤷

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 🤔

[toby63]

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]

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

[ghost]

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]

Thanks 👍