Site icon Treehouse Blog

Home Sweet Homepage

We have all had clients who want the impossible — and never more so than when it comes to homepage design. They have a never-ending list of requirements, which mainly revolve around cramming as much content in above the mythical fold as is possible.

This desire to display everything on the homepage is born out of a perception that it is the most valuable real estate on a site. A perception perpetuated by the numerous design galleries, books and other media that always show screenshots of the homepage, rather than the numerous other pages on a site. This can lead to individuals and departments within an organization fighting to ensure their interests are represented on the homepage.

Unfortunately, in this fight for the spotlight, usability and design aesthetics are often the first causalities.

In this article I’ll explain 4 techniques which I have used to bring some sanity back to the process of homepage design. These techniques are not clever tricks to get the client to see things your way. Rather, they are about educating the client in order to allow him or her to make more informed decisions. They may still make choices you do not like but at least those choices will be made from a place of knowledge rather than ignorance and misconception.

The changing role of the homepage

The first step to homepage utopia is to help those with a vested interest to recognize its true value, rather than the current misconception they have of it.

The reality is that the role of the homepage is changing. It has long since ceased to be the primary point through which people enter a site.

Jakob Nielsen recently wrote the following in his book “Prioritizing Web Usability”:

Despite the importance of the homepage, however, interior pages accounted for 60 percent of the initial page views. A Web site is like a house with a thousand doors, and visitors can enter anywhere.

Users are relying increasingly on search engines to find the content that they are looking for. As a result they are much less likely to enter a site through the homepage.

I believe that the figure of 60 percent will continue to increase over the coming years. And it won’t just be search engines that cause this to happen, RSS feeds will have a significant impact too. As RSS becomes mainstream we will see an increase in users clicking directly through to relevant content, bypassing the homepage altogether.

That is not to say the homepage is unimportant. It continues to be a navigational tool enabling users to orientate themselves and helping them establish if a site has the content they are looking for. Every good web designer knows that the homepage should allow quick access to killer applications, search, site map and other relevant shortcuts. But it should also help the user orientate himself by confirming he is on the right site to meet his needs.

A good example of this approach is the current Apple website. Internal politics do not rule here. The homepage is not shared out among the various departments. Before last week it was completely dominated by the iPhone and now its all iMac. Apple knows that the majority of users currently coming to the site are after information on their latest announcement and so they make sure the latest “killer app” is front and center — literally. Users are left in no doubt that they have found what they are looking for and know exactly what to do next.

The perception that the majority of users never progress beyond the homepage is unfounded and the current competition for homepage space is unjustified. Just as many users will have searched for iMac on Google and come directly to the iMac section as will have entered via the homepage. That is why the iMac section stands very much on its own, making complete sense even without the broader context of the site.

Do not rush into the homepage

It seems to have become standard operating procedure for us as web designers to start look and feel development with the homepage. But starting with the homepage might not be the wisest move. Instead consider beginning the design process by developing lower level pages such as a standard text page. Not only do these account for 60 percent of initial page views they also make up the majority of pages on the site. And, more importantly, they don’t attract the same degree of opinions as the homepage.

By starting with a standard text page you have the opportunity to establish the design style, usability and accessibility of a site before it gets diluted by the land grab for homepage real estate.

If you work with the client to establish the look and feel of a site on a lower level page then they will be invested in the design. If they feel a sense of commitment to the design they will perceive it as more important and so are less likely to allow it to be railroaded by other content demands when the homepage is finally tackled.

Delaying the home page development isn’t just a “strategic” move — it is also the right thing to do. A home page should reflect the sites content at the highest level and signpost the user to key content deeper in the site. In my experience, the client often hasn’ t finalized all of the content in the initial design stage. It is hard to create an effective home page until you have a full understanding of what content it is meant to signpost and represent.

White space: The heart of the problem

When you do finally come to developing the homepage make sure you clearly communicate the importance and role of white space.

As designers we all know how important white space is and yet we are often extremely bad at explaining this in language that resonates with our clients. Comments like “it just looks better” or “everybody knows white space is important” do not help our cause.

So how do we explain white space to a client? I believe the answer is not in expounding its virtues, but rather in explaining the impact of too much being added to a page.

In his book “The Laws of Simplicity” John Maeda writes:

The opportunity lost by increasing the amount of blank space is gained back with enhanced attention on what remains.

Or to say it another way: the more you add, the more you detract from what is there. I think this should be the key to our approach when explaining white space to clients. Instead of selling white space on the fact that it looks better we should be selling it by pointing out that every element added to a page detracts from the rest.

To help the client grasp this concept I would like to propose an exercise you can complete with them.

Start by helping them list all of the elements they would like to see included on the homepage. Keep it simple and ignore standard navigations elements like the menu bar, site tools and search box. There is rarely debate about the importance of these elements so nothing is added by including them in the exercise.

Once you have completed the list, the next step is to assign values to each item. The value assigned equates to the amount of attention the client would like the user to pay to a particular item. Since a user only has a finite amount of attention to give we must therefore assign the client with a finite number of points to distribute among the items. Each item on the page has to be assigned at least 1 point — although if the client wishes to give more emphasis to a particular element they can assign it more points.

The number of points you give the client is entirely up to you — although I’ve found that 15 works well on average. If the client has specifically asked for a clean design then give him less. If he wants something busy and dynamic give him more.

What is important is what it teaches the client. He will quickly realize that the more elements he adds to the design the less he can emphasis any individual item and the less impact they have. Consequently, the fewer elements he adds the more impact they will have and so, indirectly, he will learn the value of white space.

There is no fold

The problem of white space is made worse by a client’s perception that users do not scroll. This misplaced belief means that they often insist that most, if not all, of the content on the homepage sits above this mythical line called the fold.

I refer to it as a mythical line because that is exactly what it is. It is a term borrowed from the newspaper industry and yet the analogy quickly breaks down. A newspaper fold comes at a specific point while on the web the point at which the user begins to scroll varies based on browser, resolution, window size and number of toolbars. But mythical or not, many clients are obsessed by it.

My final technique for bringing sanity to homepage design is to release the client from the constraints of the fold by convincing them that users do in fact scroll. In order to do this we need to understand where this myth originates.

It would seem that the idea comes from the very early days of the web, when users were unfamiliar with its conventions. I suspect this perception has primarily come from the early reports of Jakob Nielsen. However, this is unfair, because by 1997 he was already saying that things had changed. What is more, a recent report seems to indicate that over three quarters of users will scroll a page at least to some extent, with 22 percent scrolling all the way to the bottom. While 22 percent may seem low, the report actually suggests it is quite high. It argues that the results are distorted by repeat visitors who would have previously already scrolled all the way to the page bottom and be familiar with its content.

By demonstrating through up-to-date research that the scroll does not need to be feared, the homepage can both maintain its design aesthetics and handle additional content. Another area of conflict is resolved.

In conclusion

The bottom line is that we need to take the time to educate our clients. We need to explain how the role of the homepage is changing, demonstrate the value of white space and dispel the myths surrounding scrolling. We also need to pick our moment, knowing when best to tackle the subject of homepage design.

However education is not always easy because we need to be educating not just our point of contact, but also other stakeholders in the organization who are fighting over a place on the homepage. Getting access to these people can be more challenging.

How you decide to tackle this problem is entirely up to you. One approach I find very effective is the stakeholder workshops proposed by Shane Diffily in his recent A List Apart article “Educate Your Stakeholders”.

If you would like to learn more about effective homepage design I would recommend reading anything on the subject by Jakob Nielsen. His book “Homepage Usability” is excellent as well as various articles he has written. Finally, Derek Powazek has written an excellent article that mirrors much of my thinking on what every homepage should contain.

Exit mobile version