{"id":4140,"date":"2016-10-26T14:22:34","date_gmt":"2016-10-26T13:22:34","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=4140"},"modified":"2021-01-18T23:30:30","modified_gmt":"2021-01-18T23:30:30","slug":"design-principles-reducing-cognitive-load","status":"publish","type":"post","link":"https:\/\/shopjessicabuckley.com\/blog\/design-principles-reducing-cognitive-load\/","title":{"rendered":"Design Principles for Reducing Cognitive Load"},"content":{"rendered":"

Every time you visit a website, a process of learning is initiated in the brain. Whether it\u2019s the navigation, layout, or that auto-rotating image slider on the homepage, your brain has to learn how to use the site while keeping track of the reason you came there in the first place.<\/p>\n

The mental effort required during this time is called cognitive load<\/a>. Now the catch: the working memory<\/a> in which this information is processed and stored is limited. Your brain begins to slow down or even abandon the task at hand when it receives more information than it can handle. Although cognitive load isn\u2019t entirely avoidable, designers must strive to manage and accommodate these limits.<\/p>\n

What Causes Cognitive Load<\/h3>\n

To understand how to reduce cognitive load, we must first understand what causes it. Generally speaking, the causes of cognitive load can be traced back to three main factors:<\/p>\n

    \n
  1. too many choices<\/li>\n
  2. too much thought required<\/li>\n
  3. lack of clarity<\/li>\n<\/ol>\n

    Each of these factors will require processing and take up mental resources that don\u2019t actually help users understand the content.<\/p>\n

    Methods for Reducing Cognitive Load<\/h3>\n

    Now that we know the factors that increase cognitive load, let\u2019s take a look at how we can reduce it. This is by no means a comprehensive list, but instead a few common principles that can help inform design decisions<\/a>.<\/p>\n

    Avoid Unnecessary Elements<\/strong><\/p>\n

    Like everything in design, less is more. Any element that isn\u2019t helping the user achieve their goal, is actually working against them because they must process it and store it in working memory, alongside the things that will help them. Avoiding excessive colors, imagery, design flourishes, or layouts that don\u2019t add value is crucial. But simplicity comes with a caveat: don\u2019t overvalue it at the cost of clarity<\/a>.<\/p>\n

    <\/div>
    <\/svg><\/div>

    \"But simplicity comes with a caveat: don\u2019t overvalue it at the cost of clarity.\"<\/p><\/span><\/blockquote>\n

    Leverage Common Design Patterns<\/strong><\/p>\n

    By leveraging common design patterns when it makes sense, you are giving the user familiar elements which they already understand. This in turn reduces the amount of learning they need to do, thus enabling them to move right along and get closer to achieving their goal. My favorite sources for design pattern inspiration are Design Patterns on CodePen<\/a> and the Blueprint Archives on Codrops<\/a>.<\/p>\n

    Eliminate Unnecessary Tasks<\/strong><\/p>\n

    Anywhere you are asking the user to read content, remember information or make a decision contributes to cognitive load. Whenever possible, it is good to shift these tasks away from the user and make it easier for them to stay focused on their goal. While it isn\u2019t possible to remove all tasks, there is usually an opportunity to offload some task by setting defaults that can be edited, or leveraging previously entered information. Some companies are even taking this a step further with anticipatory design<\/a>.<\/p>\n

    Minimize Choices<\/strong><\/p>\n

    As previously mentioned, our working memory is limited. When confronted with too many choices, cognitive load will increase due to decision paralysis<\/a>. It is important that we minimize the choices the user must make at any given moment, especially in places such as navigation, forms, and drop-downs.<\/p>\n

    Display Choices as a Group<\/strong><\/p>\n

    When choices are split into separate groups and hidden, users often mistake the options that are visible as the complete group. This means that users are likely to never find the additional choices, which not only limits what is available to them, but also makes it more difficult to decide on which option to select because they are not aware of the alternatives. Therefore, it is best to eliminate the resulting cognitive load by always displaying choices as a group.<\/p>\n

    Strive for Readability<\/strong><\/p>\n

    Making our content legible isn\u2019t enough\u200a\u2014\u200awe need to make it readable<\/a>. This means our typography must be aesthetically pleasing, appropriate for the content and easy to read while design remains relatively invisible. By doing this, we can ensure there are as little distractions as possible for the user, which results in a better understanding of the content by the user.<\/p>\n

    <\/div>
    <\/svg><\/div>

    \"Making our content legible isn\u2019t enough\u200a\u2014\u200awe need to make it readable.\"<\/p><\/span><\/blockquote>\n

    Use Iconography with Caution<\/strong><\/p>\n

    Research has shown that iconography can be hard to memorize and, contrary to intuition, can increase cognitive load by requiring mental processing to infer meaning or recognize. While universally understood icons work well (ie. print, close, play\/pause, reply, tweet, share on Facebook), most are subject to the user\u2019s understanding based on previous experience (in which there is no standard). When leveraging the power of iconography, it is best to accompany them with text labels to communicate the meaning and reduce ambiguity.<\/a><\/p>\n

    By following the principles above, you can drastically reduce the user\u2019s cognitive load and ensure their attention isn\u2019t being wasted on elements that do not help them. It is important to remember that the user has a goal, whether it is to buy a product, understand something or simply to learn more about the content.<\/p>\n

    <\/div>
    <\/svg><\/div>

    \"The less users have to think about what they must do to achieve their goal, the more likely they'll achieve it.\"<\/p><\/span><\/blockquote>\n

    This post was originally published on Jon's Medium profile<\/a>. <\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

    Every time you visit a website, a process of learning is initiated in the brain. Whether it\u2019s the navigation, layout, or that auto-rotating image slider on the homepage, your brain has to learn how to use the site while keeping track of the reason you came there in the first place. The mental effort required during this time is called… Read More ￫<\/a><\/p>\n","protected":false},"author":55,"featured_media":4146,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-4140","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n