I'm working on a desktop application where most of the buttons just have text on them. Putting images (icons/glyphs) on the buttons does make the application look more attractive, but does it improve usability (assuming the images are sensible).

  • Add wireframes to demonstrate the alternatives. – Danny Varod Jul 1 '14 at 22:47
  • 2
    I don't think this is something that can be answered universally. Sounds like you have some designs, time to do some user testing. – BenjaminCorey Jul 1 '14 at 22:59
  • 1
    If images are sensible then at least it won't make the experience worse. Also remember that more attractive interfaces builds a greater tolerance of the users for usability issues, so it still potentially has some indirect benefit. – Michael Lai Jul 2 '14 at 0:40
  • 1
    The most positive effect of the use of icons/glyphs on button that I've come across so far is that it makes people familiar with the icon in association with the button. This comes in handy in responsive webdesign where on smaller viewports the available space in the header or navigation bar is limited. The use of icons with text on big viewports will allow for better understanding of the context of the icons when they are used without text on smaller viewports. – Paul van den Dool Jul 2 '14 at 8:17

Icons are a double-edged sword.

A good icon is grokkable and serves as mental shorthand for a user, improving interactions. If they see the traditional save icon, they probably won't need to read the label, and in some cases the label could be omitted to save space. This mental shortcut reduces the user's mental load.

Good icons match conventions, are simple, are easy to tell apart from each other, and tend to use "similar" or "example" iconic representations.

A bad icon is confusing and makes the user doubt the interface (or even themselves). If it is not obvious what a button does from its icon, a label can clear things up, but you then have to question what value the confusing icon adds. Even if users learn the symbols, they add to the mental load they incur when using your app.

Bad icons stray outside convention, are visually complex, look too similar to each other, and lean more towards non-standard "symbolic" or "arbitrary" iconic representations.

My personal guidelines are:

  1. Every button gets a label, icons are optional and mainly used to show how buttons are different.
  2. Use standard icons when their use matches their meaning, or at least the user's intent.
  3. Avoid creating new icons for every action, especially infrequently used ones.
  4. Carefully consider creating new icons to denote the primary path through your application as long as they will be repeated or paired with frequently used actions to aid memory and differentiation.

Reading suggestions:

| improve this answer | |
  • 2
    It is strange that the traditional save icon still remains to be a diskette, despite that physical media is now completely outdated. – sergiol Jul 16 '14 at 10:15
  • The save icon is a good example of an icon changing from an example icon to a symbolic icon over time. Similar to how padlocks and keyholes are used to represent security despite those devices no longer being very secure in the modern world. – Nathan Rabe Jul 16 '14 at 11:58

In a study for designing the UI for a dental system from 2007, they found:

One lesson learned from this study is that interface itself, whether GUI or TUI does not correlate with good or bad user performance.

Because users have different needs depending on the application and their technical skill level, there is no good answer for this as a general question.

It depends on a variety of factors.

User skill level and familiarity with images

If a group of iPhone users were asked to use an interface with graphical buttons styled after the iPhone, then they would excel and require little training over people who were not familiar with the interface. If they were not familiar with the icons, then there would be a learning curve.

Size of UI

Images don't always scale, so if a user needs a larger interface they may break the interface with a built-in browser mechanism. Also at smaller sizes a perfectly styled graphic at 16px X 16px may not be legible or discernible when reduced to 10px X 10px.

Languages being used

Images can't be translated. If you use type on a button then javascript conversions such as Google Translate widget can easily convert the text. They will not affect the graphics though.

Devices or connections being used

If the user can't load the images for some reason then the interface may break. It may also delay loading of the interface and require extra bandwidth if the images aren't cached.

Hearing impaired

If the users may need a text reader to use the system, then the alt tags on the images may seem like duplicate buttons.

Final thoughts

If the graphics add to the user's understanding of the task at hand, then go for it. If they distract from that task they may impede performance or cause an unnecessary learning curve.

You'll want to A/B test the outcome and get feedback from the users.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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