The Anatomy of an Effective Homepage

by in Design on 17th Aug 2011 · Comments

At one time the homepage would be the primary landing page of a website; the first page a user would see before continuing on through a website to find the page that allowed them to perform the task they wished to complete. Yet as time passed, and services like Google appeared, the user now more frequently bypasses the homepage dropping directly into where they want to be on your website.

The Anatomy of an Effective Homepage


Although this clearly has led to the decline in the effectiveness of the homepage in the overall conversion rate of a website it still serves as a billboard for your website. It is a page that should quickly and easily communicate not only what you do but also a company's ethos and personality to users both new and old.

This article will try to uncover what a modern homepage should be and the purposes it should fulfil.

The Constants

There are constants you will find in almost all website home pages no matter the differences in style, placement and marketplace. In fact such elements can be the backbone of a whole website, never changing no matter what page a user will find themselves on.

Logo

Of course the logo is an integral part of not only the homepage but also the rest of the site, but this doesn't necessarily mean it must be the same on all pages. Take for example Facebook, as happens with many similar websites both the logo's placement and size changes on the homepage from how it appears when logged in.

Facebook
Facebook

The reason for this change is one of recognition. When a client asks you to make their logo bigger this is usually why; they think users won't see the logo and recognise the site as belonging to their company.

Facebook has reversed this thought process by understanding that its members are aware of who they are so the logo can be much smaller when a user is logged in. The need for a user to recognise the brand is only necessary for newer users where the homepage is their primary landing page.

Navigation

For a small brochure website the navigation can remain constant throughout the website with links to all pages available on every page. As a site becomes more complex a page within a website may change its navigation to suit the user’s position within the website, for example the BBC Sport website.

BBC Sport
BBC Sport

As you navigate within the individual sports the navigation alters to display only a link to its parent and child pages, all other sports are hidden to ensure the navigation does not become overcrowded and to ensure the navigation remains relevant to what the user objective may be.

The same is applicable for a website’s homepage, though it acts as a rendezvous point for when a user can't find their way on a website it does not need to become a map to every page. Instead it should lead the user through a specific journey to the major sections of the website. For any pages of less importance the links to these should either fall within these sections, be linked to from a smaller secondary navigation or from other elements within the content of the page.

Search

Though not found on all websites many now utilise this feature as it hands over greater navigational control to the user and also allows a website to reduce the number of other links in a page. Its location on the page can differ depending on its perceived importance. For example on an ecommerce website the search is an element of high importance so appears in the header, possibly taking precedence over the navigation. For a blog it may be common to see the search box in the sidebar or even the footer.

Play & Veerle's Blog
Play Veerle

The placeholder text within a search box can also guide the user to provide more relevant information for their search or allows them to consider what alternative information may be entered. For example including text such as 'Search by name, id, colour or size' may affect how a user will search the site and how accurate the results may be for their particular search.

Content

Some pages are about functionality rather than content and as such have little in the way of written text, the homepage should not be one of them, but so often is. For some websites, especially ecommerce websites it's common to have little to no content on a homepage as it is deemed unnecessary; the space is better taken up with products. Or a website will hide the content in some shocking ways, primarily suggested by a very incompetent SEO company.

Although large pieces of content will never be the primary focus on pages such as the homepage they are an important factor not only for SEO or accessibility reasons but they can also provide users with valuable information, especially if the website doesn't have an 'About Us' page.

Dealing with Objectives

The remaining elements of a homepage tend to deal with the differing objectives of both the user and the business. Though you would hope both would be the same this is not always the case, instead a business may hijack its website to push its own agenda which may not always be in the interest of the user.

User Objectives

We all understand that a website comes about from a business wishing to push their objectives in order to generate extra revenue. But in creating a website the elements that go into this website will primarily be there to create a good user experience and help guide the user to the objectives they have.

Amazon
Amazon 1

If we look at the Amazon website we can see a few of the features built to serve the user objectives. The smart defaults that Amazon provide as part of its recommendation service give each user a personal experience on the home page, providing targeted products which they may wish to purchase. Providing such a clear and easy route to the products users will be more inclined to buy which will certainly please the user as well as suit the business objective of generating more cash.

But user objectives aren't just about what appears tailored to the individual user, the constants mentioned above though deemed standard in a website are included to suit the user objectives. The inclusion of such elements don't directly serve a business objective other than as a consequence of improved conversion through better user experience.

Business Objectives

Though the two objectives can overlap and a business objective can benefit a user these elements are likely to benefit a lower number of users if any at all. Again let's look at the Amazon website:

Amazon
Amazon 2

The Kindle is clearly an important product to Amazon being the one item on the site they gain to make the most return from, so to push this they utilise the centre banner space solely to push their business objective which is to sell as many Kindles as possible. A good sale or offer here can certainly please the user and help them in their own objectives but in this case if the user objective does not include buying a Kindle then this space is not aimed at the majority of users.

Also at Amazon you can see advertisements where it can be assumed Amazon make some return. In my opinion adding advertisements serves only the business objectives, especially in Amazon's case as it cannot be argued that these help fund the running of the site in any measurable way. In fact sending users off Amazon to another site can't be the objective of many users who have visited Amazon with a specific goal in mind.

Both the user and business objectives need to be considered when adding any element to the website. If an element on the page does not serve one of these objectives it must be questioned as to whether it be included at all. Such elements are normally purely decorative and though they can help achieve a specific design style it must be considered whether inclusion in the design is warranted at all.

Communicating Purpose & Personality

As well as providing methods to allow a user to fulfil their objectives a site should also communicate the purpose of the site quickly and the personality of the company as a whole:

Purpose

When you visit a website you can quickly tell if the website is selling a product, a service or is an informational website. Then a user will look to see what kind of product, service or information is on offer through the website; but how?

Logo

As well as a device to provide confirmation to a user that they are on the correct site a logo can communicate exactly what the company does. Take for example the McDonalds and Burger King logos, and forgetting how almost everyone knows these two companies.

McDonalds & Burger King Logos
Logos

The Burger King logo looks like a Burger, so that even without the inclusion of its name you might be able to work out exactly what the company does. On the other hand the Golden Arches of the McDonalds logo do little to say anything about a restaurant, food or burgers. Though widely recognisable today logos like McDonalds and Nike do little to inform new customers anything about their business.

Imagery

With the exception of some awful stock photography the imagery on a website can easily communicate the purpose of the website, for example the women's clothing store Topshop has a large image with a woman in fashionable clothing. Instantly a user will start to create an impression of what the site is about and with other elements on the page quickly understand that this site sells fashionable women's clothing.

Topshop
Topshop

Microcopy

Microcopy are all those small bits of text that make up navigation links, headings, strap lines and such. For me navigation is what plays a big part in communicating purpose. Not only can the links piece together an image of what the site is (like the Innocent website with the 'Juice' as its first link) but a little more work can be put in to expand a generic link into one that describes exactly what the website is about.

Innocent
Innocent

For example take the navigation link 'Services', not many will figure out what a website does from this but change it to 'Web Design Services' and a clear picture forms in the users mind.

Shopping Basket/Cart

This is a personal favourite of mine as a way of communicating what a website does. If a website is selling a product then the most recognisable way to get this across to a user is to include a basket in the header, either as an image linking off to a page or by showing an overview of a person's purchases so far. If a site does not show individual products on its home page then this has to be the single best method to make it clear to the user that you sell stuff on your website.

Majestic Wine
Majestic Wine

You can also add even more information by styling any basket, cart or bag icon to match the kind of products you sell; much like Majestic Wine have.

Personality

When trying to convey the personality of a company things can become somewhat complex as a company's services or products can have a perceived personality that do not always match. For example a company behind an adventure play venue could be rather the corporate beast but when marketing its business a corporate image is most certainly one they cannot convey.
Instead a company's marketing and namely its website must align with the expectations of its users and this is done in a few ways.

Design

Lack of personality is as important in some respects as adding personality to a design. Take for example a corporate website like IBM:

IBM
IBM

Though in some respects IBM avoids too much of the corporate blues or cheesy stock imagery of people shaking hands it does communicate a cold corporate image. In doing so it lacks personality, but this is in line with the expectations of its customers. With IBM primarily a B2B (business to business) company it needs to show a professional and neutral image at all times. A lack of personality rarely would dissuade a customer from using a company like this but adding too much personality could actually harm the business.

But on the flipside Innocent possibly miss an opportunity. Recently Mike Kus has blogged and spoken about how Innocent's website possibly lacks the personality it so effectively communicates through its products and other media. Remember this is the company who writes 'Stop looking at my bottom' on the base of its cartons. Mike’s perception of the brand does not align with his expectations so he attempted to realign the design to suit how the Innocent design could convey more personality.

Imagery

Imagery and design very much work together when giving a website a certain personality. Imagine a nursery website utilising imagery similar to that of the NSPCC. Though the subject of the imagery is correct the tone is wrong, instead light colourful imagery of happy children would be required to portray a personality of fun.

NSPCC
Nspcc

Images within a website communicate a lot of information in that a user can consume much more information, far quicker, from an image than from text. Using imagery that is misaligned with the expectation of a user when they first visit the page can be the catalyst for them to head for the back button without ever having investigated the website further.

Language

As mentioned content and microcopy play a big part in any website, in fact all the other stuff, design and imagery is primarily used to make the content look more interesting in order to keep a user on a site longer, so that they will read the content that is presented.

As most will know once you get the user reading the content it must be engaging and structured in a specific way to engage the user so that they continue reading, but this isn't always an easy task. Not only should the content be engaging but it can also communicate the personality of the website through tone and language.

Take for example many 404 error pages where designers use this as a method to inject some humour into an otherwise annoying issue. Frequently this humour isn't translated through the rest of the website so this begs the question 'If humour is appropriate on this page why not through the rest of the website?'. At times humour isn't appropriate through the rest of the website but if it aligns with the personality of the website then it could create a highly engaging experience for the user.

The Fold

When designing your homepage it's important to consider what elements are to be placed above and below the fold. As a moving target it's never going to be an exact science but it's widely understood that the primary navigation and call to actions should appear above the fold. However on the homepage it's important to communicate the purpose of the site as quickly as possible which means above the fold. If a user does not understand what a website is offering them then they will not scroll in order to find out.

Sports Direct
Sports Direct

When you don't do this you end up with a site much like Sports Direct, who in this image have clearly chosen to promote their sale above all else. In doing this they have reduced any communication of purpose solely to the elements within the header, something that actually loses a lot of focus due to the striking design of the sale banner.

Inconsistent Layout

Throughout the rest of your site you may have a fairly rigid grid system with a two or three column layout so people always know what to expect from page to page. The homepage can however be freed from such constraints and a more creative, unique homepage is possible. The constraints of a multi column layout that must serve the content of internal pages can be modified to suit a greater purpose when applied to the homepage.

In ecommerce websites a homepage is adapted to include elements such as full width banners that can provide a lot of screen space for sales, promotions or simply high quality images of their products. Sticking to the same layout used through the rest of the site constricts a designer into creating a homepage which must suit the limitations created through the rest of the website, this simply isn't necessary and can greatly reduce the effectiveness of your homepage.

Changes

In the intro I mentioned that the homepage of many websites now gain less traffic than they once did but even some of the users that do still land frequently on the homepage can become blind to what appears as they bypass all the other information and head straight to the single element they know will lead them to their goal.

There is a simple way to combat this and this is to keep refreshing the page. This does not mean that the whole page needs to be redesigned but if possible have areas of the page that can be updated regularly that will draw the user attention. This could be in the form of promotional banners, slideshow galleries or news items.

It may be argued that distracting the user in such a way could distract them from their task but most will continue and maybe be more inclined to purchase if any changeable content happens to suit their objective.

Examples

Below are examples of websites that have effectively communicated their purpose or personality within the design of their homepage:

Teefury
Teefury

Gowalla
Gowalla

Diablo Media
Diablo Media

moo
Moo

8faces
8faces

Alton Towers
Alton Towers

Reinvigorate
Reinvigorate

The Ritz
The Ritz

Corkcicle
Corkcicle

Instagallery
Instagallery

Conclusion

The homepage should always be seen as a different entity from the rest of the website, a page that should follow the design style of the rest of the website but something that can be freed of all other constraints. Concepts such as layout, purpose and personality can all be played with to create a more visually pleasing but functional homepage.
The homepage is rarely the page where a user is sold a product or service so it instead can be tailored to provide the user the understanding of what the website is about and give clear entries pointing towards the information and pages that can more effectively convert users into customers.

Consider your homepage like a roadside billboard, it has to provide enough information and interest in your website for the user to then continue within the site, it does not have to sell them anything there and then.

Kean Richmond has been working as a Web Designer and Developer since 2006 after graduating with a BSc in Web Development. He strives to design and build creative and visually appealing websites that are of standards compliant and search engine friendly.