As both users of a lot of websites and designers and builders of hundreds too, we thought we’d share some of our top tips when it comes to designing a homepage. This is the first of three blogs which will focus on the dos and don’ts of designing a homepage including, first impressions, layout, navigation, content, colour usage and imagery.
The halo effect
Imagine the following scenario…
Two candidates turn up for an interview; Candidate A is standing, smartly dressed and well presented, whilst Candidate B is slouching on a sofa, wearing an un-ironed shirt and ripped jeans.
At first glance, you may make an assumption that the former is more likely to impress in the interview. Based solely on this initial impression, you may become more receptive and fond of the first candidate; this is a psychological phenomenon known as the Halo Effect.
We can apply this same principle to homepages. A recent study undertaken by the
Missouri University of Science and Technology discovered that it takes less than two-tenths of a second for users to form their first impressions of your site.
That’s right, it can take just 200 milliseconds to win or lose a potential customer.
5 Second test
To get a feel for how users first perceive your website, you can use the ‘five-second test’, which was first pioneered by Christine Perfetti at User Interface Engineering.
To run a five-second test, simply gather some participants to take part in the study and show them your homepage. At the same time, start a countdown timer to sound an alarm in 5 seconds time.
Once the timer sounds, cover up the homepage and question your participants on their experience. You can use this opportunity to ask them:
- What products/services does the site offer?
- Would they trust this site?
- What was the first thing that caught their eye?
- How did the homepage make them feel?
- Would they like to spend more time on this site?
The results that you generate from this quick and simple test can often be very insightful, and help you to generate ideas about how to improve your homepage.
Consider your users
Whilst topics such as colour psychology, content curation and responsive design techniques can play a part in designing the ‘perfect homepage’, the single most important piece of information we can give you is to put yourself into your users’ shoes. Exploring the site through their eyes, and applying this approach from the offset, will pay dividends for your design approach.
If you’ve already created some user personas, it’s time to lay your hands on these again to place them at the forefront of your mind.
If you’re struggling to understand what your users’ needs are, try utilising your site’s web analytics data.
Statistical results, such as top viewed web pages, search query analysis and pathing reports, can be a very helpful. These results will give you an idea of your most popular content, what users are looking for and how they’re navigating your site.
Quantitative and qualitative data
In order to build up a complete picture of how users perceive your site and what actions they perform, you’ll need to combine insight from both qualitative and quantitative data sources.
Qualitative data sources, such as the five-second test and user testing, can be invaluable to understand users’ first impressions and attitudes, as well as help you to better understand what users want to do first on your site.
Meanwhile, quantitative data provided from web analytics tools allow you to quantify and benchmark the amount of users who behave in a certain way.
Layout
Remember, as users are browsing the internet they’re often not just looking at one site; they’re looking at multiple sites and pages, all at the same time.
You may have experienced this behaviour yourself; you load up Google, type in your search phrase and click on multiple results. Then select ‘open in new tab’ before continuing to explore five different sites simultaneously.
So how does this help us with our design?
A recent user research study by Google revealed that websites with low visual complexity and high prototypicality (how representative a design looks within a certain group/category of websites), were perceived as highly appealing.
Therefore, as a rule of thumb, make sure the design is clean and easy to navigate. You want your important information, high priority content or user goals, towards the top of the page where your users’ eyes will naturally focus first.
Eye tracking
So where do users’ eyes focus?
Researchers at the Missouri University of Science and Technology tested this concept.
They showed participants 25 different websites, whilst monitoring their eye movements using eye-tracking software.
They discovered the sections that drew the most attention were:
- Logo: users spent about 6.48 seconds focused on the logo.
- Navigation: similarly users spent 6.44 seconds studying the navigation.
- Search box: users spent 6 seconds focused on this element.
- Social accounts: were explored for 5.95 seconds.
- Main image: attracted users’ attention for 5.94 seconds.
- Written content: took up 5.95 seconds of their time.
- Bottom of the page: users ended-up exploring this for 5.25 seconds.
- Logo: users spent about 6.48 seconds focused on the logo.
- Navigation: similarly users spent 6.44 seconds studying the navigation.
- Search box: users spent 6 seconds focused on this element.
- Social accounts: were explored for 5.95 seconds.
- Main image: attracted users’ attention for 5.94 seconds.
- Written content: took up 5.95 seconds of their time.
- Bottom of the page: users ended-up exploring this for 5.25 seconds.
A/B & MVT testing
When it comes to testing a homepage layout, an A/B or MVT test can provide you with extremely useful insight to help inform further homepage design iterations. Find out more about implementing A/B and MVT Tests.
DEPT®’s experience in design
DEPT®’s team of highly experienced UX experts and experience designers specialise in creating sites which fully support both user and business goals. Contact us for further information about our services.
More Insights?
View all Insights
Questions?
Global SVP Technology & Engineering