Tag Archives: human-centered

human memory tips on ux design

How Human Memory Works: Tips for UX Designers.

One of the greatest information processors we deal with in our everyday life cannot be seen or touched. It cannot be bought or sold as well as taken from other people; however, it can be developed and strengthened by many ways. It cannot be easily described but belongs to the most precious features of human life and determines perhaps any step we take and any decision we make. It is a wonder we rarely think about that way. It’s human memory.

 

Memory presents an amazing natural complex of data storage and processing. It keeps great loads of information through life and is even able to organize it for the sake of the holder. Moreover, it takes responsibility of setting priorities and keeping some details which could be remembered just off the top of our heads while erasing others which seem not necessary or haven’t been used for a long time. Human memory is one of the mechanisms determining person’s interaction with the outer world.

 

Obviously, this aspect needs to be studied and considered in the sphere of UX design responsible for interfaces of all kinds. Knowing how memory works, designers can create human-centered interfaces which correspond to the natural abilities of the users, save their effort and boost usability.

 

Ui design trends by Tubik Blog

Healthy Food App

 

Basic points about memory

 

In general terms, human memory is the natural storage for the data right in the human brain. It reacts to the outer stimuli, collects the data, processes it and organizes in different ways. Also, it enables a person to access the needed data collected in the memory when it’s needed. However, it doesn’t present the perfect mechanism as it’s influenced by a big number of factors of physical and emotional nature.

 

Basically, psychologists mention three types of memory:

sensory memory holds the data for a short moment when we perceive it with our physical senses like hearing, vision or touch;

— short-term memory (working memory) allows a person to keep some data remembered for a short period of time without repetitions;

— long-term memory presents the storage for big quantities of diverse data which could be saved for long periods of time, potentially up to the whole lifetime.

 

The effective methods of getting the information kept in long-term memory are repetitions and associations. Taking a look at the scheme below, which was provided in the article by Learning Solutions Magazine, we can see the basic flow of data from the first outer stimulus to the long-term memory.

 

memory work

 

Creating the flow of interactions with a website or a mobile application, UX designers have to take this factor into account. Surely, they aim at long-term memory which will keep the core data about the app and will allow using the interface easily again and again. Knowing the steps moving the data to this storage enables designers to set the effective strategy of data perception and necessary repetitions. Also, it helps to organize the data on the screen properly and strengthen information architecture of the product.

 

Basic laws of memory

 

Three core aspects of memorizing which are mentioned by specialists in psychology are very simple:

 

1. Concentration. To remember a thing or chunk of data, a person needs to concentrate on it. Otherwise, the chances are high that the data will be discarded on the level of short-term memory.

2. Association. The memory presents the huge network of links connecting different data. If a person builds the association which links the new data or object with something well-known or kept in long-term memory, the chances of memorizing get higher.

3. Repetition. It is one of the effective ways to activate the data in working memory several times until it moves to the long-term memory storage.

 

Organization of the interface content based on these three points performs with visual hierarchy and perception which can mark important layout elements that should be remembered and make the interaction easier.

 

cinema app interaction ui animation

Cinema App

 

Expert explorations of memory

 

There are also some laws and rules which were concluded from various research, experiments and practical testing. Among them, we would mention Miller’s Law and Hick’s Law.

 

Miller’s Law

 

The number of objects an average person can hold in working memory is about seven.

 

This exploration was offered on the basis of scientific research by George Miller in 1956 psychological review «The magical number seven, plus or minus two: Some limits on our capacity for processing information». In general terms, it states that short-term memory of an average human is able to keep and process about seven objects or chunks of data plus/minus two at once. Obviously, the formulation given here is generalized as the real flow depends on many factors, including the nature of information.

 

Later studies, for example, the review by Richard Shiffrin and Robert Nosofsky called «Seven plus or minus two: A commentary on capacity limitations» provided deeper insights into the work of working memory. In particular, the authors mention that the number of objects which a person can remember at once after they were presented is dependent on the nature of the objects, on average with seven for digits, six for letters and about five for words. It gives the brain abilities to quickly process information, recognize its character and connection to the objects already existing in long-term memory and finalize memorizing.

 

In design perspective, this information plays the vital role in building up the usable and clear layout. Interfaces, which demand to remember too many options at once, can create the tension and get users irritated even if they aren’t able to describe the reason of unpleasant emotions.

 

landing page animation Tubik studio

Magic.co landing page

 

Hick’s Law

 

The more elements people get, the harder it is to make a choice.

 

At the first glance, it seems that this law is not about memory, still, the connection exists. Memory is one of the mechanisms that protects people from negative experience. The more options people get at once, the more distracted they get with numerous associations which can be called — and that’s impossible to predict how good or bad they can be in this particular case. In addition, giving many options for the choice at once, again we can overload users memory with the bigger number then the working memory can process. In particular, this factor needs special attention in cases of platforms for e-commerce, which should keep the hard balance between giving the user all the necessary information and overwhelming him or her with too many options. Finding this harmony is one of the major challenges for UX designers.

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

Tips for memory-friendly UX

 

On the basis of the factors and explorations given above, let’s consider a set of tips applying this knowledge for the sake of usability.

 

1. Don’t make users memorize many items at once.

 

Definitely, it doesn’t mean that all the screens or pages should be limited to 5-9 elements. Still, the number of elements that present core interaction points would rather be considered in these terms. Making several objects in the layout prominent and attractive, designers can follow the law of concentration which will catch the key zones like menu, call-to-action, an image presenting the product etc. Visual hierarchy is one of the vital strategies that enables to create an interface containing many elements visually grouped and divided in a way which is digestible for human memory.

 

It is also effectively applied to the copy content in the interfaces. In the article, devoted to this issue, we mentioned some investigations: according to the research published by one of the popular social media sharing platforms Buffer, the ideal length of the headline is 6 words; Jacob Nielsen provides the study at which shows that headlines of 5-6 words work effectively, not less than extensive headlines presenting a full sentence. One of the reasons for that is obviously connected with the ability of the working memory to process such chunks of data faster and more effectively.

website design for photographers

Photography workshops

 

2. Don’t present too many elements for the choice together.

 

It’s important to care about the concentration ratio. If you present several choices, buttons, options at once, you should be ready that it will take more time and effort for user’s short-term memory to work them over and this can distract him or her from making the final decision or interaction. This can be the reason of inefficient landing pages or sales funnels: even if they are stunningly designed, the over-distracted user can go away before the conversion happens. Apply scrolling and transitions based on careful prioritization, dividing the objects on the screen or page into groups of primary, secondary and tertiary importance — this will help users and make navigation through the interface more natural.

 

book swap app tubik studio

Book Swap App

 

3. Save memory effort with recognizable patterns and symbols

 

No secret, people are visually driven creatures, so designers usually master the art of applying images that not only attract attention but also inform users and organize the content. In one of our articles, we gave the details on how users recognize icons and copy. It shows that pictorial elements such as icons and illustrations are perceived faster while copy can be more informative. This can be useful in interface design to apply diverse models and markers which are widely recognizable not only in this particular interface but generally in a variety of them. Magnifier icons for search, shopping cart for the page collecting orders, plus button for creating a new item, flags marking the buttons changing the language — all of them present the elements existing in human memory for a long time and bringing up correct associations without the need to keep and process new information.

 

Moreover, going to a broader perspective, most users expect to see the sign of the brand and the links to core sections of the website in the header while the contacts, privacy policy, terms of use and credits in the footer. Knowing these and other similar patterns of user behavior, designers can save users’ effort making basic operations simple and intuitive. This way it’s easier to focus user’s attention on new data and make its perception quick.

 

tubik studio behance weather app

Weather App

 

4. Apply consistent markers in navigation

 

Navigation is the crucial factor of usability. Enabling to move through the interfaces, it also presents the data which should be kept by users’ memory; therefore, designers apply a variety of techniques making transitions and interactions consistent and clear. For example, color or shape markers sorting out particular sections, icons defining specific groups of items, fonts used consistently for specific names or types of copy, illustrations and mascots uniting different screens — these and similar tricks boost memorability of the layout and often support user in processing new data.

 

Homey app smart home UI

Homey App

 

5. Don’t hide the core elements of navigation

 

The discussions about various menus showing or hiding blocks of content are still hot and popular. It’s vital to remember that the key aim of the interface should be the user clearly understanding what’s going on. So, the decision about hamburger menus, sliders, hidden layers of navigation and content should be based on the careful analysis of the target audience. In most cases, especially for the complex interfaces used by the diverse target audience, hiding core navigation elements can serve badly: users need to find and memorize the patterns of reaching them. Some users can appreciate the techniques saving space for other elements, while the others will be annoyed with the necessity to remember how to find the necessary section. Again, prioritization plays the great role: hiding secondary elements while leaving primary ones always visible, designers focus users’ attention on what is the core for them. User testing helps to evaluate the efficiency of the navigation flow and its impact on conversion rate.

 

bookshop website animation

Bookshop Website

 

6. Stimulate different types of memory

 

Remember the scheme given above? You could see that the first and the quickest stage of absorbing data is the sensory memory. Basically, it is divided into several types of memory which depend on the sensor: it can be visual, audio, kinesthetic, verbal, mechanical etc. Activating them, not only do designers create more memorable interaction flows, but also support broader circles of users. Research and experiments show that different people have different types of memory as the most effective for them. That’s why, for example, icons given with copy in the names of core categories of the menu can boost usability supporting users via both visual and verbal memory. Sounds accompanying interactions also create memorable flows and operations.

 

tubik studio application recipes and cooking

Recipe App

 

7. Remember about emotions

 

Make no mistake, emotional feedback from the interaction is the great factor in retaining or losing users. Bad experience stimulates quicker forgetting the details but tends to leave general negative feeling because in this way brain tries to protect the human. Vice versa, positive emotions, be it fun, aesthetic satisfaction, gratification for the quickly solved problem or accessible communication can bring the person back to feel it again and again. 

 

ui animation design tubik

Night in Berlin App

 

So, the bottom line is simple: creating interfaces for people, designers have to know how people interact with the world and what influences their behavior. Human memory is one of the essential features determining successful and positive user experience on both conscious and unconscious levels, so it needs to be studied, considered and tested for human-centered UX design.

 

Recommended reading

 

Here is a bunch of useful links which could provide further interesting explorations of the topic:

 

Short-Term Memory and Web Usability

 

UX and Memory: Present Information at Relevant Points

 

The Magical Number Seven, Plus or Minus Two: Some Limits on our Capacity for Processing Information

 

User Memory Design: How To Design For Experiences That Last

 

Visual Perception. Icons vs Copy in UI.

 

Total (Memory) Recall

 

The Properties of Human Memory and Their Importance for Information Visualization


Welcome to see the designs by Tubik Studio on Dribbble and Behance

tubik studio UI designers

FAQ Design Platform. Human-Centered vs User-Centered. Are the Terms Different?

Today’s issue of our FAQ Design Platform in Tubik Blog will concentrate on the difference of terms «human-centered» and «user-centered» which now have become a sort of basic ones for the sphere of web and app design. The answer is based on the thoughts we have provided for the question on Quora which you are always very welcome to read and where we are happy to share our ideas, knowledge and experience.

 

Tubik studio on Quora

 

So, the original Quora question we are answering today was the following:

 

What’s the difference between human-centered design and user-centered design?

 

That’s really true that the two terms mentioned in the question are widely used replacing each other in different contexts and percieved as equals. The difference between the meaning people put behind those words is really slight and blurred that it is easy not to notice it at all. However, with a content manager onboard holding a degree in linguistics and being a keen lover of slightest semantic nuances, we decided to get deeper in the issue. As research and practice show, although these terms in fact have the same roots, the idea they present is viewed in a bit different perspective.

 

It can be supposed that human-centered design is the process of creating things deeply based on general natural characteristics and peculiarities of human psychology and perception. It doesn’t matter if you design furniture, cars, stationery, TVs, websites or anything else — any object of design can be made human-centered on the ground of psychology, physiology, sociology and other sciences analysing human life and interaction with the environment. It means that human-centered product will be not only nice but also functional according to psychological traits and features typical for big groups of users.

 

A really good and simple definition is found in the article «Characteristics of Human Centered Design»: «…human centered design can be defined as the process that places the human needs and limitations in a higher priority compared with other targets during the design thinking and production differential stages. During this process, the designer is required not only to analyze and come up with solution for existing problems, but test and validate the designed products or service to achieve planned targets in the real world.»

 

For example, there are basic conditions of general physical human abilities, color perception, contrast perception, readability, interaction with a product in different environments that are typical for vast majority of people. Let’s say, typically people are not able to see in the darkness, and the darker is the environment, the harder it is for most people to percieve something visually, doesn’t matter what age, education level, social layer, professional skills you represent. This is a common human physical characteristic. Neglecting it means creating a product which people will not be able to use properly being limited in their abilities. 

 

Creating objects which people are going to interact with, designers have to be aware of those traits and take them into account in the process. That is the reason to study at least the basics of psychology, physical and emotional perception for designers who would like to create things convenient and friendly for people in general. We also believe that is a strong reason to involve psychologists, behaviorists, physiologists and other experts into the process of design.

 

ipad interaction tubik studio

GIF — Portrait vs Landscape by Sergey Valiukh

 

Here you can see the interactive concept of transition from portrait to landscape mode. It is based on general ability and necessity of any user of digital product used on iPad to get the feedback from the system that the action of transition from one mode to the other is done. If it is done smoothly and with quite natural speed, that is one more element of positive user experience, sometimes even unnoticed as the microinteraction takes split seconds. The presented example actually imitates interaction with a physical object and therefore makes user experience more clear and positive for users of different age, gender, educational background etc. This is actually the small piece of human-centered design solution.

 

Continuing the theme, user-centered design is more focused and concise version of human-centered design with deeper analysis of target audience. It is concentrated on not only human characteristics and perception in general but also specific traits and features of target users to make problem-solving potential of the designed product as high as possible in perspective of its users. This is the stage when details about the target user of design object start playing their role: defining target audience, designer takes into account age, gender and social status, potential education level and professional background, influential social factors and typical environments of product usage etc. On this basis, designer makes deeper research on preferences and peculiarities, special aspects of interactions, specifying general human-centered ideas with important details of target audience’s preferenсes, emotional and physical perception traits as well as levels of technology awareness and tons of other factors. This is what we usually do on the stage of user research here in Tubik Studio and practice shows this stage is vital for creating problem-solving and user-friendly designs.

 

So, it can be said that human-centered design is the first obligatory step to making the product applicable, while user-centered solution is the next step to make it concentrated on pains and needs of specific category of users.

 

Let’s look at one more example.

 

Contact List Concept Scrolls Tubik

 

Contact List Concept Scrolls by Eugene Cameel

 

This design concept for a contact list looks nice and voguish. It presents two different variants of scrolling the directory and refreshes traditional interaction experience. It is grounded on basic aspects of readability, contrast, visual hierarchy, provides clear feedback to user’s actions and necessary functions. It follows basics of coloristics, logics and visual harmony. Certainly, it is human-centred. No doubt, big proportion of teenagers and millenials, people who use diverse interfaces every day and see them as an integral part of their life, will be engaged and would like to try it. However, for older people this sort of interface can seem a bit scary and overloaded as well as somehow darkish comparing to simple traditional interfaces based on light background. So, this user-centered interface responds to the wishes and preferences of narrower target audience.

 

tubik_studio_website_ui_bakery

 

Here is one more case featuring web design concept by Ernest Asanov. It represents interface design for a website presenting online bakery selling. On the basis of the design solutions it is easy to assume that this is the service positioning itself as a producer of upmarket products which are exclusively hand-made and presumably because of that reason cost higher than average bread in the supermarket. Therefore, the website is designed aimed at particular target audience. As we mentioned in one of our previous articles about benefits of dark background in user interfaces, dark color solutions can form popular associations in visual perception. Dark colors are usually associated with elegance and mystery. Moreover, black is often associated with elegance, formality, prestige and power. This is the style provided by the presented design: dark background, branding element as a central element of a header, strong and clear headline establishing positive emotional message, visual elements enabling immediate perception of the theme and setting strong visual association with tasty pastry, short text block describing basic benefits of the product and clear visible call to action. The designer worked out the solutions that will look attractive and informative for target users wishing to feel the exclusivity and high-quality of the product and able to pay more than average. Therefore, this example also shows the techniques of not only human-centered, but deeper user-centered design.

 

However, supporting previous answers given by other professionals along this question on Quora, it also has to be mentioned that in modern design, especially in digital field like creating applications and websites, human-centered design and user-centred design are most often inter-replaced and used basically as full synonyms. Perhaps that happens because in this sphere most products are created and updated for certain category of users rather than “for all and everybody”. Moreover, users of all the digital products are people, therefore all the solutions should get based on the positions of human-centered design. Certainly it doesn’t mean that universal interfaces cannot be found: they do exist and we apply some of them on daily basis, so they are a good example of general human-centred design that successfully applies knowledge about features typical for great majority of users. However, they are closer to the exceptions which prove the rule.

 

So, in terms of web and app design we can assume that description of design as “human centered” or “user centered” just shows different levels of detalization in design process, different stages one of which considers human interaction features and the next gets deeper in details of certain categories of users, thier needs, wishes and problems.

 

The great example of synonymic perception of the terms is the video powered by IDEO (Design Kit), great experts in human-centered design.

 

 

Again, it’s important to emphasize that the definitions given represent our personal vision of the terms based on linguistic nuances of given terms and practical experience of processes in design studio with all respect to other points of views.


This is all for today. We’ll answer the next set of answers soon here in our blog. The FAQ platform outlines several directions, so it features the questions, frequently asked by customers, designers, and users. We are open to share our experience, so if you have any questions, feel free to ask them via direct message in our Facebook page or Twitter as well as our Quora representative. We are looking forward to your questions!


Welcome to see the designs by Tubik Studio on Dribbble and Behance

Welcome to read us on Quora