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, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…