6 Important UI/UX principles

These six useful and interesting psychological principles are just the tip of the iceberg when it comes to the endlessly fascinating and evolving world of product design.

Needless to say, these laws and principles are guidelines, not rules written in stone. They are a compass to guide your design and are often a good starting point. The most important, however, will be your customers/users.

When you design solutions to make their lives easier and improve their experience when using your product or service, then you’d have employed excellent UI/UX principles.

If you’d like to learn more in detail about UI/UX principles, watch the video by clicking here.

Mental Models are assumptions that people have on how something works or should work. It is an intuitive perception about one’s actions and consequences. They are formed based on their past experiences and surroundings; therefore, it is common for people of different upbringings to have different mental models.

But why are mental models important to product design?

Imagine walking up to a seemingly normal looking door, twisting the knob and pushing it. The expectation is for the door to swing forward and open, only it doesn’t. Someone then tells you that you that it is a sliding door. It might seem like a small, imperceptible thing but when you’re urgently rushing to a location, having a situation like this disrupt your mental model is frustrating.

Same thing goes for digital experiences. When you launch an app or a website, there are certain expectations on how they should work. Most people would look at the top of the page for any search functions. For example, text inside a rectangle shape means that it is a clickable button, and so on.

This stored knowledge prevents the user from having to re-learn and re-identify elements and flows, resulting in a smooth web experience.

Knowing this, it is always a good idea to include or at least incorporate parts of common digital mental models, especially when you are working on an innovative product that introduces new behavior and flows, as to not overwhelm your users and aid them in learning your new features.

• y, resulting in a negative user experience

• People base their actions on mental models. This allows certain predictability in user behavior and will come in useful when working on fostering new behaviors
• Start with something familiar
• In innovation, teach your users well. A good example is the first Apple iPhone that broke everyone’s mental models on mobile phones. Apple’s success was greatly supported by their campaign on teaching users how to use their new revolutionary product
• Where in the user journey is the customer? When you need to disrupt your user’s mental models, consider the stage of the journey they are on when that interruption happens. For example, introducing a new flow when they are in a potentially stressful / time-sensitive stage (e.g., during payment at a cashier or when trying to book a taxi) might induce anxiety, resulting in a negative user experience

Cognitive load is the total amount of mental effort being used in a person’s working memory. Think of it like a CPU in your brain. Only difference is, you can add more RAM in your CPU to increase memory and performance. The human brain unfortunately, has limited RAM.

There are three main types of cognitive loads:

• Intrinsic cognitive load – difficulty of a task / topic
• Extraneous cognitive load – how the task / topic is presented
• Germane cognitive load – load used to construct and process schemas

While we do not need to dive deeply into each definition, we need to remember that these cognitive loads play an important part in a user’s experience. Just like a computer with too many systems and tabs running, the human brain’s performance suffers and decreases when there is a cognitive overload.

While we can’t eliminate cognitive load entirely, there are many ways to minimise said loads through UI/UX design, such as:

We can help the user retain information, especially when they are still actively completing their task, e.g., a “viewed” marker on pages they have already visited to help them remember when going back and forth on listings to compare and select a property purchase / rental.

A good example we might not notice are browser search bars and text message bars. The cursor is automatically set and ready to type every time we open the page, eliminating the step to interact and select it.

Even though visual design elements play an important part in the overall experience, an overload of visual clutter forces up extra, unnecessary cognitive load and impairs usability.

As mentioned earlier, users already have existing information and behavior stored in their mental models. Use what they already have to ease and minimise your product’s cognitive requirements.

Hick’s law, or the Hick–Hyman Law, named after British and American psychologists William Edmund Hick and Ray Hyman, describes the time it takes for a person to make a decision as a result of the possible choices he or she has. In other words, the more choices you have, the longer it will take you to decide.

Undoubtedly, we experience these situations often. Think back to when you (accidentally) held up the line while choosing food from a menu.

Or in a digital setting like Netflix or Disney+ where more time is spent browsing a seemingly infinite catalogue of choices than actually watching a movie.

These are real-life demonstrations of Hick’s Law and, they don’t stop there.

However, it is generally understood that limiting the number of choices might not be an option sometimes.

In the case of online movie streaming services, a robust selection of titles is needed to both attract and justify charging customers a monthly subscription.

Product designers must then accommodate the negative effects of Hick’s law with innovative features to help their users choose. These may come in different techniques such as categorising or personalisation by behaviour algorithms.

Other than the quantity of choices, the speed of completing a certain task could also depend on the complexity of the task, such as a long, comprehensive form.

Most people don’t want to or have the time to spend to fill up forms to begin with. Having one with a large number of fields will physically and psychologically slow down the user. But sometimes, it’s hard to get around having a bite-sized form.

In such instances, one widely used technique to improve the user experience is to break the form down into smaller chunks and present them one at a time.

When presented with smaller, more manageable sections, your user will feel more comfortable and are more likely to complete the task you require of them.

Doherty Threshold dictates that productivity soars when a computer and its users interact at a pace of <400ms, ensuring that neither has to wait for the other.

The magic number of 400ms was the response time requirement set in 1982 by Walter J. Doherty and Ahrvind J. Thadani and was published in the IBM Systems Journal. While this principle still holds up till this day, decades of holding this expectation presents certain challenges in light of technological advances and the fact that people demand more and more from their computer systems.

Luckily, there are numerous, different ways to manage such high expectations. Most of us are quite familiar with creative and interactive loading screens, which can be represented by an illustration, animation, progress bar or related information.

Regardless of the shape and form they come in, their main purpose is to distract the user from the wait time while psychologically informing the user concurrently that their request is being processed.

Video games are one of the best when it comes to dealing with the Doherty Threshold. Some games take interactive loading screens to another level, keeping the character and certain aspects of the environment fully playable.

In this situation, the players might not even realise they are in the loading screen! And even after that realisation kicks in, the fact that it’s interactive completely dulls the edge of having to wait several seconds or minutes to continue with the game.

A few fun facts regarding loading screens:

• A popular loading filler, the progress bar, are mostly animation and inaccurate. This explains the phenomena of the screen changing before the loading bar reaches 100%, or the page still loading even after the bar is full. The main function of the loading bar is to create the illusion of progress to make waiting tolerable. Building a fully functioning progress bar is possible but an animation does the job well most of the time. ,
• You may add delay to your loading to increase perceived value and instil trust; again, to create an illusion that the system is doing a very complicated task and will naturally take a bit longer to load an accurate result, for example. But of course, proceed with caution.

Coined by German psychiatrist and paediatrician Hedwig von Restorff, it is also known as the isolation effect. This predicts that when multiple homogeneous stimuli are presented, the stimulus that differs from the rest is more likely to be remembered.

This effect is widely used in the digital setting for Call to Actions (CTAs), to bring the user’s focus to the most important area of the interface to encourage a specific action. It can be presented using shapes, font styles, sizes, colours or animation.

You may also often see it on product/service selection pages, where ‘best value’ is made prominent, thus strengthening the perception of it being the obvious (and only) choice.

When applying this effect, one must also employ some restraint in emphasising the elements, to prevent those elements from having to fight each other for attention, or isolating the CTA to the point where it looks like an ad.

Furthermore, one must also remember that isolation does not predict selection, and that visual design plays an important role in encouraging preference.

An element that sticks out like a sore thumb might be remembered, but not necessarily selected. An experiment by Jeff Sauro and Jim Lewis demonstrates this.

Named after Soviet psychologist Bluma Zeigarnik, The Zeigarnik Effect is about the tendency to experience intrusive thoughts about an objective that was once pursued and left incomplete.

If you’re thinking this describes movie cliff-hangers, you’re right.

Just like video games and Doherty threshold, the movie industry is also best in class in utilising the Zeigarnik effect.

That feeling of obstruction and frustration from being denied a certain completion (in this case, the conclusion following an exciting or important scene) creates a strong emotion and will probably leave you in some state of irritation, depending on how attached you are to what you’re watching.

This is done not just for storytelling purposes but to also hook you and to an extent, confirm your return next week to find out what happened.

In digital product context, the effect might not be as dramatic as in a movie or television show but can be equally effective in encouraging users to complete a certain task.

LinkedIn is a good example of using Zeigarnik effect to encourage people to complete their user profiles. They do this by showing an incomplete progress bar attached to the profile along with visible results for having completed each milestone.

A few closing points to remember about the Zeigarnik effect:

• Showing progress increases motivation. As mentioned in the LinkedIn example, there is no need for intrusive pop-ups or reminder. Just the sight of an incomplete progress bar has proven to be effective in reminding users to complete their profiles, since they’ve already put some effort into it.
• The closer you are to the finish line, the faster you run. During a particularly lengthy project, it can become discouraging to continue. But when you’re at the last lap, you feel a surge of motivation to complete the project. As tedious as a task might be, being close to completion will give you that extra boost to just get it over with. Also, another reason why progress bars are so effective.
• Completing tasks sparks joy! No matter how simple a task is, completing them will evoke a positive feeling of satisfaction and achievement. This is also another reason why a lot of digital products implement and integrate gamification into their services. Giving your users ample opportunities to earn small achievements will boost their mood and foster a positive relationship with your product which in turn creates user retention.

These six useful and interesting psychological principles are just the tip of the iceberg when it comes to the endlessly fascinating and evolving world of product design.

Needless to say, these laws and principles are guidelines, not rules written in stone. They are a compass to guide your design and are often a good starting point. The most important, however, will be your customers/users.

When you design solutions to make their lives easier and improve their experience when using your product or service, then you’d have employed excellent UI/UX principles.