Affect The User Experience

Interfaces are all about communication and getting things done. A website’s UI is a means to an end, and the designer’s job is to create an interface that helps the user reach that end quickly.

Icons are perfect for interfaces because they convey meaning without words. Users can learn how an interface works just by studying the visuals and interacting with the elements.

In this post I’ll cover a few different ways to use icons to improve the quality of UX on a website. There are no perfect uses but there are commonalities between great icons and an improved user experience.


Enhanced Navigation

Icons naturally help users navigate through a website based on visuals alone. The best icons are the ones that most people recognize so you always want to stick with these first.

Tim includes icons above each link label to distinguish between purpose and behavior. It’s one of the clearest methods for icon use because it’s easy to see and easy to understand.

Always remember to include text labels for links too. Pure icons for navigation rarely works, or at least it’s not the best case for usability.

Another really important icon is the three-bar menu icon. This is also called the hamburger menu and while many designers hate it, more people are slowly realizing what this symbol means.

The menu on Inc is another great example showing how icons tie into navigation.