Materialdesign: Send Encrypted Icon

[andrewnenakhov]

Standard 'Send' Icon with added lock to show that message will be sent securely.

send-encrypted.svg.zip

[JamesCoyle]

I personally don't think it's the best idea really. That information should really be shown with some other UI element rather than the send button. Generally icons should only be single purpose and showing a conversation is encrypted as well as acting as the send icon could be confusing for the user.

[andrewnenakhov]

@JamesCoyle we use this icon to good effect in Xabber, it uses less space than having a separate icon and it gives a clear indication that outgoing message is encrypted.

And there are already similar icons pencil lock and phone locked

[MrGrigri]

Personally, those two specific icons at that scale that you have it, don't work together and doesn't follow MD style. The lock would have to be larger.

[MrGrigri]

Would the email-secure icon work?

[andrewnenakhov]

Personally, those two specific icons at that scale that you have it, don't work together and doesn't follow MD style. The lock would have to be larger.

That's just a matter of taste. I did a larger lock, looked too bad and obscured paper plane send shape far too much. Anyway, that's how it'll look in Xabber:

It gives a very clear indication of encryption state and we don't think that email icon will work in that context, so Xabber will be using this icon anyway, whether it'll be accepted into main repository or not.

[MrGrigri]

This follows the same pattern as the 'email-secure' icon, and IMO is the best option.

send-secure.zip

[MrGrigri]

By having the lock in the bottom right corner, it visually get's lost. In the top right corner, it's easier to identify it as a lock.

[andrewnenakhov]

@MrGrigri I haven't seen send-secure icon before, however, I find it to be a bit too ugly for my taste. What I tried was to preserve a 'send' arrow shape as much as possible, and your variant makes point appear more broken. Maybe it'll look better if you take lock closer to arrow by 1px both vert and horiz and leave gap just 1 px wide..

[MrGrigri]

The send-secure icon is one that I just created and not in the repo. Per MD standards, the lock is a cut-out and that's how it works with this style. Cut-outs are two pixels, not one.

[andrewnenakhov]

@MrGrigri would you care to point to said MD standard? There are too many counter examples to what you are saying.

[MrGrigri]

[andrewnenakhov]

@MrGrigri That's guideline for strokes, not cut outs. And actually, this rule is violated on the very icon you supplied - on "phonelink lock" icon above cut outs around lock are clearly just 1 px.

[MrGrigri]

IMO the one-pixel cut-out below is just silly. The phonelink icon above is shown as an exemption example. The phone would appear less like a phone with a two-pixel cut-out. However, I'm willing to do what the community and owners of this repo feel are best.

send-secure.zip

[andrewnenakhov]

@MrGrigri I'd try moving lock in 1px cut out maybe 2 or 3 px to the left, that'd make it look better. I actually did try having locks on top and putting it to design of app, end result looked worse to me. Don't have access to computer to show it out now.

[GreenTurtwig]

@andrewnenakhov Stroke, cut-out, they both mean the same thing, the draft follows the guidelines fine. Google always has exceptions with its designs (just look at the YouTube app...) and it drives me mad, especially with some of their icons (like phonelink-lock and network-check. But I agree with @MrGrigri, having a one pixel stroke just looks odd in this scenario.

[andrewnenakhov]

@GreenTurtwig there are always exceptions in design because world does not follow some strict set of rules. Actually this icon with lock on top does not look well to me at all, but when it's on bottom it serves to achieve what we need much better. And having a bigger gap there looks not well because padlock shackle is thinner than 1px itself, having it a 2ps stroke would look ridiculous.

Anyway it all came to taste differences. Our app would use 1st variant because, well, I like it more. Thanks everyone, @GreenTurtwig @MrGrigri

[GreenTurtwig]

There are exceptions because they are guidelines after all. :wink:
While I agree the lock looks much better on the bottom rather than the top, I disagree with the fact the stroke should only be 1 pixel, it just looks too odd like that.
It would be fantastic to have more people give feedback on this. :+1:

[JamesCoyle]

For what possible reason would some messages in the chat be encrypted and others not? Doing things that way is just confusing for the user. It is better to go the WhatsApp route and show a message in the chat log itself when messages go from encrypted to plain or vice versa or show a lock icon next to the sent time indicator.

I personally don't feel this icon works at all.

[MrGrigri]

I could see this. For example, all emails at my work sent internally are not encrypted; because we have our own server and it never leaves the building. However, all email traffic sent outside is encrypted. So this would just be an indicator (or reminder) to the user that the email is going to be encrypted and that the recipient needs to have the key.

[andrewnenakhov]

@JamesCoyle actually our users asked for this.

XMPP encryption works differently from whatsapp, and you can't show encryption status of a yet unsent message in message log, cause... it's not yet in log!
(we DO show if a message was encrypted or not in log, though, next to a time indicator)

The reason why users want it is because encryption in XMPP is much more user controlled and also can be enabled by different clients, so as a developers we have much less control of what happens and how different connected clients react to encryption - and we have to adapt to all situations like disabling of encryption by remote party. In that case we do display a blip in message log but a person who is busy typing an answer might easily miss it - and here a modified icon comes in handy. If encryption session is broken icon will be stripped of a lock and user will have a better chance to take notice.

[Templarian]

Reading through this thread it seems like we're not sure if the icon is needed. I'm going to add it, but it is niche. I've moved the lock to the bottom right since it doesn't "require" clipping the send path.

If it helps I do agree secure/unsecure should be shown in a different way. I think this is outside of what the user should see in a UI.

Let me know if this work or doesn't and I'll reopen.

[andrewnenakhov]

@Templarian can't say I really like it since it was the first thing I tried - and it looked somewhat detached from send shape, that's why I decided for lock to clip on send path. But it's up to you, I guess.