Colliding icon meanings

Question

In the interests of fitting in with design guidelines and not wanting to endlessly push icon pixels, I try and use Android's₁ built-in icons as much as possible. Occasionally, that means combining two together to make a whole new one. Mostly, it means trying to give an existing icon a new meaning₂.

On one hand, this makes sense, as the icon will completely fit in with the look and feel of the OS. On the other hand, this is potentially very confusing for users, as the icon may not do what they thought it would based on its use in other apps.

Android's most recent icon sets are simple and beautiful; I want that simplicity and beauty in my app. They generally have a clear meaning; I want my icons to have a clear meaning.

If an app has many steps completed in a row, someone might make a mistake and desire Undo. A backwards pointing arrow will make sense, regardless of if there's one at the bottom of the screen.

If an app has a pane of information floating over the main content window, #4 below seems like a logical "Collapse" icon in that context.

_{The latter two examples below are actually instances of Android changing an icon's meaning, but I'm not taking that as validation.}

• 1: "Back" or "Undo"?
• 2: Officially "View as List", but could easily be "View Document"
• 3: "Download", when rotated, could be (4) "Close Pane"
• 5: Commonly used as "Lock Pane" on desktops, it's "Make Available Offline" in Android
• 6: Commonly used as "Open", it indicates pictures are in a folder in the Gallery app.

So, what is the ideal course of action when reusing OS icons in an application? Will context win out? What other things do I need to consider when reusing existing icons?

<sub>1. Examples all from Android, but this surely applies to many/all OSes.
2. Shamelessly stolen from Rahul's comment since it was a fantastic idea and an issue that I face almost every time we add a new feature.</sub>

Answer 1

I massively disagree with this approach. Convention > Context. A user who is used to seeing an icon everyday that always means 'view as list' will be disoriented and frustrated when it opens a document. You can make a similar looking icon to open a document, but even then it must be distinct enough that users will not mistake it for 'view as list'.

It 'could' mean 'open a document' IF that was the users association with it, or your app was the only one using it (your app defines the association). But because its part of the OS it can't mean 'open a document', it has to mean what it means.

4 is the only acceptable option imho that got presented as a re-use, and even then I would advise against it. Collision left or right usually means, 'end of set'.

The whole idea with UI is that the user comes first, and whatever is the most intuitive for the user is the only right answer. That is where the focus should be. Reusing icons for any reason other than preserving the OS convention of their meaning is unacceptable.

I understand that you want to save time and bytes, but the user comes first, time and bytes are tertiary. It better to have an excellent and intuitive UX and slightly more dev time and memory used than an app with perfect memory usage that confused the user. If you confuse the user its a bad app. Period. Why risk it?

I understand Benny's answer, but feel this is a very different scenario. The whole device is one context. We are not talking about something that everyone knows has multiple meaning (like abbreviations), and that there are millions of iterations of that meaning around the world. We are talking about a limited set of icons with single defined meanings operating in an environment that is at most 2 contexts deep.

Sorry for the railing rant.

Answer 2

Yes! Everything you do is dependent on context. There are far to many variables otherwise. As an example I can mention my previous work on Flextronics (EMS-manufacturer). Global office had a mission to list all the abbreviations within the company into one single entity. Good idea, everone thought. They went on a tour around the world collecting every abbreviation and description there of into an CMS. When they reached the letter D they gave up since the abbreviation DFT had seven different meanings, all dependent on context.

Answer 3

I agree with Fresheyeball that Convention > Context. So generally I think on a platform you should NOT reuse the same icon for different functionality.

Icons are complex though because they are not used consistently. In other words in some cases the conventions don't really exist yet. Then you have more of a problem.

In the case of back/undo ... a back arrow is used in lots of software to represent undo. I would say this is pretty much a convention. But it would be quite easy to draw a different back arrow:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Or a more right angled version that fits in with the Android look....

I notice on google images that others use the back arrow with a shortened lower line. People are pretty good at picking up subtle differences - so this might be fine.

I am surprised that they use that list icon. But I guess a list could be thought of as a type of document (?). In which case this could be seen as a "view" icon.

The only way to tell if your icon set are causing problems is to user test them. Luckily they are quite an easy problem to fix.

Answer 4

Don't reuse the icons if they have another meaning in the OS. User who use your app often would learn it but imagine a lot of apps do it. The original meaning of the icon get's lost.

Have a look at the noun project where you'll have several icons you could use.

Example: Download

Answer 5

I advise against reusing or repurposing icons. As has been mentioned above, convention trumps context in the use cases you are describing. Keep in mind that all of your users spend most of their time on other people's sites/apps. This means that users learn more about the meaning of icons outside of your site, making it critically important that you match established conventions.

Answer 6

Icon can be confusing, true but so can be the words. For example,

View, Preview, Details, Read More, Show, Show Details etc can all mean same or different depending upon their context. Icon on their basics are merely a "visual word" and their meanings can be different to different people. BUT

There are few words which have become standard and are accepted by the most users. Term "Preview" is pretty much a standard to view a document before printing. If I would use term "View before printing" or "View" to mean the same, I would be misusing the standard phrase. But that doesn't mean "Preview" has been reserved for printing only. You use the same term before publishing your blogs, importing, exporting and downloading a large image file etc. Even though "Preview" is very well understood in context of printing, it doesn't mean you never use it for any other purpose.

Now replace "words" with "icons" in this scenario. Icons are although a visual element, they are merely a "visual-word" which is written differently than "text-words". Icons may well be as facilitating or confusing as much as a word can be. Feel no frustration towards icons for that because if you see, they are more universally understood (or confused) than text-words. Icons are only the bigger-players but they still play by the rules of "Text-words".