今日、Web設計では、 ユーザビリティなどの概念が支配的です。 メニューとのユーザーインタラクションの効果を高めるための多くのアプローチがあります。 この出版物では、 寄木細工のメニューで作業する例を示しますが、Windows 8のメニューとは異なり 、よりシンプルなスタイルです。
まず、フィッツの法則の文言を示します。
-運動の時間を運動の正確さと運動の距離に関連付ける感覚運動プロセスに関する一般的な法則:運動がより正確に行われるほど、運動を実施するためにより多くの補正が必要になり、したがって、この補正を行うにはより多くの時間が必要です。
フォーミュラ
T = a + b * log(D / W + 1)、
ここで、Tは(ms)のメニューを持つユーザーの操作時間、aとbは1つまたは別のデバイスでのユーザーの作業のスキルと能力の係数、Dはあるメニュー項目から別のメニュー項目までの距離、Wは別のメニュー項目に移動するときのメニュー項目の幅ですメニュー項目。
理解を深めるために、設計スキームを想像してください。
![](https://habrastorage.org/files/10f/360/998/10f36099894c4534a7a267c254162a66.png)
図-フィッツの法則の設計スキーム。
望ましい結果を達成するために、私は書いたプログラムでいくつかの実験を行いました。 現時点では、プログラムは設定したメニューを分析し、複数のユーザーのスキルとコンピュータースキルを考慮して結果を表示できます。
パラメータを使用して、寄木細工のメニューの平均時間を計算します:p1 = 120 px、p2 = 160 px、d = 10 px、n = 6、ここでnはメニュー項目の数です。
パラメータWi、Di、Tiが示されたテーブルが得られます。
私は | Wi | ディ | 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 |
平均値 | 115.458 | 147.634 | 324.657 |
表の結果は、寄木細工のメニューでのユーザーの操作の効率を高めるために、最も頻繁に選択される要素が2番と5番の下に配置されることを示しています。
実際の例として、次のタスクを検討します。特定の名前を持つ6つの要素で構成される寄木細工メニューを作成する必要があります。つまり、 マイページ 、 マイパートナー 、 マイオーダー 、 メッセージ 、 マイ会社 、 ピープルです。 各メニュー項目を選択する確率の表を次に示します。
1.マイページ | 0.25 |
2.私のパートナー | 0.17 |
3.私の注文 | 0.15 |
4.メッセージ | 0.13 |
5.私の会社 | 0.1 |
6.人々 | 0.2 |
この例では、計算の条件は任意のメニュー項目の同等ではない選択であるため、DとWの計算は確率を考慮して変更されます。
計算図に示すように、メニュー項目を2つのバージョンに順番に配置します。
最初のオプション:[マイページ]-> [メッセージ]-> [私の注文]-> [人]-> [会社]-> [パートナー]
2番目のオプション:[メッセージ]-> [マイページ]-> [私の注文]-> [私の会社]-> [人々]-> [私のパートナー]
最初のオプションの結果:D = 184.098 px、W = 140.578 px、T = 326.744 ms
2番目のオプションの結果:D = 175.121 px、W = 137.953 px、T = 324.026 ms
得られたデータから、メニュー項目の場所の2番目のオプションは最初のオプションよりも効果的であると結論付けることができます。
結論として、現時点では、プログラムは乾燥した理論的数値のみを考慮していると付け加えたいと思います。 将来的には、寄木細工の計算だけでなく、より複雑なメニューの計算も行われる予定です。 将来の実際のデータを取得し、理論的なデータと比較するために、選択の可能性を考慮して、実際のユーザー向けのシステムも作成され、特定の補正係数を取得することが可能です。
ご清聴ありがとうございました!
PS-残念ながら、私はあなたのためにすべての式を完全に説明することができませんでした、これは私がまだハブへの投稿を完全に理解していないという事実によるものですが、私のデータや観察が仕事や執筆に役立つなら嬉しいと言いたいです現在よりも優れた効果的なメニュー。
参照資料
1.ウィキペディアの記事/ユーザビリティ/ goo.gl/DJM3OP
2.ウィキペディアの記事/ Fitts Act / goo.gl/worZ3z
3. Gubko MV、Danilenko A.I.階層メニューの構造を最適化するための数学モデル//管理の問題。 -2010。-No. 4。 -S. 49-58。