How to build web interfaces with learnability in mind

website learnability slide title

Learnability is key to keeping users on your site

A key element of website usability is learnability, which refers to how quickly users learn an interface. This subject may be a no-brainer when it comes to simple blogs. But complex sites such as Facebook with many features pose greater obstacles to new users. It is thought that learnability affects websites’ growth.

website learnability slide1

Don't reinvent the wheel

What we know about learnability has been built up over two decades of research, case studies and success stories, so there’s no need to come up with your own rules. It is usually a mistake to rethink an element or feature when you know there are existing design patterns that users already know and that work very well. Users prefer interfaces that they’re familiar with. So instead of inventing new ideas, stick with whatever seems comfortable to most people.

website learnability slide2

Use the three-bar hamburger icon

One recent example is the three-bar hamburger icon. This is used primarily on mobile devices to hide navigation items offscreen, only showing them when the user taps the icon. This hamburger symbol is now synonymous with “hidden menu,” and A/B testing shows that most mobile users recognize what it means.

website learnability slide3

Reuse common icons for the sake of simplicity

Granted, many people argue against this technique, and they have some valid points. But reuse is still widely used across mobile apps and responsive websites for one reason: Most people have learned what to expect from certain icons. Trying to change public perception is an uphill battle. If your goal is learnability, it’s a good idea to reuse common icons for the sake of simplicity.

website learnability slide4

Employ natural page flow

Using natural page flow is another way to leverage users’ expectations. Traditional website design follows a series of presuppositions. Navigation is usually at the very top or near the top of the page. Forms are usually labeled explaining what they do, with placeholder text in the fields that explains what information the user needs to provide.

Natural page flow defines the expectations that users have built up from decades of surfing the net. The best way to study these UI patterns is to look at other websites and make note of their most complicated features. Are they intuitive? What works? With a keen eye, you’ll recognize learnable interface techniques that you can replicate on your own site.

website learnability slide5

Make forms interactive

Most major websites include forms, whether for contacting the organization, signing up for newsletters or completing an e-commerce checkout. Forms should be well designed aesthetically to fit into the layout. But they should also be well designed interactively. This means plenty of whitespace between input fields and text that is large enough to be readable on screens of any size.

website learnability slide6

Heed the form conversion rate

The form conversion rate tracks the total number of users who complete a form. If your forms are clearly labeled, they’ll be much easier to learn, and thus easier for users to guide themselves to completion. What constitutes good and bad metrics will vary based on the requirements of each form. For example, filling out new profile info is going to take longer than logging into a website. Forms vary in length and complexity, so there is no golden number.

website learnability slide7

Add progress breadcrumbs

The best way to mitigate time on task is to simplify the process with a clear goal in mind. Require as few input fields as possible to get the user moving forward. It’s also a good idea to add progress breadcrumbs on larger forms. These breadcrumbs guide users and let them know how much more is required the form will be complete. This helps with learnability, since users know what to expect at each step.

website learnability slide8

Clarify the purpose of forms

Although everyone knows how to use forms, the context and design can make them confusing. Be sure to clarify the purpose of a form with labels and captions so users know why they’re interacting with a form and what information they’re required to give. When forms are properly labeled, users will learn quickly and be able to move through them quickly.

website learnability slide9

Offer UI feedback

When a user does something wrong (or right), it’s good to let them know with onscreen indicators. This is a big piece of UI learnability, because users rarely have someone over their shoulder telling them how to browse a website. For example, anchor links and buttons can use the :active pseudo class to restyle elements when the cursor passes over them or when they’re pressed. Such feedback tells visitors, “This element is meant to be clicked,” which enhances user confidence when interacting with other elements on the page.

website learnability slide10

Tell users what is wrong and offer a solution

Tell users when they have entered wrong information, and offer a solution. Present everything upfront as clearly as possible. Don’t turn your UI response messages into a guessing game. This screenshot from MailChimp shows an error message on the login page. It not only informs the user that the login attempt didn’t work, but it also says why (incorrect username) and offers a link for username recovery.

website learnability slide11

Use on-screen prompts to make learning easier

MailChimp also has a live password field that auto-updates required characters after each keystroke. By responding to user actions in this way, you’re helping the user learn. We all learn from actions and outcomes, so on-screen prompts can make learning an interface much easier. Nuanced details such as this go a long way toward building trust with users.

website learnability slide12

Remember that consistency is king

An old internet marketing phrase asserts that content is king. But in the world of learnability, I’d argue that consistency holds the royal throne. Consistent interfaces are predictable interfaces, and predictability leads to learnable patterns. If, for example, a sidebar sporadically appears on different pages of a website, it can be confusing for users who rely on those sidebar links. This applies to all elements on a page, from tabbed widgets to spacing between textblocks.

website learnability slide13

A familiar layout creates an atmosphere of relatability

Relatability helps users feel confident. A usable interface should intuitively help visitors predict what might happen when clicking a link or button. Over time, users expect their predictions to be true, leading to learned behaviors for browsing your website.

website learnability slide14

Let WordPress' consistency guide you

Consistency should carry through successive versions. Small tweaks in color, size and spacing will not cause complete upheaval for regular users, but more significant changes will slow them down. The WordPress dashboard has maintained a similar interface since Version 2.7. This is why seasoned WordPress users don’t need to relearn the admin panel. Once you learn WordPress, it’s generally the same for all new updates. This is a fundamental concept when designing for learnability. Build interfaces that breed familiarity. This rule applies to social networks and static content sites alike. Consistency is key if you’re trying to design a learnable interface.

website learnability slide15

Trust in pattern recognition

All the tips in this post are applicable to any interface for any type of website. Learnability might seem like common sense, but that’s also the point of a learnable interface. It should be so easy that common sense is all you need to use it successfully.

There is real value in applying learnability techniques, no matter what type of site you’re designing. And the best way to understand learnability is through pattern recognition.

Play around on great websites, note what they’re doing (or not doing) and apply those realizations to your own projects. Rinse and repeat to create interfaces that work well and help users teach themselves.

Copyright © 2016 IDG Communications, Inc.