Fitts' Law and user interface design

The notion of usability was previously mentioned in the [HCI] talk about human-machine interface design and Usability and used the Windows Start button to illustrate the pitfalls that can be easily overlooked in designing the UI. This article I will continue to explore interface design and usability and focus on Fitts'-Law, one of the most important laws in UI design.

It is not difficult to design the software's interface, but in many cases intuitive design does not necessarily achieve the intended purpose. This is the study of usability you want to know, in the end what kind of design is the "better" design? What kind of design will actually make usability worse?

Taking menu bar as an example, menu is one of the most basic elements of the graphical interface (GUI). Modern software functions become more and more powerful. As a result, the menu becomes more and more and more and more deep. Every menu There are almost sub-menu after expansion, and even sub-sub-menu and so complex menu. Every time I teach my parents use a computer, I feel that the Windows menu is designed to torture users, the wonderful thing is rarely heard people complain about this interface is difficult to use, but have to force myself to "learn" this Kind of operation mode

I would like to see this article readers, have long been accustomed to operating the GUI, and never thought menu can have any easy to use or difficult to use the other. So first let's think about how hard it is to turn on a feature buried in a sub-menu (assuming it's a file / recently opened / a file .txt is fine). First, move the cursor to "File" in the menu bar and stop; second, press the left mouse button to open the file menu, and move the cursor "vertically down" to "Recently Opened" to stop; Third, wait for the sub-menu to open and move the cursor "horizontally to the right" into the sub-menu. Fourthly, find the file ".txt" again vertically down and stop by the left button. Well, imagine you can try to use your non-dominant mouse to do a look.

If you are already familiar with the GUI user, presumably do not feel that the operation menu is difficult, but when you are forced to use non-dominant hand operation, we will feel greatly reduced operating speed, or even no precise control of cursor entry sub-menu, then we have a chance to realize that the operation of the mouse is not easy. In addition, if you look closely, you can find it hard to move the cursor to any place than to enter the sub-menu, because it is necessary to keep the cursor horizontally in a narrow "tunnel". If you are not careful Out of this tunnel, the sub-menu will close.

An interesting case occurred in GIMP, a well-known open source image processing software (arguably a free version of photoshop). The original GIMP team had made an interesting decision, deciding to remove the menu bar fixed to the top of the window and replace it with a context menu that could be opened right-click anywhere. Because the context menu can be opened anywhere, GIMP's development team thinks it will speed up access to the menu. This idea is very intuitive, but really help efficiency?

Since I said so much, the answer of course is not yes.

Context menu does not help efficiency, but makes it worse. why?

As shown above, to enter the second floor from the menu of the first floor, you must go through the first narrow tunnel (red area) to enter the second floor menu. If you go straight to a straight path to the desired target, you will first go through other items on the first level, causing different sub-menus to be opened. The traditional menu bar is also sub-menu, so intuition may not feel more than one layer of sub-menu will have much effect, but in fact this is the cursor in a tunnel design greatly reduces the operation of the cursor Speed, and speed can generally be exponentially different from what can be referred to a target via any path.

Fitt's Law, put forward by Fitt in 1954, can be said to be the first "law" in the field of human-computer interaction and established a mathematical model for the action of mankind at any target. The basic idea is that the time (T) that is moved to the target can be expressed as a function of the target distance (D) and the target size (W). Specifically, T = a + b log2 (D / W + 1), a and b are both constants.

Fitt's Law tells us that the time it takes to move to any target is approximately proportional to the target's distance divided by the target's logarithm. In other words, the farther the target is moved, the longer the target is, and the shorter the target is, the closer the target is or the larger the target is. Interestingly, the effect of distance and target size is not large, and logarithms reduce the impact of these two variables by an index level. A 1000-fold change in distance does not make 1000 times the time, but becomes log2 (1000), about 10 times longer.

On the software interface, Fitt's Law has a special case worth discussing. Mouse cursor in the computer, there is a basic characteristic of the scope of its activity is limited to the screen, as long as the cursor to the edge of the screen, no matter how to continue to move the mouse in the same direction, the cursor or only stay on the edge. One of the most interesting examples of this feature is dramatic UI design changes, the menu bar design for Windows and Mac OS X.

Microsoft's Windows UI design since ancient times is the menu bar on the window under the title bar, and Mac OS take a completely different design: the menu bar fixed at the top of the screen. Most people think most of these two designs are just habits, there is no objective difference, but if you have learned Fitt's Law, what kind of design do you think is better?

If you apply Fitt's Law directly, the first answer is likely to be Windows design is better, because when the mouse moves from the window to the menu bar, the distance will be closer to the top of the screen. However, do not forget to consider the effects of the edge of the screen. Mac put the menu bar at the top of the screen, but the distance has become longer, but the size of the target has become "infinity." Because the edge of the screen will block the movement of the cursor, so users can enjoy the power of the mouse up one by one, without stopping to "align" the target, which is equivalent to the size of the target has become infinity. In Fitt's Law, when W is infinity, the result of the entire log function becomes zero, which means that T becomes a simple constant a, regardless of distance or size.

By comparison, we can see that it is interesting for the Mac to put the menu bar on top of the screen because it greatly reduces the amount of time it takes to place the mouse over the menu bar and aim at the target. The user simply pushes the mouse Move forward, it will naturally enter the menu bar inside. The example of the Windows Start button I mentioned in [HCI] on Human-Machine Interface Design and Usability is also the same as the example of menu bar.

So far we have seen three forms of menu. For efficiency, we know that the design of the Mac is better than the design of the Windows, and if compared with GIMP's context menu? From Fitt's Law we can see that the design of the Mac has reached the limit, in any case can not be discarded That constant a, so we can directly from the Windows design and GIMP design which is relatively poor XD.

Mentioned earlier, sub-menu is a very difficult point operation, in addition to moving the cursor to the target, but also to limit the middle of the path in a tunnel. After Fitt's Law, Accot and Zhai proposed the Steering law. The conclusion is very simple, let the cursor through a width W tunnel movement distance D time T = a + b * D / W. In other words, limiting the movement path, the time it takes to move to the target and Fitt's Law is an exponential gap, which is why the rush jerk can turn into a million-dollar prize The challenge, but free to move the mouse is much simpler.

Once you know Steering law, look back at the sub-menu design and you will find sub-menus an inhumane design. The menu at each level is actually a steering operation: vertical menu movement is relatively simple, because the menu width is usually quite wide; but every time you want to move horizontally into the next sub-menu, it is a difficult challenge, because at this time The width becomes the height of the menu item, which is usually just a letter high. And Fitt's Law is different, the width (W) n times smaller, the impact of time is no longer a logarithm, and really is to make time n times. So, if you can quickly and accurately enter the multi-layer sub-menu mouse master, in fact, there is also the ability to participate in the current rush game!

Looking back at the menu design for Windows and GIMP, you can obviously compare it. GIMP turns all menu operations into steering operations. Although Windows also has sub-menu issues, at least the first level is still an arbitrary point-and-click operation, so in terms of efficiency, GIMP design is a big mistake ...

Finally, by the way, two Windows and Mac OS X solutions to the problems posed by sub-menus are provided. Both Microsoft and Apple know that sub-menus are hard to manipulate, so they actually have a slightly intimate design on the interface. Microsoft's approach is, in the cursor to enter the sub-menu, if you accidentally moved out of the tunnel, as long as some time to move back, sub-menu will not disappear. In fact, this method has some risks, mainly because the "time" is difficult to control. If this setting time is too short, it would not have much effect; but if the setting is too long, the user really wants to move to another menu item to open another sub-menu, you will feel the system reaction is too slow The kind of Dun Dun's feeling). So, Microsoft's this method is actually not very effective solution to this problem.

And while Apple does the same thing, the sub-menus do not disappear right away, but they add a clever design: sub-menu delays disappear only in the triangle formed by the top and bottom of the cursor to the sub-menu . In other words, if the user wants to enter the sub-menu, he can even move the mouse in a straight line without accidentally opening another different sub-menu (just move within the set delay time). And if the user wants to open another sub menu, then intuitively move the mouse down will naturally avoid this triangular area to avoid the "dunk" feeling.

In the UI design, Apple has always been much more than any other company. Although this clever design is small (no one even notices it), it can naturally reduce user frustration and fluency in repeated daily use, which is why I often say that Mac has many intimate Design, it will naturally make people feel very happy to use, and other systems in the UI design effort was obviously inadequate.

Source Address: http://blog.csdn.net/Like....../4660796.aspx