検索入力フィールドの設計の根拠は何ですか？

Question

検索動作に関するさまざまな文献を読み、さまざまなデザインパターンを調べた後、Web上の検索入力フィールドのさまざまなバリエーションに興味があります。具体的には、次のことについて話します。

1. 検索アイコンと検索ボタン
2. 左側または右側の詳細検索オプション
3. 左または右の検索ボタン
4. ドロップダウンまたはボタンとしての高度な検索オプション
5. 検索ボタンをキャンセル
6. その他の検索インタラクション/動作

それを1つの明確な質問に入れます：どのように1-5をデザインに組み込み、その理由は何ですか（そして他の相互作用/動作を導入しますか）？

これは、ウェブサイトのタイプ、選択されたUIスタイル/テーマのタイプ、ブラウザのタイプ、およびその他のさまざまな要因にも関係していると思います。それぞれの質問は以前に尋ねられたと思いますが、上記のすべての点を考慮した全体的なデザインと、それがどういうデザインかを考えています。

この質問の最新情報。私はいくつかのウェブサイト/アプリケーションを簡単に検索し、デザインがいかに多様であるかのいくつかの例を思いつきました。

Answer 1

あるバージョンから別のバージョンに移行する理由はたくさんありますが（個人的な好み、デザイン、ブランディング、アクセシビリティなど）、実際にテストデータを見て、これらのオプションのいずれかが実際に優れているかどうかを確認するのに勝るものはありません。広い世界で。

デルは検索フィールドに関していくつかのA/Bテストを行いました あなたの例と同様の例を使用して、次の結果が見つかりました：

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

バージョンAでは、DellのRPV（訪問者あたりの収益）が6.3％増加しました。

このテストの優勝バージョンは、検索バー自体の「検索」という単語を省略し、「検索」の行動を促すフレーズを含むボタンを追加しました。これにより、訪問者に方向性が与えられ、訪問者がアイコンを解釈する負担が軽減されます。拡大鏡。デルはこのテストに複数のバリエーションを使用し、虫眼鏡アイコンを使用する各バリエーションは検索ボタンと同じように機能しませんでした。

わかりませんknow検索ボタンがあり、フィールドにコンテンツがないオプションの方が優れているのはなぜですか。

Jakob Nielsenは多くの検索の研究を行ってきました 、そして常に同じ結果に戻ります：

人々はウェブサイトを検索する方法を本当に理解していません。

彼の記事の1つ （2001年からではあるが、完全に正確ではないかもしれないが）

最高のデザインは、ホームページにシンプルな検索ボックスを提供し、高度な検索とスコープを試してみます。

本当に、それはいくつかの簡単なポイントに帰着します

• あなたが何を提供しているのかについて検索ボックスを明確にしてください
• シンプルに保つ-高度な検索などの追加オプションを避けます（少なくとも最初は、結果ページ内にある可能性があるため、検索を入力した後に結果を調整できます）

Answer 2

これが私があなたの問題を解決する方法です

-検索アイコンと検索ボタン

検索コンポーネントがライブフィルターの場合-例入力を開始するとすぐに結果が表示されます。アイコンを使用するだけで十分です。結果を表示するためにアクションが必要な場合（ボタンを押すか、キーボードでEnterキーを押す）、ボタンを使用する必要があります。すべてのユーザーがEnterキーを使用しているわけではなく、すべてのサイトがEnterキーを押して「検索」ボタンを接続しているわけではありません。

左側または右側の詳細検索オプション

ここには本当に標準はありません。テキスト検索の下に配置することもできます。重要なことは、それが本当に見えるかどうかを決めることです。

左側または右側の検索ボタン

右側を使用することが多いので（西側諸国では）前方（テキストの読み方）を表します。テキストを右から左に読む場合、デザインの逆を考える必要があります。

ドロップダウンまたはボタンとしての高度な検索オプション

一般的に、ユーザーは「Google」の方法に慣れていると思います。1つのテキストフィールドでほとんどの検索を処理できます。したがって、標準モードでは高度な検索機能を非表示にします。もちろん、これはプロジェクトごとに異なります。 1つの解決策は、ユーザーの行動を追跡し、ユーザーが希望する場合は高度な検索を標準ビューとして使用することです。

検索ボタンのキャンセル

検索プロセスが完了するまでに時間がかかる可能性がある場合、ユーザーはそれをキャンセルして検索条件を絞り込むことができます。キャンセルボタンは、プロセス自体がプロセス中にユーザーによる処理を停止する場合に使用することをお勧めします。

その他の検索インタラクション/動作

テキスト検索領域が多くの検索オプションの1つである場合は、独自の検索ボタンを配置しないでください。代わりに、すべてのコントロールが検索で使用されることを示す1つの検索ボタンを使用します。

Answer 3

UIではなくUXの観点からは、情報構造だけでなく、コンテキスト内の検索機能の重要性にも依存します。私が意味したのは？何千もの記事が掲載されているオンラインメディアの場合は、強力な全文検索が必要です。リソースが（このサイトのように）タグを使用する場合、もう1つの検索メカニズムを提供できます。フォトアーティストポートフォリオの場合は、訪問者にすべてのコンテンツを表示するように強制することをお勧めします。

また、ブラウザを実行しているデバイス（デスクトップ、モバイルなど）にも依存します。

一般に、別の検索機能を提供しない場合は、IMOの方がシンプルで使い慣れた実装であることが望ましい-検索入力フィールドとその右側にある検索ボタン。