Jacob Nielsen ::インターフェイス設計におけるアクションとオブジェクトの近接



記事の私の最初の翻訳は、原則として、厳密に判断しません。

インターフェース設計におけるアクションとオブジェクトの近接



サマリ:

要素(ボタンとチェックボックス)がアクションを実行するオブジェクトから遠すぎる場合、ユーザーはインターフェイスの機能を使用しません。



コンピューターと人との間の相互作用の最も古い原則の1つは、近くにあるこれらの要素は接続されていると言います。 同様に、ユーザーは、同じ色または形状を持ち、一緒に移動または変化する要素、または同じ制限されていない領域にある要素を接続していると認識します。

これらの原則はもはや新しいものではなく、無限の数の本が書かれていることを考慮しても、近接規則に違反するため、ユーザーはインターフェイスのすべての機能を使用しないことがよくあります。 ボタンとドロップダウン、チェックボックス、またはその他のインターフェイス要素が、アクションを実行するオブジェクトから離れすぎている場合、ユーザーはそれらに気付きません。 多くの場合、ユーザーは自分が何を失っているのか理解せず、単にいくつかのアクションが利用できないと単純に仮定します。

たとえば、eコマースのケーススタディでは、ユーザーは通常とは異なるサイズまたは色で表示される製品に注意を払っていません。

iTunesが近接のルールを破る方法


これの顕著な例は、Apple iTunesウィンドウを見ると見ることができ、iPhone用のアプリケーションを更新できます。 iPhoneを購入してから数か月後、ユーザーはアプリケーションアイコンを毎回手動で確認する必要があると考え続けました。

これは次のようなものです。



ウィンドウの上部には多数のアイコンがあります。 ウィンドウの一番下に、「1つの更新が利用可能です」というボタンがあります。 このボタンは、更新が利用可能なアプリケーションを更新します。
しかし、数か月間、私はこのボタンに気付きませんでした。なぜなら、それが担当するオブジェクトから離れすぎているからです。

さらに、このボタンは異なる色のストリップ上にあるため、アイコン領域の外にあるように見えます。

(ちなみに、スクリーンショットのiTunesウィンドウは、アイコンが非常に少ないのに、なぜそんなに大きいのですか?同じプログラムがアプリケーションと音楽コレクションを制御するためです。同じインターフェースで異なる操作を実行します。)

対の横のボタン 遠くのボタン


興味深いことに、iTunesは同じインターフェースの別の部分に正しいボタンレイアウトを表示します。



このスクリーンショットでは、影響するアイコンの右側にある[更新]ボタン。 気付かないリスクはありません。 そして、「私は何をすべきか?」のような質問はありません。 (悲しいことに、[完了]ボタンまではシベリアまでとほぼ同じです。実際、問題はこのウィンドウがダイアログボックスとしてダイアログエリアを使用することです)。

有名な企業がこのようなユーザビリティの間違いを犯しているという事実は、チームのほとんどの人が大学で人間とコンピューターの相互作用を研究していなかったという事実によって説明されています。 しかし、どうしてAppleはそのような巨大なインターフェースエラーを作ることができるのでしょうか? Appleは、1984年に大規模市場に参入して以来、グラフィカルインターフェイスの分野で大きな進歩を遂げてきました。

まず、これは誰もが間違いを犯す可能性があることのもう1つの証拠に過ぎず、最高のアプリケーションや有名なサイトで行われているように、すべてを行うべきではありません。

第二に、ユーザビリティの問題はAppleのテストではそれほど悪くないように見えるかもしれません。
-より小さなウィンドウをテストする場合、ボタンをアイコンに近づけて、気付かれないようにする必要があります。 (ウィンドウサイズを小さくすると、中規模のモニターや孤立したテスト、つまり、ユーザーが音楽のコレクション全体を収めるために大きなワークスペースで作業しない場合などに結果をもたらすことができます。)

多数のアプリケーションアイコンを使用して構成をテストした場合、アイコンはスペースを埋める必要があるため、ボタンは最後のアイコンに近くなります。

このケースは、古く実績のあるインターフェースの継続的な重要性を示しています。数年前に発見されたものを理解すると、忘れた場合に気付くでしょう。 iTunesの不適切に配置されたボタンは、サンプリングされたデータをテストすることの重要性も示しています。

ソース: www.useit.com/alertbox/action-object-closeness.html

Source: https://habr.com/ru/post/J87676/


All Articles