検索デザインにおける虫眼鏡アイコンの長所と短所

[コアヒント] ユーザーは、テキスト ラベルがなくても、虫眼鏡アイコンが「検索」を意味することを認識します。欠点は、ユーザーがアイコンを見つけにくくなることです。

検索インターフェースのデザインに関する調査で、検索ボックスの開発傾向がわかりました。従来の「検索」という単語のテキストボタンの代わりに、純粋な虫眼鏡アイコンを使用するデザインが増えています。テキスト入力ボックスを廃止し、虫眼鏡アイコンのみを残すデザインもあります。現在、どのバージョンが最も優れたユーザーエクスペリエンスを提供しますか?

以前の検索ボックスのデザインガイドライン

従来の検索ボックスのデザインはすでに非常に成熟しており、その主な原則は次のとおりです。

ページの右上隅に目立つ検索ボックスを配置し、検索ボックスの横に検索ボタンを配置します。

検索ボックスにはテキストによる説明は必要ありません。検索ボックスの横にある明らかな検索ボタンは、ここで検索できることと、検索方法もユーザーに伝えます。

しかし、最近登場したパターンの中には、こうした基本的なルールを破るものもあります。虫眼鏡アイコンはスペース効率が良いため、多くのサイトで使用されています。デザインガイドラインをより柔軟に使用することには何の問題もありませんが、ユーザーのニーズが変わらないことを確認する必要があります。ユーザーは検索領域の外観を気にしません。必要なのは、検索語句をすばやく入力できる場所だけです。デザインの慣習が変化しても、ユーザーの作業を遅らせるのではなく、ユーザーが簡単にこの目標を達成できるようにすれば、問題は生じません。しかし、調査の結果、アイコンのみの検索デザインには依然として明らかな欠点がいくつかあることがわかりました。

(a): 従来の検索ボタンを備えた検索ボックス。

(b、c、d): 虫眼鏡アイコンを備えた新しい検索ボックスのデザイン パターン。

(e) モバイルデザインの影響を受けたデザインには、アイコンのみが含まれ、入力ボックスは含まれません（このデザインは推奨されません）

アイコンの採用

虫眼鏡アイコンは、さまざまな Web サイト、アプリ、オペレーティング システムで情報の検索手段として使用されているため、検索と密接に関連付けられています。 この実装により、ユーザーはこのアイコンをより早く認識できるようになりました。レスポンシブ デザインの人気が高まるにつれて、アイコンのみのデザイン パターンの人気も高まっています (ただし、優れたレスポンシブ デザインのサイトでは、より大きな画面に変換されたときにアイコンの横に検索ボックスも表示されます)。

さまざまなアプリケーションやオペレーティング システムの検索機能で使用される虫眼鏡アイコンにより、ユーザーは検索と虫眼鏡を単純に関連付けるようになりました。上から下へ: Google Chrome、Windows エクスプローラー、Internet Explorer、Mac 上の Office Word。

最新の研究成果

最新の調査によると、デザイナーは虫眼鏡アイコン デザインへの移行をできるだけスムーズかつリスクなく行いたいと考えています。ここでは、虫眼鏡アイコン デザイン モード時にユーザーが遭遇する可能性のある問題をいくつか紹介します。

虫眼鏡アイコンしかない場合、ユーザーは検索機能を見つけるのが難しくなります。

検索ボックスがない場合、虫眼鏡アイコンが占めるスペースは少なくなります。視覚的にはあまり目立たないので、目立ちにくくなります。デスクトップ ウェブサイトの場合、虫眼鏡アイコンのみのデザインはお勧めしません。モバイル デバイスでは画面が小さく、アイコンやテキスト ボタンを配置するスペースが少ないため、虫眼鏡アイコンのみのデザインが適しています。しかし、デスクトップ上では、無数のアイコンやボタンの中に、虫眼鏡アイコン 1 つが埋もれてしまう可能性があります。

ユーザーが虫眼鏡アイコンを一目で検索と関連付けることができる場合は、「検索」という単語を表示する必要はありません。

ユーザーは拡大鏡の機能を認識し、理解します。それを見ると、検索を思い浮かべます。アイコンが明白で、クリック可能であるという強いメタファーがある場合は、「検索」という単語を表示する必要はありません。多くのユーザーは依然として検索ボタンをクリックしてクエリを送信する習慣があるため、クエリを送信するには虫眼鏡アイコンをクリックする必要があります。さらに、サイトの国際版では「検索」という単語を翻訳する必要がなくなりました。 (ただし、アクセシビリティ上の理由から、虫眼鏡ボタンの alt フィールドに「検索」という単語を入力することを忘れないでください。)

検索が予期しない場所に配置されている場合、ユーザーはそれを見つけるために追加の助けを必要とする。

ユーザーはまず右上隅を見ますが、見つからない場合はページの上部をスキャンし始めます。検索アイコンが左側にあるサイトのうち、大きな空の検索ボックスを使用しているサイトでは、ユーザーが検索を見つけやすくなっています。ユーザーは最終的には検索ボックスを見つけますが、そもそも検索機能を探すためにページ全体を検索する必要はありません。

虫眼鏡アイコンのみの検索はインタラクションコストを増加させる

虫眼鏡アイコンのみを表示する検索のマイナス面の 1 つは、ユーザーが検索ボックスが表示されるまで待機し、入力する場所を見つけて、場合によっては複数回タップして入力領域にフォーカスする必要があることです。これらの追加手順により検索プロセスが長くなりますが、検索ボックスをクリックしてすぐに入力を開始するだけで済むはずです。

他のほとんどのアイコンでは、テキストが明確である必要があります。

明確なテキストは、ユーザーがより迅速に意思決定を行うのに役立ちます。テキストはより良い情報の手がかりを提供できます。新しいアイコンには、3 行のメニュー アイコンなどのテキストを添える必要があります。マップ マーカー アイコンは、意味がまだ不明瞭で、一貫性なく使用されている別のアイコンであり、現在の場所、別の特定の場所、一般的な場所、または近くの場所を意味する場合があります。

ユーザーにとってまだ馴染みのない新しいアイコンには、3行のメニューアイコン（左）とマップマーカーアイコン（右）があります。

ユーザーはまだこれらのアイコンの意味と機能を学習中なので、明確なキャプションを付けることが最善です。さらに、デスクトップ画面には十分なスペースがあるので、ユーザーが必要なものをより速く簡単に見つけられるようにするのはどうでしょうか?

虫眼鏡アイコンの使用に関するデザイン提案

1. まず、Web サイトのデスクトップ バージョンに検索ボックスを用意し、アイコンの横に配置します。この検索ボックスがタブレットでも利用できるようにすることもお勧めします。ウェブサイトを小さい画面（スマートフォンやスマートウォッチなど）で表示する場合、ユーザーが虫眼鏡アイコンをタッチするまで検索ボックスを非表示にすることができます。上記のすべてのケースでは、検索ボックスに「検索」テキストの説明を残す必要はありません。

2. 虫眼鏡の最もシンプルなバージョンである、シンプルなアウトライン アイコンを使用します。グラフィックの詳細が少ないほど、認識が速くなります。

3. 余白を多くした大きめのアイコンを使用します。クリック可能な領域が広くなると、見つけやすくクリックしやすくなります。

4. アイコンが背景や周囲の要素から目立つように、十分なコントラストを使用します。

5. 右上隅に配置します。これは、ほとんどの人が検索を配置すべき場所だと考えている場所です。

6. ユーザーが Enter キーを使用するか、アイコンをクリックして検索要求を送信できるようにします。上でも述べましたが、多くのユーザーが依然としてボタンをクリックして検索リクエストを送信する習慣があることを改めて強調しておく価値があります。

7. クリックすると入力領域が拡大される、サイズ変更可能な検索ボックスの使用を検討してください。これにより、画面スペースを節約しながら、検索を見つけて実行するための十分な視覚的な手がかりと、検索を実行する際の十分な入力スペースがユーザーに提供されます。

上: 検索ボックスをクリックする前。下: クリックすると検索ボックスが拡大します

8. 検索ボタンを他のアイコンで埋め尽くさないでください。検索に適切な優先順位を与えてください。

9. これは上記とは逆です。孤立して検索しないでください。これも、上記と同様に、検索で見つけるのが難しくなります。

10. ユーザーが検索アイコンをクリックしたとき、検索ボックスはアイコンの近くに表示する必要があります。離れすぎると、ユーザーのインタラクションコストが増加します。

11. ユーザーに2度クリックさせないでください。特に、一度（または一度も）では十分な場合。場合によっては、ユーザーは最初にアイコンをクリックして検索ボックスを開き、もう一度クリックして入力フォーカスを検索ボックスに移動する必要がありました。アイコンを 1 回クリックすると、検索ボックスに入力フォーカスが置かれ、ユーザーはすぐに入力を開始できるようになります。さらに良いことに、マウスをホバーすると検索ボックスが拡大し、フォーカスが準備されるので、ユーザーはすぐに入力を開始できます。

最終的な目標は、ユーザーがより速く検索を見つけ、実行できるようにすることです。

サイトやアプリで「検索」ボタンの代わりに虫眼鏡アイコンを使用している場合は、上記の提案が役立つはずです。また、検索ボックスを左側に配置したり、音声認識コマンドを使用したりといった、他の新しい検索デザイン パターンにも注目していきます。

特に明記されていない限り、すべての Geek Observations は Geek Park からのオリジナル レポートです。転載する場合は、著者とオリジナル リンクを明記してください。

元の URL: http://www.geekpark.net/read/view/205386

検索デザインにおける虫眼鏡アイコンの長所と短所

キーワード: