次の方法で共有


検索ボックス

Note

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

検索ボックスを使用すると、ユーザーは一致をフィルター処理または強調表示することで、大量のデータ セット内の特定のオブジェクトまたはテキストをすばやく見つけることができます。 標準的な検索コントロールはありませんが、プログラムの検索機能を Windows の検索機能と一致させるよう努める必要があります。

検索には次の 2 種類があります。

  • クイック検索。ユーザーが入力するとすぐに結果が表示されます。 ボタンをクリックする必要がないため、虫眼鏡の検索記号はボタンではなくグラフィックとして表示されます。

    [検索] ボックスを指す [プロンプト] 吹き出しと、虫眼鏡グラフィックを指す [検索記号] 吹き出しが表示されたインスタント検索ボックスを示すスクリーンショット。

    インスタント検索を使用する一般的な検索ボックス。 検索は、すべてのキーストロークで自動的に実行されます。

  • 通常の検索。ユーザーが検索ボタンをクリックすると検索が実行されます。 虫眼鏡の検索記号がボタンに表示されます。

    通常の検索ボックスのスクリーン ショット

    通常の検索を使用する一般的な検索ボックス。 ユーザーはボタンをクリックして検索を実行します。

    ユーザーには、どちらか一方または両方の種類の検索オプションを指定できます。

これは適切なコントロールですか?

それを判断するには、以下の質問を考えます。

  • 特定のオブジェクトを見つけるのが難しいですか? これは、次の場合に発生することがあります。
    • オブジェクトは多数あります。
    • オブジェクトは 1 つの場所に配置されません。 検索は、ツリー内のオブジェクトを検索する場合に特に便利です。
    • 検索データを見つけるのが困難です (メタデータなど)。
  • ユーザーはドキュメント内の特定のテキストを検索する必要がありますか?
  • 機能は 5 秒以内に関連する検索結果を返しますか? そうでない場合は、検索機能を提供できますが、表示されるフィードバックを提供する代替設計を使用して、検索ダイアログ ボックスなどの実行時間の長い検索に対応できます。

設計概念

検索は、多くのシナリオで重要な最初のステップです。ユーザーは、オブジェクトを使用する前にオブジェクトを見つける必要があります。 ユーザーは、ますます大きくなるハード ディスクに多くのオブジェクトを保存していますが、オブジェクトの参照はうまくスケーリングされません。 検索は、ユーザー エクスペリエンスのシンプルで一貫性のある信頼性の高い部分である必要があります。

Windows の検索ボックス:

  • すべてのエクスプローラーウィンドウの一部であるため、簡単に見つけて認識できます。
  • 外観と動作が一貫しています。
  • 効率的かつ高速で、インスタント検索モードで瞬時に結果を提供します。

Windows では、次の場所で検索ボックスが使用されます。

  • エクスプローラー
  • エクスペリエンス (Microsoft Windows メディア プレーヤー、Windows フォト ギャラリー、Windows インターネット エクスプローラー)
  • [スタート] メニュー (プログラムと最近使用したファイルを検索する場合)
  • ホーム ページコントロール パネル (コントロール パネルの項目とタスクを検索する場合)
  • ヘルプ (関連するヘルプ トピックを見つける)

ルック アンド フィール

Windows での検索の操作性は、インスタント検索をサポートすることで大幅に強化されています。 すぐに結果を得ると、Windows はより強力で直接的に感じます。

Windows エクスプローラー およびアプリケーション ウィンドウでは、補足エントリ ポイントである場合は、右上隅に検索が配置されます。 この場合、ユーザーは、ウィンドウで探しているものが見つからないときに検索メカニズムを探します。 ただし、Search がプライマリ エントリ ポイントの場合は、ウィンドウの上部の中央に配置されます。

[検索] ボタンは、検索ボックスに視覚的に接続されています。 スペースを最小限に抑えるために、ラベルではなく検索ボックス内でオプションの プロンプト が使用されます。 プロンプトは、命令 (検索する種類など) であるか、検索の範囲 (画像の検索など) を示す場合があります。

インスタント検索ボックスのスクリーン ショット

ラベルと個別のボタンがない場合、Windows でのクイック検索は軽量な外観になります。

検索が成功すると、検索結果の仮想ページが作成され、[戻る] スタックと [アドレス] バーに追加されます。 ユーザーは、元のページを復元して検索ボックスをクリアする方法はいくつかあります。たとえば、[戻る] をクリックする、アドレス バーの元のページをクリックする、Esc キーを押す、検索ボックスをクリアするなどです。

ユーザーは、結果の前のページを復元せずに[検索] ボックスをオフにすることもできます。 インスタント検索モードでは、ユーザーが入力を開始した後にクリア ボタンが表示されます。"x" は虫眼鏡の検索記号を置き換えます。 ホバーすると、"x" はボタンの外観を取得し、クリックできます。

'x' アイコンが表示された検索ボックスのスクリーン ショット

ユーザーは、コントロールの右端にある [x] をクリックして、[検索] ボックスをオフにすることができます。

通常の検索モードでは、クリア ボタンは省略可能です。 たとえば、検索の完了に長い時間がかかっている場合など、ユーザーが役に立つ場合があります。 ユーザーは "x" をクリックして、進行中の検索を停止できます。 検索が既に完了している場合、ユーザーは "x" をクリックして [検索] ボックスをオフにすることができます。

ガイドライン

場所

  • アプリケーション ウィンドウの場合は、右上隅にある [検索] を見つけます。
  • ポップアップ ウィンドウの場合は、最もわかりやすい便利な場所で検索を見つけます。
  • 例外: 通常、ユーザーがウィンドウ (プライマリ エントリ ポイント) で最初に行う操作が検索の場合は、ウィンドウの上部に中央揃えします。

視線

  • 標準の検索ボタン グラフィックスを使用します。 次の 3 つのバージョンがあります。
    • 虫眼鏡の検索記号のみ (ホバー時のボタンなし)。 クイック検索に使用します。
    • ボタン付き虫眼鏡検索記号。 検索を開始するには、ボタンをクリックする必要がある場合に使用します。
    • ボタンとドロップダウン矢印を含む虫眼鏡の検索記号。 ユーザーがスコープを変更できる場合、または他の設定が使用可能な場合は、ドロップダウン矢印を追加します。
      • [クイック検索] では、ドロップダウン矢印のみを使用し、ホバー時にボタンを表示します。
      • 通常の検索の場合は、ボタンにドロップダウン矢印を表示します。

さまざまな状態のインスタント検索ボックスの図

クイック検索のビジュアル仕様。

さまざまな状態の通常の検索ボックスの図

通常の検索の視覚的な仕様。

  • ラベルは使用しないでください。代わりにオプションのプロンプトを使用してください。 ユーザーが検索が汎用ファイル検索であると見なす傾向がある場合は、プロンプトを使用してスコープを指定します。 それ以外の場合は、Type を使用して検索するか、同様の簡潔な語句を使用します。

    [検索する種類] プロンプトのスクリーン ショット

    これらの例では、ユーザーが検索を操作するのに役立つ簡単なテキスト プロンプトが表示されます。

相互作用

  • 入力フォーカスで、以前に入力したテキストを自動的に選択します。 これにより、ユーザーは「」と入力して新しい検索を入力したり、矢印キーを使用してキャレットを配置して前の検索を変更したりできます。

    テキストが強調表示された検索ボックスのスクリーン ショット

    この例では、入力フォーカスで以前に入力したテキストが選択されています。

  • [検索] ボックスのキーボード ショートカットを Ctrl + E に割り当てます。

機能

  • 可能な限りインスタント検索をサポートします。 通常の検索が余分な待機時間の価値があるシナリオがある場合は、通常の検索とインスタント検索の両方を指定します。
  • 通常の検索では、関連する結果が 5 秒以内に返され、インスタント検索では 2 秒以内に結果が返される必要があります。 この時点以降、プログラムの応答性が高く、ユーザーが他のタスクを実行できる限り、検索は時間の経過と同時に関連性の低い結果を入力し続ける可能性があります。 この応答性を確保するために、検索データのインデックスを作成する必要がある場合があります。
  • 通常の検索モードとインスタント検索モードの両方を指定する場合、インスタント検索結果は通常の検索結果のサブセットである必要があります。
  • すべての検索はプレフィックスベースです (部分文字列またはサフィックスの検索はありません)。 末尾のワイルドカード文字の使用は省略可能であり、結果には影響しません。 複数の単語を入力する場合は、OR 検索を使用します。
  • 検索が成功すると、検索結果を含む仮想ページが [戻る] スタックと [アドレス] バーに追加されます。 複数の検索では 1 つの仮想ページが生成されるため、[戻る] をクリックすると常に元のページが返されます。
  • スケールに必要な場合は、関連性で検索結果をランク付けします。
  • 空白の検索では、元のページが返されます。

クイック検索ボックスのサイズ設定と間隔の図

クイック検索に推奨されるサイズ設定と間隔。

通常の検索ボックスのサイズ設定と間隔の図

通常の検索に推奨されるサイズ設定と間隔。

Text

  • [検索] ボックスでプロンプトの文言を表示するには、指示 (検索する場合は [入力] など) にするか、検索範囲 (画像の検索など) を指定します。
  • プロンプト テキストは簡潔にする必要があります。 1 つの単語または短い語句で十分です。
  • 文章スタイルで大文字と小文字を使い分けます。
  • 終了句読点や省略記号は使用しないでください。

ドキュメント

  • このコントロールを [検索] ボックスとして参照します。 最初の単語の最初の文字を大文字にします。ボックスの最初の文字を大文字にしないでください。
  • クイック検索と通常検索の 2 種類の検索を参照してください。 インスタント検索の最初の文字を大文字にします。通常の検索の最初の文字を大文字にしないでください。

用語集