UI Design: Famous Principles
In this article, trying to collect the famous principles in design & how it used in UI design, principles will help you to create something aesthetic, meaningful, comfortable to the users & engaged.
Notes
- Rules, laws, and principles are not to follow every time and also not here to be broken every time.
- The article is concentrating on UI design only and you can use these principles/rules in graphic design also.
- The article is covering (Gestalt Principles -Hacks Law -Fitts’ Law -Rule of Thirds -Millers’ Law -Pareto Principal (80/20 rule) -Fibonacci Sequence)
The Principles
||| Gestalt Principle
Gestalt principles followed the basic principle that says “the whole is greater than the sum of its individual parts”.
Hint: Gestalt principles include (Proximity -Similarity -Symmetry -Common Fate -Closure -Law of Pragnanz)
Founded by:
Max Wertheimer, Wolfgang Kohler, and Kurt Koffka.
Philosophy:
Gestalt principles try to understand the psychological phenomena by viewing them as structured big image rather than the sum of its parts, it’s more related to physiology like structuralism (which it more related to analyze mental processes into elementary sensations) plus it also shows concepts like holism (is the idea that you can’t explain by its parts only) and context.
— Proximity
Is a visual and perceptual organization concept, It says when you perceive a collection of objects, the objects closer to each other appears as a group and create a good relationship.
As you can figure in the radio buttons example, all the sub items radio buttons are more related to P2P Search because it’s closer to it than the Web Search, that helps the user to figure out the content and understand it plus it removes any barriers about what to do with that content, also in the form example, you can see we have 3 groups of input fields.
— Similarity
It captures the idea that elements will be grouped together when they look similar to each other.
The law of similarity captures the idea that elements will be grouped perceptually if they are similar to each other.
In the “preferences window” of the Opera browser in previous example`, color is used to make the user group the menu items on the basis of their background color. The grey background of the first four menu items thus “tie them together”.
— Symmetry
Symmetry creates balance, harmony and order which lead to aesthetically pleasing result, humans tend to prefer Symmetry over Asymmetry because Symmetry plays a big rule in the universe design, Symmetry concept states elements that are symmetrical to each other tend to be perceived as a unified group.
Symmetry can be watched through Grid system which is a technique to structure the content in your output whether its desktop, laptop, tablet or mobile or any other device.
- Asymmetry -
Asymmetry can play also a good rule to break Symmetry if it uses in a good way, for example to bring the attention to a specific part or section in the page.
— Closure
According to Universal Principles of Design, the Gestalt principle of closure states that we have a tendency to perceive a set of individual elements as a single, recognizable pattern, rather than multiple, individual parts.
Andy Rutledge wrote an interesting details articles about the principles which is nice to check for more details.
Closure is playing with the negative space in a creative and respectable way to create interesting layouts and use the human minds to deliver new ideas and images instead of what is actually seen.
— Law of Pragnanz (Figure — Ground)
It says when perceiving a visual field, some objects take a prominent role (the figures) while others recede into the background (the ground).
The visual field is thus divided into these two basic parts.
Another definition: Elements are perceived as either figure (distinct elements of focus) or ground (the background or landscape on which the figures rest).
In the above example, your eye goes directly to both the mobile in the hand + Apple logo + MUSIC word, so it’s clearly deliver the required message in a simple way, the principle gives you the ability to create layers and use for example shadow to give more depth to your design.
You can create good figure-ground by playing with ( Contrast — Color — Size — Position — Focus).
— Common Fate:
It says that humans tend to perceive elements moving in the same direction as being more related than elements that are stationary or that move in different directions.
In the above example, you can detect the direction of the sub-menu and sub-sub menu items by seeing the arrow direction and the how the submenu appears.
||| Hicks Law
Hicks law focusing on the time it takes for a person to make a decision as a result of the possible choices, by increasing the number of choices you are increasing the time it takes to take a decision.
Founded by:
William Edmund Hick and Ray Hyman.
In the above example, you can see how Hicks law categorized many submenu items to be more understandable and recognizable, imagine that you don’t have this categorization, how the menu will look as absolutely the user will get missed and will not understand anything.
A classic case study for Hick’s law involves a grocery store which put out free jam tasting for customers. In one case they had 40+ jams to sample and choose from, and in the other only a few samples. What they discovered is that customers purchased more jam when presented with three to four options over the forty plus. Most customers opted not to purchase jam at all rather than pick from such a large selection.
Stimulus–response compatibility:
The stimulus–response compatibility is known to affect the choice reaction time for the Hick–Hyman Law, this means that the response should be similar to the stimulus itself (such as turning a steering wheel to turn the wheels of the car).
The action the user performs is similar to the response the driver receives from the car.
||| Fitts’ Law
It can be described as “The time required to move to a target is a function of the target size and distance to the target.” In another way, it says that “Faster to hit larger objects closer to you than smaller targets further from you”.
Founded by:
The famous researcher Paul Fitts
You can see in the previous example how you can use the Fitts’ law in creating a big CTA button to bring the attention to it.
In the previous example, you can see the Fitts’ law where Save Profile — the main action — is big and recognizable easily while cancel button which is a secondary function is only a text.
||| Pareto Principal (80/20 rule)
The Pareto principle stipulates that a high percentage of users will perform a low percentage of actions, meaning that most of your users are going to go to a small percentage of pages, or in terms of web applications that most of your users will perform a small percentage of tasks.
Founded by:
Observed by Italian economist Vilfredo Pareto, and the actual principle was named the Pareto Principle by Joseph M. Juran.
In the previous example, focusing on the core functions (20%) the Try free in 2 ways and remove any unnecessary elements from the design (80%) will help to increase the conversion rate.
So rules and principals can be used together to bring out a better visual design that meets the user’s needs and satisfactions.
||| Miller’s Law
Miller’s law states that the number of objects an average human can hold in working memory is 7 ± 2, so in another meaning, users can handle 5 things efficiently while the percentage of errors increase when you go up to 9 and above you are in risk that users will lose some of these things.
Founded by:
George Miller.
Increasing the number of items increases errors. The previous graph is based on digit span — hearing a number then remembering it briefly while writing it down. Accuracy varies with the number of digits, e.g. “54762” would usually be correct but “724196835” would usually be wrong.
People can handle larger numbers of things but they do this slowly and with increasing probability of errors.
If we have many menu items it will confuse the user, try to categorize the sitemap with the Miller’s law to break any cognitive barriers and let the user focus on the tasks.
||| Fibonacci Sequence
The Fibonacci Sequence is a series of numbers in which each number is the sum of the preceding two. For example, if you started with 1 it would go like this:
1, 1, 2, 3, 5, 8, 13, 21, 34, 55, etc…
Founded by:
The Italian mathematician Leonardo of Pisa, known as Fibonacci
By definition, the first two Fibonacci numbers are 0 and 1, and each remaining number is the sum of the previous two. Some sources omit the initial 0, instead of beginning the sequence with two 1s. So the first two Fibonacci numbers are given, and each remaining number is the sum of the previous two. The higher the Fibonacci sequence gets, the closer its numbers relate to each other according to the Golden Ratio.
||| Rule of Thirds
The Rule of Thirds is a way to align elements of a big visual to be visually pleasing and harmony and to help the users eyes while scanning the web page.
The rule also used profusely by photographers to bring the attention to a special part of the photo and have an interesting composition.
Found by:
Was first written down[5] by John Thomas Smith in 1797
The rule of Thirds technique is to divide the design into thirds both horizontally and vertically, by doing this we are creating a grid with intersecting lines, the rule states that the most important areas to bring the attention are the intersections of these lines.
Note: to have a good Rule of Thirds, it’s better to avoid placing anything in the dead center of the composition.
Conclusion
Remember what I mentioned in the beginning, rules, laws and principles are not to follow every time and also not here to be broken all the time, for example, you can’t break the Law of Proximity because it will affect the user experience and users’ satisfaction while you can break the Law of Symmetry to bring attention to a specific part of the visual.
Also, you can find here argument says that Miller’s law, for example, shouldn’t be applied to UI design.
At the end, you have the laws/principles in your mind, practice them and learn how to use them based on each project factors, you can determine which one to use and which to break.
A good UI design is a part from other parts to create a well-done project, so taking it into consideration from the beginning will save time and efforts and will help to create an aesthetic and appealing product.
Download a cheatsheet one page that has the principles.
