nothing can be contributed for the new board but an article i translated some days ago...i know my enlish is limited,so i am sorry...

Fitts's UI Law Applied to the Web
Scott Berkun
Microsoft Corporation

May/June 2000

Summary: Discusses Fitts's UI Law and how it applies to designing Web pages. (3 printed pages)

Fitts的UI法则在WEB中的应用

概要：探讨了Fitts的UI法则以及怎么应用在设计网页中

Interface design is difficult in part because everything requires interpretation. A design that works for one task or one user might not be appropriate for another. In other types of engineering, like architecture or bridge building, designers can always rely on laws of physics and gravity to make designs work. There is at least one immutable rule for interface design that we know about, and it's called Fitts's Law. It can be applied to software interfaces as well as Web site design because it involves the way people interact with mouse or other pointing devices. Most GUI platforms have built-in common controls designed with Fitts's Law in mind. Many Web designers, however, have yet to recognize the powerful little facts that make this concept so useful. 

The basic idea in Fitts's Law is that any time a person uses a mouse to move the mouse pointer, certain characteristics of objects on the screen make them easy or hard to click on. The farther the person has to move the mouse to get to an object, the more effort it will take to get to. The smaller the object is, the harder it will be to click on. Pretty simple, right? It means that the easiest objects to locate and target are the ones closest to the mouse's current position and that have large target spaces. Fitts wrote several papers describing these findings, with significant mathematical rigor, expressing in formulas how you can measure the impact of different velocities, distances, and target sizes on a user's ability to click on objects. The worst possible object is one that is very far away from the current position of the cursor, and very small in size.

We tend to put toolbars on the top, bottom, and sides of the screen because of the unnatural boundary created by the edges of the screen. According to Fitts's Law, these targets are almost infinitely targetable, since they are impossible to go past. You could move your mouse as hard as you wanted to into the upper-left corner, and never get past the first pixel on the screen (unless you have a virtual desktop). Even without these boundaries, there are good visual and organizational reasons to put strips of commands at the top of the screen. It helps frame the page and provides a visual anchor that is easy to refer to. With the exception of physical screen borders, the shorter the distance you make the user navigate to perform a common task, the easier it will be for the user to target it precisely.

界面设计是比较难，因为每件东西都要求有充分的根据。一个设计适合完成某项任务或者适合一个用户却不一定适合另外一项工作或用户。在其他工程中，比如建筑或架设桥梁，设计师总可以依赖一些物理的重力的原理来完成设计工作。而界面设计当中，至少我们知道有一个不变的法则，叫“Fitts法则”。它可以象在网站中一样的运用软件界面中，因为它包含了人们用鼠标或其他设备进行交互的方式。多数GUI平台的常用控制设计都建立在Fitts法则之上。很多网页设计师，已经意识到这些法则非常有用。

Fitts法则最基本的观点就是任何时候，当一个人用鼠标来移动鼠标指针时，屏幕上的目标的某些特征会使得点击变得轻松或者困难。目标离的越远，到达就越是费劲。目标越小，就越难点中。漂亮简单，对么？这意味着要是目标定位越容易，距离鼠标当前位置就应该越近，目标占用空间应该有更大。Fitts花了好几页来描述这些发现，用明显数学式的严谨，用公式表达出了怎样去测量不同速度距离目标尺寸对用户点中目标的影响。目标和鼠标指针越远，尺寸越小，就越难点中目标。

我们倾向与把工具栏拖到顶部，底部，或者屏幕两边，因为屏幕产生的边缘。根据Fitts法则，这些目标已经无限接近，既然他们不可能跑出去。。你可以尽可能的移动你的鼠标到左上角，但你永远不可能点到屏幕外边去（如果你没有一个真实的桌面）。即使没有这些边界，还是有视觉很好的组织好的理由将命令条放到屏幕顶部。它帮助画出了页面结构，提供一个可见的锚点，容易。。排除显示器的边框，用户导航条到执行一个普通任务之间的距离越短，用户准确点中目标就越容易。

Figure 1. The blue line represents the boundary of the clickable region.

Something you can do to ensure that objects are easy to click on is to give them large target spaces. Take a look at the examples in Figure 1. The blue line represents the area of the button that can be clicked on. The design on the left requires the user to target a very small space. Most of the button is wasted space, since only the area around the text is clickable. With Fitts's Law, depending on how far they have to move the mouse to get to this button, it can be very difficult to target it without making mistakes. In some cases, only the text itself is clickable, which can be very small depending on the font size used. The design on the right makes use of the entire available space, and is much easier to target. If you are reading this on the Web, try to target each of these buttons by starting at different parts of the screen. You'll notice the effect of Fitts's Law, and how you have to pay more attention to targeting the example on the left. 

图1：蓝色线框是可点击范围的边界。

要确保物体容易被点中，你可以使它的空间大一些。看看图1，蓝色线画出了按钮可响应区域。左边的设计给用户一个很小的区域能点。很多按钮都很浪费空间，因为只有按钮上的文字可以被激活。根据Fitts法则，鼠标移动到按钮的距离越远，用户就越难准确的点中目标。在一些案例中，只有文字本身可以点击，而文字可能因为用的字体而显得很小。右边的设计充分利用了整个可用的区域，因而更容易点中。如果你是正在网上读这篇文章，可以去点一下这两按钮，让鼠标从屏幕的各个不同部分去试一下。你将发现Fitts法则的效果，你不得不花更大的精力去点中左边的按钮。

Figure 2. The example on the right shows how a larger clickable space is easier to target.

Figure 2 shows examples that illustrate how Fitts's Law can make buttons easier to click. Most Web browsers change the mouse cursor when the mouse is over a clickable target. This is a nice reinforcement, but the user shouldn't have to rely on that to figure out what is clickable on the screen. In both of these examples, the visuals imply that the clickable area is the entire space between the white borders. What you imply to a user should almost always be exactly what you give them. If you force your user to spend a lot of time wandering around the screen figuring out what they can click on and what they can't, they might not want to come back again.

Another important area where Fitts's Law is often ignored is on search results pages. Many search services offer the ability to jump from page to page in the results list in any order you like. Though it's rare that this kind of access is needed, it's not a problem by itself. What often happens is that the designer uses small fonts and poor spacing for the individual page choices. The results are several very small targets in close proximity to one another. Applying Fitts's Law to this example, it's clear that the individual items are difficult targets, and the likelihood of errors or the user needing extra time to target it properly are very high. The simplest solution is to replace the strip of individual pages with a large, easy to target next page of results (11-20) link. If your search results are ranked, the user will almost always want to view them in the set order anyway. Why make things more complex than necessary?

图2：右边的例子显示了大的可响应区域容易被点中

图2是Fitts法则让按钮容易被点中的图解例子。当鼠标在可点击区域时，大多数浏览器会改变指针形状。这是个很好的提醒，但用户不会依赖这个来找到屏幕上什么是可点的。在这两个例子里，这些图表明了白色边框中间的整个区域都是可以点击的。你告诉用户的应该就是你想给他们的。如果你强迫用户花很多时间在屏幕上摸索哪些可以点，哪些不能，他们恐怕再也不想来访问了。

Fitts法则经常被忽略的另一个重要区域是搜索结果页面。许多搜索服务允许从一个结果页面跳转到其他任何一页。但这很少被用，虽然服务本身并没有问题。通常，设计师用很小的文字和可怜的小区域来放每页的序号。结果，这些小序号都挤在一起。运用Fitts法则到这个例子中，很明显，每个单独项都是不同的目标，用户通常就不得不花额外的时间来点中目标。最简单的办法就是把这条页码换成大的容易点中的目标链接“下一页结果（11-20）”。如果你将搜索结果分类，用户就总想要看看他们。为什么总要增加不必要的麻烦呢？

Figure 3. An example of small click targets in close proximity, making it difficult to target them easily.

More Fitts
Searching the Web for Fitts's Law will reveal many of the specific papers and applications that have been developed in the decades since the initial studies were done. There is a deep legacy of work on cognitive/motor skills in relation to how user interaction with computers really works. Several interesting starting points are listed below: 

Tradeoffs in Targeted Movements: A Literature Survey of Related Work (http://www.cogsci.soton.ac.uk/bbs/LinkCited/bbs.plamondon.html) 
Drag Drop vs. Point and Click: An Interesting Study Relying on Fitts's Law (http://www.cs.sfu.ca/~inkpen/Papers/TR20_DD/tr20.html) 
The HCI bibliography is a great reference for existing research on any UI topic, including Fitts's Law (http://www.hcibib.org/). 
图3。一个例子，显示了小的靠的很近相似目标很难被准确点中。
 
更多Fitts法则
在网上搜一下Fitts法则，会找到很多很详细的文章，还有从开始到现在发展了数十年的应用。有一个关于计算机与用户交互的识别/运转方面的高级技巧，我列了几个有趣的标题在下边：
移向目标过程中的平衡：文化调查(http://www.cogsci.soton.ac.uk/bbs/LinkCited/bbs.plamondon.html) 
拖拽与点击：一个基于Fitts法则的有趣研究(http://www.cs.sfu.ca/~inkpen/Papers/TR20_DD/tr20.html) 
HCI圣经是个非常棒的参考，有各种UI主题的研究结果，包括Fitt's法则。(http://www.hcibib.org/). 
 
Human Factor Information
Scott Berkun is currently the UI design and usability training manager at Microsoft. He was a usability engineer on Internet Explorer versions 1.0 and 2.0, UI program manager on Internet Explorer 3.0 to 5.0, and lead program manager for Consumer Windows before moving to his current position. 

人机因素专栏信息

Scott Berkun是微软公司UI设计和可用性培训主管。他是IE1.0和2.0可用性工程师，IE3.0到5.0的UI程序经理，此前还是Consumer Windows 的程序经理。

Have comments, or suggestions for future columns? Want Scott to speak at your event or conference? Write to
hfactor@microsoft.com.

Check out the previous columns and UI design resources at
http://msdn.microsoft.com/ui/.

此文在ChinaUI论坛讨论贴：http://www.chinaui.com/bbs/dispbbs.asp?boardID=17&ID=6960