5 design tips that improve homepage usability

Phew, designing the homepage of your website can feel a little daunting. It’s the page that is typically the ‘landing page’ for users (as in, where they first land on your website), so it’s got a lot of responsibility!

It needs to communicate who you are (as a person or a brand), why you’re unique and relevant, as well as, of course, what you sell (or what your mission is). And all of that within a few seconds!? I can understand why people tend to bury their head in the sand, and either

a) just throw something up and then don’t ever think about it again, or

b) just list all the marketing messages that you want to tell the user.

But what if you took a different approach – what if you thought about it from the user’s perspective. I know UX has become a bit of a buzzword, but what if you actually thought about the user experience, and hand-held through the page, telling them only what they wanted to know.

These five considerations will help you to create a winning homepage experience:

1. Introduce yourself. Properly.
2. Keep it structured and concise.
3. Keep your main CTA above the fold.
4. Signpost effectively.
5. Keep readability in mind.

Let’s dive into each.

1. Introduce yourself. Properly.

We’ve all landed on a homepage before that just felt… messy.

That felt like that person you meet at a party who’s possibly had one drink too many, and just starts talking. And talking. And you don’t really know who they are, or why they’re telling you all these things.

And you walk away thinking… whattt just happened? Who even was that guy!?

It sounds daft, but really — think about approaching your homepage as you would your first impression at a party.

Yes, it helps if your branding feels carefully considered (ie. your outfit, your hair, etc), but as we’re focusing on UX here, not branding, I’ll just keep this point concise: use consistent colours and fonts, and make sure that it feels authentically you, and you can’t go far wrong.

But what’s important here is that you can hold a conversation.

You would most likely want to introduce yourself, keeping it fairly top level: who you are, why you’re relevant (ie. who invited you and why you’re there), and try to quickly find some common ground. Something like

“Hey, I’m Laura, Joe’s wife. Joe worked with Sally at the office years ago; I used to join them for lunch sometimes as I only worked down the road. You work with Sally too, right?”

Do the same for your users on your homepage! For example, I would introduce myself with:

“I’m Laura: the Designer who creates hardworking websites and branding for ecommerce brands that sooth the soul. I took what I learned from 10 years of working with big names, and now design for the curious underdogs and shameless do-gooders.”

Try following this format:

“I am the [profession / brand type] who [what you do] for [what type of customers] that [something that is specific to these customers]”.

Then follow up with a statement that shows your authority, and that you understand them.

From a UX standpoint, you’re essentially helping your users to understand that yes, they’re in the right place, and yes, this is relevant and worth sticking around for at least another few seconds.

Tick.

2. Keep it structured and concise.

Thinking back to the chaotic (semi-drunk!) conversation I mentioned earlier: by keeping your content structured, your customers will be able to more quickly establish if your brand or service is right for them.

Consider it this way: If I’m a customer looking for that particular service or product, what would be the #1 thing I would need to know?

And then layer it up just a little. Think about their main needs and pain points, and then simply address each one, using clear headings to each section to make it scannable. This helps to keep things in a natural state of flow and gives hierarchy to the page.

This is how I’ve approached my website for users looking to hire a designer, in response to questions that they typically have:

• Who are you and what do you do? (Introduction, as above)
• Are you any good? Are you worth my time? (Link to my work, followed by showing my credibility: I took what I learned from 10 years of working with big names…)

Sounds interesting.

But do you do exactly the thing that I’m looking for?

(Highlight of my services, with links to corresponding case studies)

OK, but have you done it for others who are in the same position as me?

Tick.

3. Keep your main CTA above the fold

A simple, actionable, easy win here: make sure that when users land on your site, whatever the device (mobile or desktop), that there is a button (or Call To Action) within immediate view that they don’t need to scroll to see.

It really is one of those ‘old rules’ that still holds true. If you can remove as much friction as possible, ie. they’re not expected to scroll to get to the good stuff, then you’re doing your job well.

Design-it-yourself platforms like Squarespace let you completely customise your mobile design experience, so you can have complete control over this, whatever device your user is on.

Bonus points: ensure that the text in the button is. As. Clear. As. It. Can. Be. Sure, get playful with text everywhere else, but keep those buttons super clear. Think about being in a department store and you’re just trying to find sunglasses. If you walked in the door and saw a sign that said ‘Here comes the sun’ – would you 100% know that this would take you to find sunglasses? Would you waste your time walking over there?

And one last thing: as with any page on your website, don’t end your page content without a final CTA. The user should never be left at a dead-end with nowhere to go; remember it’s nice to be helpful 🙂

Tick.

4. Signpost effectively.

Continue thinking about situations where you are the customer: especially when you’re in a rush, aren’t you grateful when the information you need is super easy to find?

For most brands and service providers, I recommend having ‘quick links’ under your homepage banner. Nothing too over-stylised or too sales-y – just clear, simple links.

Not only does this do well in user testing, but it’s just a nice thing to do!

Thinking back to the department store, imagine walking in and immediately seeing clear signs for ‘clothing’, ‘homeware’, ‘toys’ and ‘garden’, as well as something popular and seasonal like ‘holiday shop’. This saves you going to that big information board by the stairs (aka your website’s menu navigation) and having to get your head straight into ‘shopping mode’ and dissect exactly where you want to be.

Even if your menu navigation is minimal, and you’re simply reiterating this menu in the flow of the page – do it! This means that you’re not putting the users who actually engaged with your banner content at a disadvantage; if I’ve already walked past the big board by the stairs in the department store, it’s nice to still have the most useful signs reiterated on the path that I’m already on, rather than always sending me back to the stairs.

Similarly as users scroll down the page, they’ll realistically be scanning your content, rather than reading every piece of text. And this is good – it means that they’re actively looking for the thing that will make them bite.

But again, thinking back to the department store, you want to make sure that the sign they’re looking for is easy to find. Make sure every piece of content on your homepage has an associated CTA that lets users dive further into the thing they showed an interest in.

Tick.

5. Keep readability in mind.

Last, these three simple hacks will make your written content look more inviting, and make it easier for users to quickly read and take it in:

1. Left align text longer than about five lines long – this gives users’ eyes a consistent point to jump back to when reading larger bodies of text, making it feel less like hard work.
2. Keep line lengths to 75 characters max, which is about 10 words per line. It will feel short at first, but test it out – it really makes text easier to digest quickly, as it strikes the perfect balance of the user’s eye not having to jump back too often, yet making it easier for the eye to focus on. The recent update to the Squarespace platform gives you great control over this, meaning you can do your users a favour 😉
3. Make sure that the contrast of the text and background colours is high enough. If you want to do a bit of homework, you can read my other article on ‘Colour Contrast Accessibility’ – it’s actually becoming a legal requirement, as if your text isn’t easy enough to read, it’s putting those with eyesight trouble at a disadvantage.

Tick.

Congrats on making it to the end, your users will thank you for it! If you feel ready to tackle designing your own website, consider taking my course: The Six Hour Squarespace Site, which will empower you to do exactly that, in just one day.