What people consider to be the best and award-winning-worthy website design seems to be all over the place. On the one hand, you have some seriously beautiful and stunning websites out there like the ones found on awwwards.com that stand out from their competition. But on the other hand, you have websites like Amazon.ca and Wikipedia.com whose designs aren’t exactly up-to-date with the latest web design trends, but yet still seem to be the most popular and widely used websites despite their average design. So what’s going on here?
To put it simply, the design of your website doesn’t really matter up to a point. As long as people can easily navigate your website and can do what they came onto your website to do – it’s a good web design experience for them. This is why you don’t see Wikipedia’s changing up their website too much – sure it’s not the prettiest thing but people have good experiences with it because it’s super intuitive to use while using the least amount of mental energy possible.
This is how you can begin to understand what makes a good homepage layout and a bad one. Essentially, it comes down to creating a homepage that’s super intuitive and uses the least amount of mental energy possible while still being effective, informational and memorable. And it turns out, this is something I’ve figured out how to do quite easily just by following some simple rules that include some Do’s, and Do-Not’s.
Before I jump in, there’s a lot of different kind of websites out there that have varying goals. What I’m going to be talking about is what I think to be the best homepage layouts for brick-and-mortar businesses, as that’s what I’m most familiar with. For a website that’s purely content-driven like Wikipedia for example, the homepage layout wouldn’t matter in the same way. So let’s jump in!
What makes for bad homepages? (Do-Not’s)
Let’s start with the Do-Not’s (probably more important than the Do’s) so we can what to avoid. A lot of these common layout mistakes come up when people are trying to stand out.
Homepages that disable scrolling
You’ll see some with these homepage sliders that can remind you of a Microsoft PowerPoint presentation because of the way they’re laid out. You go to the website and there’s no scrolling, it’s just a fullscreen slider.
There are a couple of problems with this. First, there’s only so much information you can fit into one viewport. This means the user isn’t getting as much information as they could.
Next, this layout often utilizes sliders that have horrible conversion so there is going to be a large percentage of the visitors who aren’t going to click through them.
Lastly, it’s just more time consuming for users. Users need information as fast as possible, this adds barriers to the information that makes it harder for users to get at.
Examples:
- NexBank
- WRJ Design
- Canale Communications (example looks like it doesn’t apply but it actually does)
Having content that rely on sliders and carousels
Sliders use to be all the craze, but since then tests have been done that prove that they are ineffective and make for a bad user experience.
No layout should have sliders unless you want your content to go unseen and not interacted with, especially on the homepage. If your content is in a slider, you’re framing it as unimportant.
If you’re putting content on the homepage it should be important enough to stand there loud and proud, front and center. Not hidden behind a slider.
Try just laying out your content in a simple grid, or if there’s too much content you can have a button to see more on a more detailed page about the topic.
Insuffcient amount of homepage content
This is quite common too. Often homepages simply don’t have enough content to to show users what the their business or products are all about.
Considering the homepage is the most important page of a brick-and-mortar website, it’s important to make it informational and helpful for viewers to understand what your business is about.
The way I see it, the homepage of a website is an advertisement for the rest of the pages of the website. If you had a quick about section on your homepage that included a couple of paragraphs and an image, you would link from that to the about page with a “Learn More” button.
If you do this with the most important top-level pages of your website, the homepage becomes a starting point for the majority of different paths someone could have viewing your website for the first time.
So if you do a lot of different services as a business, show 3 of the most important services and have a button to the services page that has all the services. If you sell products, show 4 products and have a “all products” button. All in all, just advertise and touch on the most important pages of your website so people can click onto them.
What makes for good homepages? (Do’s)
The 3 questions
You know that the homepage is the most important page, but even more important is the “above the fold” section on your homepage.
The above the fold section on a website is the section that is first seen when landing on the page without having scrolled. The above the folder section is very important because it feeds into people judging a book by its cover, so its something you’re better off getting right.
A properly designed above the fold section should answer these 3 primary questions about your business without having people think:
- Who are you?
- What do you do?
- How can you help me?
Question #1, “who are you” is answered without you having to explain. It’s your logo of course! Your logo does a perfect job of letting users know who you are but only if your logo is clear and has the name of your brand in it. A lot of people can easily mess this up because they have an icon-type logo that only shows their brand and doesn’t say who they actually are. This is a big mistake that can easily be avoided.
Question #2, “what do you do” refers to what services or products you offer. This one probably the most important of the 3 questions because when someone lands on your website they need to know if you offer what they’re looking for right away.
Question #3, “how can you help me” refers to a unique part of your service/product that goes beyond the service/product itself. So for me, what I do is create websites. How I can help you, is to create a website for you that’s effective and that has a good user experience, implying a better product that can help you.
If you’re still unsure about your question #3, try starting off with the sentence “I help you by…” and typing away from there.
Customer journey
Earlier I had mentioned homepages need to be very informational and include as many top-level important pages as it can, customer journey is ordering those pieces of content into a pyramid-like path that funnels users to where you want them to go.
For example, on my homepage it displays content in this order:
- Hero section: Shows an overview of what I do, and catches attention
- Services: This shows the different services I provide
- About: A smaller writeup about me and my goals are as a web designer
- Service flex: I show/explain why my services are the great
- Service work: I show examples of websites I’ve made for clients
- Testimonials: I showcase my clients are satisfied with my service
- Contact: A simple Call-To-Action and form to contact me.
So from my order, I’ve funneled a potential customer into knowing nothing about me to:
- Know about my services
- Know about me as a brand and person
- Why my services are great and show testimonials to prove it
- And finally, make the conversion.
Non-homepage pages should do this as well. Usually, subpages have a Call-To-Action at the bottom of them leading them to a contact or product page.
All in all, having a good customer journey is making sure your content is in a logical order that leads a visitor to where you want them to be.
So what does the best homepage look like?
If you wanted to have the best homepage possible, it would be entreating, informational, and easy to use and understand.
Start this by making sure your above the fold section answers the 3 questions:
- Who are you?
- What do you do?
- How can you help me?
Then below the fold, have content that showcases other important pages of your website. Have a gallery for your business? Show people ~6 images on the homepage and have a button leading them to the actual gallery page so they can see more. At the end of using just the homepage alone, the user should know the basics of your website and what it has to offer.
Make sure that all this content is ordered in such a way that logically makes sense and that funnels people down to some kind of conversion. It’s common and wise to always have a final “contact us” or related call-to-action at the bottom of the homepage to make that conversion.
Avoid putting your content in sliders as this hurts the user’s experience, and also hides a lot of otherwise valuable content the user can consume. Expect the homepage to be longer than your typical page. Don’t try to minimize scrolling by using sliders or by having those fullscreen non-scrolling homepage layouts. They aren’t effective and they limit the user.
Want an example?
Finally, here’s an example of a website that follows these tips an executes on a well-designed homepage:
