フィットテスト

記事14年。 しかし、驚くべきことに、このクラシックのHabréの翻訳はありません。 そうなります。



それで、あなたは自分を「インターフェースデザイナー」と呼んでいますか？ すべての質問に迅速かつ合理的に答えることができない場合は、職業から脱出します。



あなたがデザイナーに精通している場合、またはデザイナーを雇うことを考えている場合は、これらの質問を見せて、彼がどのように抜け出すかを見てください。 私はインタビューでこのテストのバリエーションを提供し、彼らは最高の側面から自分自身を示しました。



また、「フィッツの法則」が何であるかわからない場合は、答えを覗かずにテストを受けてください。 これにより、どのステレオタイプがガイドされているかが明確になります。 答え-関係する原則の詳細な分析。あなたのステレオタイプと私の答えを比較できます。 また、貧弱な結果に驚かないでください。コンピューターに長年慣れ親しんでいるほとんどの人は、初めて非常に貧弱なテストに合格します。 しかし、2回目の答えが正しければ、この記事は私のサイトで最も価値があると考える人がほとんどです。これを読むだけで、将来設計されるすべてのインターフェイスが改善されます。



これらの質問は、画面スペース全体が完全に制御可能であることを示唆しています。 あなたがMicrosoftまたはAppleのチーフデザイナーであることを想像してください。

ご質問

最初にすべての質問を読んで、慣れてください。 あなたが望むように-ただ答えに干渉しないでください。 そして、答えを言うようにしてください。 また、まだ行っていない場合は、答えが間違っていると考えてください。 これは、「はい、わかっています」と言って次の質問に進む必要があるテストではありません。



質問には引用符がありません。すべてが事実です。 しかし、答えは直観的でなく、誤っているように見えることもあるため、「これは明らかです」とは言わないでください。

1. Microsoftツールバーを使用すると、各ボタンに署名できます。 署名されたボタンがより速く押される理由を少なくとも1つ挙げてください。 ユーザーはボタンの目的を知っていると考えており、ボタンを識別するために署名は必要ありません。
2. 画面の左端にある2×8ボタンのツールバーが押されています。 各ツールは16×16ピクセルのアイコンです。 パネルを移動したりアイコンのサイズを変更したりせずに、「典型的な」ツールへのアクセス時間をどのように短縮しますか？
3. 大型モニター（1600×1200）の前で、画面の中央にマウスカーソル（±10ピクセル）がある右手。 ユーザーが最も速く到達できる5つの単一ピクセルの「ターゲット」を指定します。 到達が速いものと到達しにくいものをリストに追加した場合の追加ポイント。
4. Windowsタスクバーは画面の端（上部、下部、または側面）に沿って配置されており、非表示のウィンドウにすばやく切り替えることができます。 パネルは非表示（およびカーソルが端に近づくと表示される）にすることも、常に表示することもできます。 タスクバーを非表示にするのが非常に不便な理由を少なくとも2つ説明してください。
5. AppleメニューがMicrosoftメニューより5倍速い理由を説明してください。 余分な点は、 Microsoftがなぜこのような「愚かな」決定をしたのかを説明するためのものです。
6. マルチレベルメニューでボトルネックを指定します。 どうすればそれを回避できますか？
7. 円形ローカルメニューが通常の線形メニューよりも便利な理由を少なくとも1つ挙げてください。
8. すべてのアイテムへのアクセス時間のバランスをとるために、線形メニューで何ができますか？
9. 完全に自由を与えられた工業デザイナーは、ファンクションキーをトリミングすることにより、 Macintoshキーボードのボタンを半分に減らしました。 なぜそのような決定は想像を絶するほど愚かですか？
10. これらの問題にはすべて共通点がありますか？

最後の質問に答えられない場合、おそらくあなたや他の人にとっては難しいでしょう。 あなただけではありません。経験によれば、 Microsoftの誰もこれらの質問に答えることはできません。



確かに、 Microsoftには1つの言い訳があります。 最初に、彼らはマウスや他のすべてとのインターフェースが古き良きキーボードよりも悪いと述べました。 通常のグラフィカルインターフェイスを構築できた場合、これらの単語を取り戻す必要があります。 しかし、これは起こりませんでした：彼らは常にサウンドインターフェースのアイデアを妨害しました。



Appleで起こったことは、もう少し明確ではありません。 工業デザインの間違いは理解できます。人的要因に関しては、アウトソーシングデザイナーは誤解するか、公然と抵抗します。 しかし、最近以来、 Appleの内部でも大きな間違いがあります。たとえば、 Labelsメニューを階層的なものに変えて、アクセスを5〜10倍遅くします。

答え

質問10の予備的な回答から始めましょう。 すべては、基本設計原則からフィッツの法則を中心に展開します。

目標に到達するのに必要な時間は、目標までの距離とそのサイズによって異なります。

この小さな証拠は今ではあまりにもしばしば忘れられているので、時々誰もがそれをしているように思えます。 そうではありませんが、通常、これは一般的な無知の単なる指標であり、偏見を乗じており、トレーニングやテストの影響を受けません。



そして、あなたは、頑固で頑固なHabrの読者であり、フィッツの法則が何であるかを知っています。 または、少なくとも就寝前に読んでください。 フィッツの法則は単純で破壊不可能であり、例外はありません。 それが私たちの質問にどのように関係しているか見てみましょう。



質問1. Microsoftツールバーを使用すると、各ボタンに署名できます。 署名されたボタンがより速く押される理由を少なくとも1つ挙げてください。 ユーザーはボタンの目的を知っていると考えており、ボタンを識別するために署名は必要ありません。



ここに2つの答えがありますが、他にもあるかもしれません。



A.署名は目標の一部になります。 そのため、目標は大きくなっています。 目標が大きくなればなるほど、達成しやすくなります。 フィッツ法。

B.署名がないと、ツールアイコンが混みすぎます。



一見したところ、アイコンはお互いに近づけておく必要があります。アイコン間の距離は短くなります。 ただし、アイコンからアイコンにジャンプする必要はありません。ユーザーは通常、ターゲットから遠く離れたウィンドウの中央のどこかで起動します。



アイコンが離れている場合、アイコンの間に「バッファゾーン」があり、クリックしても何も生じません。 アイコンが近くにある場合、間違ったアイコンをクリックする可能性が高くなります。 これを防ぐために、署名のないユーザーは速度を落とすことを学びました。 作業が速くなったか遅くなったかを尋ねないでください。 彼らはより速く何かを言うが、ストップウォッチだけが真実を知っている。



署名に加えて、目標を大きくする別の方法があります：大きなアイコン。 残念なのは、アイコンを4×4にして、作業が高速になると主張する「熟練したユーザー」です。



質問2。2 ×8ボタンのツールバーが画面の左端に押されています。 各ツールは16×16ピクセルのアイコンです。 パネルを移動したりアイコンのサイズを変更したりせずに、「典型的な」ツールへのアクセス時間をどのように短縮しますか？



このパネルを高速化するには、2つのステップが必要であり、無視することはできません。



A. 1 x 16列のボタンを配置して、全員が画面の左端にくるようにします。

B.一番端のピクセルの左列もアクティブであることを確認します。 バッファゾーンがないはずです。



2番目のステップも必要ですが、しばしばスキップされます。



要確認：フィッツの法則では、目標に到達するまでにかかる時間は、目標の距離とサイズに依存すると規定されています。 目標が大きければ大きいほど、より速く達成されます。 その理由は簡単です。正しくするために速度を落とす必要はありません。



次に、画面の端を見てください。 目標の深さは？ 長さが1ピクセルの場合、クリックするのは非常に困難です。 しかし、画面の端は「無限に深く」なっています。速度に関係なく、カーソルは端に当たって停止します。 したがって、エッジの近くのターゲットよりも、エッジから2ピクセルのターゲットをヒットする方が困難です。 エッジはあなたの友達です、それを忘れないでください！



質問3. 大型モニター（1600×1200）の前で、画面の中央にある右利きのマウスカーソル（±10ピクセル）。 ユーザーが最も速く到達できる5つの単一ピクセルの「ターゲット」を指定します。 到達が速いものと到達しにくいものをリストに追加した場合の追加ポイント。



トリックはありません。 インターフェース設計者は誰でもすぐに最初の質問に答えます。 追加の質問はより複雑です。 ただし、最初に、5つの「ゴールデンピクセル」の場所を示します。



最も重要なピクセルは、カーソルの直下です。 カーソル自体に表示されるコンテキストメニューはこれを使用します。 マウスを動かす必要はまったくありません。このピクセルは「無限のターゲット」であり、見逃すことはできません。 ^{[1999年の記事、メカニカルマウスは解像度が低く、静止摩擦が大きかった。]}



残りの4つのピクセルは、奇妙なことに、カーソルから極端な距離にあります。 しかし、それらのサイズは2次元で無限であるため、距離は予想よりも小さくなります。 これらは画面の四隅です。 マウスを任意の方向に押すと、見逃すことはありません。プッシュが十分に強ければ、カーソルはコーナーで停止します。 もちろん、これは正しく構成されたカーソルアクセラレーションを意味します。



追加の質問に対する回答は、ユーザーの右利きに関連しています。 右利きの場合、順序は次のとおりです。



A.カーソルの下のピクセル（最も簡単）。 マウスをクリックしてください。

B.右下隅。

B.左上隅。

D.右上隅。

D.左下隅（最も難しい）。



右手の指と手首だけを使用してマウスを動かすと、手のメカニズムがまさにこの順序を与えることが理解できます。 もちろん、左利きの場合は反対です。 ただし、「ゴールデンピクセル」のパワーと比較すると、その差はわずかです。 四隅はすべて何かに使用する必要があります。



質問4. Windowsタスクバーは画面の端（上部、下部、または側面）に沿って配置されており、非表示のウィンドウにすばやく切り替えることができます。 パネルは非表示（およびカーソルが端に近づくと表示される）にすることも、常に表示することもできます。 タスクバーを非表示にするのが非常に不便な理由を少なくとも2つ説明してください。



簡単になりました。



A.画面の端は非常に重要です。 1つのオブジェクト（タスクバー）のために、多数のクイックアイコンを配置できるエッジ全体を破壊しないでください。

B.パネルを自動的に非表示にすることは、誤って表示するのが簡単すぎます。 ユーザーは、画面の端近くのどこかで作業するときに常に表示します。

B.これらの問題は存在せず、カーソルがコーナーに移動したときにパネルが表示された場合、アクセスはさらに高速になります。 マウスを上下に押すと、タスクバーが上部に表示されます。 迅速なアクセスと誤検知なし。



質問5. AppleメニューがMicrosoftメニューより5倍速い理由を説明してください。 余分な点は、Microsoftがなぜこのような「愚かな」決定をしたのかを説明するためのものです。



Appleは画面の上部にメニューバーを配置し、 Microsoft Sunなどをウィンドウタイトルの下に配置しました。 これには少なくとも2つの理由があります。

A. Appleは、そのようなメニューバーの著作権と特許を取得しました。

B.そして、他の全員が、メニューをユーザーの近くに配置して、作業を高速化できると判断しました。



最初の点は、弁護士の軍隊によって何度も議論されました。 2番目の段落について話しましょう。 Appleメニューは、ウィンドウ内のメニューよりもはるかに高速です。 なんで？ ただし、画面の上部にあるため、高さは無限です。 結果として、 Macintoshユーザーは、カーソルが飛び出して消えない限り、もちろんマウスを押し上げることができます。



もちろん「提供された」、そして時々私はそのような条件を解決します。 アップルに着いたら、2つのモニターを重ねて配置し、画面下部にメニューバーを配置しました。 トップ画面に移動するには、メニューバーを使用する必要がありました。



テスターに​​異なるメニュー項目を選択するタスクを与えました。 最初は、平均18 cmだけ上部のモニターにジャンプしました-マウスの速度は非常に高速でした。 その後、彼らはそれに慣れ、速度を落とし始め、彼らの速度は平均的なWindowsユーザーのようになりました。



ウィンドウのメニューに起因する2番目の「利点」は、ユーザーが自分のタスクに関連するアイテムを探す場所を常に知っていることです。 これは愚かです。 ユーザーはウィンドウで何でもでき、メニュー項目は変更できます。 さらに、特にSunには、メニューバーが作業ウィンドウ内にさえない異常なプログラムがあります！



Microsoftプログラムは、全画面の上部にメニューを表示し始めています。 WordまたはExcelでなんとかしてみてください、より高速です。 また、 Microsoft Visual Studioが台無しになりました。エッジとメニューの間には1ピクセルの障壁があります。 彼らは最高のものを望んでいましたが、それは判明しました...



質問6. マルチレベルメニューのボトルネックを示します。 どうすればそれを回避できますか？



ボトルネックは、第1レベルメニューと第2レベルメニューの間の移行です。 最初に、ユーザーはカーソルを最初のレベルの項目に移動します。 次に、サブメニューで注意深く（水平方向に）ナビゲートする必要があります。



どうやら、階層メニューを発明したエンジニアはレールに前腕を持っていたため、マウスを正確に水平に動かすことができました。 私たち、単なる人間は、肘と呼ばれるヒンジに前腕を持っています。 つまり、手は直線ではなく弧を描くように動きます。 そのため、人がマウスを水平方向に直線的に移動させることを期待しないでください。マウスは下に移動します。 したがって、エラーを発生させる権利を与えない場合、ユーザーがエラーに到達する前にメニューが閉じます。



Windowsでは 、ハックによって迂回されました。人が1点間違えた場合、すぐにサブメニューを閉じずに、0.5秒間開いたままにします。 ユーザーが十分に速い場合、そこに到達する時間があるでしょう。 ただし、これは最善の解決策ではありません。エラーが発生する可能性が高い場合、ユーザーは加速せずに速度を低下させます。これは実証済みの事実です。 したがって、正反対のことを行う必要があることを理解する人はほとんどいません。



80年代にMacで階層メニューアルゴリズムを開発したとき、セクター（<）の形のバッファーゾーンを提案しました。右に行くほど許容範囲が大きくなります。 ユーザーがマウスを水平方向に移動すると（エラーが発生します）、メニューの動作速度に関係なく、メニューは開いたままになります。 サブメニューの拒否も簡単です。マウスを上下に動かします。 もちろん、 Appleの階層メニューは、中間の「ターゲット」のために単一レベルメニューよりも遅くなりましたが、少なくとも私はそれらを通常のビデオゲームほど重くしませんでした。



残念ながら、 NeXTの人々はAppleに来たとき、 MacではなくWindowsをコピーしました。 そのため、現在のOSXでは、階層メニューはWindowsと同じくらい悪いです。 ^{[おそらく2013年までに修正されましたが、わかりません。]}



フィッツの法則は、サイズと距離だけではありません。 彼は目標の数についてです。 目標がすべて同じであれば、アクションが長くなります。 階層は自動的に1つの「ターゲット」を追加します。 アクセスの難しさも、サブメニューそのものです。



従来のMacでは、ほとんどの場合、サブメニューを特に狙う必要さえありませんでした。 サブメニューが開き、ユーザーはマウスを直線で目的のアイテムに移動しました。 特にサブメニューでは、サブメニューが大きい場合にのみ照準を合わせる必要がありましたが、最初または最後のアイテムが必要です。 しかし、それでもマウスは曲線に沿って描くことができ、現在のようにではなく、古い「Draw It Yourself」おもちゃの方法で破線に沿って描くことができます。



そのため、ユーザーの動きを把握しながら、動きの数、距離、精度を減らす必要があります。 そして、もちろん、あなたの運動パターンが単純な人の能力とどのように比較されるかを見てください。



質問7. 円形ローカルメニューが通常の線形メニューよりも便利な理由の少なくとも1つは何ですか。



アイテムが円形に配置されている場合、目的のセクターに入るためにマウスを数ピクセル移動する必要があります。 より少ない走行距離、より大きな目標サイズ。 素敵なデザイン。



また、このようなメニューでは、移動に記憶が使用されます。 ポイントはほとんどありませんが、マウスを上下に動かして印刷し、上下に動かしてFAXを送信する方法を学びます。 これらのジェスチャが記憶されると、メニューを表示する必要はありません。ユーザーがためらうまでです。 （ Fabrikプロジェクトの作業中に1980年代後半にAppleでこれを発見しました）。



質問8. すべてのアイテムへのアクセス時間のバランスをとるために、線形メニューで何ができますか？



カーソルから遠く離れたアイテムを大きくすることで、それらを「合わせる」ことができます。 文字通り大きくはありません。次のポイントに気付くのは難しくないからです。 マウスの動きと画面のピクセルの比率は、メニューに沿ってさらに移動するほど、カーソルが1 cm移動するように進む必要があります。つまり、「動作」サイズを「視覚」サイズから解放します。



また、カーソルがターゲットに近いときにカーソルを引き付ける「重力の穴」を作成することもできます。 バリアを設定できます。マウスがオブジェクトに当たったとき、それを引き出すのは簡単ではありません。 しかし、これには注意が必要です。 間違えた場合は、重いインターフェイスが表示されます。 圧力に敏感なマウスを思いつくことができます。押すと遅くなり、「逃げる」必要があるときは速くなります。



リーダーのVictor Zambanoは、別の解決策を思い付きました。サブメニューを中央に配置します。 目的のアイテムは、 n / 2ポイント以下の距離にあります。







ビクターによると、このメカニズムは通常のドロップダウンメニューではうまく機能しません-呼び出し元のアイテムがはるか下にある場合を除きます。 そしてもちろん、最も必要なアイテムは、最速になるように中央に設定する必要があります。



質問9. 完全な自由を与えられた工業デザイナーは、 Macintoshのキーボードを半分のボタンだけ減らし、ファンクションキーを切り離しました。 なぜそのような決定は想像を絶するほど愚かですか？



ターゲットが遠くなるほど、同じ速度でターゲットに到達するために大きくする必要があります。 設計者は目標を削減しただけでなく、最も重要な次元で目標を削減しました。 バカ、バカ、バカ。 キーボードを斜めに曲げる必要がありました。指をわずかに上げただけで、デジタルキーとファンクションキーにアクセスできます。 深さは同じで、精度と速度は高くなります。



質問10. これらすべての質問の共通点は何ですか？



これで、フィッツの法則がわかり、個人用ページでも新しいOSでも、日常の開発に適用できます。 2文字の[OK]ボタンでは不十分な場合は、先頭と末尾にスペースを追加します。 ツールバーを開発し（そしてウィンドウのすべてのニュアンスを制御する）、画面の端にウィンドウをアタッチすることを学ぶと、ユーザーはより速くそれらにアクセスできます。 メニューを上端に配置できる場合は、実行してください！ このようなメニューは、アイコンの束よりもコンパクトであり、目的のアイテムは高速です。 また、 MicrosoftまたはAppleで働いている場合でも、人々の理解に耳を傾けてください。 彼らは、私は彼らに話しました。 それらにあなたとアドレス。



フランク・ルドルフとクレイグ・オオシマは、テストに合格し、元の、しかし正しい答えを見つけてくれたことに感謝しています。



フィッツ法の詳細については、次の記事をお勧めします。

ウォーカー、ネフとスメルサー、ジョン（1990）。 「ウォーキングとバーメニューからの選択時間の比較。」CHI'90、Addison-Wesley、Reading、MA、Prop。 221-225。



ポイントはいくつありますか？ しかし、それは問題ではありません。 これで10分の10に答えることができ、この知識を実践に移す準備ができていれば、テストは合格しました。



翻訳者から。 記事は大きく、翻訳の習慣をどうにかして失い、1か月以内に一度に数段落の長い期間翻訳されました。 そして、さらに重要なことに、ほぼ完成し忘れていたものがありました。 したがって、9月5日、古いIBMラップトップのキーボードの機能により、準備されていない記事がメインページに1分間表示されました。 すみません、フィッツの法律が機能しています。