5 Ways to Apply Learnability to Your Homepage Design

Building an audience around your new site requires offering value. This could be great content, valuable assets, unique features, or some combination of all three.

But every user also needs a way to interact with this value. Some designers blanket this under the term “UI/UX design” where you consider the actual site design, but also the user experience that goes along with it.

When new visitors land on a page they might be interested in the content but have no idea how to use the design. This is where learnability comes into play.

In this post, I’ll share techniques you can apply to any homepage layout to make it more appealing and easier to pick up from scratch. But let’s start by talking about the origin of “learnability” and how it applies to the web.

Quick Intro to Learnability

Designers want to build interfaces that users can actually use. But what if a user has never seen the interface before? The best UIs will be intuitive and easy to pick up even without prior experience.

These are typically called “learnable” interfaces because users can visit them for the first time and learn how they work quickly.

Subtle cues like animation effects, icons, font colors, and element placements on the page all affect how the interface works.

The best way to study learnability is through user testing. This can be exhaustive with video recordings & live sessions, or very simple with one-on-one feedback from users remotely accessing your site.

The ultimate goal of a learnable interface is to test a variety of people and see how quickly they pick up the interface behaviors. Everyone in your target demographic should be able to use your site and quickly learn the ropes with ease.

So how do you actually go about doing this? I don’t have all the answers but I do have a few suggestions to get you on the right track.

Plan User Behaviors

The first step before designing is to consider what you want users to do on the homepage. Naturally, this will change based on the website and the ideal goals.

Simple ecommerce stores want to increase sales. Landing pages want to increase conversions whether these are product purchases, email signups, or something else. Blog homepages want to entice visitors into reading their content.

Once you know what you want visitors to do you’ll have a much easier time planning the design. Since you know what they should be doing you can prominently feature buttons, links, or forms that would encourage such user behavior.

Take for example the OptinMonster homepage which uses clear CTA buttons to draw attention.

Their ultimate goal is to increase signups and conversion rates. But most users who land on this page have absolutely no idea what this product is or why they’d need it.

Bold text in the header explains a little bit (A/B testing and visitor conversions). But most visitors want to know what they’re getting into before they click a button called “Get OptinMonster Now”. So right beside that button is a link to an explainer video for the product.

This is a crucial lesson to learn when designing learnable interfaces. Yes, it’s important to think about what you want users to do. But also consider what they want to do or what they’ll be inclined to do from the start.

Most people on that landing page want to learn what the hell it is and what it offers before even considering signing up.

Now, this may be different on a large social networking website like Quora or Pinterest. Both of these websites force you to signup or log in before you can browse the site further.

I also think the homepages for both sites are fairly generic and not very explanatory.

But somehow this must work because these networks are definitely growing with little signs of slowing down.

Know your audience and your brand. Unless you become the next Snapchat you really need to sell users on the product before asking them to join. And frankly, it wouldn’t even hurt Snapchat to offer supplementary info about what the app does before pushing signup.

Use Contrast To Engage

Once users are on your page you’ll want to draw them towards engaging elements. These could include signup/login buttons, new blog posts, or hot items to purchase from your store.

The best design technique you can apply is heavy contrast.

Use extra whitespace, bigger text, brighter colors, or similar features to draw the eye over to that section of the page. Make these elements stand out right from the first page load so that users realize, even subconsciously, that something stands out and wants attention.

The homepage of Brusheezy brings attention right to the search form. Yes, there are links to new resources and freebies on the site. But most users will want to search for a specific resource so the search field takes prominence.

Notice that the amount of contrast doesn’t feel jarring or out of place. That would be an example of poor design.

Instead, you want just enough contrast to make the element stand out from surrounding elements, but still clean enough to blend with the design.

Another example can be found on Wine Library which is an eCommerce wine shop. This homepage features the traditional navigation header and search form. But it also prominently features three bottles of wine for curious buyers.

These bottles stand out because there are no other images of wine products on the homepage. Each wine features a big “free shipping” ribbon along with a red “add to cart” button.

Minor details like size, placement, and color may not seem very important upfront. But on a high-traffic website, you’ll notice clear differences if you run A/B testing across a good amount of visitors(100k or more).

Once you know what you want visitors to do you should use contrast to guide them towards that behavior.

Don’t Reinvent The Wheel (Completely)

The extra suffix to this title implies that some creativity is always encouraged. But there’s a line where usability suffers just for the sake of being creative.

A blog homepage should look like a blog. How this is designed won’t always matter, but the basics should be there(recent posts, category navigation, etc).

You’ll notice a major shift on the homepage of 1st Web Designer which used to be a blog, however, it shifted over to a web design course with a squeeze page.

The same can be said of Problogger which updated the homepage towards the “start here” model and placed the blog elsewhere on the site.

If you look at different sections of the homepage you’ll quickly learn how to browse the site. Icons, text, and contrast through whitespace/font size lead your eye along the site to guide you through the experience.

The homepage design, content structure, and layout hierarchy all act as visual clues to lead the user around the design. A learnable design will feel familiar and many users will recognize the similarities.

Repeat Similar Design Patterns

The more a user interacts with your homepage the more comfortable they should become.

To achieve this natural comfort don’t add too many complicated features or dynamic widgets on the page. And your dynamic features should all behave in a similar manner to create a consistent user experience.

For example, the Netflix homepage uses icons as tabbed links to switch between information boxes. Once the user clicks one of the icons they should quickly understand that the links don’t load a new page. In fact, some users may not even know the icons are links until that first click.

Once a user interacts with the Netflix homepage they shouldn’t have any trouble going forward. The login button is fixed to the top-right corner. It may take users a few seconds to find this, but since most websites fix buttons/links in the top-right corner it’s a safe assumption.

Another good example is the Themeforest homepage which adds recent items listed in a grid layout on the homepage.

Each product displays as a single icon but when you hover any thumbnail you get a small preview window of the theme right beside your mouse.

This works for every little square icon on the page, and once the user learns about this feature their browsing habits will change.

The search bar is much more prominent and would likely draw behavior from most first-time visitors. But the other elements on the page are just as easy to learn and consistent across the whole site.

With consistent features, you build an unspoken language that users learn. Even the most tech-illiterate people can quickly learn how to interact with a page’s features if they’re consistent and the behaviors are easy to understand.

Design On Your Own

All these tips and techniques mean nothing if you can’t apply them. I’ve tried to span the gamut of examples in this post from blogs to ecommerce sites and social networks. This should give you a broad range of learnable interfaces to study and consider in your own projects.

But remember to think about your visitors first. Plan out your content strategy and design your website around your user’s goals, not around another website’s goals.

And if you’re looking for more tips on user engagement & learnability check out some of our related posts: