ステータス バー (デザインの基本)

手記

このデザイン ガイドは Windows 7 用に作成されたもので、新しいバージョンの Windows では更新されていません。 ガイダンスの多くは原則として適用されますが、プレゼンテーションと例には、現在の設計ガイダンス 反映されていません。

ステータス バーは、現在のウィンドウの状態 (表示されている内容や方法など)、バックグラウンド タスク (印刷、スキャン、書式設定など)、その他のコンテキスト情報 (選択やキーボードの状態など) を表示する、プライマリ ウィンドウの下部にある領域です。

ステータス バーは通常、テキストとアイコンを使用して状態を示しますが、進行状況インジケーターや、状態に関連するコマンドやオプションのメニューを含めることもできます。

一般的なステータス バーの

一般的なステータス バー。

手記

通知領域 に関連するガイドラインについては、別の記事で説明します。

これは適切なユーザー インターフェイスですか?

決定するには、次の質問を検討してください。

• ユーザーが他のプログラムを積極的に使用している場合、状態は関係しますか? その場合は、通知領域アイコンを使用します。

• 状態項目は通知を表示する必要がありますか? その場合は、通知領域アイコンを使用する必要があります。

• ウィンドウはプライマリ ウィンドウですか? そうでない場合は、ステータス バーを使用しないでください。 ダイアログ ボックス、ウィザード、コントロール パネル、プロパティ シートにはステータス バーを含めることはできません。

• 情報は主に状態ですか? そうでない場合は、ステータス バーを使用しないでください。 ステータス バーは、セカンダリ メニュー バー またはツール バー 使用しないでください。

• この情報は、選択したコントロールの使用方法を説明していますか? その場合は、代わりに補足の説明または命令ラベルを使用して、関連付けられているコントロールの横に情報を表示します。

• 状態は役に立ち、関連性がありますか? つまり、ユーザーはこの情報の結果として動作を変更する可能性がありますか? 表示されない場合は、状態を表示しないか、ログ ファイルに格納します。

• 状態は重要ですか? 即時アクションは必要ですか? その場合は、ダイアログ ボックス またはプライマリ ウィンドウ自体内など、注意が必要なフォームで情報を簡単に無視できない形式で表示します。

  

  Windows Internet Explorer の赤いアドレス バー。

• このプログラムは主に初心者ユーザーを対象としていますか? 一般に、未経験のユーザーはステータス バーを認識しないため、この場合のステータス バーの使用を再検討してください。

設計の概念

ステータス バーは、ユーザーを中断したり、フローを中断したりすることなく、状態情報を提供する優れた方法です。 ただし、ステータス バーは見落としやすいです。 多くのユーザーがステータス バーにまったく気付かないので、簡単です。

この問題の解決策は、ガーリッシュなアイコン、アニメーション、または点滅を使用してユーザーの注意を引くのではなく、この制限を設計することです。 これを行うには、次の操作を行います。

• 状態情報が役に立ち、関連性があることを確認します。 そうでない場合は、ステータス バーを指定しないでください。
• 重要な情報にステータス バーを使用しない。 ユーザーは、ステータス バーの内容を知る必要はありません。 ユーザーが表示する必要がある場合は、ステータス バーに配置しないでください。

1 つだけ行う場合...

ステータス バーの情報が役に立ち、関連性はありますが、重要ではないことを確認します。

使用パターン

ステータス バーには、いくつかの使用パターンがあります。

使い	例
現在のウィンドウの状態の 表示されている内容のソースを任意のビュー モードと共に表示する	"場所" ステータス バーのスクリーン ショットを この例では、ステータス バーにドキュメントへのパスが表示されます。
進行状況 明確な進行状況バーまたはアニメーションを使用して、バックグラウンド タスクの進行状況を表示します。	進行状況バーがscreen shot of status bar with progress bar 状態バーのスクリーン ショットをする この例では、ステータス バーに、Internet Explorer ウィンドウへの Web ページの読み込みを示す進行状況バーが含まれています。
コンテキスト情報 ユーザーが現在行っていることに関するコンテキスト情報を表示します。	この例では、Microsoft Paint は選択サイズをピクセル単位で表示します。

ガイドライン

全般

• 一部のユーザーのみがステータス バー情報を必要とする場合は、ステータス バーの表示コマンドを指定することを検討してください。 ほとんどのユーザーがステータス バーを必要としない場合は、既定でステータス バーを非表示にします。
• ステータス バーを使用してメニュー バーの項目を説明しないでください。 このヘルプ パターンは検出できません。

プレゼンテーション

• 適用されないモーダル状態を無効にします。 モーダル状態には、キーボードとドキュメントの状態が含まれます。
• 適用されない非モーダル状態を削除します。
• 次の順序で状態情報を提示します: 現在のウィンドウの状態;経過;コンテキスト情報。

アイコン

• 簡単に認識できる状態アイコンのデザインを選択します。 四角形または長方形のアイコンよりも、一意の輪郭を持つアイコンを優先します。

• ステータス情報を伝える場合にのみ、純粋な赤、黄、緑のスワットを使用します。 そうしないと、そのようなアイコンが混乱します。

  正解:

  青いアイコンがscreen shot of status bar with blue icons されたステータス バーのスクリーン ショット

  不正解:

  赤いアイコンscreen shot of status bar with a red icon 付いたステータス バーのスクリーン ショットをする

  正しくない例では、赤いアイコンが誤ってエラーを示し、混乱を招いています。

• アイコンのバリエーションまたはオーバーレイを使用して、状態または状態の変更を示します。 アイコンのバリエーションを使用して、数量または強度の変化を表示します。 その他の種類の状態については、次の標準オーバーレイを使用します。

  オーバーレイ	地位
  警告アイコン のスクリーン ショット	警告
  エラー アイコン のスクリーン ショット	エラー
  無効/切断されたアイコンのscreen shot of disabled/disconnected icon のスクリーン ショット	無効/切断済み
  ブロック/オフライン アイコンscreen shot of blocked/offline icon のスクリーン ショット	ブロック/オフライン

• 状態を頻繁に変更しないでください。 ステータス バーのアイコンは、ノイズ、不安定、または注意が必要に応じて表示されないようにする必要があります。 目は周辺視野の変化に敏感であるため、状態の変化は微妙である必要があります。

• 重要な状態情報を提供するアイコンの場合は、インプレース ラベルを使用します。

• ラベル付けされていないステータス バーのアイコンには、ヒントが表示されます。

詳細については、「アイコンの」を参照してください。

相互作用

• ステータス バー領域を対話形式にして、ユーザーが関連するコマンドやオプションに直接アクセスできるようにします。
  • メニュー ボタン または分割ボタンのように表示され、動作するコントロールを使用します。 これらのステータス バー領域には、クリック可能であることを示すドロップダウン矢印が必要です。
  • マウスの上ではなく、マウスを下に左クリックしてメニューを表示します。
  • 右クリックまたはダブルクリックはサポートされません。 ユーザーはステータス バーでこのような操作を行うとは思わないので、ユーザーが操作を試みる可能性は高くありません。
• ホバー時にヒントを表示します。

テキスト

• 一般に、簡潔なラベルを使用します。 削除できるテキストを切り取る。
• 句読点を終了せずに、文のフラグメントを優先します。 文のフラグメントが大幅に短くない場合にのみ、完全な文 (終了句読点付き) を使用します。
• 省略可能な進行状況ラベルの場合は、動詞 (gerund 形式) で始まり、省略記号で終わるラベルで操作が行っていることを示します。 例: "Copying..."。 操作に複数のステップがある場合、または複数のオブジェクトを処理している場合、このラベルは動的に変更される可能性があります。
• ステータス バーのテキストを強調するために、色、太字、斜体は使用しないでください。
• ヒントの言い回しのガイドラインについては、「ツールヒントとヒントの を参照してください。

ドキュメンテーション

ステータス ラインやその他のバリエーションではなく、ステータス バーをステータス バーとして参照します。 例: "現在のページ番号がステータス バーに表示されます。"