When to use icons instead of texts? Are there good practices related to the subject?
Ex:
-
1For what type of application: one that the users visit rarely ( website ) or one that the users use frequently ( enterprise application ) ? There is difference between the two. With websites people just scan it while with enterprise apps users kind of have muscle memory and know well how the app is structured.– Kristiyan LukanovNov 23, 2016 at 10:04
-
3Using icons makes copy pasting table contents difficult.– SpaceTruckerNov 23, 2016 at 13:12
-
2Thank you for saying "good practices." "Best practices" is, I think, a terrible phrase.– Ken MohnkernNov 23, 2016 at 13:24
-
For your consideration: Icons need text labels on them.– Ken MohnkernNov 23, 2016 at 13:29
Add a comment
|
3 Answers
In this question you can see several answers about when to use text vs icons.
I would go for all text as icons are not always understandable by everyone in the same way and some of them depend on the user's context.
What I would advice in your case is what Google Material says not to do in this note:
Don't.
Do not combine text labels with icons. Use either all text labels or all icon labels.
Edit: Here is some useful information about the use of icons:
Many researchers have shown that icons are hard to memorize and are often highly inefficient. The Microsoft Outlook toolbar is a good example: the former icon-only toolbar had poor usability and changing the icons and their positioning didn’t help much. What did help was the introduction of text labels next to the icons. It immediately fixed the usability issues and people started to use the toolbar. In another study, the team of UIE observed that people remember a button’s position instead of the graphic interpretation of the function.
In most projects, icons are very difficult to get right and need a lot of testing. For abstract things, icons rarely work well.
-
+1 was just about to say this, whichever you choose (although I'd say choose text) stick with it. The consistency is the most important part. Nov 22, 2016 at 16:56
-
One shouldn't mix and match, but I'd argue you should have both. Once recognized, icons are typically quicker to spot and identify over a line of text Nov 22, 2016 at 21:20
-
2They sure are but the thing is "once recognized". We can think we can rely on some icons, such as a heart or a star or a magnifier (which my grandmother believed was a racquet), but they certainly are understood differently by people. What we can is recognise this icon implies "like", even if we don't understand what the icon represents. But these need to be learnt, so I'm not sure what I would interpret the first time I saw that "status" icon. Point is, you can't even rely 100% on known icons.– AlvaroNov 22, 2016 at 23:23
I would take into consideration 3 factors:
1. The Icons
How Obvious are the icons? Are they commonly known and used for a single purpose? or you are developing your own icons?
2. The Users
Would you say the users are "power users"? Or they come from an average technical background? Maybe their skills are even weak?
3.The Usage / The Context
How often does a user use the Application?
What device is he/she using?
Any other facts matter?
After answering those questions, we can consider the different options:
Icons Only
I would go for this approach, only if i'm 100% sure that my users are power users, the icons are correct, and still expecting that something might and will probably go wrong.
Icons with Tooltips
Investing in Tooltips is the safer approach, for instance when a user hovers the mouse over the icon, a tooltip shows to tell him what this field is, this will teach the user about the icon, so if he/she use the application continuously they will learn what each icon is.
The safest would be:
Icons with Text
Although we are using text, we are still empowering it by icons, since our brains can process visuals faster than text, refer to https://www.quora.com/In-UIs-do-people-recognize-icons-faster-than-words
Yet still, notice that i tried to reduce the contrast of the text so that it does not attract a lot, although it won't be as clean as using only icons, you will find yourself many times in design where you have to make compromising decisions, and this is one of them, but still we try to make it as clean as possible in any way we can.
Please note that i am not claiming these are the only solutions, instead to explain to you what are the causes and effects that you may have, and what are possible solutions.
You will always be able to find better solutions the more you research the design methods, and the more you understand the context of your problem and the users.
PS: Some have mentioned about the practices of not combining both text and icons which is recommended by Material Design. There is no real universal thumb rule.
This is Google Chrome, and since Google are the ones who developed the Material Design. Yet, they are using text and icons in some cases.
-
10Wow....I just realized that the Apps button is colored like the google chrome logo. It's basically just a pixalized chrome logo. ::glass shattering::– dberm22Nov 22, 2016 at 22:52
-
1I like the Icons with tooltips option. It saves a lot of screen space and if the user doesn't understand the meaning of the icon it can hover over it and understand. Great! Nov 23, 2016 at 9:58
-
1Re. your P.S.: I took the "don't mix text and icons" to mean "don't mix text-only headings with icon-only headings" (as in the ALL/♥/RECENT example above), and wasn't talking about a combined icon/text heading. Nov 23, 2016 at 12:04
-
Why would power users ever prefer just icons? Power users are the ones most likely to have the positions of the columns memorized, and never even have to look at the headers, so it wouldn't matter which one you used. Therefore, optimize for new and occasional users: use either icon+text or just text. Tiny icons are far too ambiguous. I'm seeing more and more people make this mistake of choosing icons over text, presumably because some designer thought it "looked better". Don't be one of them! Nov 23, 2016 at 12:23
-
1There certainly is a rule of thumb: "prefer text over icons unless you have a darn good reason, since text is easily understandable, whereas icons are inscrutable and ambiguous." The icon chosen here for "country" is a globe, which does not at all represent a country. The icon for "status" is a specific status, which is very confusing, because it looks like an indicator rather than a label. I don't mean to pick on these specific icons, but rather to make the larger point that selecting/designing a good icon in a tiny size is so hard as to be almost an impossible task. Nov 23, 2016 at 17:04
Dont use icons in this case. Icons are used for different purpose, the main idea is to let user understand quickly. I think you should maintain a consistent lookand feel to avoid breaking user's flow while he goes through thecontent. some of the important use cases for icons are:
- Dashboard Sidebar Navigation, here you can use icons (or icons with text).In case the sidebar collapses, the icons can still denote the particular sidebar item.
- special input text boxes for date, time, number, search, email. this helps user u derstand that what he need to provide as an input.
- action buttons for add, edit, delete, update, save inside a editable table. this is done to reduce the space.
- action buttons for UI change triggers like icons for accordian collapse/expand, close, minimize, fullscreen,close modal popups etc.
- icons as hint for users to help in navigation e.g. instead of writing "scroll to see more content" you would prefer a down arrow icon (with animation if required). another usecase can be icon button for jump to start of website once you scroll through the bottom part of website.
