This is what Google would look like if the average web manager, marketing manager, advertising guru or CEO had a say in it. (Granted, it’d look more polished and glitzy but the content wouldn’t differ so much.)

How did we come to this conclusion? Crank up your speakers and watch the 3 minute video with commentary by my lovely colleague Karl Gilis. You’ll never look at your own homepage the same way again…

Credit where credit is due

All the credit for this example goes to Gerry McGovern who shows a similar version in his seminars.

If you haven’t already, subscribe to Gerry McGovern’s weekly newsletter. You’ll love it.

What do you use Google for?

Ask 100 people this question and I guarantee you that at least 99 answers will contain the word ’search’.

A small group of people will also talk about things like Gmail and Google Maps.

An even smaller group will talk about Google Adwords, AdSense, Analytics etc. The stuff that only web professionals really know about.

Top task: search

Because search is the absolute top task people visit Google for, the new Google homepage focuses on it for the full 100%.

Strange?
Not at all. Search is what 99% of people visit Google for. Give people what they want.

Less important tasks: less prominent on the homepage

If you move your mouse over the screen, you get to see more. The other important tasks, like Gmail and Maps are at the top. Below the search are the things Google actually earns money with: the advertising programs and the business solutions.

A bold move?
Not really. Though it is true most people lack the courage to do this on their own website.

Google puts the stuf that generates revenue in the background. Most CEOs and web managers are afraid to do that. But at Google, they realise it’s not the advertising programs that generate the revenue, it’s the millions of people who ‘google’ every day. Why do they google every day? Because the website is so deliciously simple.

How do you identify your website’s top tasks?

We can help you on your way with user research.
That way, you can base your website on facts instead of opinions or feelings.

Related articles

• What would Google look like if you had made it?
• Focus: the basis of every good web page
• Page fold: myth or reality?

What’s so good about the Brussels Airlines website?

1. Task-oriented homepage

If you’ve been here before, or read Gerry McGovern’s column, you know it’s important to identify and manage the users’ top tasks, the main reasons why they visit your website.

Brussels Airlines knows that. And both the professional jury and the public appreciate it.

Jury comments:

• “Task-oriented homepage. The majority of visitors come to look for a flight, book a flight or look up details of a flight they’ve booked earlier.”
• “Good sectioning off of the different reasons people visit the website for.”
• “You can start booking on the homepage.”
• “Clear homepage.”

More good things about the homepage

• The navigation is aimed at the important stuff. Things 99% of the visitors are looking for. The odd user wanting to know more about the history of Brussels Airlines is going to have to try a bit harder to find that information.
• ‘Book now’ is very prominent on the homepage. And that’s good. It’s what most people visit the website for.
• ‘Manage my flight’ is important for 2 reasons:
  • Direct access to these top tasks. Especially ‘Check in online’.
  • Inspire confidence. It’s good to see things like ‘Change my flight’ and ‘Cancel my flight’ are easy to find when you’re about to book a flight.

2. Inspire me!

The big disadvantage of most booking systems or travel search engines is their database-approach. The result of that is a block like ‘Book now’ on the homepage. Great if you want to book a flight to Melbourne from November 15 till December 16. Not so great if you’re tired of the winter and looking for any destination where it’s sunny and warm.

On the ‘Destinations’ page Brussels Airlines tries to go beyond the classical database-approach. Pick a theme and a time period and they give you a list of destinations that fulfill your wish. Nice. 

3. Practical overview of the practical information

Okay then, I’ll say it one more time: it’s practical.

4. Book a flight

The ‘Book now!’ block on the homepage scored the site points with all jury members. The type-in fields and the date-picker are well-executed.

The division into logical steps was appreciated as well: “the wizard-like approach helps present a complex procedure in a simple way”.

Does Brussels Airlines have the perfect website?

Can pigs fly? Is it raining men? 

There’s no such thing as the perfect website. The Brussels Airlines website is good, but of course there are points of improvement as well.

Jury comments:

• “The copywriting is often very good, especially on destination pages. But the pages with practical information can be long-winded and not very visually appealling.”
• “Booking online works well, but it could be better still. It’s often unclear why there are price differences in the same class (economy or business). The error messages can be improved as well.”
• “The map showing all destinations isn’t ideal.” Read our article ’Google Maps: cases from travel websites’ for more information.

Would you like to know what your website’s strengths and weaknesses are?

• Register for our web usability and writing for the web training in Dutch
• Get a usability expert to have a look at your website
• Have a user test on your website

We don’t think things are as black and white as all that. Yes, contrary to what you’re used from us: a bit of nuance!

Update Friday 23 October 2009: Some guy called Jakob Nielsen commented on this article.

What is the page fold?

The term page fold is used for the imaginary line between the part of the page you can see without scrolling and the part of the page you can see when you scroll down.

Traditionally, the fold is considered to be on 570 or so pixels from the top edge of the page. That’s more or less what people see on their screens in a resolution of 1024×768. Now, recent figures on screen resolutions in Belgium show that 70% of the people use a higher resolution. So really, you need to take into account multiple folds on 1 page.  

Do or don’t people scroll?

It depends.

What does it depend on? The type of page and the type of website.

1. Homepages and overview pages

A. News websites

On news websites, page length doesn’t matter much. Most people visit a news website to get updated on the latest news. They prefer a long page, with not just headlines but also summaries of the main stories, to a shorter page with just the headlines. Scrolling down the long page is a lot faster than having to scan and click on individual headlines for more information.

When it comes to the homepage and overview pages of news websites, we’d even be inclined to say: the longer, the better.

News websites don’t have to worry about the length of their homepage and overview pages.

B. Big, well-known online stores

Big online stores that sell thousands of products ánd that are known to the general public, like Amazon and Neckermann, can afford to have long homepages and overview pages.

Most people who visit these sites know what to expect.
Their surfing behaviour roughly falls into 2 categories:

• Searchers
  People who know what they’re looking for (e.g.: Alice Munro’s ‘The beggar maid’) will very likely use the search feature or click on the category of their choice. They don’t care about the rest of the homepage.
• Browsers
  Browsers can be both bargain hunters or people who are looking for something but they don’t know exactly what just yet (e.g. some light reading for the beach). They will have a look around on the homepage and overview pages that interest them (like the overview page on ‘thrillers’).

Note: we’re saying big webshops can afford to have long homepages and overview pages. They don’t have to have them.

Amazon pretty much ignores the page fold. eBay makes an effort to put as much useful information above the page fold as possible.

C. Regular company or organisation

On the homepage of a regular company or government organisation people prefer not to scroll. That’s what they spontaneously say during user tests. It also shows in their surfing behaviour and it’s backed up by logfile analysis. (Use the ’site overlay’ feature in your Google Analytics account.)

People expect on the homepage of a ‘regular’ company that important information is visible without scrolling.

It makes sense for them to expect that. They’re on those websites to do something. And they’d like to do that as quickly as possible. The top tasks people use the site for should be immediately visible.  

VMW tries very hard to put all the important info above the page fold, both on the homepage and on the overview pages.

Can’t you put anything below the page fold?
Sure you can. Most people surf in higher screen resolutions than 1024 x 768 anyway. And of course some people will scroll. Just don’t assume all of them will. Put the really important stuff, your visitors’ top tasks, above the page fold. Lower down on the page you can put less important items like news, events, etc.  

How can you encourage people to scroll?
Avoid page-wide ads or empty areas near the page fold. Make clear the page doesn’t end there. Show a little of the content that’s below the page fold. That encourages people to scroll.

Vlerick and Belgium.be put their most important links above the page fold. Because people can see the headings of the info below the page fold a number of people will scroll on these pages.  

2. Detail pages

On detail pages length doesn’t really matter. People will scroll just as long as you keep them interested.

But just because people scroll doesn’t mean you can do whatever you like on a detail page. Again, make clear what the page has to offer above the page fold. There are different ways to do that, depending on the type of page.  

A. Product pages

• Executive summary
  A short summary of the most important information at the top of the page. Amazon’s product pages are a good example. You can immediately see the product’s name, picture, price and whether or not it’s in stock.

• Tabs
  Tabs, or more precisely in-page tabs, are interesting if you have a lot of information about a product (i.e.: product description, technical specifiactions, references). Tabs are best used in combination with an executive summary. Like on KeepYourCooler.com.

B. Content pages

• Jump links or anchor links
  A clickable table of contents at the top of the page. The long detail pages of the province of Flemish Brabant are a good example. Read our article on anchor links for a more detailed explanation. 

Just a reminder: also on detail pages you should always make clear the page doesn’t end at the page fold. Give a hint of the content below the page fold.

User testing is important, but it can’t tell you everything 

The conclusions of cxpartners’ article about the page fold seem to be entirely based on user testing. Now, as you may or may not know, we are big advocates of user testing. But it is not the be-all and end-all of usability.

User testing is qualitative research. It takes more than data from user testing to make a bold statement like ‘the page fold is a myth’. You also need data from quantitative research, like logfile analysis. When you look at these figures, you’ll often see that links above the page fold are clicked 3 times as often as links below the page fold.

It’s important to know whether or not people scroll. But it’s not the only thing that matters. How many people simply leave a page with little or no content above the page fold? What’s the conversion rate of pages like that?

Moral of the story

Is the page fold a myth? No, it isn’t. The page fold exists and affects people’s surfing behaviour.

Put important information at the top of the page and make sure people know the page doesn’t stop at the page fold.

Question: what is wrong with the homepage of Unisys Belgium?

Answer: just about everything 

As a screenshot the homepage doesn’t look all that bad. But when you really use the page you immediately notice all sorts of things going wrong.

• The attention grabbers (Security, Data Center Transformation & Outsourcing…) hardly do anything. Okay, the image on the right changes on mouse-over. But other than that: nothing, nada, zilch. You can’t even click them.
• There’s no other useful content on the homepage:
  • The news and links to case studies are pretty typical homepage content. Even though user tests show that’s not what people want to see on a homepage.
  • The links in the ‘About Unisys’ block (’Careers’ excepted)are irrelevant for 99% of their visitors and not worth the space they’re taking up here.
• Where’s the main navigation? Is Unisys too cool to have something so traditional as a main navigation?
• Last but not least there’s the tagline ’Solving your business-critical challenges’. A good line, but not exactly unique to the business Unisys is in. I can say that about my company. And you can probably say it about yours. It’s meaningless. And what’s more, the tagline itself isn’t clickable, only the ‘Learn more’ is.

Is it really all that bad? 

Doh. If you have any doubts about the degree to which this homepage sucks, you should be banned from professionally dealing with websites for the rest of your life.

Movie

Just in case Unisys changes the homepage before you read this, here’s a little movie with the homepage and the page that appears when you click ’Learn more’.

In other words, a long homepage isn’t always a cardinal sin. At least not when it looks orderly and structured. Unfortunately, some websites look like they’ve been thrown together from a distance. The result: a mess without visual anchor points to steady and guide the visitor’s eye.

Horizontal lines are calming

There’s a simple thing that makes a page look a lot calmer: the horizontal line. You can use an actual horizontal line or you can simply line up a number of page elements to an imaginary horizontal line. Try it. It’ll make your page look less frantic.

Example: De Standaard

We tried it on the homepage of De Standaard, one of the leading Flemish newspapers.

The actual homepage of De Standaard

After our cut and paste work

Four things to keep in mind:

• We’re not designers.
• All we did is rearrange the existing elements.
• We didn’t change the number of vertical columns.
• We did it in 5 minutes.

What do you think?

Can you tell the difference? Is it an improvement? We’d love to hear from you.