Making the Most of your Homepage

— Published December 7th, 2006  |  by David Moore

Homepages are the most fought-over part of any site. The larger the organisation, the worse these fights seem to be, and the more likely it is that the needs of the user are forgotten in the design of the homepage.

Each department is convinced they should be represented on the homepage, ‘above the fold’ if possible (a term borrowed from newspapers to describe the first screen’s worth of material before scrolling down).

But sometimes, less is more. Fewer links and less text can be better than too many messages and options. To explore this, we’ll look at personal banking homepages from AIB and Ulster Bank.

Main navigation – choice or usability?

The AIB Personal banking homepage (the tidy URL of which – www.aib.ie/personal – actually resolves into something shockingly long and unwieldy) offers both a horizontal and a vertical run of navigation options – 18 links in total in the main blocks.

Lots of options seem good in theory, but this is too many, and some of the names are confusing. What’s the difference between ‘Internet Banking’ and ‘Online Services’, for example?

Ulster Bank (www.ulsterbank.ie) take a more targeted approach – offering only 8 links in their main navigation bar – the links most people want most of the time. They hide the others under a catch-all ‘Full range of Accounts & Services’ link that opens a large AJAX-driven and categorised box of links (much like Amazon.com does with its ‘See all 35 Product Categories’ link).

I second that promotion

Promoting products is a crucial part of the homepage’s job, and again Ulster Bank do it better than AIB.

AIB use most of the main area to offer 6 links to products or services. But only one has an image, and nearly all use text where the heading and body are too similar in colour and size, meaning none of them really grab you. And the one promotion that contains an image is misaligned.

Ulster Bank, in contrast, reserve their overt promotions for two well-designed and attractively illustrated boxes on the right-hand side. They revolve when the page refreshes, meaning you’ll see two new promotions each time you visit. This is a more elegant solution to promoting products on the homepage.

Feel the width

One striking difference between the two sites is the width of the page.

The AIB site is fixed at a narrow 754 pixels wide, to cater for screens that are set at 800 pixels wide. These days, that’s not many, and the site appears skinny in wider windows, and you need to scroll down to get to some content.

The Ulster Bank site uses a fluid design that stretches to fill user’s screens. In browsers that support max-width and min-width attributes (not you, Internet Explorer 6), this is in the range 764 pixels to 976 pixels, so the page never gets too wide or too narrow, but still displays almost all the content without scrolling.

Usability is a differentiator

AIB won a Golden Spider award for its personal banking website, but it’s Ulster Bank’s homepage that wins in our audit.

What stands out about the Ulster Bank home page is the attention to detail and the implicit understanding of user needs. While many of the points we raised might seem like mere technicalities, they are a sure sign that users were the focus of the Ulster Bank design rather than the need to keep internal stakeholders happy. That keeps customers happier and means the website is more likely to meet the bank's business objectives.