Take the YouTube product as an example to explain the application of the 7 laws of interaction design in YouTube.

1. Fitts’Law

Fitts’s law provides a human body movement model, established by Paul Fitts in 1954, which can accurately predict the time needed for moving and selecting targets.

In short, Fitts’s law points out that the time to acquire a target is a function of target distance and size. The time of a cursor to reach a target is related to the distance between the cursor position and the target position (D) and the target size (S). Its mathematical formula is: time T = a + B log2 (D/S+1). As the distance increases, the movement takes longer. As the size decreases, the choice takes longer.

——Interactoin Design Foundation

Interactoin Design Foundation

Fitts’s law is widely used in the design of UX and UI. For example, the law affects the practice of increasing the interactive button (especially on the mobile device operated by the finger), because the smaller buttons are not easily clicked. Similarly, the distance between the user’s task focus area and the task related button should be as short as possible.

On the home page of YouTube and the video playback page, the channel’s “subscribe” button is shown to the user in a very obvious red, and the weight of the button is still larger in the page. This way of expression can attract users’ attention in the shortest time, arouse the user’s desire to produce subscriptions, and the user’s mouse is more likely to reach the target position.

In addition, some high frequency functions such as search box, menu bar, personal center, and settings are located at the edge of browser window. Because, from the viewpoint of Fitz’s law, the window or the screen edge area is theoretically infinitely high or without line width, which is a huge target, and the user can’t use the mouse over them, and it is easy to reach the target.

In order to improve the user’s click accuracy, the actual click area of some buttons is larger than you see, such as the thumb, share, add, and more button combinations under the video playback window.

2. Hick’s Law

Hiker’s law or Hiker Hayman’s law, named by British and American psychologists William Edmund Hick and Ray Hyman, indicates that the more n a person faces, the longer the time (T) is required to make a decision. Its mathematical formula is: reaction time T=a+b log2 (n). If we choose more users in our design, the longer the user needs to make decisions.

“Wikipedia”

For a product with video content as its core, the quality of video will directly affect user interest, channel quality and algorithm recommendation results. Therefore, when the video evaluation system is designed, YouTube completes the basic data collection of the video evaluation system with the least option, that is, the upward thumb and the down thumb, and the two buttons. Look carefully, at the bottom of the two button, there is a status bar similar to the progress. I think this is a streamlined & weakened version of the rating star, and the combination of the button and the rating bar provides the user with a very quick evaluation interaction, and also shows the overall evaluation results of the video in real time: the more blue the ratio is. Big, that shows that the more the video is liked.

The next thing I want to share is that although it has nothing to do with YouTube, it has a lot to do with video evaluation and Hiker’s law.

OK, let me share with you a revision experience of Netflix, a global media giant. Last year, Netflix replaced the “5 star scoring system” in the form of “thumbs up and down”. It is said that Netflix will also shut down user reviews this summer. Netflix’s product manager believes that this change has two advantages:

The first advantage is to get rid of the fuzzy area of user evaluation and make the algorithm learning more efficient. For example, if a user likes a movie, but does not want to give too high marks, “three stars”, this kind of love is not only difficult to understand, the machine learning efficiency is also very low. Therefore, it is possible to eliminate vague grey areas by pointing out whether this “yes” judgment system.

The second advantage is that, compared to the choice of 5 stars, the two selection is easier to choose, reducing the user’s feedback threshold, so that not only the users prefer feedback, but also the feedback is increased, and the machine learning results are more accurate. That is to say, it gives a clear signal that Netflix knows that the user is interested in the content and recommends more similar content to the user, while the thumbs down will let the similar content no longer appear on the user’s home page.

3. Tesler’s Law

The law of complexity, also known as the law of conservation of complexity, points out that every application has complex inherent quantities that cannot be transferred or hidden. Instead, it must be processed in product development or user interaction. This raises the question of who should solve complexity. For example, whether software developers should increase the complexity of software code so that users are simpler, or the user should handle complex interfaces so that the software code can be simple. “Wikipedia”

This law is to say that the inherent complexity of product / system has a critical point, and the process beyond this point can no longer be simplified. We can only transfer this complexity. For example, if we find the function of the page is necessary, but the current page information overload, then we need to take up or transfer secondary functions.

YouTube more buttons at the top right corner, which contains other products under the YouTube brand; the buttons below the video also have more buttons; also in the video introduction and review area, the expansion and more buttons are designed.

4. Law of Proximity

The rule of intimacy is part of the perception organization Gestalt method. It points out that objects near or near each other are often combined. In other words, our brain can easily associate objects close to each other, much better than objects far apart. This clustering occurs because of the natural tendency of human beings to organize and combine things. On the other hand, the related objects should be close together. This kind of affinity rule is also mentioned in Robin P Williams’s design book for everyone to see.

YouTube divides the function entry and button according to certain rules in terms of region, location and vision.

5. Occam’s Razor

Occam’s razor (Latin: Lex parsimoniae “Minimalism”) is a problem solving principle, the simplest solution is often the right solution. When competing hypotheses are put forward to solve problems, a solution with minimum assumptions should be chosen. This idea owes to William of orkham (about 1287-1347), a Franciscan monk, a scholar, a philosopher and a theologian. – “Wikipedia”

Recalling his own painting, photography and design experience, I think: painting is to add, and photography and design is subtraction.

Occam’s shaver rule mainly means that when we make products / systems, we can not be too cumbersome in function. We should ensure simplicity and tooling. Why do you want to make the complexity easier? Because complexity is easy to make people lose. Only after simplification is it helpful for people to understand and operate. With the development of society and economy, time and energy have become scarce resources. In this sense, simplification means the real control of things. For example, iPhone and iPad have only a circular physical button, which is simple enough for even three year old children.

The loading page of the YouTube mobile terminal is only one Logo; in the inbox page, when the user has no friends, the system guides the user operation through a distinct button.

6. Miller’s Law (also known as the 7 + 2 Law)

In 1956, Miller, a American scientist, studied the ability of human short memory. He noticed that young people have about 5 to 9 units of memory, which is the 7 – 2 rule. This rule is an inspiration to our interface design. If you want users to remember the content of the navigation area or the order of a path, the number should be controlled at about seven, and the mobile terminal bottom tag is usually the most 5.

7. Error prevention law

The error prevention rule holds that most accidents are caused by negligence in design rather than negligence in human activities. The negligence can be reduced to a minimum by changing the design. This principle was originally used for industrial management, but it is also very useful in interaction design.

A walking, friendly error-proof design is usually shown in:

Tell the user in time where the operation is wrong. For example, when filling out forms, the system gives timely prompt error reporting.

Important and prudent operation, the system usually has two confirmations.

Providing the user with the opportunity to revoke;

Provide the user with the opportunity to correct the error.

summary

Unless you have a better choice, you will follow the standard.

Unless you have a better choice, you will follow the standard.

Comply with standards unless you have a better choice.

——Alan Cooper

Alan Cooper

Following the 7 + 2 law, we will share the 7 laws in the application of YouTube. In fact, there are many classic design rules, such as Gestalt and so on. I will find a product for you to share in detail.

1 thought on “Take YouTube as an example, let you easily understand the 7 laws of interaction design!”

Comments are closed.