Understanding Learnability for Web Design: Tips and Best Practices

Website DesignJake Rocheleau • January 12, 2018 • 6 minutes READ

Building a learnable website is much tougher than it sounds. The goal should be a clear user experience that visitors can quickly pick up and understand.

Mobile app designers can solve this through onboarding which helps users learn the interface. But websites can’t always offer lengthy tutorials.

Let’s take a look at learnability and see how you can apply these techniques to your websites. Most visitors know how to browse the web so it’s not really about making interfaces that people learn, but rather just following conventions so they’re comfortable using your site.

Why Learnability Matter

People engage more with an interface once they know how to use it. Conversely, people bounce away from interfaces that just look horribly convoluted.

You want to design for learnability so that people stick around. The goal is to help them learn your interface fast so they can keep using it. This way you get more repeat users and the site has a lower bounce rate.

Interaction design should be learnable, or at least shouldn’t require the designer to teach people how to use the interface. This doesn’t work for complex software like Photoshop but a website is not complex software.

For example, everyone knows Amazon’s website. It’s full of thousands of categories and millions of products. With that much content you’d expect it to be a mess.

Yet browsing and searching Amazon really isn’t too hard. Why?

Because they focus on relevant components that help people make sense of the interface.

With more complex page elements you don’t always need to rely on common sense. For example, Twitter uses little tooltip hints when you hover some elements in the UI.

Their goal is to encourage more user interaction and help people keep using Twitter. It’s a guaranteed way to increase the total userbase and encourage a higher retention rate.

With that in mind let’s go a bit deeper into a few techniques for a learnable website.

Consistency Breeds Familiarity

I mentioned earlier how a consistent interface is necessary for a good design. This means you want to use common page elements that people are familiar with and keep them similar in the long term.

Certain elements should remain in the same place on every page. Your navigation, logo, and main content area should all be easy to find.

But more complex applications need to go further than just info content. Take for example the Dropbox backend which has looked basically the same since they launched.

Once a user learns the Dropbox interface they never need to re-learn it. That’s the goal of consistency.

When someone returns to Dropbox for a 2nd time they’ll already be familiar with it. Once people have been using it for a while they’ll get familiar with the UI and expect it to behave a certain way.

You can find this same technique on blogs & content sites too, it’s just less pronounced. For example WebDesigner Depot launched a redesign and changed all their hover events to use a moving animation effect.

Now when you have any of the featured story pics, the headlines, or any of the navigation links, you’ll notice there’s a small animation moving those items towards the right.

This remains consistent across the site and it tells visitors what to expect.

Look for consistency in your design and keep those elements consistent as long as possible.

UI Response & Feedback

The mobile world often talks about micro interactions and how these affect behavior. Those interactions are usually animations or UI responses to user behaviors and they’re crucial to a learnable interface.

Users need evidence that what they’ve done (clicked, submitted a form, entered content) actually had an effect on the page.

You can do this with simple animation effects or by creating page elements that respond to users.

One great example is the signup form on MailChimp’s registration page.

As you enter a password for your account MailChimp’s UI automatically crosses off certain requirements when you hit them. For example, passwords are required to have at least 8 characters in length.

So once you type 8 characters that little item crosses out. It shows that your keystrokes are affecting the page and the user can then learn how the password field works.

Another great example is the Photojojo eCommerce product page layout.

Whenever you click “add to cart” the page scrolls up towards the top where you’ll see a tooltip with an overview of your shopping cart.

This response from the interface lets you know that you just added something to your cart. It’s a clear indicator that your mouse click did something.

Follow Standard Conventions

I’ve talked about standards in web design before covering the value of consistency for web layouts.

If you’re designing a website meant for average everyday use then you need to follow conventions. It is not the time to get creative or start messing with common expectations.

Visitors want to see navigation menus right at the top. Links should work by hovering and clicking, and if there’s a dropdown it should appear right away.

If you’re designing for learnability then don’t try to reinvent the wheel. Instead look at what everyone else is doing(at least the good stuff) and stick to it.

For example this checkout page includes small plus/minus icons for changing the quantity before checkout.

It’s a very common feature in ecommerce shops and users just inherently know how to use it.

The more common an interface feature is, the greater the likelihood that people will just intuitively understand.

Same goes for blog layouts. Aim for a strong navigation at the top with blog categories, clearly visible headlines, a top-of-page featured image, then the body of the article.

Stick with what works and try looking at other sites for inspiration.

For blogs you might try looking at other simpler blogs or even online magazines to see which elements they all share. If you see something on dozens of websites then it’s a cue to replicate that on your own.

And you might even need to consider standard conventions based on your own design once it’s been around long enough.

For example, Google’s SERPS page has basically looked the same for decades. Yes it has changed a little, but for the most part it really hasn’t.

Stay consistent with your own conventions. Don’t radically redesign your site one day without any way to change back—learn from the failure of Digg v4 and their insane UI change.

Once your design has been online long enough you can bet a lot of people have grown familiar with your conventions. Try to avoid changing these too much.

Granted these tips are just the beginning of learnability so it’s essential to put these ideas into practice and see how they work.

And if you’re looking for more stuff to read I highly recommend these awesome articles:

• Usability vs. Learnability
• When is Learnability More Important than Usability?
• Make it Easy on the User: Designing for Discoverability within Mobile Apps