On the Laws of ux website, the designer Jonya Blonski did a great job of synthesis compiling and representing some of the main precepts of Gestalt and other laws that are frequently applied in interactive design.
In this article we compile these laws. With their application we can improve any design, and the experience of the users of our digital products.
“Designers have to create new universes, where the familiar is seen in a way that nobody has seen before”
1. Doherty Threshold
Productivity increases when a computer and its users interact at a pace (<400ms) that ensures that neither has to operate for the other.
At Nectar we always develop and optimize our web pages and applications to reduce loading times. Obtaining the best performance according to Google’s highest standards
2. Fitt’s Law
The time to make a decision is directly proportional to the distance and size of the target.
When designing a digital product, always consider this law when we are developing the information architecture.
This law is easily applicable when positioning interactive elements like buttons, providing users with the main actions in a totally accessible way, these interactive elements should always be easy to find and select.
3. Hick’s Law
The time it takes to make a decision increases with the number and complexity of the elections.
If we have a very large number of options we will need a high processing time to be able to choose the most convenient, which can be great in real life, does not usually work in digital products, where the time that users are willing to stay before trying other things is reduced to the minimum expression.
This law is one of the most obvious. but sometimes, due to the nature of the projects, reducing the options of the users requires an arduous process when rethinking the information architecture.
When we approached the redesign of Thinkspain, we face the challenge of reducing the bounce rate and improving the user experience.
In addition to the redesign of the entire web page, we reviewed the entire information architecture in order to keep all the features while we simplified content and options in each screen to offer users a clearer experience of the goals of each url.
One option is to divide the complex options into smaller steps, this result especially functional in the development of forms or registration pages.
In the last projects we are integrating forms with a structure in which we have different steps with a very determined action.
4. Jakob’s Law
People spend almost all their time on other pages and applications. This means that the operation of your site or application should be similar to other sites or applications that are familiar to users.
When developing a digital product, it is preferable to innovate at the functional level or be brave with the design or the animations that give a twist to processes or tools that have a proven solvency.
However, in many projects the real challenge is to simplify and the learning process by users, providing design structures that are familiar to them.
When we developed the apps Travel angel and Awwwards digital thinkers app we decided to use the resources provided by the guidelines of material design.
After a series of tests with users we developed two environments in which the functionalities had a structure very similar to other similar APPS.
5. Law of Common Region
Elements tend to be perceived in groups if they share an area with a clearly defined boundary.
ironically sometimes to apply this law, limits can be generated simply by using the blank space, without having to insert chromatic elements or separators creating at the same time a sense of homogeneity and cleanliness.
In Ruckstuhl E-commerce. We decided to present the different product categories by defining these limits with the use of the proportion of the space between the different elements of the content.
It is also a solution that also works perfectly in the responsive version.
6. Pragnaz Law
People will perceive and interpret ambiguous or complex images as the simplest form possible, because it is the interpretation that requires the least cognitive effort of us.
We perceive and interpreting ambiguous and complex images in the simplest way, which requires less cognitive effort.
People tend to synthesize complex forms by extracting the simplest forms. this is a mechanism to avoid overloading our cognitive capacity with overinformation.
This law is perfectly applied when developing custom iconographies, to express complex graphic concepts in simple terms.
7. Law of Proximity
Objects that are placed close to each other tend to cluster and be perceived as a compact group.
In this design you can perceive at first sight what are the products offered by the company
8. Law of Similarity
People usually perceive similar elements in a design in a global way, even if these elements are separated
For example, the most usual application in interactive design is to make sure that interactive elements such as buttons and links are visually differentiated in a clear way.
In this Landing page all the interactive elements of CTAS have a contrast and a very sharp and perfectly recognizable form.
This helps people to identify the interactive elements in a digital product.
9. Law of Uniform Connectedness
Elements that are visually connected are perceived as more related than elements that have no visual connection.
We perceive as groupings of a similar nature when different elements are connected via colored lines, frames or other forms.
Through uniform Connectedness we can group different categories and hierarchies of information in the same design and present different contents without losing the context at any time.
This is very important in pages such as E-commerces or online catalogs in which we can present different types of products, finishes or related products.
In this case we present all the products of the web inserted in the same frame design, to create cohesion throughout the navigation.
10. Miller’s Law
The average person can only keep 7 (plus or minus 2) items in their working memory.
Chungking is an effective method of presenting groups of content in a manageable way.
When we consider the information architecture of any of our projects, we insist on reducing the navigation elements to the essentials.
In this case we resolved a complex navigation by developing a mega menu where all types of products are perfectly classified.
11. Occam´s Raxzor
Occam’s razor (also Ockham’s razor or Ocham’s razor; Latin: lex parsimoniae “law of parsimony”) is the problem-solving principle that, when presented with competing hypothetical answers to a problem, one should select the answer that makes the fewest assumptions.
A maxim in all our designs to eliminate all accessory content that not impede the functionality of the digital product.
On the home of our website the specific goal is that uses access our featured projects in the simplest way. So we reduced the navigation to the minimum expression and also convert each of the images into a gigantic interactive button reducing the options to the minimum expression, amplifying the possibility for anyone to access our featured projects.
12. Tessler’s Law
Also known as the law of conservation of complexity says that in all systems there is a certain level of complexity that can not be reduced.
When considering the information architecture, we must bear in mind that there is a threshold, in which we can not reduce neither the content nor the functionalities without affecting the objectives of the digital product, once we know this we have to apply resources to deal with this complexity that can not be reduced.
13. Von Restorff Effect
This effect, known as the isolation effect, predicts that when multiple similar objects are present, the only one that is different from the rest will most likely be remembered.
14. Serial position effect
People usually remember better the first and last element in a series
It is a good habit to position the less important elements in the middle of a list because these elements are less likely to be stored in long-term memory.
Positioning the key actions in the extremes of elements such as navigation can increase their retention, although in this aspect and as we have spoken before, the ideal is only to include the essential content.
Pareto Principle and Parkinson’s Law.
These two laws do not apply directly to design, but it is very good to take them into account when dealing with any digital project.
The Pareto principle says that a minority of causes produces the most effects.
The application of this principle, which may well seem an axiom of Murphy’s law, advises that most efforts should focus on areas that can provide the most benefits to the majority of users.
That is to say, always during the initial processes of the projects to define in a completely clear way the objectives of the digital product so that most of the efforts are focused on obtaining these results