Homepage Design For 2019: 15 Epic UX Tips (Case studies, Examples)
Homepage design premise
Let me guess: you’re building a website and you want to make it awesome.
As a user, the homepage design is most likely the first thing I’ll see when discovering your blog, business, or anything you do, and it will either attract me towards your funnel or make me turn my back and say:
NOPE.
[QUOTE]: Annoyed user
Between work, daily responsibilities, my car that needs gas and this girl I really want to sleep with, the time I want to invest in understanding your website is VERY little.
As a user, your homepage is arguably an essential step in my experience on your website and the fact that you decided to click on this article and get it done the best way possible, makes you a legend already.
So thank you for that.
Let’s start!
I would love for your homepage to be:
Clear
To the point
Focused on me and what I’m actually trying to do
Although it is true that by spending a few more seconds on any website, I would be able to find my way around them, but realistically if after 3 seconds I still don’t know:
· What your site is for
· What should I do first
· Why I should be here and not somewhere else
You lost me.
And it is not easy to accomplish.
There are so many little things in an homepage that can make my experience better, but also add “question marks” in my head, leading to a bad UX.
So let’s make your homepage amazing with some cool UX tips for 2018 shall we?
Let’s start with some great news:
Your Homepage isn’t that important from an SEO point of view.
Innovation of Search Engines released a lot of the ranking responsibilty from homepages which gave a lot of space for a lighter, attractive and mostly, welcoming design.
Because an homepage should be first of all, welcoming.
Before:
“check out our blog, and here’s our newsletter, here’s our product, and here’s every single thing we are doing, and by the way, do you want to work for us?”
It seems like an over-exaggeration but check out what Hubspot’s home page looked like in 2009:
It’s really like content was competing for attention but it made sense back then:
the homepage would be your highest pagerank page and, therefore, could rank most of your content.
The difference is huge from how it looks in 2018.
Now:
“Welcome, this is me, this is what I do and here is a map to find out more!”
As a user, the most modern version of Hubspot’s homepage makes me feel empowered:
· A clear message
· A suggested path (blue call-to-action)
· A navigation bar to answer more of my questions.
Source: https://moz.com/blog/what-should-i-put-on-the-homepage-whiteboard-friday
Before deep diving into homepage design…
Let me precise who is this article for:
· Small, medium and large companies who are trying to revamp their website’s homepage. Trust me, there are many of them with websites optimized for 2009.
· UX designers hungry for data-driven tips and overall tactics to build a great homepage
· Freelancers trying to build an expertise in Homepage design to enrich their offering
It really doesn’t matter the industry you work in.
Visuals may not reflect your exact kind of business or format you are looking for, but I made sure that every single one of the tips I found are applicable to everyone.
The elements of a homepage design and some proven tactics to make it awesome in 2018
Like every other page of your website, the Home page will answer to certain needs. Let’s break them down into 3 main objectives:
Your Homepage will
1) Tell me what your site is about and what it is for
2) Show me from where do you want me to start
3) Tell me why I should be here and not somewhere else
Just like this one:
In order to achieve these objectives, we will examine each element of a Home page design and look at the best possible practices.
The Headline and Sub-headline of your homepage
When talking about writing great Home Page Headlines, Kissmetrics blog says
“A mere 6 to 12 words stand between you and a lower bounce rate.”
So why are headlines so important?
The Headline is the first line of your copy that site visitors read.
It will either draw readers in or push them away from your website leaving you wondering what happened.
In order to avoid that, here are 4 characteristics of a great headline:
Source: https://www.quicksprout.com/the-definitive-guide-to-copywriting-chapter-3/
TIP #1 Make Your Headline Unique and Authentic aka “No-bullshit”
People yearn authenticity.
Our bullshit detectors are always on and we are annoyed when reading the same thing all the time.
If your headline is bad, many won’t give you another chance.
“Your Home page should tell me why I should be here and not somewhere else” remember?
Check out Dropbox’s Homepage headline:
“Securely share, sync and collaborate. Dropbox Business is the secure file sharing and storage solution that employees love and IT admins trust.”
This is a great headline because it tells me exactly what Dropbox does and who it is meant for. I’m not looking for another option around the web!
Users nowadays are targeted constantly with the same offering from different companies.
If you sound like everyone else, you will never stand out.
Here are 3 successful formulas to follow when writing your Homepage’s Headline (+500 successful companies study)
1) Say what it is
Whenever we see something new, our brain asks “what is it?”
Uber: Your ride on demand
Next Big Sound: Smart & Timely insights for the music industry
1) Say what you get
State clearly what the user gets when he/she signs up.
Adespresso: Optimize your Facebook Ads as Easily as Making your Morning Coffee
1) Say what you’re able to do (with it)
This is where the headline makes it clear what you’re able to accomplish if you use this product or service.
Plutio: Everything you need to manage your business and get work done, in one place.
SurveyMonkey: Create Surveys, Get Answers
Airbnb: Book unique homes and experience a city like a local
Important: There’s no way to know in advance which headline will work for you. Split testing is essential.
Source: https://conversionxl.com/writing-home-page-headlines-for-the-modern-world-3-formulas-that-work/
TIP #2 Make Your Headline User Centric
Consider your headline as a way to explain to the website visitor how you are going to solve his pain.
Users want to know what’s in it for them and are turned off by headlines saying “how cool your company is”.
There is a simple trick to make this easier:
This technique is about you.
Yes, you.
Using the word “you” in your content is extremely powerful as it centers your headline around your users.
Try replacing We/Our with You/Yourself.
This simple change of perspective will make YOUR copy much more customer-focused.
Source: https://copyhackers.com/2012/09/web-copywriting-the-word-we/
TIP #3 Make Your Headline Descriptive
Your headline should be descriptive.
There is nothing more frustrating for a user than landing on the Home Page of a website and not understanding who you are, what is the website for and why he/she should use it.
Headline copywriting should not be considered as “writing something clever”… I mean, being clever helps of course, but it is not your main objective.
“Clear” beats “clever” any day.
Your headline should clearly describe the benefits of your value proposition or all your efforts will be wasted!
When writing your headline, think of these things:
· What makes you unique as a brand/website/blog etc.
· To what “user-pains” you are a “pain killer”
Make sure you don’t oversell yourself either. Don’t promise things you are not actually offering.
Crazyegg: What’s making your visitors leave? Find out by seeing how users click and scroll through your website.
Potato in the Post: Because cards are boring, anonymously send your message on a potato.
Source: https://www.dbswebsite.com/blog/2016/12/27/5-tips-for-writing-effective-homepage-headlines/
TIP #4 Make Your Headline Targeted
Everything is better when it’s relatable.
Let’s be real. It is impossible to make everyone happy. If you write for 100% of your traffic, you are very likely to make no one happy.
Write a headline for the 20 to 35% of your traffic. The ones that are most likely to be happy with your offering.
It is extremely important to have a target in mind. Highly targeted headlines will allow you to communicate on a personal level to the users that are most likely to convert.
You need to find the people who are:
· Likely to give your product/service a chance
· Likely to find value in your offering
· Likely to spread the word
I recommend doing the following:
· Surveying your existing customers (SurveyMonkey works perfectly)*
· Creating some User Personas for your business to discover who would benefit the most from your services.
*if you decide to do this, here’s a great article to create the best survey questions:
Source: https://conversionxl.com/writing-home-page-headlines-for-the-modern-world-3-formulas-that-work/
Intuitive Navigation
Your navigation should be easy to understand and use for a first-time visitor.
You want someone to land on your website and know exactly where they can find the information they need without getting confused.
Great intuitive navigation is:
· simple to use
· consistent
· It enables efficiency
TIP #5 Your Navigation Bar
Navigation should reflect your buyer’s typical behavior on your site by displaying the most important sections by order of importance.
But what are the most important sections to display?
Well, there is no unique answer I’m afraid. It really depends on who your target is and on what your site is for.
Here are 2 simple approaches to this problem:
1) Examine your existing traffic and draw conclusions.
In this case, your insights will be as good as the amount of data you have collected so far. If you don’t have traffic on your website yet, skip to the next step.
1) Check what your competition is doing.
Competitors or similar sites targeting the same audience or offering similar services are a perfect example to follow (especially if they are very active).
Chances are they already performed A/B testing on their navigation bar and following their lead could save you time and money.
To do this, I often use a Google cache such as: https://archive.org/web/ .
Just type the website you want to spy and start comparing the differences over the years/months!
Check this out for example:
Hotjar navigation bar in 2016
Hotjar navigation bar in 2018
As you can see, they changed “Contact” into “Support” because their data showed that users used the contact link mostly for “support” queries.
They made it more intuitive and as Steve Krug would say “they removed a question mark”.
TIP #6 Focus on what is more important
Ask potential users of your site or actual users, what they value the most.
The results can be very surprising.
The popular UX designer Joe Natoli was working with a financial services company on improving their website’s UX.
When they got to the point of discussing the information architecture of their website, they decided to perform the following exercise:
1) Firstly, the stakeholders ranked the sections of the website in order of priority of information (what they thought was more important for the customers)
2) Then they asked some of their customers to do the same thing
When comparing the results…
“FAQs” ranked as the most important section for the users, and the least according to the stakeholders.
“Event Information” ranked as the least important section for the users, and the most important for the stakeholders.
This shows how important it is to try to get to the source whenever it’s possible.
I recommend to watch the full 5 minutes video as it’s as brilliant as the man himself!
TIP #7 Don’t be too disruptive
Your navigation should not only be consistent within your website, but also consistent with other sites across the web.
Users visit hundreds of websites every week and they have become familiar with the structure of most websites’ navigation.
We all know what happens when you click on the Youtube logo.
Or what this icon means:
And this one…
If you think about it, it would very counter-intuitive if we had a “save” icon different from a floppy disk.
You get where I’m going with this:
be original, but don’t try to reinvent the wheel.
Users are creatures of habits, and we hate change.
These common navigation conventions are important to adhere to when creating navigation for your website:
· Clicking your Logo redirects to the website’s homepage
· Use common terms in your headings to make them clear (e.g., Contact, About Us, Services, etc.
Here’s a list of more navigation conventions you shouldn’t mess with:
(source: https://www.impactbnd.com/blog/11-crucial-elements-every-homepage-should-have)
TIP #8 Enable Efficiency on all devices
What kind of navigation should you use?
It’s a very difficult question to answer, and after looking through a lot of different resources, my conclusion is: it depends.
Here is an interesting study that provides you with some nice data:
The NNGROUP wrote an awesome report on the effects on usability of different kinds of navigation:
Hidden navigation: the main navigation links were placed under an icon (such as the hamburger) or button and required an action to appear.
Visible navigation: the main navigation links were shown in a visible navigation bar and could thus be seen by a simple glance without needing any prior action.
Combo navigation: some of the main navigation links were visible and some were hidden under a menu.
2 simple tasks were performed for each website.
Here are the results of the test:
On desktop
• Hidden menus were used only in 27% of the cases, while visible or combo navigation almost twice as much.
• People were 39% slower when the navigation was hidden
On Mobile
• People used the hidden navigation in 57% of the cases, and the combo navigation in 86% of the cases .
• People were 15% slower when the navigation was hidden
Conclusions:
Desktop:
• Avoid using hidden navigation (such as hamburger icons). Instead display the top-level navigation options, usually across the top of the page or down the left side.
Mobile:
Hidden navigation has a lower impact on mobile so it is recommended to do the following:
• If your site has 4 or fewer top-level navigation links, display them as visible links.
• If more, hide some of these.
(source: https://www.nngroup.com/articles/hamburger-menus/)
TIP #9 An alternative to Hamburger menus
Two interesting tests with Navigation Menus
Grouping your website’s content inside a Hamburger menu is a widely used practice as it makes the design cleaner and avoid cluster of information that would just not fit properly on a mobile device’s screen.
One problem though: Hamburger menus decrease the discoverability of your content.
Apps like Zeebox saw a 50% decrease in engagements after adopting an hamburger menu.
Tabs on the other hand seem to become more and more popular.
Redbooth’s move from a hamburger menu to a bottom tab bar resulted in increased sessions and users. Previously out of sight functionality was now front and center.
Call-to-actions
What is the main thing you want your users to do on your website?
The homepage follows the same rules of a landing page:
The least secondary call-to-actions, the best.
Users don’t want to think or wonder while on your website.
Your Call-to-actions need to make it extremely obvious not only where to click, but also what to expect.
TIP #10 Make it obvious where you want your users to click
Jobsite is a leading UK online recruitment site, dedicated to helping you find your next job.
When you opened their homepage, you got completely lost.
“I don’t understand if you want me to search for my next job on your page or do you really want me to register first? And why is the Vision2learn banner call-to-action the most evident?”
Users that land on your homepage, are really looking for hints on what to do. If you recommend one path, that’s where they are going to go.
If you recommend 6 different paths, but truly you want them to follow just one, you are literally hijacking your own traffic, and also making your UX a nightmare.
It’s amazing how things have changed over the last years!
The 2016 Jobsite website now has a very prominent call-to-action that focuses on the actual purpose of the site: finding a job.
source: https://yoast.com/call-to-action
TIP #11 Make Your CTA Work with MicroCopy!
Microcopy is an essential part of a call-to-action.
If you are not familiar with micro-copy, it refers to
“the small bits of text/copy that help instruct and alleviate the concerns of your users”
In order to achieve that, microcopy should not leave the user wonder “what happens if I click here?”, it should already contain the answer to that question.
For example:
Check out this call-to-action microcopy:
“Browse our platforms”
It’s so much better than “Learn more” or even worse: “Click here to learn more”.
Usability testing can help you find the best pieces microcopy for your website.
The objective is changing the pieces of copy that confuse the user:
• Ask users to perform some tasks on your website while thinking out loud
Through this kind of testing you will be able to know if your copy perfectly describes the task your user is trying to perform, and by listening to the user narrating the navigation, you can get great suggestions on what would be the most logical copy.
For example:
“Now I’m clicking on the “contact us” field to get in touch”
Or
“Now I’m clicking on the “sign up” button to get a 20% discount”
Through this technique, the company Veeam managed to gain an insight worth a 161% increase in clicks on a link!
Here’s all they had to change:
Before:
Old copy: “Request a quote”
After:
New copy: “Request pricing”
Source: https://uxplanet.org/microcopy-tiny-words-with-a-huge-ux-impact-90140acc6e42 (by Nick Babich)
IMAGES
Most people are sensitive to images that clearly indicate your offer.
To put this into context, It takes just 50 milliseconds for users to form an opinion about a website.
To say that we judge websites in the blink of an eye would be an overstatement.
One overlooked element of modern design is the hero image.
TIP #12 Optimize the performance of your hero image
Hero images are visually striking, but they can be more than just that.
According to one study by NNGroup, users focus roughly 80.3% of their attention above the fold. They mostly scroll through the rest of the content before perking up again near the footer.
Since hero images dominate the above the fold area, it is critical that you pick something that not only looks good but also pushes your conversion goals.
3 Don’ts of Hero Images:
1. Avoid using sliders
According to a study done by Notre Dame University, the first hero image out of five received 84% of all clicks. The remaining four images are just distracting.
Or If you really want to use multiple images, make it so that the hero image changes when refreshing the page.
2. Avoid using visually overpowering animations
Animations generally overpower the image. They also hog system resources and add to the page size without doing anything substantial for the user-experience. Be very careful in using those.
3. Avoid using videos without demographic research
Make sure that:
• Your users have a good enough connection to auto-play the background video
• You are multi-device friendly
3 Do’s of Hero Images
1. Select Emotionally Persuasive Images
Your images should have an emotional impact, create inspiration, and reinforce the feelings you are trying to create. After all, emotion often overrides logic when it comes to making important decisions.
1. Create Contrast
Choose bold, easy to read typefaces that mesh with the visuals but stand apart from them. If you are planning to use a text-on-image design, ensure that the main part of the image is visible and understandable when text is placed. Perhaps the easiest method to put text on an image is to overlay the image. If the original image isn’t dark enough, you can overlay the whole thing with translucent black.
1. Please, be HD
It is really a bummer to land on a website’s homepage and see that they didn’t even bother to publish a HD hero image.
It’s just frustrating.
There is nothing that should be more HD than your Hero Image.
There are great free and paid sources of awesome hero images. If you don’t want to pay for a shutterstock subscription (which I highly recommend), Here are a few free sources:
Where to Find Hero Images? I found this free library for you!
I often encounter awesome UX resources like these. Join my exclusive email list to stay up to date! Invite link
TIP #13 optimize your images for mobile users
Are the images on your website sized correctly?
If you have an image that is 1000 x 1000 pixels, but you have scaled it down to 100 x 100 pixels, your browser must load 10x more than necessary. That’s not ideal
1) Copy your site’s link on the free tool from Google: https://developers.google.com/speed/pagespeed/insights/
2) Open the “Optimize images” item to quickly find the images that need resizing
3) Resize the images to the correct size without quality loss (https://tinypng.com ) and re-upload them.
Under the fold content
Let’s say the user isn’t ready to click on your primary Call-to-action.
Sometimes this is the case especially when your main call-to-action requires some kind of commitment such as providing contact details.
If the user isn’t offered a different path to follow, he will most likely leave and probably never come back again.
For folks who are looking for more information, offer a link to a resource center where they can browse relevant information.
These should still not be a distraction from your main CTA, so it is best if they are placed under the fold.
TIP #14 Encourage users to scroll down
In split tests, long pages often beat shorter pages.
But for a long page to be effective, readers must be aware that it’s long.
If users don’t scroll — because they don’t want to or because they aren’t aware that the page is long — then all of your hard work has gone to waste.
First of all, identify where the fold of your web-page is with this free tool. (the fold is the area of a page that users can see without scrolling.)
The main idea is to avoid horizontal lines (or bars) just above the fold as they create a “false-bottom”.
This is a long page, but the blank area above the fold suggests the opposite
Here are 3 ways for encouraging users to scroll
1. Ensure that at least one element of your web page is partially “interrupted” by the fold
Like on Neil Patel’s homepage:
Or Bidtotrip:
2. Give the top, left-hand, and right-hand borders of the page a shade or texture that contrasts with the main content.
3. Add a please-scroll graphic just above the fold
Source: http://www.conversion-rate-experts.com/scrolling-tips/
TIP #15 Provide Resources for Different Stages of the Conversion Funnel
KnowledgeVision makes a resources link one of their secondary call-to-actions below the fold.
Notice how each of these secondary call to actions cover multiple stages in the buying cycle:
- Demo for people close to buying;
- Examples for people who are interested but want more information;
- Resources for folks closer to the top of the funnel.
We can see similar applications of this in many homepages:
This is the under the fold are of Social Karma’s Homepage:
And this is Github
LET’S RECAP
Capture the user’s attention with a great Headline which is:
- user centric
- descriptive of your offering
- targeted
Make your user save time with a intuitive navigation! Keep in mind:
- Focus on what are the most important pages for the user
- Be consistent
- Be efficient for all devices
Guide the user through your funnel with a single, memorable Call-to-action which:
- Pops out from everything else
- has a brilliant micro-copy
Make everything work visually with images that…
- are emotionally persuasive
- create contrast with the Headline
- that are HD
Allow the user to take an alternative route by
- Making your Homepage scrollable
- Providing secondary points of entry to your conversion funnel
