UX design plays a pivotal role in establishing the quality and performance of a software, product, service, etc. This ultimately determines your user’s journey and their experience with the product.
Clearly, they have a huge role to play in the success of your website or app. When done right, it can have a positive impact on all your success metrics and increase your traffic, sales, etc.
With time, it has become easier to create websites (thanks to WordPress), and convert WordPress websites to app, UI and UX designing still has many challenges and requires professional expertise.
Today, we are here to make it a bit simpler for you. So, stay with us and read about 20+ UX design principles that can help you design like a true professional. Let’s begin!
Suggested Read: The difference between UI and UX: A guide for beginners
In this blog
- Von Restorff Effect
- Zeigarnik Effect
- Serial Position Effect
- Aesthetic Usability Effect
- Goal Gradient Effect
- False Consensus Effect
- Picture Superiority Effect
- Hick’s Law
- Fitts’s Law
- Postel’s Law
- Jakob’s Law
- Parkinson’s Law
- Miller’s Law
- Weber’s Law
- Tesler’s Law
- Doherty Threshold
- Pareto Principle
- Peak-End Rule
- Occam’s Razor
- Law of Similarity
- Law of Prägnanz
- Law of Uniform Connectedness
- Law of Common Region
- Law of Proximity
- Law of Continuity
- Law of Closure
Von Restorff Effect
Van Restorff Effect is also known as the Isolation Effect. This principle states that when multiple similar objects are present, users are more likely to remember the one that differs from the rest.
This can help designers highlight most information, feature, button, etc., and make it distinct. It can also enable users to identify the most significant item among a group of items.
This principle is named after Soviet psychologist Bluma Zeigarnik. Zeigarnik effect postulates that people remember unfinished or interrupted tasks better than completed tasks.
UX designs should successfully signify users of incomplete tasks. Users will remember such signals and their chances of returning to the task and completing it will increase manifold.
Serial Position Effect
Human brains are hardwired for recalling the first and the last elements of any given series. This tendency has been named as the Serial Position Effect.
Therefore, when designing for UX, the most significant items can be either placed at the start or at the extreme end. Similarly, the lesser important elements can be placed in the middle.
For example, key actions can be placed at the far right or far left when designing for navigation. This is why the most important items and elements, like the app menu, are either placed at the top or at the extreme bottom.
Aesthetic Usability Effect
How often does it happen that you come across a website and its elegant design and catchy aesthetics make you believe in the product or service? Quite often! Doesn’t it?
This is in our nature as humans. The aesthetic-usability effect postulates this tendency that makes customers believe that aesthetically pleasing products will be more usable.
This is why all great brands lay so much emphasis on improving the aesthetics of their websites, apps, and other assets.
Goal Gradient Effect
Goal-Gradient Effect is all about designing for motivation. It states that the closer someone is to complete a task, the faster they will work towards accomplishing it.
It can have a ton of applications in UX designing. For instance, if you refer to the image above, it indicates that there is a task going on and it is 60 percent complete.
Now upon seeing this, a user will be more likely to wait for the rest 40 percent to complete and checkout what is waiting for them after that.
False Consensus Effect
In simple terms, False-Consensus Effect is a tendency to assume that others share your beliefs and will behave as you do, in a given context.
This is the case with many designers and other professionals. However, it is not true at all. It is quite possible and highly likely that the users who will use the end product are not like you.
Hence, it is recommended to create user personas based on extensive research and get your designs reviewed by real users. This will give you an idea of how different users react to different elements and what problems they face in their interaction.
Suggested Read: What is microinteraction and why is it significant for your mobile app UI and UX
Picture Superiority Effect
This principle sums up the importance of pictures, images, or graphic illustrations in a design. It states that users are more likely to remember and recall images than text.
There are ample studies and real-life examples to prove the same. Most children’s books have images with very few texts for the same reason.
This is why most of your significant information and textual elements should be backed with pictorial representations. Users will remember the images, even if they forget the text.
Hick’s law simply states that the more complex the choices are, the more time users will take to accomplish the tasks. In fact, too many choices will reduce the odds of the user making any choice at all and lead to choice or analysis paralysis.
For instance, long onboarding and complex checkout process is one of the most important and common reasons behind website and app abandonments.
Therefore, ideally designers should reduce the cognitive burden on users and limit the number of choices or steps that need to be taken to accomplish a goal.
Keep all the processes as simple as possible and minimize the number of steps users need to take to complete a certain goal or task within the app.
Fitts’s law is quite similar to Hick’s law. It states that the time to acquire a target is a function of the distance and size of the target. In simple terms, the time taken by users to reach a goal will depend on the distance and size of the goal.
Therefore, the design can be made more interactive and less challenging by:
- Making important elements big enough for users to see and select effortlessly.
- Such elements should be separated from other elements by using proper spacing, varied colors, sizes, etc.
- The entire design element should be easily clickable and there should be minimal work for the users.
Be conservative in what you do, be liberal in what you accept from others. In simpler terms, be flexible in what you accept from your users and limit what you ask of them.
This is what the Postel’s law (also known as the robustness principle) is all about!
Let us explain this to you with example. Even when we misspell or abbreviate a word while typing in a search query on Google, we get the right answers. However, the answers are often always to the point and accurate.
This principle must be followed in design as well. Your design should be such that it requires minimal effort or information from users. However, it should have ample substance for making the user’s journey smooth and effortless.
Ever thought why some of the design patterns, UX styles, icons, etc., are common for most websites, apps, etc?
This is done purposely by designers to align with Jakob’s law. It is built around the fact that users spend most of their time on other sites or apps and thus end up wanting your platform to work the same way.
This could either be a conscious decision or happen subconsciously because it is embedded in human nature to identify and relate to patterns.
Of course, this does not imply that you need to compromise your brand voice, identity, theme, etc. However, you must ensure that the basic functionality of design elements remains the same. For example, the left pointing arrow must take user to the previous step and the right pointing arrow must take user to the next step.
By abiding to this law, you will be able to leverage existing mental models and beliefs of your customers and create amazing designs. Users will get a familiar experience and their learning will help grasp your product more easily.
This may sound like the most confusing one in our list of 20+ principles but is actually very simple. It stipulates that a task will inflate to take up all the available time.
Sounds confusing? Let us break it down for you?
Has it ever happened that you got a deadline for a work, and you ended up procrastinating it or working on it more than what is needed? This is a human tendency, and this is what this law encapsulates.
Therefore, UX designers should aim to limit the time for a given task and apply this law to create more efficient and taut interfaces that help users accomplish a goal in a timely manner.
Else they will get lost in the process and might not land where they should.
Suggested Read: The complete guide to UX terminology – All the design jargon professionals should know
This law is centered around the fact that an average human’s working memory can only keep 7 (plus or minus 2) items. Users are more likely to forget or even neglect anything more than that.
It talks about the limited attention span and retention capacity of the users. UX-designers should remember this and aim to keep items on a given page or section, limited to this number.
This also highlights the importance of creating clutter free designs and adding only elements that really matter. For instance, if you are displaying product categories in several boxes, then try to limit the number and align your design with this law.
Weber’s Law of just noticeable differences states that slight change in things won’t result in a change that gets prominently noticed by the users. This can be applied to make subtle changes.
Besides, there are ample studies and real-life examples to show that customers do not like dramatic changes. Therefore, changes must be implemented gradually and not at once.
Too many UI and UX changes or a complete overhaul implemented at once can overwhelm customers. Therefore, ensure that the changes don’t intimidate the users.
Also, do not forget to test your changes properly with real users or testers. It will give you feedback about the perception of your potential users and keep you on the right path.
How beneficial do you think is the copy-paste functionality that is available in our devices? Did you say it is lifesaving? Well, it is!
This functionality was co-created by Larry Tesler, who specialized in human-computer interaction and believed that engineers and technicians should do the heavy-lifting so that customers don’t have to.
Tesler’s Law or the Law of Conservation of Complexity named after him, is an adage that states that every application has an inherent amount of complexity that cannot be removed or hidden.
Therefore, it must be dealt with at some or the other stage of product development or human interaction. As UX designers, your responsibility will be to ensure that the complexity is reduced.
Sometimes, this complexity can also occur because of too many features or a cluttered design. In this case, low-value elements and features can be eliminated to reduce the cognitive load on users.
Additionally, you can use tool tips, tutorial elements, etc., to simplify the journey of your users. Basically, you should spend ample time perfecting your website or app so that your user’s do not have to!
This principle was conceived by Walter Doherty and Ahrvind Thadani. It is applied to keep the user thoroughly engaged when interacting with a computer.
An interaction should provide system feedback within 400 milliseconds in order to keep the user engaged and attain maximum productivity by ensuring that neither the user nor the system has to wait for the other.
Therefore, designers should work closely with developers to ensure that there is minimum response or load time throughout the product, and it is optimized for speed and performance.
Additionally, where the users do need to wait, designers can add interactive animations while the loading process happens in the background.
Pareto Principle is quite popular across fields. It states that for many outcomes, roughly 80% of consequences come from 20% of causes.
This principle is named after Italian economist Vilfredo Pareto and is also known as the 80/20 rule, the law of the vital few, or the principle of factor sparsity.
It postulates that within any given system, only a few variables affect the major outcomes. Whereas the factors have little to no impact.
Microsoft applied it to their product and noticed that by fixing just the top 20 percent of their most reported bugs, 80 percent of the related errors and crashes were eliminated.
UX designers can apply the Pareto Principle to the optimization efforts where they can identify and focus on 20 percent of the most important aspects or elements of the product.
This is an interesting principle and also has a considerable influence in our day to day lives.
Let us explain how!
Has it ever happened that for a given event, you ended up remembering only the first and the last or the best and the worst part of it? This is what the principle of Peak-End Rule postulates.
It asserts that people judge an experience largely based on how they felt at its peak (i.e., the most intense point) and at its end, rather than based on the overall average of every moment of the experience. This is regardless of the fact whether their experience was a good one or a bad one.
Therefore, if the peak and end experiences in your product are good, people will perceive it as a positive experience. You can amp up their journey by adding such peaks and making the end processes a memorable one.
Suggested Read: Reduce app load time and increase speed – Your ultimate guide to a better UX
Figure–ground principle refers to the human ability to visually separate objects on different layers of focus.
It is a type of perceptual grouping that is necessary for recognizing objects through vision. In Gestalt psychology it is known as identifying a figure from the background.
For example, our mind is trained to recognize black words on a paper as the figure and the white sheet as the background. This is somewhat like seeing shadows as figures on solid structures.
One of the biggest applications of this principle is seen in the designing and placement of “pop-ups”. Popups often appear in the foreground, turning the existing screen into a background.
This automatically aligns user attention at the right place, and it becomes easier to highlight prominent elements with ease.
The simplest solution is always the best solution. This is what the Occam’s Razor asserts.
It is a problem-solving philosophy principle that states that when there are two explanations for an occurrence, the one that requires the least speculation is usually correct.
Therefore, as designers you should remember that when you can, analyze all the elements that you are using and remove as many as you can without compromising the design or functionality.
Weeding out unnecessary elements will reduce your product size, clear out clutter, and help users reach their goals faster. Remember the principle of KISS (Keep it Simple & Stupid) and you will be good to go.
Law of Similarity
You can understand the law of similarity just by looking at the image above. If you look closely, you will see that all the buttons labelled “Edit” are of similar color, whereas all the buttons labelled “Remove” are of similar color.
This is because the design above follows the Similarity principle. It states that the human eye tends to perceive similar elements in a design as one or alike, even if those elements are placed separately on the screen.
For instance, if you checkout AppMySite’s website, all the blue buttons on the landing page take you to the sign-up page of our app builder. The buttons are placed at many places throughout the website to make your journey easier. However, they all serve the same purpose.
As UX designers, you should also apply law of similarity to tell apart similar elements from other contrary ones and make it easier for your users to understand the same.
Law of Prägnanz
The Law of Prägnanz (or Pragnanz) is also referred to as the law of “good figure” or the Principle of Symmetry and Order.
This law asserts that when we are presented with complex shapes or a set of ambiguous elements, our brains choose to interpret the elements in the easiest manner with the least cognitive effort possible.
For example, if we see a monochrome version of the Olympic logo, we will think of it as overlapping circles rather than a collection of curved lines.
Therefore, if your actual goal or message is hidden in something complex, users will be more likely to miss it as they will break-down the design and process the information in the simplest form.
Therefore, to be on the safer side, you should work towards uncomplicating design elements and already making things simple enough for users to understand.
Law of Uniform Connectedness
Law of Uniform Connectedness emphasizes that elements that are visually connected are perceived as more related than elements with no connection.
It is worked around the fact that elements in a group share some characteristics and hence should be connected using colors, lines, frames, etc., to denote the same.
For instance, the login screen of most websites and apps has the onboarding form (where users fill in the details) within a square or other such shape.
This helps users understand that these fields are related to each other and must be treated as part of one single process.
Law of Common Region
This is somewhat similar to the Law of Uniform Connectedness stated above. It asserts that elements sharing an area within a clearly defined boundary are perceived as one unit or group.
For instance, on a product page that has several products listed together, each product and its description can be added in separate boundaries to tell it apart from the rest of the products.
eCommerce sites often use this technique to tell apart one category of products from other. Designers can create such common reasons to help users perceive a group of things as one and take action accordingly.
Suggested Read: Mobile app navigation: Best practices to enhance your UI and UX
Law of Proximity
This law states that objects that are near or proximate are more likely to be grouped together and perceived as one unit. This is true even for a mix of different kinds of items.
This law can be applied to establish relationships between different design elements and help users notice and process critical information faster.
UX designers should visually group similar or related items together to emphasize their relationship and help users understand that those items belong together and share a feature or functionality.
Law of Continuity
This law asserts that the human eye follows lines, curves, or a sequence of shapes in order to determine a relationship between design elements.
Therefore, when users find a visual connection between two items, they tend to sail more smoothly through the process and progress in the right direction.
Therefore, establish such connections in your design where required, and ensure continuity and connection to guide your users and help them perceive the right message.
Law of Closure
Humans have a strong urge for closure. Our brains have the tendency to fill in gaps to get full sense of something.
For instance, just by looking at the image above, we know that one image is a circle, and the other is a star.
This can be applied to make design fun without messing with the users’ ability to comprehend what’s in the design. It can be applied to signify loading screens, loading images and other animations at relevant spaces.
That was all about UX designs and its various laws and principles. As you might have noticed, most of these laws interplay and together form the basis of wonderful UX designs.
You can base your website and app development processes on these laws and create professional designs that your users will fall in love with!
However, if all this sounds too overwhelming to you, then you can take a shortcut and design your own app with AppMySite’s free app maker.
It has a wholesome DIY environment where you can design Android and iOS apps from scratch like a professional. You can upload your own designs or use the available assets to put up your app design, features, etc.Try it for free and know for yourself. Also, we love hearing from you. Do not forget to drop your feedback in the comments section and let us know if managed to thrill you today!’
Data and Image Sources: