Using Icons for a Better User Interface (UI)

Using Icons for a Better User Interface (UI)

UX Design

Self-explanatory icons

Today’s applications – either for the Web or standalone – are starting to focus more and more on the user interface. The time when you had to write lines and lines of commands or go through several menus to execute a certain task has passed. Developers have now implemented simple wizards, with on-screen help near each important element of the application, which will make even the most complicated task look like a walk in the park. And the easiest and most efficient way to create user-friendly interfaces is to add self-explanatory icons. These small images that take a couple dozens of pixels will most of the times have more meaning than a full paragraph of text. It’s more comfortable and efficient to insert an icon than it is to write some text explaining a certain function.

Icons are very important to the user-interface. People want to use an application’s features to the maximum and don’t like it when they can’t find how to complete a specific task. This is why developers should always create shortcuts to the main tasks that can be accomplished using their application. These shortcut items must catch the user’s attention, so adding icons will do the trick in most of the cases. The icons must be related to that certain task, so, for example, a disk icon would be a great visual enhancement for a “Save” button, as a printer icon would fit perfectly inside a “Print” button. A good set of icons in the interface will greatly improve the communication between the user and the application. Icons are colorful and, in most cases, larger than the description text of the application feature they relate to; this way, they are a lot easier to be spotted.

Applications use icons

Most of today’s applications use icons, even though pretty much all developers don’t bother to implement custom designed icons into their applications. Actually, settling with the operating system’s default stock icons is not such a bad thing as some people might think. Computer users might sometimes have some problems adapting to new applications, especially if they have different interfaces than the applications already installed on the users’ computers. What happens if you want to save and you’re looking for a disk icon, but you can’t find it because the developer decided to use a star icon? If so, there will be a poor communication between the user and the application, because the interface’s icons are different from the ones the user is used to. Application developers should not fall into this trap just because they like some other icons and they don’t want to use the same old default system icons because it would do more bad than good. The default system icons are preferred because most applications use them, so users will learn to use your application a lot faster. The functions and commands will be easier to understand because users will be able to faster identify the iconic symbols.

icons-393805_1280

If a developer wants to give their application a distinct look, they should use professional, custom-made icons, specially designed for their application. Today, such services are affordable, and you will be able to tell the designer how you want the icons to look like. In most cases, you shouldn’t go with a completely different look than the system’s icons (for the reasons described above), but you should try to give them a unique, personal touch; the application will stand out from the crowd and will look a lot better than the other ones, thus attracting more users. Changing colors, for example, is the easiest way to get new, yet similar icons.

Predict all problems

To have a good communication between the user and the application, developers must predict all the possible problems that the interface could cause its users. Are the buttons too small? Are they too big? Can the toolbars be moved around the screen? How about the menus, can users add new items to them? Also, can they replace the icons and other graphics with some of their own? How about users with special needs?

Unfortunately, there are a lot of developers that disregard such problems and create rigid interfaces, which cannot be changed by the users to better suit them. A simple answer to this problem is to create multiple skins, with different colors and different icons. The application should have a “standard” skin to start with, and then a few different skins, for example, a minimalistic skin with only a few main buttons and large icons, or an “expanded” skin with many toolbars and buttons, each with their own small icon.

Also, a skin with high contrast colors and icons will be very appreciated by the users with eye problems. Apart from all these, developers should also allow users to create their own custom skin and use different icons. There are multiple benefits from using icons in an application interface. No matter whether an application uses the operating system’s default icons or has custom-made icons designed especially for it, there must be some form of graphics in it, otherwise, people might find it harder to use. This may happen because most of the today’s application use icons to ease the learning of the application. Because most applications use similar icons in certain tasks – for example, a printer icon for printing or a disk button for saving files – it’s a lot faster for users to click on those buttons, therefore they will remember it next time they use that application or any other application for that matter. Even if later on advanced users will choose to use shortcut keys on the keyboard instead of clicking with the mouse on buttons in the toolbars, it’s really important that for starters they will use the toolbar, so icons will be very important in the communication with the application.

icon-set-597040_640


Also published on Medium.

2 thoughts on “Using Icons for a Better User Interface (UI)

Leave a Reply

Your email address will not be published. Required fields are marked *