Principles of UX interfaces

Article 23/34 about #productmanagement with a focus on Hard skills.

Quality design should not be flashy. It should simply ensure that tasks and actions on websites run smoothly. However, behind this simplicity of UX design lies the study of human behavioural patterns. Below, we’ll look at the key UX laws we encounter on a daily basis and provide guidance on how to apply them.

Jakob’s Law

The gist of the law: Users prefer your sites to work the same way as all the other sites they already know.

Who is Jakob

Jakob Nielsen is a usability expert and co-founder of Nielsen Norman Group, a UX research and consulting company. In 2000, he described his observations of user behaviour. According to Nielsen, users feel confused and frustrated when they encounter unusual patterns in design. In these cases, they tend to abandon tasks and leave the site.

Example: When you visit a new online shop, you expect the shopping basket to be in the top right corner and the navigation menu to be at the top of the page. If you suddenly see the shopping basket at the bottom or the menu on the side, it is confusing and hinders shopping.

Tips and tricks

1. Apply well-known UX patterns Users should focus on products, services and content, not be distracted by complex and original UX innovations.

2. Maintain balance

Websites over-saturated with creative and out-of-the-box elements can confuse users. Try to minimise the use of unfamiliar elements.

3. Help users

Provide hints when it comes to less obvious patterns.

4. Meet expectations

The user should feel in complete control of your site. Meet their expectations so they can relax and want to come back again.

5. Take user experience into account

Pay attention to past user experiences and utilise them. This is more effective than creating something new for the sake of uniqueness.

Miller’s Law

Origins

In 1956, George Miller argued that the capacity of working memory is limited to about 7 pieces of information. The basic unit of information is a bit — the amount of data required to choose between two alternatives. Similarly, 4 bits of information is a choice between 16 binary alternatives (2 to the 4th power). The point at which confusion can lead to error is the bandwidth of the channel. In other words, the number of bits that can be reliably transmitted through the channel within a certain amount of time.

The gist of the law: The average person can hold about 7 (give or take 2) items in their short-term memory.

Example: Imagine you are registering on a new website and you have to fill out a long form with many fields. Most likely, you will get confused and may make mistakes. It’s better to break the form into several steps with 3–5 fields in each.

Case in point: LinkedIn uses step-by-step registration, where each step requires filling out several fields, making the process less tedious and clearer.

Fitts’s Law

Origins

In 1954, psychologist Paul Fitts, studying the human motor system, showed that the time it takes to move to a target depends on the distance to it, and yet is inversely proportional to its size. According to his law, fast movements and small buttons lead to more errors due to difficulty in aiming. Although there are many variations of Fitts’ law, they all reflect the same idea. Fitts’ law is widely used in user experience (UX) and user interface (UI) design. In particular, following this law, interactive buttons have become large (especially on finger-controlled mobile devices) — small buttons are harder and longer to press. Also, the distance between the user’s area of attention and the target button should be as small as possible.

The essence of the law: The time it takes to reach a target depends on the distance to the target and the size of the target.

Example: The ‘Send’ button on a website should be large enough and located in an easily accessible place so that the user can quickly click it.

Case Study: Gmail places the ‘Write’ button in the bottom right corner of the screen and makes it large and brightly coloured so that the user can quickly start it.

Hick’s Law

Origins

Hick’s Law (or Hick-Hyman Law) is named after British and American psychologists William Edmund Hick and Ray Hyman. In 1952, they decided to measure the relationship between the number of stimuli and an individual’s reaction time to each stimulus. As might be expected, the more stimuli an individual is exposed to, the longer it takes them to decide which one to succumb to. If you bombard the user with more options, it will take them a long time to make a decision and do work they don’t want to do.

The essence of the law: The time taken to make a decision increases with the number and complexity of options.

Example: If there are too many options and links on the homepage, users will spend a lot of time choosing what to do next. It’s better to offer fewer options, but more clearly structured.

Real case study: Apple is famous for its minimalist design. On their website, you’ll find only the most important sections and links, making it easy to navigate and make decisions.

How to use it

1. Reduce the number of options This is important for the control system environment and menus, for example. Remember, the fewer options you give the user, the more likely they are to take an action.

2. Break down complex and time-consuming processes into smaller steps For example, you can split the user registration process into multiple screens. This will make the interface more user-friendly.

3. Keep a balance between reducing complexity and oversimplification Breaking down options into many small chunks can make the user walk away without reaching the goal.

There are two rules for breaking down steps: show how many steps there are in total, and try to limit yourself to a maximum of five steps

4. Highlight to help users not get overwhelmed and make choices faster In a cluttered interface, you can highlight options that are important to users.

5. Use categories to guide users through the site If one menu offers direct access to every link, it can quickly overwhelm the user.

5. Pareto Principle

The essence of the law: 80% of effects come from 20% of causes.

Example: In e-commerce, 80% of sales can come from 20% of products. These products should be easily accessible and highlighted on the website.

Real case study: Amazon actively promotes its top products on the homepage and in the recommendations section, which significantly increases their sales.

6. Consistency Principle

The essence of the law: Users should be able to predict how elements will work on different pages of the same site.

Example: If the ‘Buy’ button on one page is green and round, it should look the same on other pages.

Real Case Study: Google uses consistent design across all of its products, whether it’s Google Search, Gmail, or Google Drive, to ensure usability and recognisability.

7 The Peak and End Rule

The peak and end rule explains how our impressions become memories. According to the rule, we don’t remember the sum of all our experiences, but only the most vivid positive or negative moments and the finality of the experience.

How to use it

1- Research The peak and end rule can be very useful in UX research. If you want to find out what kind of impression your product makes, ask simple questions. For example, you can ask what was the most difficult or inconvenient thing about using the product. The answers will help you find negative peaks and then get rid of them or even turn them into positive ones.

2. Creating a better impression

This is about creating more positive peaks and eliminating the negative ones.

The best examples here relate to gamification in learning. We all know that learning something new can be very stressful, so making the process look like a game is a good solution. It creates good memories. For example, a points and achievement system creates positive peaks, which helps to keep motivation levels high.

3. Focus on the final product

Especially when it comes to complex products.

Let’s say you have a complex form with 20 steps. To make users feel comfortable, you can enable autocomplete and autocorrect, categorise these steps, add inbuilt error messages and so on. This is how you can eliminate negative peaks. But when a process takes a lot of time and action to complete, your goal is to make the user forget about it. And this is where a good closing can come in handy.

Give your users some empathy and encouragement. For example, you can emphasise that you understand that filling out the form wasn’t easy, and now that it’s over, you can share the user’s joy.

Key takeaways

Use the peak and end rule for UX research. Remember the importance of vivid impressions. They set the tone. Good end-stage design can mitigate negative impressions. Whenever possible, try to get rid of negative peaks.

Conclusion

Following these laws helps to create products that users will love and use with pleasure. Good UX is not only about beautiful design, but also about understanding user needs and behaviour. I hope these examples and cases will help you better understand how to apply the laws of UX in practice. Thanks for your attention and good luck creating great products!