web-dev-qa-db-ja.com

検索ボタンが検索ボックスの左側または右側にある場合

アイトラッキングと、インターフェイス要素の目的を特定する認知プロセスを検討するとき、(ラベル付けされていないことが多い)検索操作をアクティブにするボタンは、検索フィールドの左側または右側に配置する方が良いでしょうか?

19
Toni Leigh

プロセスはそのようなものだと思います。最高の相互作用は、左から右への読書と行動パターンを想定して、より少ない認知負荷を必要とします。
enter image description here

40

左から右に読む言語の場合、おなじみのUIパターンは右側の検索ボタンを提供する)であることを指摘することで以前の回答は正しいと思います---(右側の検索ボタンを提供検索テキストに続くアイトラッキングを続行する検索ボタン。

この説明を完了するために、キーボードのために一貫性を提供するモバイルUIパターンを考えてみましょう。検索ボタンは"return"または"enter"と同様に機能します。デスクトップのボタン。右側にあります。また、各検索フィールドの前には検索アイコンがあり、プレースホルダーに関係なく入力フィールドを識別します。これらのスクリーンショットは、iOS6、iOS7、およびAndroidからのものであり、このパターンがデバイスに依存しないことを示しています。

考慮すべきことの1つは、"cancel"ボタンです。これらのショットでは明らかではありませんが、位置付けはアプリ間で一貫していません。左側に配置して、後退することを意味する場合もあれば、右側に配置して追跡と一致するようにする場合もあります。

facebook ui pattern ios7mashable ui pattern ios6Android - google ui pattern

5
glilley

更新:検索ボタンは入力ボックスの右側にある必要があります(元の回答では明示的に言及していませんでした)

はい、単純にそれがいつものようであり、これが人々が慣れているものだからです。

そうでない限り、ボタンは(Google検索のように)自動提案であり、提案されたアイテムを選択すると、検索自体がトリガーされると想定されます。しかしそこにも、より保守的なユーザーには明示的な検索ボタンが必要です。

1
gurvinder372

言語が左から右に読まれる人々にとっても、同様の方法でWebサイトの要素と相互作用するでしょう。さらに、gurvinderが指摘するように、これは標準になり、今では大多数の人々が検索バーや後にアクションを必要とするあらゆる種類の入力。

1
Joe Taylor

検索の書き換えにボタンが必要な場合、ボタンはクエリ入力コントロールの後にある必要があります。これにより、フローを順方向に有効にし、タブボタンを使用して検索フロー内で順方向に進むことができます。

(タブボタンは、入力する情報が多く、キーボードとマウスを切り替えたくない場合に便利です。)

1
Danny Varod

また、検索テキスト入力領域のデフォルトの幅を評価することもできます。これはクリックすると拡大しますが、デフォルトでは少し小さくなっているため、標準的な距離では、視野とボタンが同時に視野内に表示され、目の動きが少なくなります。目の動きは本当に速いですが、実際には、ユーザーがオブジェクト全体(フィールド+アクションボタン)をすばやく識別できる「Word」要素を作成しており、より深く読んで解釈する必要がなく、迅速な認識を行うだけで済みます。 。

0
Mark Sloan

記述されているように、検索ボタンはキーボードのEnterアクションに置き換えられました。

単一条件検索では、特定の検索ボタンは必須ではありません。しかし、それは多基準検索にあります。

この場合、キャンセルクロスアイコンの正しい場所は無料です。そのため、magify searchアイコンは、キャンセルクロスahの反対側にあります。

このパターンは、多くのインターネットブラウザーのurl領域でも使用されます。これは、ユーザーがURL Webサイトを記録せず、検索フィールドであるために1つ以上の単語を記録すると、自然にインターネット検索エンジンを呼び出します。

検索ボタンを表示しない場合は、入力エリア内に「検索」ワードを書き込むことを忘れないでください。

0
pierre lebailly