Working memory contains information about the focus of our attention. As the capacity of our working memory is rather small (research shows the capacity can range between 5\u20137 unrelated concepts), our attention is considerably selective. Our brain is simply not able to process all that is happening around us at once. It is instead narrowing down its focus to the most relevant pieces of information. The relevancy is determined by our own objectives.<\/p>\n
\"Our brains receive about 11 million bits of data per second, but we\u2019re only able to process roughly 50 bits per second.\"<\/span><\/p>\n Information from the working memory can be lost very easily if the focus shifts. Many of us can relate to a situation like this one:<\/p>\n Using modes in design has many advantages. It allows us to perform more actions with fewer gestures\/controls by switching contexts. For example, in \u201eSketch\u201c, a graphic design app, you find yourself in select mode by default. What this means is that while dragging, you can select objects on the screen. However, if you go into draw rectangle mode, it means that now while dragging, you can draw a rectangle.<\/p>\n The working memory is too volatile to assume that the users can remember in which mode they currently are without having any feedback. When using modes, it is important to emphasize the currently active mode. Sketch<\/em> has mastered this by showing a different cursor for each mode.<\/p>\n Rectangle mode, select mode, drag mode in\u00a0Sketch.<\/p><\/div>\n While using the search function on a website, users enter the search terms and then review the results. The attention shifts from the input to the results. That means the users often forget what the initially typed search parameters were. Sites with a search function should have the input parameters displayed prominently even when already showing the search results.<\/p>\n If the user needs to go through more than 5 steps to achieve their goal, make sure they have clear instructions on how to do that. Users most certainly will not be able to remember all the incremental steps. It should also be possible for the user to easily review the instructions as they are executing them.<\/p>\n If the system you are designing requires a complex navigation hierarchy, it should give the user feedback on where they currently are and how they got there. It might be rather challenging to remember all the steps you took before ending up on this exact page. The designer should do their best to avoid overloading the user\u2019s brain and letting them forget what their initial objective was. That is why breadcrumbs (usually arrows or slashes which show the hierarchy of a page)are getting very popular in many products nowadays.<\/p>\n In Edookit teacher system you can clearly see where you currently are with the help of breadcrumbs as well as highlighted menu and submenu\u00a0item.<\/p><\/div><\/center><\/p>\n Nowadays, our brain gets most of its information through the eye. Our eyes play an important role in how we perceive design. The structure of the human eye is complex, but the most important finding is that there is a part of the eye called an \u201ceye fovea\u201d<\/strong> in the central part of the eye. It is a small circle (1.5 mm wide) and it is the part through which our brain gets most of its information. There are 3 reasons for this:<\/p>\n All of this results in humans having a very narrow focus.<\/p>\n Our peripheral vision, on the other hand, is very poor. Really. Think about the way you are reading this article right now. You are focused only on these exact words, everything else is irrelevant. That is a tiny part of the overall design. The interesting part, though, is that our brain tries to help the eyes and fills out the missing data from our periphery based on our expectations and memory. This tricks us into thinking that we actually see everything at once, sharply.<\/p>\n Even though the peripheral vision is poor in quality, it does have a purpose in our lives. It guides the fovea towards focus points (where to look next) based on low resolution data. It is also very good at detecting motion \u2014 an ability we inherited from our ancestors who lived in the wilderness.<\/p>\n These findings are easily applicable to design. Users are not able to see the whole website at once. They can merely scan the page. That means their eyes jump very fast from one part to another. The most attractive usually is the part of the website that is in contrast or involves any kind of motion.<\/p>\n The landing page of Semplice has a yellow CTA button in the right corner. It immidiatelly takes our attention.<\/p><\/div>\n Important, mutually related information has to be shown in a compact way, so that users can perceive these elements together. Use the gestalt principle of proximity that says: Objects or shapes that are close to one another appear to form groups.<\/p>\n Gestalt principle of proximity. Circles closer together appear to be\u00a0grouped.<\/p><\/div><\/center><\/p>\n For example, an error message has to be shown near the password field. A user that is focused on typing the password might miss the error message if it is in a different part of the page. Another example (image below) is the marketing copy which should persuade the user to click the CTA buttons. The contrast of the heading and the CTA button implies that this part of the page is likely to be one of the first ones to be noticed by the user.<\/p>\n\n
Working memory in interface design<\/h2>\n
Modes<\/h3>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/02\/1P6IjomTY9wWPyFlmn7QHmw.png\")
<\/a>Search<\/h3>\n
Instructions<\/h3>\n
Navigation<\/h2>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/02\/1JVvdtC1h1kxPx_g98QKCyg.png\")
<\/a>Vision \u2013 eye\u00a0fovea<\/h3>\n
\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/02\/1hK2DLnrLkHn8NqPOerQLug.png\" "\\"\\"")
<\/a><\/p>\nThe effect of the eye fovea on interface design<\/h3>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/02\/17GY0X0QXjXKL1BiLbWbnWg.png\")
<\/a>![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/02\/1v84sLoJK8HotkN6vUhpopQ.jpeg\")
<\/a>
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/02\/1Zc3g8JXaX_NOr4WEBIh-rw.png\")
<\/a>![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/02\/1m9b5j3F-vvWBlg5JEMBhTA.png\")
<\/a>