Do Home Icons Matter on a Site?
Just how important is the home icon on your site? Does it even matter anymore, or is the symbol somewhat outdated and defunct? One of the most important aspects of an icon is the meaning behind that icon. Will people readily recognize what the icon means when they see it? Even the most beautifully designed home icon is of little use if the user doesn’t know what it does at a glance.
Although the meaning of various icons can be obscure, there are a few universal icons, such as the ones for home, print and search. The purpose of the home icon is to mark a clear path back to the home page of a website. This icon is something the user can click on from anywhere to start fresh from page one.
The fact that the home icon is such a universal symbol makes it vitally important to include in your website. If you want your site navigation to be simple and easy to understand, then you need to figure out how and if you should include a home icon on your website.
There are actually a number of different options you can use to signify a home button on the website. Which one you choose will depend upon the overall style of your website, how modern it is and even if it is a mobile friendly design.
Home Icon Style # 1: Home-Shaped Icon
An outline of a house has been a symbol for “Home” for many years. It can come in many different colors, patterns and outline styles.
It would be quite rare for someone not to know what this icon means, so the key when utilizing this type of home icon is to make sure it integrates with the overall design of your site. You can accomplish this by changing the color, size or outline style. For example, a site focused on products for kids might use an outline that looks like it was drawn with a crayon. On the other hand, a luxury spa might use a much more streamlined outline with straight lines.
Google+ uses a home-shaped icon to indicate the home button for Google Plus.
Home Icon Style # 2: Hamburger Icon
The hamburger icon can indicate navigation. When clicked on, a bigger menu drops down. Typically, the hamburger icon will be located in the upper right of the page, and the home link will be the top link within that navigation.
The hamburger menu is quite simply three lines that essentially represent a bottom bun, hamburger patty and top bun. With the increase in the number of Internet users accessing websites via their mobile devices, this has become an easily recognizable icon that doesn’t take a lot of space but indicates you can access navigation (including home, of course).
Some menu icons use text as well as the icon to indicate the navigation. For example, it might have the hamburger icon and state “Menu.” This makes it impeccably clear to the site visitor what the icon is used for.
However, anyone who has used a mobile device will likely recognize the hamburger menu easily and realize that by clicking on it, they can navigate home or elsewhere on the site. One in every 10 people in the United States who browse the Internet use only a mobile device, so this icon is likely to become more and more popular.
One good example of a hamburger icon done well is Animal Planet’s. Note how the icon is in the upper left and is easily recognizable. The second screenshot shows that when you click on the hamburger icon, you get a drop down menu, and the home link is the first one listed. The overall look matches the style and color of the entire website, too.
Home Icon Style # 3: Text Only Icon
Sometimes the best icon is no icon at all. Text within the navigation that simply states “Home” can get the message across. Another advantage of using text to indicate where the home link is located is that the page will load much faster than if the user has to wait for images to buffer.
One example of this use of style in a design can be seen at CJ Pony Parts. Note how the “Home” text is in the upper left of the page. In addition, it’s in red, so it’s easily spotted. This is a simple, but effective, design.
Home Icon Style # 4: Home-Shaped Icon with Text
You can overcome the uncertainty of what an icon is for by labeling it. You’ll notice this technique on a lot of websites. It simply makes it extremely clear what that icon is for. So, for example, you might add the outline of a house and place the words “Home” just under the icon.
In fact, it makes the website much more usable to add text to icons. While many websites add text under or next to a home-shaped icon, you could also go a bit further and put the text on the icon itself.
One example of this type of design can be found on the website Vivi LeDish. Note how the home icon also has the text “Home” on the roof of the icon.
Home Icon Style # 5: Unique Home Icons
Another idea is to use an icon that ties directly into your branding and overall design. This might not necessarily be in the shape of a house or have text. However, if you place the icon in the right location (upper right or left), your site visitors should be able to at least guess that this is your home button.
Some sites also use their logo as a sort of home button. One example of this would be Amazon.com. They use their Amazon logo as an anchor. Click on the logo, and you are taken to the home page.
An interesting example of a unique home button can be found on Carbonmade. The site uses a little chess piece emblem to serve as the home page icon. In this instance, they place the text “Home” directly under the icon. This makes it abundantly clear to the reader where to click to go to the home page.
One rule of thumb is that users should be able to figure out in five seconds or less what an icon means. Do some A/B split testing, and if your site visitors are struggling to interpret icons, you may need to tweak them to better suit your target demographic’s needs.
AUTHOR’S BIO: Lexie Lu, the author of this article, is a designer and writer. She constantly researches trends in the web and graphic design industry. Lexie writes weekly on Design Roast and can be followed on Twitter @lexieludesigner.