Fitts law or how to use it
Hello, Khabrovites!
Today in web designing such a concept as Usability is dominant. There are many approaches to increasing the effectiveness of user interactions with menus. In this publication, I will give an example of working with a parquet menu , but in a more simplified style, not similar to the Windows 8 menu.
To begin, we give the wording of Fitts's law:
- a general law relating to sensory-motor processes that relates movement time to movement accuracy and distance movement: the farther or more accurately the movement is performed, the more correction is needed to complete it, and accordingly, more time is required to make this correction.
Formula:
T = a + b * log (D / W + 1),
where T is the operating time of the user with the menu in (ms), a and b are the coefficients of skills and abilities of the user's work with this or that device, D is the distance from one menu item to another, W is the width of the menu item when moving to it from another menu item.
For a better understanding, we present a calculation scheme:
Figure - Design scheme of the Fitts law.
To achieve the desired results, I conducted several experiments on the program I wrote . At the moment, the program can analyze the menu you set and display results for several users, taking into account their skills and computer skills.
We calculate the average time for the parquet menu with the parameters: p1 = 120 px, p2 = 160 px, d = 10 px, n = 6, where n is the number of menu items.
We get a table in which the parameters Wi, Di, Ti are indicated.
The results of the table show that in order to increase the efficiency of user interaction with the parquet menu, the most frequently selected elements should be located under No. 2 and No. 5.
As a practical example, we consider the following task: it is necessary to build a parquet menu, which will consist of 6 elements with certain names, namely, My page , My partners , My orders , Messages , My companies , People . Here is a table of the probability of choosing each menu item.
In this example, the condition for the calculation is the non-equiprobable choice of an arbitrary menu item, so the calculation of D and W will be changed taking into account the probability.
We will arrange the menu items in two options sequentially, as shown in the calculation diagram:
First option: My page -> Messages -> My orders -> People -> My companies -> My partners
Second option: Messages -> My page -> My orders - > My companies -> People -> My partners
Results for the first option: D = 184.098 px, W = 140.578 px, T = 326.744 ms
Results for the second option: D = 175.121 px, W = 137.953 px, T = 324.026 ms
From the received data we can conclude that the second option for the arrangement of menu items is more effective than the first.
In conclusion, I would like to add that at the moment the program considers only dry theoretical numbers. In the future, there will be a calculation not only for parquet, but also for more complex menus. A system will also be created for real users, taking into account the probability of choice, in order to obtain real data in future and compare with theoretical ones and it is possible to obtain a certain correction factor.
Thanks for attention!
PS - Unfortunately, I could not fully describe all the formulas for you, this is due to the fact that I have not yet fully understood the posting on the hub, but I want to say that I will be glad if my data or observations help in work or writing better and more effective menu than there is now.
1. Wikipedia article / Usability / goo.gl/DJM3OP
2. Wikipedia article / Fitts law / goo.gl/worZ3z
3. Gubko MV, Danilenko A.I. Mathematical model for optimizing the structure of the hierarchical menu // Control problems. - 2010. - No. 4. - S. 49-58.
Today in web designing such a concept as Usability is dominant. There are many approaches to increasing the effectiveness of user interactions with menus. In this publication, I will give an example of working with a parquet menu , but in a more simplified style, not similar to the Windows 8 menu.
To begin, we give the wording of Fitts's law:
- a general law relating to sensory-motor processes that relates movement time to movement accuracy and distance movement: the farther or more accurately the movement is performed, the more correction is needed to complete it, and accordingly, more time is required to make this correction.
Formula:
T = a + b * log (D / W + 1),
where T is the operating time of the user with the menu in (ms), a and b are the coefficients of skills and abilities of the user's work with this or that device, D is the distance from one menu item to another, W is the width of the menu item when moving to it from another menu item.
For a better understanding, we present a calculation scheme:
Figure - Design scheme of the Fitts law.
To achieve the desired results, I conducted several experiments on the program I wrote . At the moment, the program can analyze the menu you set and display results for several users, taking into account their skills and computer skills.
We calculate the average time for the parquet menu with the parameters: p1 = 120 px, p2 = 160 px, d = 10 px, n = 6, where n is the number of menu items.
We get a table in which the parameters Wi, Di, Ti are indicated.
| i | Wi | Di | Ti |
| 1 | 143.323 | 193.484 | 329.433 |
| 2 | 131.39 | 152.678 | 316.512 |
| 3 | 143.323 | 193.484 | 329.433 |
| 4 | 143.323 | 193.484 | 329.433 |
| 5 | 131.39 | 152.678 | 316.512 |
| 6 | 143.323 | 193.484 | 329.433 |
| Mean | 115.458 | 147.634 | 324.657 |
The results of the table show that in order to increase the efficiency of user interaction with the parquet menu, the most frequently selected elements should be located under No. 2 and No. 5.
As a practical example, we consider the following task: it is necessary to build a parquet menu, which will consist of 6 elements with certain names, namely, My page , My partners , My orders , Messages , My companies , People . Here is a table of the probability of choosing each menu item.
| 1. My page | 0.25 |
| 2. My partners | 0.17 |
| 3. My orders | 0.15 |
| 4. Messages | 0.13 |
| 5. My companies | 0.1 |
| 6. People | 0.2 |
In this example, the condition for the calculation is the non-equiprobable choice of an arbitrary menu item, so the calculation of D and W will be changed taking into account the probability.
We will arrange the menu items in two options sequentially, as shown in the calculation diagram:
First option: My page -> Messages -> My orders -> People -> My companies -> My partners
Second option: Messages -> My page -> My orders - > My companies -> People -> My partners
Results for the first option: D = 184.098 px, W = 140.578 px, T = 326.744 ms
Results for the second option: D = 175.121 px, W = 137.953 px, T = 324.026 ms
From the received data we can conclude that the second option for the arrangement of menu items is more effective than the first.
In conclusion, I would like to add that at the moment the program considers only dry theoretical numbers. In the future, there will be a calculation not only for parquet, but also for more complex menus. A system will also be created for real users, taking into account the probability of choice, in order to obtain real data in future and compare with theoretical ones and it is possible to obtain a certain correction factor.
Thanks for attention!
PS - Unfortunately, I could not fully describe all the formulas for you, this is due to the fact that I have not yet fully understood the posting on the hub, but I want to say that I will be glad if my data or observations help in work or writing better and more effective menu than there is now.
List of references
1. Wikipedia article / Usability / goo.gl/DJM3OP
2. Wikipedia article / Fitts law / goo.gl/worZ3z
3. Gubko MV, Danilenko A.I. Mathematical model for optimizing the structure of the hierarchical menu // Control problems. - 2010. - No. 4. - S. 49-58.