Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

In case of a need to show both "locked" and "secure" icons on one element in an interface (let's say it is one of many tabs in an internet browser, where 'locked' and 'secure' refer to different things), what would be the right choice to make these distinct?

(By the way, I assume that a "certificate" icon is not recognizable enough.)

share|improve this question
    
Can it be both locked and secure at the same time? –  Vitaly Mijiritsky Sep 14 '13 at 5:59
2  
It would be helpful to know what locked and secured mean in the context of your project. How do they differ? –  oefe Sep 14 '13 at 8:06
    
"Locked" means that an element is temporarily locked for any changes (cannot be moved, edited, removed before unlocking). "Secure" refers to the content that is guarded with an SSL certificate. –  Dominik Oslizlo Sep 14 '13 at 8:19
3  
Locked = Lock, Secured = Shield. Simple story :P –  SeToY Sep 14 '13 at 12:06
2  
Don't forget, it could be hard for users to distinct the icons meaning so it's better not rely on icons only. –  Alexey Kolchenko Sep 14 '13 at 14:53

5 Answers 5

up vote 6 down vote accepted

In this case, "locked" seems like the odd one out.

Secure means it's secure, guarded, etc. So a shield, a lock, something along those lines would seem appropriate.

"Locked", however, is used as a way of saying something's not editable. This might not be the right choice given this context. (as @obelia already pointed out)

It's hard to give a practical answer without first having a look at what the interface looks like, so bear with me;

  • You could attempt to make the "un-editable" elements like there's no possible interaction. Try reducing the contrast between the elements background and it's content, like how you could make an input field have a light gray background with dark gray text.
  • You could attempt to make the elements with interaction methods seem more interactive. Buttons, input field borders, high contrast, etc.

This approach (rather than two different icons) also allows users a quicker overview. When attempting to see if something is "secure", rather than attempting to distinguish icons, they'll either look for icons, or for no icons. If they'd be looking for editable fields, they'd look for the interaction pattern, or the disabled pattern.

Here's a quick mockup of some combination of icons and active/disabled states. Ignore the design, tell me if you could immediately tell me which ones were secure, and which ones were disabled. Or rather, tell me what the icons and the different row styles convey.

Quick mockup of different rows

share|improve this answer

If it's possible to change the terminology, change "locked" to "read only" (even though "locked" might be the more accurate term) it might reduce confusion. "Read only" could be indicated with a pencil with a red circle/slash overlay and "secure" with the conventional HTTPS padlock.

Basically making the terminology less precise in exchange for more distinct symbology. So the question is is this exchange a net gain?

share|improve this answer
1  
I don't see how 'locked' is more accurate or more precise than 'read only'. For the layman, you lock doors or people behind bars; read-only means just that - something you can only read. If I tell my grandma "This file is locked, you can't change it grandma. Understand?", she'll probably go "Ah?". But if I say: "This file is read only, you can't change it.", she'll probably go: "Ah?". But if she could hear properly, I'm sure she'd be more likely to say "OK, I get it." for the latter. –  Izhaki Sep 16 '13 at 23:35
    
@Izhaki - by some definitions "read-only" things can be moved and deleted, actions the OP has declared can't happen to "locked" things. pcsupport.about.com/od/termsr/g/read_only_file.htm –  obelia Sep 16 '13 at 23:42
1  
+1 for different terminology. Depending on the reason for "locking" an item, something like "no edits" or "in use" or "in progress" might be more clear (or at least starting points for a word search). –  user113215 Sep 16 '13 at 23:50

I can't really beat obelia's idea, but in case a read only icon is not an option, see a few security icons below.

The main problem is that often secured things are locked behind something. So to prevent this ambiguity consider:

  • Locked: Padlock / Keys
  • Secured: Shield / Rook

Whatever you pick, you may want to consider including a legend.

A few security icons Even more security icons

share|improve this answer

You may try to use the idea of a seal for secure (I see you don't want "certificate") or shield as people say.

I don't know what "locked" means in your case, but maybe "pinned" is OK?

share|improve this answer

Depending on what "locked" means in practice, one possibility for the "locked" icon is one in the style of a "no entry" sign. Then a padlock icon, or one of the other standard suggestions mentioned in other responses, could be used for the "secure" icon.

It might be easier to choose an icon to convey "no entry" if you know more about your users, e.g. what country they are from, and thus what road signs they may be familiar with.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.