Homepage fundamentals: Handy tips to entice your users

Home page from Field and Flower dot com
February 22, 2018 1:16 pm

Homepage fundamentals: Handy tips to entice your users



A homepage is something that any internet user will be familiar with. Whether it be landing on a banking site to set up a new account, or arriving on a travel site ready to book a holiday, the homepage and subsequent landings page are our first touch point on a number of online sites. Not only do these pages have to make a lasting impression on users and signpost them in the right direction, but a homepage is also an important hub, allowing users to come back if they got lost or want to navigate to a different area.

However, a lot of homepages fail to follow some of the basic requirements relating to appearance, information and interaction. So this article will highlight some of the fundamentals for homepage design, and how these can also be applied to landing pages.

The purpose of a homepage

When it comes to understanding the purpose of a homepage, Nielson and Tahir in their book ‘Homepage Usability’ explain:

The most critical role of the homepage is to communicate what the company is, the value the site offers over the competition and the physical world, and the products or services offered.

Users basically need to know who you are, what you do and where they should go next to find what they need. Think of it as the front page of a newspaper, or the reception to your building. People should not only be enticed in by it, but it’s your chance to welcome them, funnel them in the right direction, and ultimately, encourage them to return.

So some of the key things you’re homepage should do is:

  • Provide an overview of who you are and what you do
  • Appeal to your target audiences but also be open to any potential users
  • Provide accessible links to every other important page on the site
  • Explain how users can connect with you in other ways (e.g. in person, phone call or on social media)

To ensure a homepage is ticking all of these boxes and providing the best experience, this next section will look at some key strategies that can be used in relation to appearance, information and interaction.

Homepage best practices

Visual hierarchy

Time is limited to really grab the attention of your users, and if they can’t find what you do and how you can help them within the first couple of seconds, there’s a high chance they’ll go elsewhere. This is why visual hierarchy is so high up on this list of best practices. If your page is organised wisely then it’s going to really help users interact with your homepage. Factors such as physical difference, colour, contrast and style all help users to separate areas of the UI into groupings. Based on this they can begin to distinguish elements into primary, secondary and tertiary information.

For example, the homepage below from Field and Flower [Figure 1] shows how colour and contrast can be used to distinguish key areas of the homepage. The primary elements including the brand logo and key calls to action are instantly visible, whilst secondary elements such as the navigation menu and headings can be quickly scanned to aid navigation and provide context. The tertiary elements such as smaller text can then be distinguished if the user chooses to explore in more detail.

Home page from Field and Flower dot com

Figure 1. FieldandFlower.com

Clear indication of brand

Starting at the top of your page, an essential part of helping users understand who you are and what you do is to present them with an obvious company logo and some kind of description or slogan which helps them understand whether this is the right sight for them. Branding and logos are something that we have often seen compromised by an overload of content or a captivating visual, but really if a user doesn’t understand what you can offer then they will simply go elsewhere. For example, although minimalistic in its design, the below example from The Print Box [Figure 2], shows how effective it can be to make both the logo and slogan stand out. Straight away the user is drawn to the words ‘Create-Print-Deliver’ so instantly has an understanding of the business and what they offer.

Home page The Print box dot net

Figure 2. Theprintbox.net

Obvious information access points

The service you are offering will dictate what information users need to access first, and this is really where visual hierarchy comes into play. Unlike a landing page, the content available from the homepage can be quite diverse, so it is important that users can easily access the things they need to get started.

For example, Figure 3 shows how on a travel site like the Trainline, the main point of focus is the form so this element takes the primary level in the visual hierarchy of the page. This promotes quick access, allowing users to immediately start looking for train tickets. However, on an online clothing site like Superdry [Figure 4], what stands out first, are the calls to action drawing users in towards the sale. But by making the navigation menu the secondary element, users who are not interested in the sale are still able to quickly access the area most relevant to them.

Home page Trainline dot com

Figure 3. Trainline.com

Home page Superdry dot com

Figure 4. Superdry.com

Obvious search

Across various areas of a site, if a user is unable to find what they need within the first few seconds, they are likely to look for a way to search for it. This is why the search field or icon on your homepage should firstly be both recognisable and findable. There’s no use adding a search function to help users find information if they are unable to find how to search!

A well-considered page fold

Through our experience, we see that users often do not scroll an entire homepage. We have become quite lazy in the way we use the internet and expect to be handed everything we need straight away. This is why the positioning of your homepage content in relation to the page fold should be an early consideration when designing a homepage. And as the computer is no longer the predominant device used to access the internet, we are seeing a growth in responsive designs, which means we must consider where key content sits across all devices. For example, the budget airline Ryanair show how a homepage can be responsive to multiple screen sizes [Figure 5], whilst in each version retaining all important access points above the page fold.

Desktop homepage Ryanair dot com

Figure 5. Ryanair.com desktop homepage

Ryanair dot com Tablet homepage

Ryanair.com Tablet homepage

Ryanair dot com mobile homepage

Ryanair.com mobile homepage

Look and feel

It’s all well and good having a remarkably functioning homepage, but the real icing on the cake is its appearance. We are fickle creatures and will quickly cast judgments based on the way something looks. Unsurprisingly, the same applies to a homepage, if it doesn’t appeal aesthetically then you are likely to lose a users’ attention. Some things to consider are the colours used, as these can often alter a user’s perception so be careful what you choose. The typography of content including the choice of font and legibility are important in terms of digesting information, but also in reflecting the tone of your company. And lastly, a strong visual or animation is likely to capture the users’ attention and help paint a picture of what your site has to offer.

What about a landing page?

If you’ve got several distinct services or sections of your website, users may arrive directly on a section page any bypass the homepage. So, similar to a homepage, these ‘landing pages’ will be the first page users are presented with on your site. However, a landing page is a little different in that users have usually been directed here for a specific purpose, so they tend to focus on a single topic area or product. Therefore, whilst incorporating a lot of the traditional responsibilities of a homepage such as grabbing user’s attention and providing easy access to other areas of the site, the landing page also needs to provide everything users needs around that specific topic area.

So whilst a lot of the above principles can be applied to a landing page too, the separation of purposes into primary and secondary might help to explain how a landing page can be optimised:

Primary purpose of a landing page:

  • Likely to have a more specific purpose or focus on a single topic area
  • They should encourage users to take a well-defined action
  • They should be designed to receive traffic from a number of sources, such as email or more specific search results

Secondary purposes of a landing page:

  • Helps users to understand who you are and what you do
  • Provides access to other key areas of the site, including the homepage

Conclusion

Clearly, there is a lot to consider when designing a homepage or landing page, and it is really about striking a balance between impressing your users aesthetically but also making what they need as accessible as possible. Although homepage usability goes beyond the content of this article, hopefully, these best practices alongside iterative design and testing, will set the fundamentals for a seamless homepage user experience. But, if you are going to take anything away from this article, remember that you have a matter of seconds to entice users when they land on your website, so make it your number one priority to keep them there.