Understanding Learnability for Web Design - Stories

Image credit: Pexels

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 Matters

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?

Amazon's website with thousands of categories and millions of products

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.

Twitter's tooltip hints to help people understand 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.

Dropbox interface has not much changes since they launched to achieve consistency

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.

WebDesigner Depot's story featured with 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.

MailChimp's registration page automatically crosses off certain requirements when you hit the password

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.

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.

Checkout page features small plus/minus icons

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.

Blog layout with strong navigation at the top

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.

Google's SERPS page remains the same and has not much changes

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.

Conclusion

Learnability is another important aspect of usability.

Key to intuitive design is to make use of what people already know, or create something new that is easy to learn. By using these concepts consistently, you meet your visitors’ expectations. This way, you help them reach their goals more quickly. As human beings, we like patterns and recognition, which is why we are better at handling familiar situations rather than unfamiliar ones.

If you use new concepts in your design, make sure to use them consistently and give people a hand during the initial learning phase. For example, you can offer additional information, or instructions the first time they use your site or product. Keep it simple and visual to help people remember new concepts.

Do you think learnability for web design is important? We'd totally love to hear from you on @XiMnetMY.

This article is written by Jake Rocheleau on Designmodo: Understanding Learnability for Web Design