Tag Archives: web design

What should a homepage look like?

Homepages are funny things…

The BBC homepage
Oh, I do like the BBC homepage

Over the years I have seen some odd behaviour when it comes to the company homepage. In a number of organisations now, some people (colleagues) have held the view that the home page as a promo opportunity (which it is, I suppose) – sometimes vying quite fervently for space as the life of their activity or campaign depended on it (it doesn’t…often).

And I get why:

  • It often acts as a shop front for the organisation
  • Items featured on it seem – by implication – important
  • It does (often) win the crown for most visited page on the site

However – what people often forget – and I actively remind people – is:

1. Not everyone will see your home page.

For us its about 20% of all visitors. Most visitors (4 out of every 5) will have followed a link in an email, or made a search on Google or clicked on a social post and have ended up directly at the piece of content (and page) they require. Which brings me onto my next point…

2. Visitors have a reason that they’ve arrived at your site.

The (1 in 5) visitors who arrive at your homepage haven’t – for the most part – just stumbled upon it to see what’s going on. I realise that’s a broad, sweeping statement and there are definite and obvious exceptions (BBC news, Facebook, etc) – but for most of us this is true. Visitors come with a purpose and – even if they’re one of the few that land on the homepage – they’re going to be making their way to their desired destination.

So what is a homepage for?

The pebble homepage
The pebble website has a single purpose and the homepage reflects this

Well for some it will be obvious… if you are – for instance – Pebble then you’re going to use it as your shop front for Pebbles.

But if you’re an organisation like – say WWF – then there are likely one of over a hundred reasons that someone might have come to the site – so you have two options:

  1. Make your homepage the first level of your navigation structure
  2. Use your homepage as promotional space for activities / campaigns / products that visitors might not have known about but might be interested in (but obviously don’t forget the nav)

I’m going to focus on the second option for now as… well – I think its where most time is worth spending.

In my day job I’ve spent a lot of time reticently multivariate  testing elements of our homepage to get the best results and I thought I’d share some of the results.

NB: Each site’s audiences are different and it’s important not to take my word as gospel – but please feel free to take my findings and test them yourself. I tend to use either Google Experiments or Visual Website Optimizer for my testing.

A single – well formed hero space – works better than a carousel.

I spent a lot of time testing different versions of the hero space on homepages. It seems that having one reduces bounce rate (my theory is that if the imagery is right it acts as confirmation for visitors that they’ve landed at the right place) – but carousels traditionally get very little click through.

The tool being used to countdown to Earth Hour on the WWF website
The tool being used to countdown to Earth Hour on the WWF website

Carousels muddy the water. They don’t give a persuasive argument for one action over another. Think of it as a salesman… (good) sales people don’t go out with 50 items and list them off to potential punters – they have one product and they use all their effort to sell it.

So with that in mind put in the effort to “sell” that ask. Movement works well (unsurprisingly) as it draws the visitors attention. Recently I applied a countdown and that did EXTREMELY well. It turns out (I assume) people panic when exposed to a number slowly creeping to zero.

Big images and less text.

I’ve worked at a number of organisations that have used the first paragraph of a news article or blog post to “persuade the visitor to read more.” This is a nice thought but it relies on the user reading that first paragraph in the first place… and (not to over simplify things) but if we can avoid it people try not to read.

After much testing it turns out a large image with a small bit of copy works best. Make sure the copy changes colour on hover… oh and make sure the whole area is the anchor… buttons work well – but not as well as if the user can click anywhere within the space.

In some instances I’ve even found just a heading and image performs well – especially if the heading is a clear call to action: “Take this quiz” or “Sign this petition” for instance.

Men click icons, women click copy.

A couple at a computer.
A couple at a computer. Poss. looking at my website?! Image by Ed Yourdon

This is more of a general thing but something I found whilst doing demographically segmented heatmapping is that men tended to click icons and images. Women on the other-hand tended to click on text links more.

How is this useful? Well – if the audience you’re trying to hit is of a specific gender then its important to use a link type they’re statistically likely to click. Also it can be important to remember that one way isn’t always best. Armed with this knowledge I tend to ensure important links include both copy and iconography.

Don’t forget the navigation.

Remember that your visitor has come to your site for a reason – and your aim shouldn’t be to corner them into a position where their only choice is to click one of the few options you’ve put in front of them. They won’t. They’ll leave (and increase your bounce rate).

A good nav is important… but don’t forget to monitor your analytics and check to see if you might be getting any spikes as a result of outside influences (you want to be looking at the organic search keywords). I’ve found conv. rates increase for asks when external activity is happening.

Add a link direct to that ask on the homepage and you’re removing clicks, barriers and drop-off points between the user landing and finding something relevant.

The last thing I want to mention is not to forget the 80% (“we are the 80%” I hear them cry) of those who don’t visit the homepage. Finding other locations to cross link within your site – especially where it’s relevant – is crucial. I’ve tested some wording and found “People who read this also visited:” works well as a way of promoting your cross-links.

Should we be plagiarising layouts?

The curse of the digital world, if there is one, is the speed at which it changes and develops. Facebook releases a new layout ever year, Apple release a new device to view it on (and a new operating system to go with it) at the same speed and the digital world, in general, panders to the ever switching tides of change.

Don’t get me wrong…. this is great – it’s why I love digital and the reason I do what I do on a day to day basis.

However, for many, it creates an impression that they can be this wind of change. By many I don’t even mean just the individuals (like myself) who write part-time blogs or hobby sites… I also include large corporations and projects with hefty financial backing.

This, again, isn’t solely bad. I’ve written before about this pattern (in regards to Flash) and how now we have now have a subtle progression rather than designers spewing animated gifs left right and centre to dramatically transform the digital landscape. However, the issue is not ours (the visitor), but rather theirs.

Let me give you an example:

This morning I tied my shoe laces. I can’t remember doing it. I’ve tied them so many times it’s like second nature to me: the movement of my fingers, the feel of the laces, the sharp tug and pull that keeps them in place… I’ve performed this task on so many occasions I don’t even register it any longer.

But if someone were to change the way laces work tomorrow I would be lost. Recently I had to change my login for my work computer (we have to every few months for security reasons). Every morning I still input my old password… because that’s what I’m trained… neigh… conditioned to do.

This is why people complain so vigorously when Facebook alter their layout. Suddenly their whole (digital) world has been turned upside down (remember – people are, on average, spending between 18-30% of their time online on Facebook). Similarly, when new sites (and I’m including sites that have undergone redesign) are built that defy all previous conventions they better be prepared for users who don’t know where to click.

Time for another example? OK…

Recently a new site was made open to the public. You might have heard of it. It was called Google+. Now I actually rather like Google+ except for one thing… where you log out. (I’d like to point out at this stage that post Google+’s launch this has become standard across all Google products.) Along the top nav bar (when you are logged in) you are shown a picture of yourself (pretty much in the same place you are on Facebook) – this is where you click to logout. However, on Facebook, you are required to to use a menu two tabs to the right of the image to log out

Facebook’s site is the most used and so sets the standard.

Google’s sites confuse matters with their similar, but not identical, layout.

What’s the issue? You may be asking. Well not much. Except that every time I use the site I click in the wrong place. I have been conditioned to look to the right of my profile picture to log out. I have been accessing Facebook far longer… it has far more users world-wide and is, many believe, the most visited site on the web. As such it makes Google’s process seem… well… unnatural.

And I think that’s just it. We now have this sense that digital processes should be natural or innate. We live in a post iPhone world – a world that has been introduced to the concept that products should be intrinsic – you should just know how to use them. So this, I suppose, is the question… should we be copying other site’s layout when building our own?

I don’t think I have an answer to this one. It would be irresponsible to leave it to the industry giants to forge the paths of change. However it’s almost impossible for the ‘little guys’ to make themselves heard. (On a personal level I also hate the idea of fitting design to a pre-built structure or formula.)

The solution, I believe, may be to concede to our inadequacies. To admit that we don’t know… but we want to. If we know we want to take advantage of our users’ previous conditioning so that we might make our products intrinsic to use, but don’t know how we’re going to do it (bar copying someone else), we need to test. We need to trial ideas, pitch multiple wire frames, multi-variant test and bring in focus groups.

However, we would be foolish to forget where convention comes from and to ignore the best practice of others. The one question we should always be asking of our users is “where do you want to click?” Because if we know how our audience want to use our products they will be all that more likely to do so.

Let me know your thoughts using the comments section below.