Materialdesign: Lock variant with clearly opened latch

Created on 17 Apr 2018  路  20Comments  路  Source: Templarian/MaterialDesign

The current locks (open and closed) look very similar, especially when viewed on a bit smaller size/screen. When used in home automation this is not really desirable, as a lock state should be really clear obviously.

May I suggest a lock-open-variant with an open latch that is rotated? Like this:
image

Contribution Icon Request

Most helpful comment

All 20 comments

The lock upper part is far too small compared to the body part.

Yes. I think so too.
But it is in line with the other locks. (But maybe they鈥檙e wrong too...)

It is, Google didn't design the lock to be positioned like this after all. To make it any bigger would mean being inconsistent with the other lock icons and pushing right up against the edges, neither of which are great.

Do we need a lock-open-variant-outline to match?

We do, I totally forgot about it yesterday. :-S

Why not just shrink the body of the lock?

Because then it would be inconsistent with the regular lock icon.

I believe that'd be okay because it's not the regular lock. It's a variant and ours...not Google's. Making the body smaller does not violate MD guidelines.

Then we would have to create a variant of the normal lock though.

Yeah, that's the problem: for people using them as a toggle, it would be a lot of movement between the 2.

That's another problem, the body in the design above is shifted over 1px otherwise the lock would go off the canvas.

Yes. Either keep this. Or make a new variant with a smaller body for both open and closed.... (and maybe try a tail/descender/rectangle on the keyhole)

My vote is to not include this icon, nor any variant. IMO, the Google version is just fine and in order to accommodate this icon request, we'd have to create each or it's variants.

The body having a different location for both open and closed is almost inevitable.
What鈥檚 the policy regarding animation handles (like giving seperate paths an identifier)

The difference in the default icons is just to small for the icons to serve as a visual indicator.

You could always try the following combination if you feel there isn't enough of a visual indicator. Or you could ditch this icon pack and create your own animation that is suitable for the situation. A single path SVG can be animated in chrome with just CSS BTW (I know that's not practical until all browsers get on board). Here is my CodePen for that.

lock lock-open-outline

yes, that might work too. 馃憤
I do still like the icon proposed in the first comment, even though it might not be perfect. It fits well with the others and is clearer.

IMO, google's 'lock_open' icon puts the design above the usability.
I imagine that lock icons are used in situations where confusion need to be avoided at any cost.
Google's open and closed locks are way too similar to be safe for using.

lock-open-variantlock-open-variant-outline

Was this page helpful?
0 / 5 - 0 ratings

Related issues

hardcodet picture hardcodet  路  54Comments

systect picture systect  路  22Comments

Nihvel picture Nihvel  路  22Comments

firehiros picture firehiros  路  31Comments

YogurtTheHorse picture YogurtTheHorse  路  20Comments