検索ボックス: デザイナーが注意すべき 5 つの詳細

編集者注: ユーザー インターフェイスの設計は、ユーザーを維持したいアプリケーションや Web サイトにとって非常に重要な部分ですが、ユーザーの習慣に合ったサービス製品を設計するのは簡単な作業ではありません。この記事の著者である Bruno Charters 氏は、記事「検索パターンを正しく理解する」の中で、デザイナーが注意を払うべき 5 つの詳細について説明しています。エントリポイントは比較的小さく、散在していますが、初心者だけでなくベテランでも覚えておく必要があるものです。

完璧なケース

1. 視覚的な手がかり

あらゆる種類のユーザー インターフェイスを作成する場合、ユーザーがページ内をすばやく移動するために必要なツールを提供することが、開発者の仕事の一部となります。こうすることで、ユーザーはいつでも欲しいものを正確に見つけることができ、それを操作すると何が起こるかがわかります。

（１）虫眼鏡アイコン

アイコンを使用します。検索バーを見つける速度がどれだけ速くなるかについては強調したくありません。シンプルであればあるほど良いです。詳細が少ないほど、ユーザーはすぐにスキャンできるようになります。ただし、コンテナーや入力ボタンがなく、アイコンだけの場合、実際には検索が難しくなる可能性があります。

ミニマリスト検索アイコンの例

通常、ラベルが付いていなくても、虫眼鏡アイコンは検索ツールを示していることが認識されます。残念ながら、アイコンが 1 つしかないため、検索が難しくなります。

（２）実際の検索ボタン

誰もがウェブサーフィンを学んだミレニアル世代というわけではありません。つまり、クエリを入力した後に Enter キーを押す必要があることを誰もが知っているわけではないのです。検索入力の横に実際のボタンを追加すると、ユーザーが次のアクションを確認しやすくなり、ユーザーに必要な認知負荷が軽減されます。

ボタンを左、上、下に置かないでください

ヒント:

あるいは、テキスト入力アクションが完了するまで入力ボタンを非表示にすることもできます。

ボタンをクリックしたときに自然に感じられるように、ボタンのサイズが適切であることを確認してください。

2. 入力機能

時には、最も輝いていて、最も性能が高く、より大きな車でも、単純に目的を達成できないことがあります。検索モードでも同様です。

（１）表現したいことをデザインする

デザインがウェブサイトやアプリのテーマに合うようにしながら、十分に目立つようにします。

YouTube の新しい、驚くほどダークなテーマは、検索モードを他の要素と調和させることで、この点を完璧に捉えています。「重要なのは、誰が一番大きいかではありません。」

入力の長さが短すぎないことを確認してください。 Norman Group による関連調査によると、27 文字を入力できる入力ボックスは 90% のユーザーのニーズを満たすことができます。

5文字と26文字を入力できる検索ボックスの簡単な例

3. プレースホルダーを明確にする

入力用のプレースホルダー テキストに適切なコピーを使用することが重要です。通常、ユーザーは検索を通じてヒントを得ることができます。これにより、ユーザーは検索内容を把握でき、クエリの書き方が下手なためにイライラしたり圧倒されたりすることがなくなります。最近、Web ツールを使用すると、HTML5 にプレースホルダーとしてヒントを簡単に追加して、これを実現できるようになりました。

プレースホルダーを追加すると、ユーザーはクエリをフィルタリングしやすくなります。

ヒント:

人間の短期記憶力は低いことはよく知られています。プレースホルダーテキストのコピーは短く直接的なものにしてください。長いプロンプトを使用すると、最終的には認知負荷が増加し、ユーザー エクスペリエンスが損なわれます。

一部のプロジェクトでは、より具体的な検索機能が必要になります。この場合、ホバー ツールチップを使用すると、ヒントが常に表示されるようになり、ユーザーは短期記憶を使用して他の操作を実行できるようになります。

この例では、ツールチップによって、クエリの形式と検索対象についてユーザーが理解しやすくなります。

4. ガイド付きクエリ自動提案機能

多くの場合、ユーザーは検索結果について考えるのに忙しく、正しい検索クエリを入力しているかどうかを確認することに集中できません。期待した結果が得られない人にとっては負担になることもあります。これはユーザーエラーであると同時に、設計者エラーでもあります。ここでも自動提案メカニズムが役立ちます。

このメカニズムの目的は、検索を高速化することではなく、クエリの構築を少し支援することです。これを実現する 1 つの方法は、予測検索モデルを実装することです。あなたが探しているこの奇妙な単語とは何でしょうか? ユーザーが入力した文字の動作を分析して、クエリが何であるかを予測するだけです。

最初のクエリで期待した検索結果を見つけられなかったほとんどのユーザーは、その後の試行でもほとんど成功しないことはよく知られています。ヤコブ・ニールセン率いるチームによる関連研究でも同じ結論に達した。したがって、これを行うと、ユーザーの検索作業負荷が大幅に軽減されるだけでなく、検索の成功率も向上します。

ヒント:

自動提案を行うという間違いをしないでください。どのようなメカニズムを使用する場合でも、それが意味を持ち、ユーザーのニーズを満たしていることを確認してください。

ユーザーに最近の検索履歴の視覚的なヒントを提供します。頻繁に検索する場合に便利です。

シンプルに保ち、最小限の要素を使用してさまざまな自動提案を区別します。 (例: 塗りつぶしと境界線)

ユーザーに提供する提案の数を 5 ～ 9 に制限します。ユーザー エクスペリエンス デザインにおけるミラーの法則の適用を覚えておいてください。

5. 場所の重要性を忘れない

2006 年に AD Shaikh と K. Lenz が行った調査で、ユーザーは一部のユーザー インターフェイス要素とパターンの位置について一定の期待を持っていることが判明しました。検索もそのモードの 1 つであり、以下の調査で示されているように、大多数のユーザーはインターフェースの上部または右上隅に検索機能があることを期待しています。

「多くの参加者は、Web ページの右上隅または左上隅に「Web サイト検索エンジン」の場所があることを期待しています。」

この知識に従って検索パターンを見つけるための設計を試みれば、大切なユーザーが簡単に見つけられるようになります。

結論は

検索は進化する動作であり、この投稿では既存のガイドラインをすべて網羅しているわけではないことを認識しています。それを念頭に置いて、この投稿が UI と UX の初心者やベテランに役立つことを願っています。

私の意見では、私たちは毎日、いわゆるベストプラクティスを数多く扱っているので、この投稿で取り上げているような単純なトピックを見落としがちです。

オリジナルリンク: https://uxplanet.org/getting-the-search-pattern-right-e71dbb59dc67

翻訳者：Mumuzi、36Kr翻訳チーム制作。編集者：ハオ・ペンチェン

翻訳アドレス この記事は@郝鹏程によって承認されており、著者の許可なしに複製することはできません。

タイトル画像はCC0プロトコルに基づいたUnsplashからのものです

元のタイトル: 検索ボックス: デザイナーが注意すべき 5 つの詳細

キーワード: ウェブデザイナー、プロダクトデザイン