Homepage Design- Best Practices
Author: Brandon Griggs
Level: Intermediate
I find the current state of homepage design a little perplexing. Why? Because you'd think more sites would have it figured out by now.
Home-pages are the most important pages on the web. They establish critical first impressions and guide the user to the most important parts of the site. So you'd think the knowledge of solid homepage design would have permeated into the collective web-o-sphere by now.
Um, well...this just isn't the case. An embarrassing percentage of home-pages continue to inundate users with way too many options. Even with top corporate sites, home-pages continue to be travesties of usability. Don't believe me? Still?
What happens with these types of home-pages? Users are paralyzed by indecision, become frustrated, and leave. I doubt that was any designer's goal when then presented their homepage designs.
So as one web agency's small effort to rectify this, we're presenting our best practices for designing and developing home-pages.
Some things are just more important than others
Your homepage needs to be ruthlessly dedicated to the top goals of your website. And by top goals, I don't mean the first dozen or so. Let's keep it to around 3 or 4 at most.
Think about your website from a goals perspective. Ultimately, what do you want your website to do? Build a brand? Sell stuff? When a user sees your homepage for the first time, it needs to be abundantly clear that they should do exactly what you want them to.
The easiest way to accomplish this is to start removing options that distract from these goals. Reevaluate every little link or tidbit of information and ask if it is helping reach your top website goals. No? Then remove it.
Don't assume too much about the user
Despite today's advanced metrics for targeting specific users and funneling traffic, don't assume that a new user knows anything about your site. For these uninitiated, you need to quickly define exactly who you are and what you want your user to do.
Enter the Elevator Pitch. The idea is that if you were in an elevator and had just a few moments to describe what you do, what would you say? It would need to be clear, in plain English, and very concise.
We highly recommend having some form of an elevator pitch on your homepage. This way if someone comes to your site through a link that offers little context, they are not left to hunt around and try to figure out out exactly what your site is about.
Example - http://www.thefulton.org- an elevator pitch at the top right immediately offers explanation.
Find a visual balance
Good home-page design is capable of taking lots of information and making it easy to digest. There is some definite skill here, so it's harder to provide simple rules of thumb, but some basic guidelines should help.
- Add a visual dominance. What's the single most important item on the homepage? Make sure visually that area is the most dominating, and that other areas aren't too distracting. White space, color blocks, and font sizing are all valuable tools here.
- Be creative with titles. Adding distinctive titles can enable a user to scan the titles before deciding which area to investigate further. Example- http://www.mercytree.com
- Icons are your friend. Some homepage will have many links or sentences of information that might be difficult to graphically represent. Icons can be a great way to add some color and life and visually separate these elements. Example- http://www.rbfco.com
- Grouping. If you have 3 or 4 similar items on the homepage, try to visually group them together with common themes, borders, or size. This greatly improves the speed a user can digest the page. For example, a user doesn't need to see 4 different news items upon first glance. They should see a group of news items first, and then explore those 4 individual items if they so choose. Example - the contact area on http://www.totalpayroll.com
Minimize the bells and whistles
Dynamic slideshows and Flash galleries can be effective elements of a homepage. They enable you to use less real estate to tell a larger story. But keep the elements of your homepage within acceptable user interface norms of today's Internet. With so much riding on the home-page, this isn't the greatest area to experiment with.
We even recommend having elements like video or interactivity be initiated by the user. Make it clear that you have video available, and let them push "play" to initiate that.
Example - http://www.securusgroup.com
Experiment!
Why guess when you can gather cold hard statistics on what works best for your home-page?
There's plenty of free tools to actually measure how effective your home-page is. Google Analytics is one example where you can set up an A/B test to try different methods of structuring your homepage. Different users will see these different options and the results of each will be tracked accordingly. The results will tell which method was more effective, and you continue to refine your setup with more experimentation.
Keep SEO in mind
Because homepage designs can tend to be more graphics-heavy and use more real estate for large images, it can be easy to forget that it's just as important for Search Engines as it is for users.
Make sure you have enough areas for copy, and for adding the required HTML elements like H1, H2, STRONG, and LINK tags.
And in case these weren't obvious
- Never use a splash page. Ever.
- Only one animated item allowed, thanks.
- NEVER play music or sound without the user initiating it.
- Animated sales people that begin talking right away are really annoying.
- Don't send people away from your site with outside links.