この記事では、より優れていて便利な検索メカニズムをデザインするのに役立つ5つのベストプラクティスを取り上げます。
-
1.ビジュアルキュー
どのようなユーザインターフェイスを作成する場合でも、画面をすばやくスキャンするために必要なツールをユーザに提供しましょう。こうすることで、ユーザは、自分が望むものを望む時に見つけることができ、それとやりとりするとどうなるのかを知ることができます。
・虫眼鏡アイコン
虫眼鏡アイコンは検索バーを見つけるのに大いに役立ちます。人は虫眼鏡を検索ツールとみなす傾向にあるためです。シンプルなものを使いましょう。入力コンテナやボタンのないアイコンは、実際には検索を難しくします。
・実際の検索ボタン
一度クエリを入力した後にEnterキーを押す必要があると知らない人もいるかもしれません。検索入力の横にボタンがあると、ユーザが次の操作を認識するのに役立ちます。
-
2.入力特性
Webサイトやアプリのテーマに合わせて十分に目立つようにデザインしましょう。
十分な文字数が入力できるようにデザインしましょう。Nielsen Norman Groupの調査によると、27文字の入力が可能であれば、ユーザのニーズを90%カバーできます。
-
3.プレースホルダを通した明確さ
入力のプレースホルダテキストに適切なコピーを使用することが重要です。通常、これはユーザが検索できるもののヒントとなります。これにより、何を検索するのかを知ることができ、誤ったクエリを書くこともありません。最近のWebツールでは、HTML5のプレースホルダとしてヒントを追加することで、簡単にこれを行うことができます。
ヒント：
人には短期記憶がほとんどないことが知られています。プレースホルダのテキストに使用されるコピーを短く、わかりやすくしてください。長いヒントを使用すると、認知負荷が増加し、ユーザ体験が損なわれる可能性があります。
ある種のプロジェクトでは、より具体的な検索機能が求められます。この場合は、ホバーツールチップを使用してヒントが常に表示された状態になっていることを確認し、ユーザが短期記憶を他のタスクに費やすことができるようにします。
-
4.ガイド付きクエリ、別名：自動提案
ユーザは、適切な検索クエリを作成するのではなく、検索結果についてばかり考えていることがよくあります。これは、ユーザが期待していた結果を見つけることができない場合にも、ユーザにとって負担になります。ここで自動提案の仕組みが役立ちます。
目標は、検索を高速化することではなく、クエリ構築に少しだけ手助けをすることです。一つの方法として、予測的な検索パターンを実装することが挙げられます。ユーザが書いている文字を使って、クエリがどのようなものになるのかを予測するのです。
Jakob Nielsenが率いるチームが調査したように、最初のクエリから期待される検索結果を収集できないほとんどのユーザは、次の試行ではめったに成功しないことが知られています。したがって、これを行うことで検索を実行するユーザの労力を大幅に削減するだけでなく、探しているものが見つかった回数を増やすこともできます。
ヒント：
自動提案をただ与えればいいというわけではありません。どのようなメカニズムを使用しても、それは意味が理解でき、ユーザのニーズに合っていることを確認してください。
ユーザに最近の検索履歴のビジュアルキューを与えます。これは、再帰検索中に特に便利です。
シンプルにしましょう。最小の要素を使用してさまざまな候補（パディングや枠線など）を区切ります。
ユーザに提示する検索候補の数を5〜9の間に制限します。
-
5.ポジショニングを忘れずに
ユーザは、2006年にAD Shaikh＆K. Lenzによって発見されたいくつかのUI要素とパターンの位置に関して、ある程度期待しています。検索はこのパターンの1つであり、大半のユーザは、下の画像のようにインターフェイスの上部中央または右上にそれがあると予測します。
この知識に基づいて検索パターンを配置すると、あなたの親愛なるユーザが簡単に見つけることができます。
最後に
検索パターンは常に変化しており、既存のガイドラインのすべてをこの記事に載せているわけではありません。
この記事が初心者やUXやUI デザインのベテランの皆さんの役に立つことを願っています。
▼検索機能のデザインについて、こちらの記事も参考になるかもしれません。ぜひ、ご一読ください！
※本記事はGetting the Search Pattern Rightを翻訳・再構成したものです。
おすすめ新着記事
おすすめタグ