Effectively Using Icons

Icons can make or break a website’s design; used correctly they can enhance aesthetic and provide better user experience, but used incorrectly they can confuse the user and have them hitting the back button without even exploring your website first.

One of the biggest benefits from utilizing icons is that they can make your website visually appealing; in particular, icons can be a great way to promote branding. A unique, consistent style can give your website personality and communicate a certain experience to the user. Depending on how you’ve designed your icons, your website can be viewed as sleek and professional, educational, artistic and creative, and so on. In order to convey such a message to the user, it is probably best to create your own set of icons rather than using a stock set from the Internet.

Icons can also be a great way to enhance navigation, and for mobile design where space is limited, they can be an especially feasible option to communicate information. Coupled with text they can help to visually break up content for easier readability, accenting information and offsetting headings and sections. Walls of text that may seem daunting to a reader can easily be organized and complemented by pictorial icons, making information easier to absorb when broken into smaller, clearly defined chunks.

However, there are some things to keep in mind when designing and using icons; the most important goal of your website should be to communicate a specific message, and your icons are no exception. For that reason, make sure to use icons for more than just visual appeal. Using too many icons (particularly for no discernible purpose) can turn an effective tool into mere decoration that the user will ignore. Many articles cite Facebook as being a particular offender in this regard in its navigation menus, for example. Therefore, use icons sparingly to increase effectiveness.

Additionally, make sure the meaning of your icons is easily understood, especially if you’re using icons without any accompanying text. Creating icons that are universally understood across all cultures and peoples can be quite a challenge, but it is important to try anyways. The best solution to this problem is to use only icons that already have a long history of standardization. Do not ignore conventions, and do not try to create icons to represent abstract ideas or complex processes. You may further improve usability by labeling your icons using the HTML “title” attribute to create a tooltip, add an “alt” tag, or simply have a text label present right next to the pictorial icon.

In short, make sure icons are uniquely appealing, readable, universally understood, consistent in design, and functional.

Sources: [ Icons in Web Design ], [ Use and Abuse of Icons in the Modern Age ], [ 10 Golden Rules for Digital Icons ]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s