Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's the best tradeoff between text and icons on buttons? [closed]

In a discussion with co-workers today, I lamented that I can't ever remember what an icon means, and have to hover over them to see the tooltips, and thus to find the button I need.

On their side, they were saying that when the text needs to be translated, it might not fit (German vs English for example), and that every place where there is text, including tooltips, it needs a translation. So plain icons are easier.

What is the best tradeoff in useability for the extra work of text vs the subset of users who are icon-challanged?

like image 471
thursdaysgeek Avatar asked Jan 29 '09 02:01

thursdaysgeek


People also ask

Should icon go before or after text?

There are certain instances where an icon will suffice in place of a text label, but use icon buttons cautiously. Do place the icon on the right side of the button after the text. Do not place the icon on the left side of the button before the text.

What is the difference between icons and buttons?

An icon is a small image, a button is a GUI widget that responds to a mouse click. It is common to show an icon on a button. Sometimes the 'button' drawing is also disabled so the button appears to be nothing more than an icon.

When Should icons be used?

Icons are most effective when they improve visual interest and grab the user's attention. They help guide users while they're navigating a page. Use too many icons and they'll become nothing more than decoration. Their use for navigation on a webpage can often cause dilution.”

Why do we need icons?

Icons explain a story. Icons are often used when explaining a process, as you can visually represent each step. They help us visually understand each step of a process and facilitate the visual separation and understanding of the elements they contain.


4 Answers

I personally prefer text and hate icon-only UI's. I know that other people think the other way, equally strongly, either because of internationalization or because their brain works more rapidly with images than with text. If you choose one or the other exclusively for your UI, then part of your user base will be unhappy with your choice. (Sometimes this is the right choice, depending on how extensively the UI will be used.)

Internationalization is really not that difficult, except for finding a firm to do good translations of your text. The programmer portion of internationalization is pretty straightforward. However, I've known a number of programmers who prefer the all-icon method as it's less work. I've personally had to replace one all-icon-no-text UI that the users didn't like. The users said they could not remember what the icons meant.

I think more typically, many advanced users will prefer icons and many beginning users will prefer text. However, a number of advanced users prefer text. IMHO, any good UI will provide tooltips, so you need to translate your interface no matter what you do.

The most friendly solution is to offer both text and icons, possibly with a settings choice to disable one or the other.

like image 146
Eddie Avatar answered Nov 10 '22 01:11

Eddie


I worked with people in a Human/Computer Interactions group and was raked over the coals for using icon-only. They had studies about comprehension, error rate, and speed of using UI's and a good icon/label combination won every time, all else being equal.

Localization should be a non-issue. You may have to localize the icons anyway and localizing a label (as long as it's stored as text and not as bits) is easy. In terms of size in the UI - that's another matter entirely. If you can't fit the text, I'd claim that your UI is too cluttered.

like image 38
plinth Avatar answered Nov 10 '22 02:11

plinth


Really they both have advantages and draw backs. Text must always be translated into different langugues, and sometimes a single word will not be able to effectively describe the action of a button. For example, how would you describe the X button which closes a window in Windows. We know what it does, and most people I know call it the X button, but it doesn't describe what it does. It's a lot easier to put a button with an X symbol (or icon if you will) than put something like "close window".

That being said icons also have drawbacks. As you eluded they may not always be clear what they do. The user has to be able to put the icon in a social context to understand what it does. This may not always be possible. Also, icons in one language may not be understood in another, leading back to the translation problem. Icons can be advantageous in certain areas as they can take a complex concept and show the user with a small amount of space. (like to take a picture show a camera, or delete something showing trash can).

The trade off is really in a case by case basis. If you have power users who really understand the application they are using and the surrounding subject, you are probably ok with using them. If you have people who use computers once a month and don't really care to learn it is going to be confusing. Its the amount of information you can convey with a single symbol (icon, picture, letter) vs. the potential frustration of the users and the overall rejection of your program.

like image 41
kemiller2002 Avatar answered Nov 10 '22 03:11

kemiller2002


Make sure you have a way to get both. Screen readers have a horrible time with icons.

like image 33
Charlie Martin Avatar answered Nov 10 '22 02:11

Charlie Martin