Improve your UI design with these successful UX Laws in 2023

A good visual design that uses standard design principles can take the experience to the next level.

Where UX activities initially primarily deal with the logical and rational side of design as to what, why, and where, good UI tackles the emotional aspects of the experience like color psychology, engagement, feel-good factor, etc. Good UI support and kudos for good UX and taking it to the next level.

The UI can be designed with affordability in mind, respects all conventions, has a great architecture with perfect words, and is quick to load and use, but…

…Is this UI efficient to meet user goals? User goals! That’s more important.

Here is a collection of 16 principles that UX designers can use to support the user design process:

Jakob’s Law

The user of a website expects the website to work as well as other similar websites.

Jakob’s law recommends the use of familiar patterns in design, to facilitate a better user experience.

It means that sometimes your urge to create something unique and fancy might hamper the user experience simply because the user is not familiar with it.

How to use Jakob’s law in UI?

1. Strictly adhere to the visual hierarchy of reading patterns.

2. Design and create product experiences that complement each of your brand’s layouts and style.

• Visual design
• Terminology and labeling
• Interaction design and workflow
• Information architecture

3. Designers can make the design process easier by using similar design patterns.

Aesthetic-Usability Effect

The aesthetic design creates a positive reaction.

A bad first impression is like a bad date: you never get a second chance to make a first impression, so you have to make sure your visual appeal is top-notch.

Scientists analyzed the impact of visual appeal on on-site usability and learned that the visual appeal of a design influences first impressions the most. Test participants tended to give high interest and usability ratings to sites that looked visually stunning and low interest and ratings to sites with low visual appeal. They also exhibited lower engagement rates with websites that looked visually unappealing than with visually appealing sites.

How to use Aesthetic Usability Effect in UI?

• Make your Interface appealing. Design with people’s interaction model in mind.
• To find high-value areas of your funnel, focus on the high-friction parts of your marketing funnel (top landing pages, bottom of the funnel stages such as checkout flow), and push your most engaged consumers to them.
• Integrate continuous user feedback into your product design process.
• Applying the aesthetic-usability effect requires you to make sure that the core function of your product is still intact. That means you shouldn’t let it change too much in pursuit of visual elegance.

Fitts’s Law

Touch targets should be easily accessible and clear.

When computers were still relatively new, and people once dreamed of going to space, Paul M. You could find a lot of theories written over the past 66 years, but the bottom line sounds like this:

The time it takes to reach a target is directly proportional to the size of the target and inversely proportional to the distance between the centre of your screen and the centre of your target. Bigger targets, even at a further distance, are therefore easier to hit than smaller ones at closer distances.

How to use Fitt's law in UI designing?

• You can use it with every element on the app and website. When making a menu or a drop-down menu, make it smaller.
• If you are making a button to complete an action, make them bigger so they are easier to select.
• Make your list longer for only one action so it is easier for the consumer to select.

Hick’s Law

Choices should be simple and easy to understand.

If you’ve ever given up on choosing a movie on Netflix because the list of choices was too large and didn’t realize you spent much of your time there.

Too many choices lead to poor decision-making, leading to bad ideas and bad products. the information overload that prevents the user from taking any action at all. So limit the available options.

Netflix recently created a new section called “Top 10 in your country” which lists shows based on popularity and viewing percentage in your area. While it’s true that more and more Netflix originals are showing up in this section, which may be their way of promoting their original content to viewers and feeding it into the algorithm. But they know that it’s important to thoroughly describe shows and movies in the “top 10” section so that viewers can make an informed decision about what to watch.

How to use Hick’s law in UI?

1. If your payment process is long and complex, prompt users to sign up for an account with their email and a password.
2. A card sorting method is an effective way to get a sense of what users find most important.
3. Use images properly. Taking away images will make the design unusable
4. Apply Hick’s law when designing

• Control display
• Dropdown menus
• Contact pages
• Sign up forms
• Button selection
• Navigation menus

Gestalt Theory

Don’t make users think. It can be a challenging goal to achieve, but what if I told you, that getting there could be easier?

Gestalt theory dictates that because our minds always want to find organization and order, it means people tend to comprehend something faster when they see how it connects with other things around it.

The Gestalt theory is guided by five principles: proximity, similarity, continuation, closure, and focal focus.

Law of Proximity

Objects that are near, proximate to each other, or otherwise have some proximity relationship with each other tend to be grouped.

Placing related elements nearby and using spaces to create meaningful groups are basic principles in visual design. The user is sufficiently focused on the task and can quickly access the page, so making this definition clear improves usability by helping users quickly find and focus on only the UI elements most related to their current task.

Although each group of information is clearly defined and individually separated, the overall flow of the presentation is not confusing. The app’s mood-based directories are separated into two main categories: your favorite playlists and the most popular playlists.

Each music-related image that Spotify uses has a corresponding text element to help users connect the dots between different categories.

For example, if you see an image of a vine dancing without any text, you might be inclined to think that it is related to the All out 10s section.

How to use the law of proximity in UI?

• To make your content more readable, include elements that belong together.
• Use white space between images, headlines, descriptions and other information on your website in order to separate them visually. As the elements are separate pieces of information that are unrelated, they should be separated via stylistic (rather than functional) design to indicate this.

Law of Similarity

Similar elements of the design tend to look related, even if they are separated

When elements appear to be similar to each other, we tend to group them and give them the same function.

Although those elements look the same and are evenly spaced, we tend to group them by color.

This example showcases how you can use buttons to create a clear and unobstructed user interface.

When elements appear to be similar to each other, we tend to group them and give them the same function.

This example shows how you can differentiate between buttons and input fields to create a clear and unobstructed user interface.

When elements appear to be similar to each other, we tend to group them and give them the same function.

How to use the law of similarity in UI?

• When designing an app, be sure to use similar styles for each element of your design, such as buttons and action sheets. Doing this helps users recognize elements easily and will make using the app much smoother.
• To generate interest, break the design or text pattern. Elements that exhibit different functions can be a great way to grab users’ attention when they first enter a page. Make sure to pair these elements with clear text that highlights their use and purpose.

Law of Closure

Our brains tend to fill in the information and avoid contradictions as much as possible.

Our eyes are naturally drawn to simpler ways to see things. When viewing a complex arrangement of visual elements, we tend to look for a single, recognizable pattern or shape.

The principle of closure is often used to design logos and icons that are both memorable and recognizable. This state that you work in your memory and convert the complex object into easy ones.

While using the closure principle can simplify the visual complexity of your icons, you should still test that the user understands what the icon represents and add a clearly labeled icon. If the user doesn’t understand what the icon means, it doesn’t matter if it’s minimalist or aesthetic.

How to use the law of closure in UI?

• Decrease the number of elements, you need to let the user understand what you aim to show. This makes it easier to design icons, pictures, and simple brand logos.
• Design for the user to embrace the positive and negative space of what’s on screen. Design for the user to think about how interactions will take place.
• To complete everything in a pattern, you need enough information to do so.

Law of Continuity

Items placed in a certain row or direction are seen as a group

The principle of continuity states that while elements may appear to be indescribably related, line or curve grouping often increases their relation by making them appear to be similar in terms of position and direction.

How to use the Law of Continuity in UI?

• Don’t scatter elements around the page and call it a design. Instead, place elements in a way that the user can easily identify the elements that are in a group, whether you use lines to separate them or not.
• Don’t add extra visual cues unless they’re necessary.
• Creating a responsive design that offers a variety of ways to navigate to different areas of the site can guide users through each area of your site faster.

Law of Focal Point

You’d be surprised at how much information can be conveyed visually in just a single second.

The focal point principle states that whatever stands out visually will capture and retain the attention of viewers first. This principle is common in graphic design, where elements like contrast, color, and visual emphasis are used to draw attention to an element. The element that is highlighted than the surrounding holds the user’s attention first, like the below image you noticed the duck first.

How to use the law of focal point?

• Contrast is a powerful design tool for making elements stand out. Elements that look different from the rest of the composition will catch the eye of a reader or viewer first, and this can be used to draw attention to a certain part of your content.
• One of the most effective ways to visually emphasize an element is by giving it more weight through size, contrasting color, or a combination of both. According to Miller’s Law, our eyes are drawn toward elements that appear bigger or brighter than their surroundings.

Miller’s Law

Keep contents between 5 to 9 items at a time

According to Miller, our short-term memory and absolute judgment are, on average, limited to 7.

Therefore, the number 7 is called the magic number. This is not a strict number for chunking as the range itself varies from 5 to 9.

Seven (plus or minus 2) is a way of grouping content so it can be better organized for human understanding.

Miller’s law helps to organize and present information in ways that are easy for users to read. By organizing data around the most important point of a given message, users can simultaneously read several different points more efficiently.

How to use Miller’s Law in UI?

• Always present content in a manageable way by putting them in a group.
• Chunking is an effective method of presenting them in groups.
• The typical content section includes five to nine options. To reduce the number of options, you can get rid of options that a user finds useless.
• Start every blog post with a bold first heading, then follow with a concise subheading. This will make your content easier to scan for audience members who are on the move.
• To improve readability, you should always provide some white space to separate short paragraph sets of 2–3 sentences.

Pareto Principle

80% of the effect comes from 20% of the causes

One way to bring focus is by using the 80/20 rule. When analyzing user experience optimization, 80% of the results come from just 20% of the actions. Although dozens of tests may be performed, only a few will actually have an impact on improving the website’s UX. The name “Pareto Principle” comes from economist Vilfredo Pareto, who noticed that 80% of Italy’s land was owned by 20% of the population.

The formula for the Pareto principle formula :

Always focus on X% of the user tasks used by N% of the users at M% of the time.

How to use the Pareto principle?

• Make decisions that involve allocating time, effort, and resources based on the 80/20 rule. By using this rule, you can identify what’s not working.
• Focus on the top 20 percent of tasks. These are the ones used by 90 percent of users for 80 percent of the time.

Peak-End Rule

We make decisions based on how we feel, not on the facts.

For most people, how they’ll remember a product or an experience will be determined by a few key moments rather than the sum of every moment that happens.

Experiences should be pleasant and positive, comfortable, and convenient.

When designing for users, it is important to avoid moments that may be negative peaks. People remember negative experiences more vividly than positive ones, and so designers need to try to provide a positive experience.

That doesn’t mean you can never make someone frustrated or irate, but the best designs will avoid those moments as much as possible to create a positive experience.

How to use the Peak-End rule in UI?

• When building experiences or interfaces, pay attention to the moments of high intensity for your user and what needs to be accomplished at the end of that journey.
• Customer journey mapping helps us understand how users need to flow through our products. This process allows us to iteratively design the best experience for our customers and communicate the story of how they will interact with our product.
• To create a more rewarding journey, engage your users in emotional payoffs.
• Identify which moments in a customer’s journey are most critical to their success and work hard to make those moments better.
• Using provocative illustrations and bright colors at the end of a process can make that process more memorable, transforming a pleasant experience into a truly special one.

Tesler’s Law

Any system has a complexity that cannot be simplified

Each design has a certain level of complexity to it. You are responsible for reducing complexity in your organization and across the entire supply chain. By removing unnecessary features or tweaking the way your app works, you can help users focus on the actual task at hand instead of figuring out how to navigate the design.

How to use Tesler’s Law in UI?

• The goal is to remove any unnecessary or extraneous functionality from your site without messing with the design.
• Try to incorporate custom preferences so that some decisions are easily relatable to the user.
• Show only the necessary options to complete a task.

Von Restorff Effect

A visually distinctive item is easily remembered when presented along with multiple similar items

The Von Restorff Effect is the tendency to remember the most distinctive elements of a group. It’s called The Isolation Effect, as an object that stands out becomes more memorable to us than other items that look similar.

Also, don’t design elements that compete against each other. Be careful when emphasizing visual elements to ensure they don’t distract users from their main tasks.

How to use the Von Restorff effect in UI?

• Make an important info or key actions visually distinctive.
• Include words like “special” or “new” in your product listing to make it stand out.
• Seek out opportunities in the interface to learn how you can create positive experiences.
• Maintain balance. Create too many different colors and shapes, users can be easily distracted by noise.

Zeigarnik Effect

Adopt progress measurements in your design because users remember incomplete tasks better than completed tasks

Starting a task creates task-related tension that’s felt when the job is interrupted or incomplete. All the tension from a highly repetitive task makes it difficult to complete the work itself, but that very difficulty and unpleasantness are what make us remember what we’re doing.

People are less likely to remember tasks that were completed as compared to tasks left undone.

We use this concept in UX all the time, where we let a user know that they must do action X before they can experience our product or service.

How to use the Zeigarnik Effect in UI?

• Gamify user interactions and track the progress of users in your product so they can see how close they are to completing their tasks.
• Once a user has completed a task, they’ll have a new goal in mind. Try to focus on this new goal as soon as possible, and you’ll be way ahead of the competition.
• Break down content into easily consumable chunks.
• Don’t disclose everything you know the first time you explain it.
• Give users a clear idea that there is more content to read.

Till the next time….

It’s important to understand that most of the time, your eyes and ears fail to carry what you can perceive.

When designing, it is important to keep the context in mind, as well as how people perceive what they see. Take advantage of laws like similarity and proximity to create an intuitive experience for users, which will result in a product that is easier to learn and use.

How did you feel about the laws when you read them?

Feel free to add your comments and share your side of the story.

Do get in touch with us and let us know how UX laws are making your lives better.

Thank you for holding on to the end! If you want to talk about products or UX, contact me at f4khri.dz@gmail.com or on LinkedIn (I’m also looking for exciting full-time design opportunities!)