Visualising Fitts's Law (original) (raw)

An Interactive Visualisation of Fitts's Law with JavaScript and D3

Fitts's Law is one of the cornerstones of user interface research. In 1954, Fitts described the relationship between the target distance, width, and time needed for a target acquisition task. This later became known as Fitts's law [Fitts 1954].

This interactive illustration of Fitts's test should serve as an introduction to Fitts' law. It can also help the reader to visualise details not directly covered by the law and give further insights into motion in 2D target acquisition tasks.

We recomend a modern browser and fast computer to run the interactive tests. We developed on Safari and Chrome, so support for other modern browsers is likely but not guaranteed.

For a given target acquisition task, e.g. move the mouse to a certain point in the UI of an application and select it, Fitts's law desribes how the distance from start point to the target and the width of the target influence the index of difficulty (ID) of the task.

The law (in the Shannon formulation [MacKenzie and Buxton 1992]) states that

where A is the task's amplitude or distance, W is the target's width, and the resulting ID is the aforementioned Index of Difficulty.

From this formula we can see that the task gets harder, the farther away the target is and the smaller it is. This fits well with the common perception of such tasks. As it turns out, the time it takes to perform such a task is linearly correlated with its ID.

The Test

Below you can find an interactive Fitts's test. The test is laid out according to the recommendations found in [Soukoreff and Mackenzie 2004]. It should also follow the ISO standard [ISO 9241-9] which unfortunately was unavailable to us at the time of writing.

The test setup allows for multiple data sets to be created (e.g. to compare different input devices or parameters) and the test parameters (distance and width) can be adjusted. If parameters are set randomly, they will update after each test round, to allow for the continuous insertion of test data for different conditions.

Below you can see the test area. Beneath it you can find various plots that update in real time while data is entered. Data is accumulated in the live plots as long as the test parameters remain unchanged.

A word of Warning

This test setup is merely for educative and illustrative purposes. This is not a controlled experiment, and no definitive truths should be derived from it. It can, however, help in exploring different settings and be a usefull tool for constructing real Fitts's experiments.

fig. 1a: Test Area: Try to click the red circle as fast as possible but at the same time try to avoid errors.

randomize after round

Distance:

Width:

Data Sets: (click to make active)

fig. 1b: Deviation form straight path over path distance in px.

fig. 1c: Movement speed in px/ms over time in ms.

fig. 1d: Click position relative to approach direction.

fig. 1e: Time in ms over ID.

Evaluating the Test Data

The plots below show different evaluations of the test data. These plots update automatically after an inactivity of 2 seconds. Figure 2 shows a scatter plot of time over effective ID. The effective Index of Difficulty (IDe) is computed as follows:

where De is the mean distance from start to end point and the effective width We is defined as:

where σ is the standard deviation of the hit points on the target. We are computing σ in the target direction and perpendicular to it, and then use the 'smaller-of' heuristic (cf. [MacKenzie and Buxton 1992, Soukoreff and Mackenzie 2004]).

fig. 2: Time in ms over effective ID. Only parameter combinations (distance and width) with at least 3 samples are shown.

fig. 3: Histogram of effective throughput. Individual histograms for each data set are scaled to their respective maximum frequency.

Figure 3 shows a histogram of the throughput for each dataset. Throughput is computed as IDe/movement time and therefore has the unit bits/second. Throughput and its distribution can be one of the indicators of a device's performance. To make an encompassing assessment further metrics have to be used (e.g. error rate, and overall user comfort and user satisfaction).

Analysing Movement Path and Speed

fig. 4: Deviation form straight path over path distance in px.

fig. 5: Movement speed in px/ms over time in ms.

These two figures illustrate the mouse's movement path and speed during the test. In Figure 4 All data is anchored in the start position of each trial. The positional movement data is projected onto the target vector, to make comparisons over all approach directions easy.

Figure 5 finally shows the movement speed in pixel per ms over the movement time. Analysing the user's movements beyond Fitts's law can yield additional insights into different qualities of various input devices. For the sake of completeness and contrast we would like to refer to [Bootsma et al. 2004].

References

Fitts, P. M. (1954). The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 47(6), 381-391. doi:10.1037/h0055392

MacKenzie, I. S., & Buxton, W. (1992). Extending Fitts's law to two-dimensional tasks. Proceedings of the SIGCHI conference on Human factors in computing systems CHI 92, p, 219-226. ACM Press. doi:10.1145/142750.142794

ISO. (2000). Ergonomic requirements for office work with visual display terminals (VDTs) - Requirements for non-keyboard input devices. ISO 92419. International Organization of Standardization.

Soukoreff, R., & Mackenzie, I. (2004). Towards a standard for pointing device evaluation, perspectives on 27 years of Fitts's law research in HCI. International Journal of Human-Computer Studies, 61(6), 751-789. Elsevier. doi:10.1016/j.ijhcs.2004.09.001

Bootsma, R. J., Fernandez, L., & Mottet, D. (2004). Behind Fitts's law: kinematic patterns in goal-directed movements. International Journal of Human-Computer Studies, 61(6), 811-821. doi:10.1016/j.ijhcs.2004.09.004

Feedback

There is quite some room for improvement and we'd love to hear your feedback and comments. You can address them to Simon via email.

Acknowledgements

This interactive experiment was created as part of an assignment for the User Interface Technologies course at the University of Copenhagen in spring 2012. Group Members: Simon Wallner, Otilia Danet, Trine Eilersen, and Jesper Tved.

License

This project is licensed under the permissive MIT license, The full source is available on GitHub