Design Class #1: The Homepage

I know, what you’re thinking:

What a pompous name for a category of posts! Who do they think they are?

Does that make it less pretentious if I tell you that we won’t be the ones “teaching”, but instead that we’ll try to summarize and link to the articles written by la crème de la crème of the web design/usability industry: Jakob Nielsen, A List Apart, 37 signals, Vitamin and so on? I thought so. It had to sound a bit grandiose and magisterial, right? So let’s start with the obvious first topic: the home page (aka HP).

Ah, the scary but exciting moment when you are facing your prospects and are about to unveil the way you imagine THEIR home page. You know that this is the slide that they’ve been waiting for since the beginning of the presentation, since the day they’ve briefed you as a matter of fact. So you’re doing your best to explain what led you to design the page this way, hiding your shaky and sweaty hand-palms, trying to sound clever as an usability expert who understands the brand so well. You know that you’re carrying on your shoulders a huge responsibility: if they hate your HP, it won’t matter if everything else in your powerpoint is perfect, the pitch is probably lost. But if they love it, get ready to pop some Champagne!

The home page is the first impression that your prospects will get from your design and understanding skills. It’s also the first impression that your client’ clients will get from the brand’s site. And you rarely have a chance to get a second impression. So you’d better get it right the first time!

Ok, I am slightly exaggerating. The HP is not the only door to your site. Search engines will link to internal pages, so will RSS feeds and hyperlinks. According to J. Nielsen, only 40% of the users arrive on a site by the home page. But still, it remains the window of your brand to the world. Here are few tips that we gathered to help you design a successful one.

#1: Forget the HP for a bit.
Yeah, that’s right, to design a better home page, do not rush into it. Go for the other key pages. If you’re working on the redesign of an e-commerce site for example, start with the most crucial page, the product page, the page where visitors will find the most valuable information and where the transaction will take place. This will allow you to focus your attention on the usability of the site and to become familiar with the design and the grid you’re developing before attacking the Big HP.

Also, and trust me it’s not negligible, your co-workers will be less willing to criticize this internal page than the window of the site: the Home. Once you feel confident that your internal page works, go up one notch, and work on the category page or N-1. You will crash-test your first design then. Can you maintain a consistent structure across the site? Can the graphical elements you’ve created be adapted to different layouts and amount of information? You should have your answers by now. If not, go back to the previous page and revise it. Once you are confident with your internal pages, open a new Photoshop document to draft the home page.

The other wise thing about postponing this step is that the more you wait, the more definite the content or the HP will be and you will have a better understanding of the elements to highlight and prioritize on it.

#2: Don’t expect people to know the brand and what’s on its site.
Be explicit and start with a tagline summarizing all of that. Make sure that you emphasize what the site offers that’s of value to users and how its services differ from those of key competitors.

#3: You’re probably gonna try to squeeze in as many elements as possible on the home page.
Besides the navigations, you’ll want the company’s latest product announcements, the blog’s highlights, a way to subscribe to the newsletter, some corporate stuff, some special offers, some incitations to join the e-Club, and more… You’ll need to prioritize with your client what’s really needed on the HP and what can be dumped. It’s certainly more important that the page is not too cluttered, that some white space will avoid diluting all the elements into one big mess. Paul Boag has a clever way to help you filter what will make the final cut.

#4: Don’t be scared by the fold.
J. Nielsen has been saying that since 1997. People are used to scroll and they will. So don’t try to push everything above the fold. Plus, with all the screen resolutions available, where is the fold? So forget about it and spread your content vertically. Ok, navigations should be above the fold. And the main content should start above the fold. But don’t limit yourself to make everything fit in a 1024×768. You can read more about AOL’s experience with the Myths surrounding the fold here. If you’re afraid that users won’t see that they should scroll to discover new content, use the cut-off look.

#5: Make high-priority tasks stand out.
If the site is mainly about managing your bank account online, the user should not have to look for the link to do so. If it’s an e-commerce site, you want to funnel the customers towards the catalog.

#6: Show-off the new stuff.
It will give visitors a good reason to come back often. Plus they probably came to check out the new product they saw on TV or your latest offer they’ve read about in a newspaper. Make it easy for them to find it.

#7: Adapt your HP to different users.
The new ones, the ones that have been coming for years and could navigate the site blind-folded, the ones that are logged in, the ones that have not yet created an account, the ones that have just started using your social network and that don’t know where to start. All those different profiles have different needs and expectations. Don’t let them leave because they don’t know what to do next.

#8: Emphasize the Search Engine,
Especially for information and e-commerce website. Because it’s a primary entry point. Besides accentuating it, make it useful. Check the 2-step search engine on the Apple’s site. A beauty. No, really.

#9: Make beautiful what has to be beautiful, make simple and obvious what your users will really need.
The links should look like links, the navigation bar has to look like a decoration bar, not a decoration item. Graphics should have a purpose, not just be decorative.

#10: Test the home page like a real user would use it
Try to complete objectives that you’ve set before with your client. Make sure that the essential content and functions are given priority and that the navigation elements are clearly labeled and leave no room to confusion.

You probably knew all of this already but next time you design a home page, you case check that you’ve taken into account those 10 points. Is there anything that you feel is important and is not mentioned in the post? What about your favorite home pages, what are they? Do you have any HP stories to share? And finally, did you find this useful and if yes, which topic would you like us to talk about in the next Design Class?