Building a learnable website is much harder than it sounds. The goal should be a clear user experience that visitors can quickly get used to and understand.
Mobile app designers can solve this through onboarding which helps users learn the interface. But websites can’t always offer long tutorials.
Let’s take a look at learnability and see how you can implement 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 complicated.
You want to design for learnability so that people stay. The goal is to help them learn your interface quickly 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 need 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 understand the interface.
With more complicated 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 sure fire way to increase the total userbase and encourage a higher retention rate.
With that in mind let’s dig a bit deeper into a few techniques for a learnable website.
Consistency Breeds Familiarity
I mentioned earlier how a consistent interface is needed for a good design. This means you want to use common page elements that people are familiar with and keep them same 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 complicated applications need to go further than just info content. Take for example the Dropbox backend which has looked essentially 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 generally animations or UI responses to user behaviors and they’re important 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.
Follow Standard Conventions
We’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.
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 a number 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.
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 start of learnability so it’s important to put these ideas into practice and see how they work.