Learnability in UX Design

Default avatar.
March 21, 2019
Learnability in UX Design.
Building a learnable website is much tougher than it sounds. One thinks one’s design is clear and comprehensible; however, a design that might be obvious for you, might be perceived totally different by a user with a different set of experiences. Therefore, the goal is to design a clear user path that visitors can quickly pick up and understand.

Why Learnability Matters

Learnability has a strong correlation with usability. It is vital for users to quickly understand the layout and purpose of an application. Especially for web applications, providing an easy to learn interface is important. It is much more convenient to design an easy to understand mobile app compared with a web application; a mobile screen just doesn’t allow to provide a complex interface or let the user accomplish difficult tasks. The speed of adoption is not the only criteria why learnability matters. A website that looks familiar and provides an understandable interface will result in a lower bounce rate. This is especially useful for websites that try to boost their conversion rate. A complex design scares users and they will resort to other tools that provide a clear interface. In the end, the goal of every website is to convert an occasional user into a repeated user and engage the user for interaction.

Learnability by Example

We can find loads of examples on the internet where learnability has been applied in the right way. Let’s take a look at the key elements of learnability in design…

Small Hints

A few days ago, I moved to Berlin and I had to fill in a form for calculating the cost for my European health insurance. Unfortunately, the form is only available in German, however, due to the great combination of visuals and text, I could perfectly understand what information they required. This is a great example of how an icon can reflect a possible answer. Other small hints like a tooltip or default text can give a user an initial idea about how the interface can be used and what options are available. Let’s take the Twitter “Compose new Tweet” modal as an example. The design asks the user to tell what is happening. The initial response of a new user would be to input what just happened into the field. Besides that, when the user hovers one of the icons below the text field, a tooltip will appear telling the user what action the icon allows. In short, no space is wasted on adding text, the design speaks for itself.

Familiarity by Consistency

Google uses its own design system (Material Design) which is increasingly used across all of its products. Therefore, a call-to-action button will be the same across tools. Users who have used Gmail should recognize a lot of the elements when using Google Drive for the first time. This familiarity eases the adoption process of a new interface as users are able to transfer their mental model of one product onto another. Especially for an older generation who didn’t grow up with computers, this familiarity is important as they tend to avoid change and learning new interfaces.
A mental model represents a person’s thought process for how something works. Mental models are based on incomplete facts, past experiences, and even intuitive perceptions. They help shape actions and behavior, influence what people pay attention to in complicated situations and define how people approach and solve new problems or interfaces.
A snippet from Susan Carey’s 1986 journal article about ‘Cognitive science and science education’. You can find this familiarity also on blogs, but not that explicit as only certain elements are implicitly required. For example, the hamburger icon indicates a menu is hidden and can be unfolded by clicking the hamburger. Mostly, you’ll find a search icon on the right side of the navigation bar. Also, the layout across blogs is quite consistent. A blog always consists of a header with clear navigation followed by some featured articles and then the body of the article. We, as users, became familiar with this concept so that a blog with a different layout will look, and feel strange to us.

Evidence of Actions

In addition to making sure actions are comprehensible, it’s also important to make sure the user has evidence of their actions; this helps to reinforce what reaction each operation produces throughout the journey. To give you a simple example, when completing a form, you are shown a ‘thank you’ or a mail that indicates the completion. For a user, that is clear evidence they have used the interface correctly. Why does this matter? Providing feedback during the learning process helps a user to remember the interface better as he immediately learns what is possible or not. Proper feedback mechanisms can reduce the learning curve quickly and also help the user increase his efficiency while using the tool. To give an example, instead of solely giving feedback upon submission of a form, let’s provide feedback along the way on a field per field basis. This can be as simple as showing a list of requirements for a password field: whenever the password meets one of the listed requirements, the requirement gets ticked off; when all requirements are met, the input field turns green indicating the user can move on to the next input field.

How to Measure Learnability?

Actually, it is not that difficult to design a solid process for measuring learnability. First of all, a key indicator for learnability is the bounce rate. Therefore, using Google Analytics is crucial to gain insights. Besides Google Analytics, you can perform tests yourself with random test subjects: Provide an interface to your test subjects and give them five simple tasks to complete. For example, you have an online platform for creating and sending invoices, let your users perform the following tasks:
  • Create an invoice with one item;
  • Edit invoice;
  • Send invoice to receiver;
  • Track payment for the invoice;
  • Download completed invoice for personal bookkeeping.
Now, let your test subjects perform these simple tasks five times in a row with each time a day of rest. It is important to measure the time needed for completing each task. A design that provides good learnability capabilities should see an increase in efficiency while repeating tasks. After five repetitions it is normal to see stagnation as the user has reached the limits of efficiency (unless they are superhuman). Many elements determine the learnability factor. Never take your design for granted, there is always room for optimization. Use these tips in practice and see how you can optimize the conversion rate of your design. Featured image via Unsplash

Michiel Mulders

Michiel is a passionate blockchain developer active at Lisk.io who loves working with other platforms like Stellar, BigchainDB, and Hyperledger Fabric. In his spare time, he's an avid writer who loves tackling technical subjects. If you can't find him behind his computer, he's probably enjoying a proper Belgian beer!

Read Next

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…

30 Obsolete Technologies that will Perplex Post-2000s Kids

Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…