Which is clearer - cog/spanner/wrench icon for desktop website settings, or a text label?

Question

Building a web-based tool which will really only be viewed on a desktop web browser (due to a restricted corporate environment).

Trying to keep it as minimal as possible with no superfluous features. The tool is for booking car parking spaces. It's very simple so all the functionality will be on one page in either an accordion or tabbed view.

I just want to add a modal settings/admin page which will allow the user to change account settings such as adding a new car reg, or changing email address.

The big question is - what is A) clearer to the user while B) looking clean on the page - a text label "Settings" or "Manage account"? Or a cog/spanner/wrench icon?

score 5 · Answer 1 · edited Apr 13 '17 at 12:32

5

Text label

The text label has the advantage over an icon as being more easily understood. That is, if the copy is clear enough. You can be quite sure what action will trigger when you press 'Settings' for example.

Icon

But icons on the other hand, can be very ambiguous. A 'wrench' for example could mean all kinds of things 'Building tools', 'Settings', ... Some icons are more understandable than others. Among the ones you've listed, in most cases, I've seen the 'cog' item used as 'Settings'. The advantage of icons is that they're easily recognizable.

Your best best, if space allows it, is to use both. Combining recognizabilty with understandability.

This is a good reference answer as well

edited Apr 13 '17 at 12:32

Community

1

answered Jul 06 '15 at 12:20

Vince C

927
6
15

1

Just to add on to Vince's answer: text can be more clear (in this case) but is also easier to skim by, while an icon may be initially ambiguous but more noticeable and easier to locate on repeat visits. Using both combines the advantages of each and helps negate their individual disadvantage. – conan Jul 06 '15 at 14:33
@conan Nicely summarized :) – Vince C Jul 06 '15 at 14:34
Here is a Nielsen Norman article on the subject. – Ken Mohnkern Jul 06 '15 at 15:11

score 0 · Answer 2 · answered Apr 05 '19 at 17:07

Not sure if you are building for a situation that has to accommodate screen readers and ADA compliance but if you choose the icon route, make sure you are following WCAG standards and including either an aria-label or a title. If you combine with text or use text alone, this is already taken care of.

Which is clearer - cog/spanner/wrench icon for desktop website settings, or a text label?

2 Answers2