検索フィールドのアイコン配置｜UIデザインポリシー整理
リーガルテックAI SaaSスタートアップ、MNTSQモンテスキューのプロダクトデザイナーのクボスケです。
私たちは、レバレッジの効くデザインの仕組みづくりを目指しています。この記事は、MNTSQとしてのUIデザインの基準や方針を決めていく「UIデザインポリシー整理」というプロジェクトのなかで行なわれたディスカッションをもとにまとめたものです。
このプロジェクトの主旨や運営については、初回の記事でも述べていますので、ぜひご覧ください。
それでは、今回のトピックは「検索フィールドのアイコン配置」です。
検索フィールドのアイコン配置
検索フィールドは、テキストから関連情報を見つけ出すためのナビゲーションのUIです。ユーザーがフィールドに入力したテキストをキーワードとしたり、サジェストした候補からの指定をもとに、それらを含むあるいは含まないような検索結果を表示します。
検索UIそのものの論点は多岐に渡りますが、ここでは検索フィールドのアイコンの配置にのみ絞って整理します。
検索のためのフィールドとして汎用的なテキストフィールドと区別する意図で、虫眼鏡のアイコンをフィールド内の左端に配置します。左側はユーザーが入力をはじめるよりも前のタイミングで視線が向くため、このフィールドの用途が伝わりやすくなります。右側は、より高度な検索機能のために拡張する余地があるほか、環境によっては、入力したテキストをクリアするための［×］ボタンが自動で表示されるため空けておきます。
検索フィールドの虫眼鏡アイコン自体には、クエリを送信するボタンとしての機能は持たせません。一般にアクションのボタンは入力内容の右側に置くのが妥当と言えます。その意味でもアイコンの挙動について誤解が少ない配置となります。
以下はやりとりの内容を一部抜粋したものです。
クボスケ：検索フィールドの虫眼鏡アイコンの配置は左なのか右なのか。どちらもよく見かけます。アイコンの向きも、レンズ部が左上（持ち手が右下）だったり右上だったり
ナカシマ：アイコンとテキスト入力部分の位置関係には何か根拠があったりするのでしょうか。たとえばサジェストつき検索になっているものととそうでないものとか。ちなみにメルカリはサジェストがあるがアイコンは右でした
kassy：視線の流れ的に、左に（先に）手がかりとなるアイコンがあるほうが自然だと思いました。検索フィールドを見つけやすいというか
ナカシマ：左にアイコンがあるほうが「ここで検索できる」と示している感じでやさしい印象ですね
クボスケ：アイコンが右だと不都合なことがあったりするでしょうか。ぱっと思いつくのは、OSのほうの機能として、クリアのための［×］がフィールド内の右端に自動で表示されたりすることがあるため、かぶってしまったり狭くなってしまったりするとか
ナカシマ：実装で回避する手立てはあると思いますけどね
クボスケ：あと、アイコンはフィールドに入力された検索クエリをsubmitするボタンとしての機能を持つべきかという論点もありそうです。いずれにせよ［Enter］でもsubmitできていいのかなと思いますが
ナカシマ：実行して進むことを示すのは右なので、submitの機能を持つ場合に右に配置するのは合理的ですよね
kassy：検索って、活用するには、目的の言語化が必要と言えます。さらに、指向性／半指向性／無指向性の検索体験の違いがあります
ナカシマ：何を検索したらいいかわからないひと向けには、右側に明示的にアクションのためのボタンがある方がよいのでしょうか？
kassy：サジェストをタップして入力したり、タイムラインに自動でおすすめがフィードされるなど、ユーザーの行動コストを節約する方向にどんどん向かっていることとなにか関係ありますかね
ナカシマ：検索という行動は、高めのリテラシーというか、これまで発展してきた検索の作法のようなものを要求するのかもしれません。かつてGoogleの登場が新鮮だったのは、それまでのディレクトリ型ではなく、自由にキーワードで検索できることでした
クボスケ：今後も検索が求めるリテラシーは変化していくのかもしれませんね
kassy：より高度な検索、複雑な検索機能のための拡張の余地を右側に残しておくという考えかたもできそうです
ナカシマ：現状のGoogle検索ではChromeのアドレスバーの右端に「☆」を、ホームの検索フィールドでは音声検索や画像で検索の導線を置いていたりしますね
