Better home link buttons

Wow! I cannot believe myself that I am actually posting a new article here at Web International Awards. As I mentioned in an earlier post, it has passed quite some time since I posted anything here.

Nowadays, it is generally accepted the fact that logos placed in the header of a site usually link to the home page. Most internet users know that. Some actually don't. That's why almost every site has in the navigation menu a link saying "home", "index" or "start". What if you have so many links, and boy you'd love to de-clutter that menu. Surely, the first option would be removing the text home link. Doing this lets your visitors unable to return to the homepage unless your logo links back to the root of your domain.

The issue is that most users who do not see a text home link try to see if there's any other option to get back home. Most of them go back to the top of your page where your logo is. However, no logos out there shout "Hey, Click me ... Click me ...". There's one solution, which is very easy to implement. You can add a small css snippet to your styling sheet and make the mouse pointer change to... well, pointer. This usually happens by default on links, but you should definitely do this on anything that's clickable on your site.

The best way to do it!

One more enhancement I have seen recently is doing an image rollover to your logo. So, when anyone hovers it, transform it just like in the example below. Kingtray.com does a great job, as when you hover their logo, you see a house with an alley going up to it. What better way to say HOME ?

WebDesigner Depot has a magnificent design. The header is bundled with lots of graphic elements, and the logo is moved to the right. Most people look on the left side of the screen (naturally) for logos, home links etc. However, Walter (owner of WebDesigner Depot) did a great job. If you hover the logo, you get a nice animation and a tooltip saying "Go back to our homepage". Wonderful! Unfortunately, that lovely tooltip disappears if javascript is disabled but don't worry. If you want to do that on your site, but fear of graceful degradation, you can check out this great full css tooltip.

I hope you enjoyed this article. Let me know what you think about it in the comments. If you liked this one, you can stay updated to upcoming articles via the rss feed.

Published on Tuesday, March 24th, 2009 at 7:23 pm in usability.