Doubanの新しいインターフェース「フィッツの法則」は、その背後にある考え方を理解するのに役立ちます

Doubanが刷新された後、Doubanのナビゲーションバーのデザイン機能は幅広い議論を巻き起こしました。その中でも、ユーザーインターフェースデザインにおけるフィッツの法則の適用は、再び皆の注目と注目を集めました。

Haixu Roy 氏の記事では、フィッツの法則と製品インターフェースにおけるその応用例をわかりやすく紹介しています。この記事からわかるのは、ある観点から見ると、新しく改訂された Douban インターフェースは「フィッツの法則」に従い、ユーザー操作を継続的に最適化した結果であるということです。

今日はフィッツの法則についてお話します。インターネット上にはたくさんの情報があり、よく話題になっています。以下はオンラインで見つけたもので、モバイル端末での FITTS のいくつかのアプリケーションを示しています。

1. フィッツの法則とは何ですか?

物体が開始位置から最終目的地まで移動するのにかかる時間は、目的地までの距離 A と目的地のサイズという 2 つの要素によって決まります。

t = a + b log2 (2A / W)

ここで、a(=0.230秒)、b(=0.166秒)は経験的パラメータ、Aは指示された位置とターゲット間の距離、Wはターゲットのサイズです。これらは、特定のポインティングデバイスの物理的特性、およびオペレーターと環境の要因によって異なります。

結論: ターゲットが大きいほど、ポイントする速度が速くなり、時間が短くなります。同様に、ターゲットが近いほど、ポイントする速度が速くなり、時間は短くなります。つまり、ターゲットの位置を特定する時間は、ターゲットと現在の位置の間の距離と、ターゲットのサイズによって決まります (もちろん、特定のシナリオでは他の要因もあります)。

2. フィッツの法則の応用

現在ではPCやモバイル端末製品の設計に活用されています。

1. ユーザーインターフェイスを設計する際、ボタンや一部の GUI コントロールのサイズを適切に設計する必要があります。比較すると、小さなコントロールをクリックするのは比較的困難です。そのため、現在のソフトウェアやウェブサイトの GUI 設計プロセスでは、ツールバーのアイコンが大きくなり、テキスト説明のあるボタンの背景領域も増加しています。

2. マウスをどこに移動しても、マウスは常に画面の端に留まることができるため、端や角の領域は他の領域よりもアクセスしやすくなります。 Mac OS X 製品のシステムインターフェース設計における Dock 設計、上部のメニューバー設計、Windows XP システムインターフェースの左下隅にある「スタート」ボタン、および Mac OS X システムインターフェースのメニューバー設計はすべて、この理論の実際の応用です。

3. ポップアップメニューは、ユーザーがメニュー間をスワイプする必要がないため、ドロップダウンメニューよりも速く選択されます。

4. パイメニューはリニアメニューよりも選択しやすく、エラー率も低くなります。これには 2 つの理由があります。

パイメニューの各メニュー項目はメニューの中心から同じ距離にあります

パイメニュー内の各メニュー項目のくさび形の対象領域は非常に大きく、通常は画面の端まで広がります。

5. ターゲットポイントの位置は、実際にはエッジ上のいくつかのピクセルと、エッジの外側の領域全体になります。ということで、ターゲットポイントは十分に大きいようです。その理由は、フィッツの法則に基づいており、その分母の 1 つが増加すると、インターフェースの効率が向上するからです。

例:

3. フィッツの法則が教えてくれること

1. コントロールをクリックしやすくしたい場合は、コントロールを画面の端または角に配置する必要があります。よく使用するコントロールを大きくして識別しやすくします。

2. 画面の端と角を利用してコントロールを効果的に拡張します。コントロールを画面の端や角から 1 ピクセル離して配置しないでください。

3. エッジの外側の領域もターゲットポイントの領域としてカウントできるため、ターゲットの領域が無限に拡大され、ユーザーにとっても操作が便利になります。

出典: http://tech2ipo.com/57051

原題: Douban インターフェースが再設計され、「フィッツの法則」がその背後にある考え方を解釈するのに役立ちます