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.
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
But you can design icons for links with label text for clearer usability.
Take a look at the portfolio site of Tim Roussilhe using a vertical navigation menu.
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.
But even with a site like My Own Bike you can at least guess where the links go. The site is entirely in German but the icons still give clues.
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 navigatio