Illustration by Tridib Das
They say you can’t judge a book by its cover. While that may be true about books (and also people), it’s not the case for the homepage of a website. Your homepage can make or break your visitor’s experience, even leading to them to abandon their search.
But if the homepage is such a vital component to a website, how do so many get it wrong? Below we’ll dive more into this and explore some of the common mistakes to avoid.
Homepage with modern flat graphics. Image credit Adobe Stock Photos.Home is where the heart is
A website cannot exist without a homepage. It may not always be the first place that people land when they arrive on your website, but they will eventually get there. Your online presence is your virtual brick-and-mortar. When a visitor lands on your homepage, they are walking through the front doors of your establishment, so to speak. It should be clear to them who you are, what you provide, and how they will benefit from it. Ideally, your user will be able to understand all of this within seconds.
Ideally, a visitor landing on your homepage should understand what you’re about in 10 seconds or fewer. Image credit Adobe Stock Photos.The 10-second rule
In most cases, a visitor’s experience on your homepage will affect how much time they spend on your website overall. A study conducted by the Nielsen Norman Group likened the time spent on a website to the Weibull distribution, a concept used to analyze a user’s “time-to-failure.” In other words, the time it takes the user to bounce based on the amount of time the user spent on the homepage.
Research by Chao Liu and colleagues concluded that 99% of websites have a 10-second opportunity window. Meaning, visitors will decide if they want to stay or leave within 10 seconds.
Why is that important? Because it means you have 10 seconds to communicate your value. If a visitor stays for more than 10 seconds, they’ll likely continue to engage with your site and visit additional pages. But if you don’t catch their attention within those 10 seconds, you run the risk of them leaving.
How to design homepages with micro interactions in mind
A good homepage should communicate the value of your company, which is sometimes challenging to do. You’ll need to select the most relevant images, headlines, body copy, and icons. Then, display it in a way that is compelling for the visitor.
Microinteractions can help here, as they provide immediate feedback that engages the user. An example of a microinteraction is when a user hovers over the primary navigation, revealing a dropdown menu or secondary navigation.
With this in mind, the question you may be asking yourself is, “Where do I begin?”
1. Start with the visitor
Start by gathering information about what’s important to your ideal visitor, as well as how they might think and behave when they get to your site. User research is a great way to get this kind of data. Some specific methods that can help retrieve this information are user interviews, a contextual inquiry, and usability testing on your existing website.
2. Determine the layout
Your homepage layout should support findability and learnability. Findability refers to how easily a user can find what they need on your site, and learnability refers to how quickly the user understands how to navigate the website and its features. How you treat your user interface (UI) design will determine your success here, especially given the limited time you have to communicate your value.
There are many design principles to keep in mind for your layout, but the following three are a good place to start.
Typography
A website cannot exist without words, and how you design them is important. Typography matters a lot for your homepage design, as it’s an extension of your brand credibility. For example, your user shouldn’t have to squint to read the copy. Consider the size, placement, weight, and color and ensure everything is readable. Stay away from decorative fonts; instead, choose a more contemporary font, like a sans serif. Arial, for example, is a popular sans serif display font.
Tip: Select a font that’s simple and has varying weights, like bold, ultra-thin, black, light, and regular. Creating a high contrast between the different sections of the content will also help. For example, a best-practice for homepage design is to use a much larger font for your headline than for your supporting body text.
Imagery
What we see impacts our decisions, feelings, and expectations. There’s even a saying in the culinary world that “you eat with your eyes.” The same is true for the homepage on a website. We decide with our eyes first, so make sure that you’re choosing imagery that your visitor can relate to and connect with. Does it demonstrate the problem they’re trying to solve? Does it display the emotions they may feel?
Tip: For an eCommerce website, select professional images that reflect what your user would normally see if they were shopping in-store. Or if you’re designing a homepage for a dog adoption agency, show images that are not only of dogs, but emotional images of people interacting with the dogs. Adobe Stock is a great resource for finding stock images.
Your images should also tell a story that supports the goal of the business. Meaning, you want the image to show a user purchasing a product or adopting a dog, so that it supports the business’s need to convert the visitor to a customer.
Composition
Selecting the right typography and imagery isn’t enough; bringing it all together is vital. One way to do this is through the combination of imagery and button placement. For example, a button could be the full width of the screen or it might take up a quarter of the full width. The space it takes up on the homepage can either engage or distract the visitor.
To determine this, you’ll need to think about what you want your visitor to do on your homepage. The best homepage designs make this very clear. Apple’s homepage is a good example of composition, with clear and strong calls-to-action.
Tip: Create a story that walks the visitor through the homepage and tell that story through your images and text. It should be clear what you want them to do and how you want them to interact with the homepage. Starting with a wireframe can help you with this, as can using a grid to help determine the placement of all elements.
Illustration of a homepage displayed on a mobile phone, tablet, laptop, and desktop. Image credit Adobe Stock Photos.3. Consider the platform
When Apple released the original iPhone in June 2007, it introduced us to a new web browsing experience. Now, we have even more devices to view websites, all with varying screen resolutions. A visitor’s “first-time experience” with a homepage might happen on mobile or any other device, which is why responsive design is so important.
Your homepage, as a result, should consider alternate viewports. How you orchestrate the typography, imagery, and composition will need to shift from desktop to mobile to provide a seamless experience.
One of the ways to achieve this is by implementing a “mobile-first” methodology, where you’re designing for a smaller screen before designing for a larger one, like a desktop. This forces you to make decisions about how to lay out your design elements and serves as protection against “featuritis,” which is when the overuse of features on a product overwhelms your user. Keeping your homepage simple and relevant is key.
Designing for mobile-first isn’t the only way to create a seamless website experience. Understanding the context of use is also informative. The context of use refers to the environment in which the visitor frequents the website. Is it in their home? While waiting for a bus? On the train? This will help you determine which platform should be the priority.
Understanding where, when, and how your user may interact with your homepage will help you make design decisions. Image credit Adobe Stock Photos.The psychology behind the design
Psychology plays a substantial role in UX design, and good homepage design will take advantage of that. Two psychological principles that are very useful are Hick’s Law and the Von Restorff Effect.
Hick’s Law states that the time it takes to make a decision increases with the number and complexity of choices presented to the user. In other words, the more options you give someone, the harder it will be for them to make quick decisions. With fewer than 10 seconds to make an impression, this must be a priority. Try to limit the amount of information, interactivity, and overall clutter on the page.
Design principles such as displacement, hiding, and grouping serve as great tools to simplify an interface:
- Displacement is when you distribute content in other ways, like making it available through a button or image, to reduce the number of names or categories in the menu.
- Hiding refers to covering or not revealing more information until a specific action triggers it. A good example of this is a dropdown menu, because it’s not revealed until the visitor clicks or hovers over the corresponding page title.
- Grouping arranges similar information so that the visitor isn’t overwhelmed. For example, a carousel groups images and displays them horizontally across the page, usually set apart with a border. The goal here is to reduce the cognitive load for the user.
The Von Restorff Effect, also known as the “isolation effect,” suggests that when you present users with multiple homogeneous stimuli, they’ll remember just the one stimulus that differed from the rest. Creating visual hierarchy that uses a high contrast is a great way to achieve this. An example is to make one icon a different color than the others. This isolates the icon and communicates to the visitor that there is something unique or important about it.
This is also important for scannability, so your visitor can quickly assess if the website is right for them. Implementing a type of pattern affordance also helps and can support discoverability.
Conclusion
Your homepage is important. You cannot design a successful website without it, and there’s a lot that goes into it. You’ll need to understand your visitors, including their behavior and their thinking, and then create a layout that supports that. The fonts, icons, images, and the text itself all need to be intentional. Finally, the homepage must be responsive, allowing the user to engage no matter the device they’re using and the environment they are in.
But most of all, keep your design simple. The user should not have to think very hard about what to click on first or where to go to get the information they need. There are many more website do’s and don’ts to consider to help you navigate this process, but focusing on the tips above will give you a good framework for a successful website homepage.