User Interface design of home pages for easy navigation and low bounce rates

Let’s unpack these factors a little. The first element is ‘relevant traffic’, this is key because even exceptional User interface design will not convert a user that simply has no need for your product or service. Paid and Organic search needs to be engineered to drive relevant traffic to your site. Driving irrelevant traffic will only lead to high bounce rates and low conversion rates. The second element we mentioned is User Experience (UX). UX is the experience the user has while using your User Interface (UI). The UI constitutes the physical properties of a web page, it includes layout, colours, copy, images and any technologies used to animate the page.

So what constitutes good User Interface design for a home page? Entire books have be written on the subject, but there are a few key concepts that can easily be demonstrated, and if followed will lead to websites that inspire a high level of confidence and high conversion ratios.

The Anatomy of a Web Page

The header contains the logo menu, it is generally consistent throughout the site. The Body of the website contains all the images and copy that make each page of a website unique. Footers differ from site to site; some websites elect to place lots of menu items in the footer; and some very limited information in the footer. Almost always links to the terms and conditions, and privacy policy are located in the footer.

How the Eye Moves Over a Home Page

Most people in the western world read from left to right, and from top to bottom. This means when we land on a web page we start at the top left fanning out across the page towards the bottom right. Contrary to popular belief very few of us read through the menu items first. We scan from the header through the menu onto the next feature, which is normally a slider or image with a message and call to action. From there we move onto the next section which is in older websites - copy, but in more modern UI layouts ‘tiles’ or boxes. Normally a set of three tiles, which each contain a content header leading to a section of the site or call to action. Typically the tiles are arranged in order of importance from left to right. Copy introducing the company often follows after the tiles. This copy is important for search engine rankings as it provides context for the page. The last element to be viewed is the footer, which contains information that is presented on all the pages.

Use of Colour, Contrast and Consistency

Many websites make the mistake of using colours without consistency. In essence calls to action should only use one, or maximum two colours. These colours should not be used in any great quantity for other elements on the site. It should be very clear on a web page where an actionable button or link in located, and with the correct use of colour and contrast the user will instantly be drawn to these elements. Contrast can simply be explained by the image below. A dark green button on a light green background is not going to jump out at a user. The same green on a grey background is very noticeable.

Single Layer Menus

Web users are pushed for time, and if an answer can’t be retrieved from your site easily – it’s back to Google to look for another. Nasty layered menu’s are a surefire way to irritate users and send them packing to Google. We advocate the use of single layer menus, and on page devices to distribute content in an easy to access way. Mega menus are a popular and effective method for content heavy websites, but truthfully not many websites have this level of content.

Fewer Form Fields

All Internet users are lazy and pressed for time, this is the simple reality of the busy lives we lead. Good User interface design creates as little friction as possible while the user is funneled into leaving an enquiry, purchasing or signing up for a service. Core to this frictionless User Experience are forms that are brief and broken up into bite size pieces if a number of fields are required. The home page is not traditionally a place where forms are placed, but good conversion rates can be achieved with a simple and brief form detailing a signup or enquiry. At the very least there should be a link to a page with a form where users can place an enquiry or sign up.

Merge Similar Functions and Reduce Duplicate Functionality

Duplicate functionality on a web page creates confusion for users. Subtle as it might be, placing a link in the menu for ‘Contact Us’ and one in the sidebar of a website for ‘Contact Us’ as well, creates strain on the user and very subtly increases friction. Keep functions in a consistent and clear place; it flattens the learning curve for users on your site.

Faster Load Times

The speed that a home page of a website takes to load makes a massive difference over time. This is true for all pages on a website. For every extra second a page or action takes to load, the bounce rates and drop offs increase; and the conversion rates decrease. Page load speed cannot be stressed enough. Code and images that are highly optimised are key to good UX.

Using White Space and Fewer Boarders

Traditionally website content has been encapsulated in borders, making a web page look condensed and crammed into a small space. This makes is difficult for a user to quickly scan a home page and identify the data that is relevant. Contemporary User Interface design makes full use of modern wide screens and floating content. Most importantly boarders compete for attention with the content on the page. Rather than boarders elements can easily be grouped by proximity, typography, and alignment, and the cognitive strain on the user is far less. Using uncomplicated borderless design and these three elements will go a long way to decreasing bounce rates on any home page.

Thanks for reading our article, home page UX and UI is something we grapple with on a daily basis. The suggestions given above can broadly be applied to all web pages and not only the home page. However as a major entry point into your website, effective UX is critical on your home page to keep the bounce rates down and conversions up.