Laws of UX || According to the LAW
Right way to do it!
1. Aesthetic-Usability Effect
One of the things that a lot of UX research teams encounter, is when a user struggles with the UI of a product or application, only to comment on how great the overall design and look of the interface.
Despite having encountered so many errors and challenges, the user only talks about the interface’s aesthetics. While this may sound absurd, there are a lot of these instances in usability testing. In fact, this is called the aesthetic usability effect.
What does the aesthetic usability effect refer to?
The aesthetic usability effect is where people see aesthetically designed interface as easier to use compared to the less aesthetically designed interface. In other words, people are inclined to have a positive emotional response and experience to the visual design of the interface that makes them more tolerant of its usability issues.
The usability effect is one of the reasons why a good user experience cannot just be about a good functional user interface (UI), but also it should be attracted as well.
This has been observed in several experiments, which left significant implications on the acceptance, use, and performance of a design.
BY Eka Juliantara: He 2 music player design. Let’s called it A and B. Like other music players, they have basic features (usability) that users need like play, previous, next, music info, duration, shuffle, repeat, etc. ‘A’ has pleasant interface than ‘B’. He hide shuffle and repeat feature on ‘A’ while ‘B’ has a complete feature (usability). He ask users to choose between ‘A’ and ‘B’. The result is 75% choosing ‘A’ while 25% choosing ‘B’. Why? He think ‘B’ has a complete feature that user needs.
2. Doherty Threshold
A response time that does not exceed 400 milliseconds (4/10ths of a second). Conceived by Walter Doherty and Ahrvind Thadani, the Doherty threshold is an objective for keeping the user thoroughly engaged when interacting with a computer.
If a response appears after the 400 ms threshold, users eventually become disinterested according to a study done in the late 1970s. Doherty discovered that the longer the response time, the more time users take to think about the next task and productivity is reduced. The study was published in the IBM Systems Journal in 1982, which then became known as the Doherty threshold.
Example 1— Canva: An animated progress bar is used to keep users’ attention whilst waiting for their designs to download, which varies in time depending on the content.
3. Fitts’s Law
Fitts’s Law provides a model of human movement, established in 1954 by Paul Fitts, which can accurately predict the amount of time taken to move to and select a target. Although originally developed according to movement in the physical world, in human-computer interaction Fitts’s Law is typically applied to movement through the graphical user interface using a cursor or other type of pointer. Fitts’s Law has been formulated mathematically in a number of ways; however, its predictions are consistent across the many different mathematical representations.
Example 1 — Pop-up menus better support immediate selection of interactive elements than dropdown menus as the user does not have to move the cursor from its current position. Therefore, graphical designs that allow the user to interact without moving help to reduce the ‘travel time’.
Example 2— Task bars impede movement through the interface as they require a more time-consuming level of precision than when options are placed on the outer limits of the screen. Although unconnected to Fitts’s Law, multiple task bars can introduce a certain level of confusion or at the very least require the user to engage consciously with the screen arrangement to ensure appropriate selection.
4. Von Restorff Effect
Von Restorff, H. (1933) The effects of field formation in the trace field
The Von Restorff effect (named after psychiatrist Hedwig von Restorff (1906–1962)), also called the isolation effect, predicts that an item that “stands out like a sore thumb” is more likely to be remembered than other items. This is a bias in favour of remembering the unusual.
Items that stand out from their peers are more memorable
One example, known as the Von Restorff effect, is that, in any given number of items to be learned, an item that is notably different from the rest in size, color, or other basic characteristics will be more readily recalled than the others.
5. Law of Common Region
Gestalt principles guide how people visually perceive the world — including digital interfaces. Specifically, these principles explain how people decide whether several individual elements are part of the same group and, thus, are related in some way. This knowledge helps them understand and interact with the world in general, and also applies to controls and content on screens.
The original set of Gestalt principles was discovered in the first half of the twentieth century and includes proximity, similarity, and closure. Later research at the end of the twentieth century added a few more grouping principles to the list discovered initially by the Gestalt psychologists. Among these, perhaps the most relevant for UX is that of common region.
The principle of common region says that items within a boundary are perceived as a group and assumed to share some common characteristic or functionality.
Example 1— In the above graphic, the boundary around the three middle circles causes them to appear as one group and separates them from the other, less-related surrounding circles. In a user interface, using a border or background color to create a container for related items helps users quickly and effectively understand the UI’s structure and which elements are connected.
Example 2 — Give related elements a frame to show that they belong together. If you define a clear border, you will be showing your users that the elements within it work as a group.
Cards are often used in UX design. Pictures, descriptions, prices or CTA buttons are placed within one closed region. Users understand the card and everything inside it as a separate entity from the card next to it.
6. Law of Proximity
The law of proximity describes how the human eye perceives connections between visual elements. Elements that are close to each other are perceived to be related when compared with elements that are separate from each other.
The law of proximity allows us to use whitespace, for example, to build perceived relationships between different elements.
Example 1— You can also see the Law of Proximity exemplified in the example photo above. The boats are clumped together in sets of columns. When looking at the picture, people automatically associate the four columns of boats as two groups.
Example 2 — When we look at the IBM logo, we see three letters composed of short horizontal lines stacked above each other instead of the eight horizontal lines interspersed with uniform gaps.
7. Law of Similarity
Similarity (also known as Invariance): The human eye tends to build a relationship between similar elements within a design. Similarity can be achieved using basic elements such as shapes, colors, and size.
The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated. The brain seems to craft a link between elements of a similar nature. Then, we perceive them in a relationship with each other, separating them from other elements in a design. Human eyes are good at filling in “gaps” or connecting “dots”. It happens naturally.
Example 1—In this image I perceive the chairs to each be in distinct rows because of their similar coloring of red. This is an application of the Gestalt law of similarity. The Gestalt law of common fate, or the chairs’ orientation in the same direction, is also prevalent as it allows me to group them together. The monocular clue of relative height is apparent as I view the people in the photograph to be more distant than the chairs in the bottom righthand corner because we tend to perceive objects higher in our field of vision as being farther away and lower as being closer. Interposition is also relevant in perceiving the distance of the people as the chairs partially block them, therefore allowing us to determine that the people are farther away than the chairs.
Example 2— In the logos of NBC objects and patterns have similar visual characteristics, though they are not identical in color, shape, or size.
All the leaves are of different colors but are perceived as similar and in the group because of their same shape.
8. Serial Position Effect
The serial position effect, a term coined by Hermann Ebbinghaus, a German psychologist and pioneer of memory research, describes how the position of an item in a sequence affects recall accuracy. There are two main concepts involved in the serial position effect:
- The Primacy Effect: Items that are presented at the beginning of a list are recalled with greater accuracy than items in the middle of a list.
- The Recency Effect: Items that appear at the end of a list are also more likely to elicit better recall than items presented in the middle of a list.
Example 1— This graph illustrates the tendency of a user to better recall items from the beginning as well as the end of a list or sequence. The middle items are the most difficult to remember.
Example 2 — Twitter’s task bar is similar, keeping the “home” button on the far left and the “direct message” button on the far right.
Example 3— Netflix’s sales page features its most expensive option both highlighted and positioned at the far right side of the page.
9. Zeigarnik Effect
In the 1920s, Bluma Wulfovna Zeigarnik conducted a study on memory in which she compared memory in relation to incomplete and complete tasks. She found that incomplete tasks are easier to remember than successful ones and this is now known as the Zeigarnik effect.
Zeigarnik Effect is a brilliant technique designers use to make users do certain things they wouldn’t do otherwise. For example, LinkedIn uses this trick to make users complete their profile. It has a profile strength indicator which includes a link that says “Improve Your Profile Strength.” Once you click on it, you’ll see all the things you can do to complete your profile and move up a level. (Beginner to Intermediate to All star)
Example 1 — The best example of Zeigarnik effect in UI is definitely the use of progress bars which inform users of how close they are to complete a task by saying you have two more steps left or by showing percentage of completion along the journey.
Example 2— Google Calendar allows you to create tasks and track your progress with them. The incomplete circle is the visual translation of the Zeigarnik Effect.
10. Goal-Gradient Effect
Coined by behaviorist Clark Hull in 1932, the Goal Gradient Effect states that as people get closer to a reward, they speed up their behavior to get to their goal faster. In other words, people are motivated by how much is left to reach their target, not how far they’ve come.
Example 1 — We can relate to this: as we get closer to completing a goal we can feel more motivation to complete it. Getting close to the last piece of a puzzle, the last clue of a murder mystery or escape room, the final chapter of your book (perhaps), the final kilometer of a marathon, or as you find you need just one more stamp to get a free coffee, being so close to our goal can give us a motivation lift to get to the end.
Example 2— This application of the Goal Gradient Effect is interesting because it isn’t driving customers to complete a checkout process or finish filling out their dating profile. Instead, this use of the Goal Gradient can change customer perceptions of time by providing a transparent waiting process. The closer your Uber gets to you, the faster the time seems to pass.
The closer your Uber gets to you, the faster the time seems to pass.
