{"id":60,"date":"2020-01-19T17:25:05","date_gmt":"2020-01-19T11:55:05","guid":{"rendered":"https:\/\/nipsolutions.in\/blog\/?p=60"},"modified":"2020-04-16T15:41:52","modified_gmt":"2020-04-16T10:11:52","slug":"learnability-in-ux-design","status":"publish","type":"post","link":"https:\/\/nipsolutions.in\/blog\/learnability-in-ux-design\/","title":{"rendered":"Learnability in UX Design"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Why Learnability Matters<\/h3>

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\u2019t allow to provide a complex interface or let the user accomplish difficult tasks.<\/p>

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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Learnability by Example<\/h3>

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’s<\/p>

SMALL HINTS<\/h4>

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.<\/p>

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.<\/p>

FAMILIARITY BY CONSISTENCY<\/h4>

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.<\/p>

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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\tA 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.<\/strong><\/em>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

A snippet from Susan Carey’s 1986 journal article about Cognitive science and science education<\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

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.<\/p>

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.<\/p>

EVIDENCE OF ACTIONS<\/h4>

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.<\/p>

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.<\/p>

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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

How to Measure Learnability?<\/h3>

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.<\/p>

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:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
  • Create an invoice with one item.<\/li>
  • Edit invoice.<\/li>
  • Send invoice to receiver.<\/li>
  • Track payment for the invoice.<\/li>
  • Download completed invoice for personal bookkeeping.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    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).<\/p>

    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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

    \n\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    Source: webdesignerdepot<\/i><\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

    Building a learnable website is much tougher than it sounds. One thinks one\u2019s 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.<\/p>\n","protected":false},"author":1,"featured_media":64,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[4,5],"tags":[],"class_list":["post-60","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-designing","category-ui-ux"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/nipsolutions.in\/blog\/wp-content\/uploads\/2020\/04\/Learnability-in-UX-Design.jpg","_links":{"self":[{"href":"https:\/\/nipsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/60","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nipsolutions.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nipsolutions.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nipsolutions.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nipsolutions.in\/blog\/wp-json\/wp\/v2\/comments?post=60"}],"version-history":[{"count":17,"href":"https:\/\/nipsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/60\/revisions"}],"predecessor-version":[{"id":135,"href":"https:\/\/nipsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/60\/revisions\/135"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nipsolutions.in\/blog\/wp-json\/wp\/v2\/media\/64"}],"wp:attachment":[{"href":"https:\/\/nipsolutions.in\/blog\/wp-json\/wp\/v2\/media?parent=60"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nipsolutions.in\/blog\/wp-json\/wp\/v2\/categories?post=60"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nipsolutions.in\/blog\/wp-json\/wp\/v2\/tags?post=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}