Fitts law or how to use it
Hello, habrovchane!
To date, web design is such a concept as Usability , is predominant. There are many approaches to increase the efficiency of user interaction with the menu. In this publication I will give an example of working with the parquet menu , but in a more simplified style, not like the Windows 8 menu.
To begin with, we present the formulation of the Fitts law:
- a general law relating to sensory-motor processes, connecting movement time with accuracy of movement and distance of movement: the further or more precisely the movement is performed, the more correction is needed to perform it, and accordingly, more time is required to make this correction.
')
Formula:
T = a + b * log (D / W + 1),
where T is the user time of the menu in (ms), a and b are the coefficients of skills and abilities of the user to work with a particular 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 more understanding, we will present the design scheme:
Figure - Estimated scheme of the law of Fitts.
To achieve the desired results, I conducted several experiments on the program I wrote. At the moment, the program can analyze the menu you specify and provide results for several users, taking into account their 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 obtain a table in which the parameters Wi, Di, Ti are specified.
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, consider the following task: it is necessary to build a parquet menu that will consist of 6 elements with specific names, namely, My Page , My Partners , My Orders , Messages , My Companies , People . We give a table of the probability of choosing each menu item.
In this example, the condition for the calculation is not equiprobable selection of an arbitrary menu item, so the calculation of D and W will be changed taking into account the probability.
Arrange menu items in two versions sequentially, as shown in the design diagram:
The first option: My page -> Messages -> My orders -> People -> My companies -> My partners
The second option: Messages -> My page -> My orders -> My companies -> People -> My partners
Results for the first variant: 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 data obtained, we can conclude that the second option for arranging menu items is more efficient than the first.
In conclusion, I would like to add that at the moment the program considers only dry theoretical figures. In the future, there will be a calculation not only for the parquet, but also for more complex menus. A system will also be created for real users, taking into account the probability of selection, in order to later compare real data with theoretical ones and it is possible to obtain a certain correction factor.
Thanks for attention!
PS - Much to my regret, I could not fully describe all the formulas for you, this is due to the fact that I have not fully understood the posting on the habr, but I want to say that I will be glad if my data or observations will help in work or writing better and more effective menu than it is now.
1. Wikipedia article / Usability / goo.gl/DJM3OP
2. Wikipedia article / Fitts law / goo.gl/worZ3z
3. Gubko, MV, Danilenko, AI, A Mathematical Model for Optimizing the Structure of the Hierarchical Menu, Problems of Control. - 2010. - №4. - P.49-58.
To date, web design is such a concept as Usability , is predominant. There are many approaches to increase the efficiency of user interaction with the menu. In this publication I will give an example of working with the parquet menu , but in a more simplified style, not like the Windows 8 menu.
To begin with, we present the formulation of the Fitts law:
- a general law relating to sensory-motor processes, connecting movement time with accuracy of movement and distance of movement: the further or more precisely the movement is performed, the more correction is needed to perform it, and accordingly, more time is required to make this correction.
')
Formula:
T = a + b * log (D / W + 1),
where T is the user time of the menu in (ms), a and b are the coefficients of skills and abilities of the user to work with a particular 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 more understanding, we will present the design scheme:
Figure - Estimated scheme of the law of Fitts.
To achieve the desired results, I conducted several experiments on the program I wrote. At the moment, the program can analyze the menu you specify and provide results for several users, taking into account their 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 obtain a table in which the parameters Wi, Di, Ti are specified.
| i | Wi | Di | Ti |
| one | 143.323 | 193.484 | 329.433 |
| 2 | 131.39 | 152.678 | 316.512 |
| 3 | 143.323 | 193.484 | 329.433 |
| four | 143.323 | 193.484 | 329.433 |
| five | 131.39 | 152.678 | 316.512 |
| 6 | 143.323 | 193.484 | 329.433 |
| Average value | 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, consider the following task: it is necessary to build a parquet menu that will consist of 6 elements with specific names, namely, My Page , My Partners , My Orders , Messages , My Companies , People . We give 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 not equiprobable selection of an arbitrary menu item, so the calculation of D and W will be changed taking into account the probability.
Arrange menu items in two versions sequentially, as shown in the design diagram:
The first option: My page -> Messages -> My orders -> People -> My companies -> My partners
The second option: Messages -> My page -> My orders -> My companies -> People -> My partners
Results for the first variant: 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 data obtained, we can conclude that the second option for arranging menu items is more efficient than the first.
In conclusion, I would like to add that at the moment the program considers only dry theoretical figures. In the future, there will be a calculation not only for the parquet, but also for more complex menus. A system will also be created for real users, taking into account the probability of selection, in order to later compare real data with theoretical ones and it is possible to obtain a certain correction factor.
Thanks for attention!
PS - Much to my regret, I could not fully describe all the formulas for you, this is due to the fact that I have not fully understood the posting on the habr, but I want to say that I will be glad if my data or observations will help in work or writing better and more effective menu than it is now.
Bibliography
1. Wikipedia article / Usability / goo.gl/DJM3OP
2. Wikipedia article / Fitts law / goo.gl/worZ3z
3. Gubko, MV, Danilenko, AI, A Mathematical Model for Optimizing the Structure of the Hierarchical Menu, Problems of Control. - 2010. - №4. - P.49-58.
Source: https://habr.com/ru/post/247257/
All Articles