Due largely to the advent of apps, many webdesigners are choosing to do more of their site’s navigation with the help of icons rather than text. After all, doesn’t it look so much cleaner just to use an icon in place for an RSS feed, or for a Twitter account, than to spell out “RSS Feed” or “Twitter” in text?
Well, yes and no. Icons can look clean and tidy–that is, until you have tons of them on the page. Too many icons can make your site look more like somebody’s cluttered desktop. Plus, if every single navigation link on your page is an icon, users can get easily confused about what to click or tap to navigate your site.
Just like candy, small doses of icons are best, so that your design looks sleek and doesn’t suffer from icon overload. But how many icons is too many? It really depends on how you organize them on the page. See below!
Think carefully about where you place and arrange your icons.
Considering your layout, how and where would your icons be best placed? For some layouts, a small table of icons might work best if you only have a tiny bit of space on your sidebar, in your header, or in your footer in which to display them–see an example below:
But if you have a small strip of space across the top or along the side of your content, you can place icons there, as seen below:
Horizontally-aligned icons can look cool as part of a navigation bar…
…and vertically-aligned icons can look neat on a sidebar.
Give at least 10px of space between your icons.
Visual spacing around your icons is hugely important. Whether you choose to arrange them in a table, like the example above, or whether you choose a vertical or horizontal strip, leave a bit of space around them. This will prevent them looking all crowded together and unreadable. The icons in my example above are spaced 10px apart, giving each one enough space to be clicked on and understood as separate entities.
Be ready to reduce the number of icons.
Take a hard look at all your icons–if they’re collectively taking up at least 200px of vertical/horizontal space, you might have too many. One way I get around this design issue is to design my icons’ display, leave it alone on my hard drive for a few days, and then come back to it with fresh eyes. With time away from it, I can better tell if there are too many even to my eyes. In that case, I pick out the most important ones (the ones I really want my visitors to click on) and put the rest on another page, well-spaced. Try this–your users’ eyes will thank you!
Make use of alt and title text.
For some layouts, you may not want the added clutter of text displaying every time you hover over an icon. For that, you can use alt text in the <img> tag and title text in the <a> tag to stand in for the text hover labels I showed how to do earlier. See how the alt and title text works in the icon table, below:
(Optional) Make a text “hover label” for each icon.
Whether you choose to do a mouse cursor hover effect for desktop users, or a “tap-to-reveal-text” effect for mobile users, it’s important to make it clear exactly what the icon represents before your visitor clicks on it.
There are plenty of dynamic script-heavy ways to do this (like using Foundation), but if you want to label your icons the old-fashioned way, here’s my hack:
1. Put link text below each icon; make the a:link and a:visited text color the same as the background color, and make the a:hover text color a strongly-contrasted color, like the examples below:
For this, I put each icon into its own table cell, and then put a line break between image and text within the link, like so:
<td valign=”top”><a href=”http://www.facebook.com/”><img src=”facebook.png” border=”0″>
<br>facebook</a></td>
For this example, I gave each icon its own table cell and row, and just put a few non-breaking spaces between linked image and linked text, like this:
<tr><td valign=”top”><a href=”http://www.facebook.com/”>
<img src=”facebook.png” border=”0″> facebook</a></td></tr>
Remember that you can have multiple lines of text displaying underneath or to the side of your icons in this format (just using HTML line breaks), as shown below:
The size of your icons is your choice–but think it through!
Icon size is a personal choice, but it also depends on the grandness of the layout you’re designing. If you have a very simple layout, small icons might look sufficiently different enough for users to notice them; if you have a very detailed, graphics-intensive layout, you’ll likely want bigger icons so that they stand out more.
(Also, for responsive layouts meant for mobile designs, big icons are easier for fingers to tap. This message brought to you by a girl with big fingertips. :D)
Summary
Adding icons as part of your site’s navigation is up to you–just remember that a few pieces of icon “candy” go very far on a web design!
