Application of Fitzpatrick Law in mobile interface design

In the human-computer interaction theory, the Fitzpatrick rule is a very basic criterion. Whether it's a desktop interface design or a notebook interface design, you must follow this. Does this rule still apply to increasingly sophisticated mobile devices? Let's explore it together.

First, to find out what the Fitzpatrick law is. The basic point of the Fitts rule is that any time a person moves a pointer with the mouse, some features of the target on the screen make it easy or difficult to click. The farther away the goal is, the harder it is to arrive. The smaller the goal, the more difficult it is.

The time to reach the target from the mouse can be computed using the formula times = a + b log2 (d/s + 1).

Where: D: Mouse to reach the target distance; S: The width of the target (size) The Fitzpatrick Law provides a metric for human-computer interaction, which provides us with a scientific basis for designing human-computer interaction, which is to tell us how to design an interface that makes it easier for users to use and improve the user's operating experience.

The basic idea of the Fitzpatrick rule is that the smaller the target, the harder it is to operate.

Let's make a comparison between Windows and Mac:

Windows scroll bar, up arrow above, DOWN arrow below. This design is more in line with the daily mental model and leads the user more effectively.

The Mac's scroll bar, the UP ARROW and the down arrow are all pasted together, based on the Fitzpatrick rule, designed to make navigation faster.

In the user experience design, must take into account the operation of time, time-consuming, users will feel impatient, so need to study the Fitzpatrick law. Therefore, the operation of the object needs to be as large as possible, so that the operation is effortless.

　The application of Fitzpatrick principle in desktop

Size and distance

Dimensions and distances are the most commonly considered two points in an interactive design, especially when UI elements interact with the user. In general, buttons are smaller in size and distance from each other in order to ensure connectivity. Also pay attention to like "delete", "exit" This More "dangerous" button, should be as far as possible from some of the buttons often used to avoid misoperation.

　Edge

Corner

Because the mouse pointer can be stopped at the corners, the width of the edges can be considered infinitely large. The user's actions here can be precise, because the mouse can easily reach the edge. This is why the Start menu for Windows and the Mac menu are all in corners.

Top and bottom

Because the screen is limited, the top and bottom are easy to reach.

　　Menu

pop-up menu

The pop-up menu appears near the cursor, reducing the movement distance and reducing the time to move.

Ring Menu

The pop-up Ring menu makes the options more closely connected and closer. But why isn't the ring menu common? Because it's not easy to design first, and then it doesn't get popularized.

　　Fitzpatrick rules and mobile interface design

First, there are two types: one is mobile mobile interface, the other is a flat-panel mobile interface

Second, holding mode, the screen is also the key.

Although mobile devices are primarily touch-controlled, the Fitzpatrick rule is still valid. Unlike the desktop system, the fingers are unrestricted, free from corners and four edges of the screen.

　　Thumb Hot Zone

We can study the motion range of the thumb according to the thumb hot zone, and then consider the influence of the Fitzpatrick law.

　Fitzpatrick Law and cell phone

Screen Vertical

Vertical screen compared to the horizontal screen in the mobile phone operation is more common, the thumb of the hot area (note is the right thumb), but the thumb can not cover the edge, which allows the application of Fitzpatrick law some variables, but also the overall operation is not so smooth, one.

Therefore, some of the more dangerous Operation objects (close, delete, etc.) should be placed outside the hot zone, to avoid the wrong operation. High frequency use of the button where to put it, don't I say more?

Screen level

The general user uses the hands to carry on the operation, the hot area appears the following change

The area in the middle of the screen is not very easy to operate, as is the center and bottom of the top.

Hold In hand and click

The grip is not ideal for typing and gaming, but the finger is more extensive.

　Fitzpatrick Law and Tablet

Flat plate is more complex, the user's body posture is different, holding mode is not the same, the specific situation please own imagination.

Vertical direction

According to Josh Clark's "Touch Design", most people hold the middle of the left and right sides of the slab. So the two corners of the top are changed into the Operation Hot zone. Of course, in the input, many people will hold the bottom of the left and right side of the plate.

Horizontal direction

Generally are two hands operation, not like vertical, but also can hold one hand. Remember to keep the menu and button on the side as much as possible so that the thumb is easy to operate.

Reliance Mode

In this mode, the operation is not limited by the thumb hot zone, and the whole follows the Fitzpatrick rule.

Seamless conversion

In practical applications, users will be very casual in the direction of the screen conversion. However, some conversions are not so smooth, we need more seamless conversion, so that the interface more "flexible"

　Conclusion

Screen orientation, holding mode, if you want to improve the user experience of mobile devices, you must carefully study these two points. The Fitzpatrick rule still works in mobile devices, but it is more complex to be constrained by these two points.

Scientific thinking, careful observation, to create a better mobile user experience.