0

I am designing a smart house app where the main feature is to lock and unlock a house door. The most obvious design was to use skeuomorphism with a padlock icon like ex. Kevo, Lockitron and iLock do. August and NUKI just shows a circle with changing color. The color sheme is set for me:

  • red: locked
  • green: unlocked

enter image description here

As one is not locking a padlock, but a house door, I designed version 1. Unfortunately several thought this design was too abstract. I therefore designed v2 which uses the padlock icon that is on the door lock keypad itself. This design is ok, but not very modern and uses skeuomorphism that isn't correct (ref. pad lock vs house door lock).

My question is therefore:

- What other ways are there to show a door lock? (Using a toggle switch is not an option I think.)

If anyone has any experience with apps or websites that have similar features and show it in a good and user friendly way, it's appreciated!

beining
  • 109
  • 5
  • 3
    This doesn't appear to be a usability question. As written, you're seeking random design ideas. Is there a specific issues you're trying to solve? – Nicholas Pappas Jan 18 '17 at 14:23
  • 1
    This question seems about design, and not usability. But if you want my modest opinion on how to represent an open/closed door, just use that... a door! – roetnig Jan 18 '17 at 14:44
  • I think the issue is the colours, all the designs are bright and coloured and therefore hold equal weight, your eye isn't drawn to one or the other in particular and you have to assimilate the icon to potentially understand the state of the door. – DarrylGodden Jan 18 '17 at 14:51
  • @EvilClosetMonkey: I do believe this is a both a ux and ui question, as the button ought to create a connection between the lock and the app. How would you expect to unlock and lock a door via the app? – beining Jan 18 '17 at 17:41
  • @DarrylGodden Good input. Which color would you expect to be brighter? Locked or unlocked? Or did you mean the background color vs the icon color that is white? – beining Jan 18 '17 at 17:43
  • I've added an image to demonstrate, the active colour would be the brightest or most intense. – DarrylGodden Jan 18 '17 at 17:45
  • That's not what your question is asking. You question is merely asking "what are your ideas?" If you're seeking information on user engagement, it should be in the question. – Nicholas Pappas Jan 18 '17 at 17:46

2 Answers2

1

You may be thinking too literally. The lock icon is conceptual. It's not meant to indicate that an actual padlock is being used. And it is widely understood, so that makes it preferable to an icon that needs to be explained.

For example, if you lock your phone or a file, you may use a lock icon. That doesn't mean there is an actual physical padlock on that computer file. My car door has a lock icon. Pressing it does not mean an actual padlock will be used to lock the car door.

Another example of the same idea of a conceptual icon is the universal save icon. No one thinks you are saving to an actual floppy disk, and even those who have never used a floppy disk know the icon means "save." This has been studied and discussed many times and conclusions are generally that it's best to use the floppy-disk icon to save.

Community
  • 1
Eric Stoltz
  • 1,734
  • 9
  • 13
  • 1
    Yes. Use the 'common symbol'. It's what it means which is important, and that needs to be as clear at a glance as possible. – PhillipW Jan 18 '17 at 19:36
0

How about these as a suggestion? Using doors to indicate what you are affecting. With regards to colours, I found myself in a quandary as to which one show the active better, between the states, I've posted both for you to play with. The states are top to bottom, but could be side by side.

Faded colours

Greyscale

Active Colour

DarrylGodden
  • 6,316
  • 14
  • 35
  • These look great! I would open more the door, though. – Alvaro Jan 18 '17 at 17:51
  • Yeah, it's an IcoMoon icon, I would create/buy one that suites it better. – DarrylGodden Jan 18 '17 at 17:52
  • How would the user know an open/closed door means it's unlocked/locked? Especially as it refers to an actual physical door, I might think it means the door is open or closed; and if closed that would raise the question of locked/unlocked. Consider the car as a common experience: if the door is open an open door icon is shown. If it's locked a lock icon is shown. – Eric Stoltz Jan 18 '17 at 21:45
  • By the words "Door is currently locked" and "Door is currently open." – DarrylGodden Jan 18 '17 at 21:57