{"id":33357,"date":"2023-01-31T19:59:37","date_gmt":"2023-01-31T18:59:37","guid":{"rendered":"https:\/\/www.makingscience.com\/?p=33357"},"modified":"2023-01-31T19:59:37","modified_gmt":"2023-01-31T18:59:37","slug":"ux-ui-tips-for-your-website","status":"publish","type":"post","link":"https:\/\/www.makingscience.com\/us\/blog\/ux-ui-tips-for-your-website\/","title":{"rendered":"UX\/UI tips to improve your website"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">A learning process begins in our brains every time we visit a new website. Whether it&#8217;s navigation, design, or another website element, the brain has to learn how to use the site without forgetting why we visited it in the first place.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The mental effort required during this time is called <\/span><b>cognitive load<\/b><span style=\"font-weight: 400;\">. Remember also that the working memory in which this new information is processed and stored is limited. The brain begins to slow down or even give up on tasks when it receives more information than it can process simultaneously. Although cognitive load is not entirely avoidable, designers must strive to manage and adapt to these limits.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">What is cognitive load?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">To reduce cognitive load, we must first understand what causes it. Broadly speaking, the causes of cognitive load can be traced back to three main factors:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Too many options<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Too much reflection needed<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Lack of clarity<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Each of these factors requires its own effort and consumes mental resources that do not really help users understand the content.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Miller&#8217;s Law<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Miller&#8217;s Law states that a human being can only retain between 5 and 9 items of knowledge at a time. As a result of this principle, many misunderstandings have arisen, such as the restriction of an interface menu to 7 items. It is better interpreted as an argument that <\/span><b>the number of objects that the average human can hold in short-term memory is 7 \u00b1 2<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Hick&#8217;s law<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Hick&#8217;s Law (also known as the Hick-Hyman Law) is a psychological principle that examines the relationship between the number of options and the time it takes to make a decision. Simply put, <\/span><b>the more options there are, the longer it takes to make a decision<\/b><span style=\"font-weight: 400;\">. Therefore, as designers, we must integrate the data and display it in a way that is not overwhelming for the user, seeking clarity.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Our UX\/UI Suggestions<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">These two laws can be summarized in three tips that help reduce the cognitive load:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Groups<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">To make the information easier to process and memorize, we can divide it into a small number of units or chunks. Fragmentation allows us to compensate for our limited ability to process and store information in short-term memory. An example of how we fragment information can be the way we display spaces in a phone number:<\/span><\/p>\n<p><i><span style=\"font-weight: 400;\"><img decoding=\"async\" class=\"size-full wp-image-33371 aligncenter\" src=\"https:\/\/www.makingscience.com\/wp-content\/uploads\/2023\/01\/Screen-Shot-2023-01-31-at-1.54.36-PM.png\" alt=\"\" width=\"246\" height=\"48\" \/><\/span><\/i><\/p>\n<p style=\"text-align: center;\"><i><span style=\"font-weight: 400;\">(this is the Making Science US office number,<br \/>\n<\/span><\/i><i><span style=\"font-weight: 400;\">call us if you need further UX\/UI assistance <\/span><\/i><span style=\"font-weight: 400;\">\ud83d\ude09<\/span><i><span style=\"font-weight: 400;\">)<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">We recommend breaking down large amounts of info into smaller pieces so that the user can understand it and get a clearer idea of \u200b\u200bwhat is going on. The user&#8217;s perspective on what is important and worth remembering may depend on how the information is regrouped.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Categorization<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Organizing information into logical groupings is another way to decrease cognitive load. Grouping items divided into various categories can help users focus more effectively. This helps prevent cognitive overload by reducing the amount of material the user is exposed to. In this way, the user can concentrate on the group that interests him and ignore the rest of the elements.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><img fetchpriority=\"high\" decoding=\"async\" class=\" wp-image-33366 aligncenter\" src=\"https:\/\/www.makingscience.com\/wp-content\/uploads\/2023\/01\/netflix-300x138.png\" alt=\"\" width=\"371\" height=\"171\" \/><\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Limit the number of options<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">As we have already seen in Hick&#8217;s law, the difficulty for the user to make decisions is directly proportional to the number of options he encounters. The easiest way to fix this would be to narrow down the options where possible. A user presented with a decision between 3 or 4 elements will (almost) always have a better conversion rate than one with 6 or 7.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When this is not possible, we can adopt the above advice and group or categorize. For example, if a form has too many fields, we can divide it into steps to discourage abandonment.<\/span><\/p>\n<h3><b><img decoding=\"async\" class=\"wp-image-33361 aligncenter\" src=\"https:\/\/www.makingscience.com\/wp-content\/uploads\/2023\/01\/Grouping-300x215.jpeg\" alt=\"\" width=\"234\" height=\"168\" \/><\/b><\/h3>\n<h3><b>One last UX\/UI consideration<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Here we present you with 3 ways to improve the user experience on your website. HOWEVER!! You should remember that these are general recommendations. All people, industries, and websites are a little bit different. Generalities will only get you so far when it comes to creating an incredible onsite experience.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As such, we highly recommend integrating testing and experimentation into your UX\/UI plan. We usually recommend giving a user only 3-4 choices at a time &#8211; but testing master Netflix throws 30 different choices at a user at once. Why? Because they surely tested it and realized that when items are categorized, it doesn\u2019t matter that there are 30 options on the screen at once.<\/span><\/p>\n<p><b>\ud83d\udca1<\/b><span style=\"font-weight: 400;\">Learn more about testing, experimentation, and Conversion Rate Optimization in a recent blog post <\/span><a href=\"https:\/\/www.makingscience.com\/blog\/personalization-and-testing-how-cro-can-boost-your-sales\/\"><span style=\"font-weight: 400;\">here<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h3><b>Conclusion<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">By following these principles, you can greatly reduce the user&#8217;s cognitive load and ensure that their attention is not wasted on things that aren&#8217;t helpful to them. Always remember that the user came to your website with a goal, whether it is to buy a product, understand something, or simply learn more about the content on the web. Help them find what they are looking for!<\/span><\/p>\n<p>If you want to get started but aren&#8217;t sure how, let us know by clicking the button below.<\/p>\n<p style=\"text-align: center;\"><a style=\"border-radius: 15px; padding: 1em; background-color: #f0076f; color: white;\" href=\"https:\/\/www.makingscience.com\/contact\/\">Get in touch<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A learning process begins in our brains every time we visit a new website. Whether it&#8217;s navigation, design, or another website element, the brain has to learn how to use the site without forgetting why we visited it in the first place. The mental effort required during this time is called cognitive load. Remember also [&hellip;]<\/p>\n","protected":false},"author":23,"featured_media":33451,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[385],"tags":[379,493],"class_list":["post-33357","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-ui","tag-ux-2","tag-web-2"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.makingscience.com\/us\/wp-json\/wp\/v2\/posts\/33357","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.makingscience.com\/us\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.makingscience.com\/us\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/us\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/us\/wp-json\/wp\/v2\/comments?post=33357"}],"version-history":[{"count":0,"href":"https:\/\/www.makingscience.com\/us\/wp-json\/wp\/v2\/posts\/33357\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/us\/wp-json\/wp\/v2\/media\/33451"}],"wp:attachment":[{"href":"https:\/\/www.makingscience.com\/us\/wp-json\/wp\/v2\/media?parent=33357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.makingscience.com\/us\/wp-json\/wp\/v2\/categories?post=33357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.makingscience.com\/us\/wp-json\/wp\/v2\/tags?post=33357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}