Clever Geek Handbook

優れたユーザーインターフェイス、明瞭性、情報の並列表示

マークミラーの記事翻訳： 優れたユーザーインターフェイス、明瞭さ、および情報の並行処理



以前の翻訳：



前回の記事では、情報の重要性を強調するためにデザインを変更する方法について説明しました。 この記事では、明快さを達成するための重要な方法である情報の並列表示について説明します。



この概念は、 エドワード・タフテの驚くべき本で最初に示されました。







タイトル： 視覚的説明：画像と数量、証拠と物語

ISBN： 0961392126

本とそのタイトルの両方がひどく乾いているという事実にもかかわらず、内部には天才的な考えが含まれています。



情報の並列表示の原理は非常に単純です。人がデータを並べて提示する場合、連続して追跡する場合よりも、データを認識する方がはるかに簡単です。 ソフトウェアの主な目的-非常に限られたサイズ（画面など）での大量のデータの表示-情報の一貫した表示につながることが多いため、これは、インターフェイスを作成するときに知って考慮することが非常に重要です。



たとえば、モーダルダイアログボックス-ウィンドウインターフェイスの登場以来の忠実な仲間を考えてみましょう。 いくつかの簡単な質問に答えてください。

  1. ダイアログボックスをドラッグして、それによって隠されたものを確認したことがありますか？

  2. たとえば、クリップボードに何かをコピーするなど、ダイアログによって隠された情報にアクセスするためだけに「キャンセル」ボタンをクリックしたことがありますか？

  3. 前のページを垣間見るためにブラウザの「戻る」ボタンをクリックし、そこで「進む」をクリックしたことがありますか？

  4. 現在表示されている内容を理解するために必要な情報を見るためだけに文書をスクロールアップしたことがありますか？



少なくとも1つの質問に肯定的に答えた場合、あなたは情報の一貫した提示の犠牲者です。

このビューの例を次に示します。



以前の記事では、次の情報をより明確に示すために、情報の並列表示が既に使用されています。



設計の非効率性

（記事「なぜ優れたユーザーインターフェイスを作成するのがそんなに難しいのか？」 ：







視覚的な重みと情報の重要性の誤った比率

（記事「情報の優れたユーザーインターフェイス、明快さと関連性」 ）：







表現力の制御方法が多すぎると、視覚ノイズが過剰になる可能性があります

（記事「良いユーザーインターフェイス、明快さと表現力」 ）：







主な違いを理解するために、情報の並列表示と順次表示を比較してみましょう。



並列ディスプレイは、情報が目の助けによって認識されるという事実により、 より効果的です。目は、すばやく簡単に前後に移動できます。 すべてのデータが同時に表示され、観察者は知覚の速度と順序を完全に制御します。 順次表示は、情報の表示が速すぎたり遅すぎたり、表示順序が単に不便なために、観察者の知覚が困難になるという事実につながる可能性があります。



前の段落は、 情報の順次表示の例です。

同じ情報を並行して提示しましょう：



オブザーバー機能 シーケンシャル 平行
情報レート制御 いや はい
情報注文管理 いや はい
情報を同時に表示する いや はい




情報を順番に表示する場合、セットアップウィザードの[次へ]ボタンと[戻る]ボタンを使用してデータの表示と変更の速度を制御したり、テキストを表示するときにスクロールしたりできることに注意してください。 しかし、この機会のために、マウスでクリックする、キーを押すなどの余分なアクションを支払う必要があります。これは、平行ディスプレイでの視線の方向の単純な変更に比べて効率が悪く 、 速度が遅くなります。



シリアルインターフェイスを使用して、パラレルインターフェイスに変換してみましょう。 たとえば、すべての必要なデータとコントロールが同時に利用できるように、モーダルダイアログボックスを使用して「スムーズ化」します。 これを行うのは非常に難しく、インターフェイスレイアウトを作成し、本当に必要な情報を選択する際には常に非常に注意する必要があります。 場合によっては、新しい非標準のユーザーインターフェイス要素を作成する必要があります。 ソフトウェアの世界の実世界の例を考えてみましょう。



ユーザーがメソッド宣言のパラメーターを交換できるインターフェースを作成する必要があるとします。 従来のインターフェイス設計アプローチを使用して、Visual Studio 2008ダイアログに似たものを作成できます。







対話をより慎重に検討してください。肯定的な面と否定的な面があります。 利点：

  1. ダイアログは、署名を変更する必要のあるメソッドの本体の下にあります;同時に、メソッドコードとダイアログ自体の両方が表示されます。 これは並列マッピングです。

  2. 変更を適用する前にプレビューできます。 これも並列表示です。





しかし、欠点もあります：

  1. ダイアログは、ドキュメント内のコードの大部分を閉じます。 利用可能な情報の一部のみを表示できる場合、それは順次表示です。

  2. ユーザーとアプリケーションの対話方法は変化しています。 ユーザーはキーボードを使用してソースコードを操作しました-直接変更しましたが、ここでは、コードを変更するために複数のコントロール（グリッド、ボタン、チェックボックス）とマウスクリックの使用を組み合わせる必要があります。 これにより、速度が低下し、効率が低下します。





そのようなインターフェースのすべての利点を保持し、欠点を滑らかにする方法はありますか？ ダイアログボックスを完全に取り除き、変更をプレビューする機会を保存することは可能ですか？ もちろんそうです。 ここに私たちがやることがあります：

  1. コントロールを、対話するインターフェイスの同じレベル（ソースコードレベル）に移動します。

  2. 不要なコントロールを使用せずに、キーボードを使用して制御できるパラメーターの順序をインタラクティブに変更する機能を追加します。



このインターフェイスは次のようになります。







一方で（純粋に肯定的）、コードを閉じるモーダルダイアログを取り除き、マウスを使用せずにパラメーターの順序で対話型の変更を追加しました（これにより効率が向上します）。



一方、（そして、奇妙なことに、これもプラスです）、ダイアログボックスが存在せず、通常の作業環境を保存しても、誰かがそのような機能に最初に遭遇した場合でも、予期しない結果につながりません。 キーの割り当てと現在の操作の名前にヒントを追加することで、何が起こっているのか、どのように制御できるのかを理解するのに役立ちます。



したがって、ユーザーインターフェイスを「スムージング」するには、新しいインタラクションコンセプトの作成などの作業が必要になる場合がありますが、効率と明確さが向上するため、費用は支払われます。


More articles:


All Articles