インターフェース設計の10の一般的なルール

<br />これは私がずっと前に集めた記事です。皆さんの参考のために共有したいと思います。人気のインターフェーススタイルには、マルチウィンドウ、シングルウィンドウ、リソースマネージャースタイルの3つがあります。スタイルに関係なく、次のルールを真剣に受け止める必要があります。
1.使いやすさ:
ボタン名は、分かりやすく、正確な言葉を使用し、あいまいな言葉を避け、同じインターフェース上の他のボタンと区別しやすいものにする必要があります。一目で意味が理解できるものがベストです。理想的には、ユーザーはインターフェイスの機能を理解し、ヘルプを参照することなく適切な操作を実行できる必要があります。
ユーザビリティの詳細:

同じまたは類似の機能を実行するボタンはフレームで囲み、よく使用するボタンはショートカットをサポートする必要があります。同じ機能またはタスクを実行する要素は、マウスの移動距離を短縮するために、中央の場所に配置されます。インターフェースを機能に応じてローカルブロックに分割し、フレームで囲んで、機能の説明やタイトルを含めます。インターフェースは、キーボードの自動ブラウジングボタン機能、つまり Tab キーを押すことによる自動切り替え機能をサポートする必要があります。最初に入力する必要があり、インターフェイス上の重要な情報を含むコントロールは、タブオーダーの先頭に、ウィンドウ上の目立つ位置に配置する必要があります。同じインターフェイス上のコントロールの数は 10 を超えないようにしてください。コントロールが 10 個を超える場合は、ページングインターフェイスを使用して表示することを検討してください。ページングインターフェイスは、ページ間の素早い切り替えをサポートする必要があります。よく使用されるショートカットキーの組み合わせ Ctrl+Tab とデフォルトボタンは、Enter と選択の操作をサポートする必要があります。つまり、Enter キーを押すと、デフォルトボタンの対応する操作が自動的に実行されます。書き込み可能なコントロールは、不正な入力を検出したときに説明を表示し、自動的にフォーカスを取得する必要があります。 Tab キーの順序は、コントロールの配置順序と一致している必要があります。現在一般的な方法は、全体的には上から下へ、行間では左から右へというものです。チェックボックスとオプションボックスは、選択確率が最も高い順と最も低い順に並べられます。チェックボックスとオプションボックスには既定のオプションがあり、タブ選択をサポートする必要があります。オプションの数が同じ場合は、ドロップダウンリストボックスではなくオプションボックスを使用します。インターフェースのスペースが狭い場合は、オプションボックスの代わりにドロップダウンボックスを使用します。オプションの数が少ない場合はオプションボックスを使用し、それ以外の場合はドロップダウンリストボックスを使用します。高度に専門的なソフトウェアでは関連する専門用語を使用する必要がありますが、一般的なインターフェースでは一般的な用語を使用することをお勧めします。
2.規範:
通常、インターフェースのデザインは、Windows インターフェースの仕様に従って設計されており、「メニューバー、ツールバー、ツールボックス、ステータスバー、スクロールバー、右クリックのショートカットメニュー」という標準形式が含まれています。インターフェースの標準化度が高いほど、使いやすさが向上すると言えます。小規模なソフトウェアでは、通常、ツールボックスは提供されません。
規範の詳細:

3.ヘルプ機能:
システムは、ユーザーが混乱したときに自分で解決策を見つけられるように、詳細で信頼性の高いヘルプドキュメントを提供する必要があります。
ヘルプ機能の詳細:

ヘルプドキュメントのパフォーマンスの紹介と説明は、システムパフォーマンスと一致している必要があります。 (当社のシステムヘルプドキュメントはすべて、システムの祖先の時代からの説明であるため、わかりにくいです)。新しいシステムをパッケージ化するときは、変更された領域のヘルプドキュメントで対応する変更を加えます。操作中は、適時にシステムヘルプを呼び出す機能が提供される必要があります。一般的にはF1が使用されます。インターフェイスでヘルプを呼び出すときは、操作に関連するヘルプの場所をタイムリーに見つけられる必要があります。つまり、支援は即時かつ的を絞ったものでなければなりません。現在普及しているオンラインヘルプ形式または HTML ヘルプ形式を提供するのが最適です。ユーザーはキーワードを使用してヘルプインデックスで必要なヘルプを検索できますが、もちろんヘルプキーワードも提供される必要があります。書面によるヘルプドキュメントが提供されていない場合は、ヘルプを印刷する機能を用意するのが最適です。ユーザーが問題を自力で解決するのが難しい場合に、新しいヘルプ方法を簡単に探せるように、当社の技術サポート方法をヘルプに提供する必要があります。
4.合理性:
画面の対角線が交差する位置はユーザーが直接見る位置であり、画面の四分の一の真上はユーザーの注目が最も集まりやすい位置です。フォームを配置する際は、この 2 つの位置を活用するように注意してください。
合理的なルール:

親フォームまたはメインフォームの中心は、対角の焦点の近くに配置する必要があります。サブウィンドウは、メインウィンドウの左上隅または中央に配置する必要があります。複数のサブウィンドウがポップアップ表示された場合は、ウィンドウのタイトルを表示するために、サブウィンドウを順番に右下にオフセットする必要があります。重要なコマンドボタンと頻繁に使用するボタンは、インターフェイス上の目立つ場所に配置する必要があります。誤って使用すると簡単にインターフェースが終了したり閉じたりする可能性があるボタンは、クリックしやすい場所に配置しないでください。水平方向の列の始まりまたは終わり、および垂直方向の列の終わりは簡単なポイントです。進行中の操作に関係のないボタンはブロックする必要があります (Windows では灰色で表示され、使用できません)。データが回復不能になる可能性がある操作については、確認情報を提供して、ユーザーにオプションを放棄する機会を与える必要があります。不正な入力や操作には十分なプロンプトと指示が必要です。操作中に問題が発生してエラーが発生した場合は、プロンプトが表示され、ユーザーがエラーの原因を理解して無期限に待機する必要がなくなります。ヒント、警告、またはエラーメッセージは明確、簡潔、かつ適切である必要があります。

前のページ1 2 次のページ全文を読む

<<: CSS3はマスク連打機能を実現する

>>: ウェブページを自動更新するための 3 つのコード