web-dev-qa-db-ja.com

ユーザーが入力をやめたときに検索が実行されていることをユーザーに伝える方法

私はウェブアプリケーションを開発していて、このアプリケーションの中に次のフォームがあります

enter image description here

ユーザーが[税コード]フィールドの値を変更し、入力が一時停止すると、データベース検索が自動的に実行されます。プレースホルダーとして検索アイコンを追加しましたが、ユーザーがアプリケーションが検索を実行しているときを理解できません。ユーザーが一時停止して検索を開始したときに読み込みアイコンを追加し、ユーザーが入力を再開したときにアイコンを非表示にすることを考えました。

これについて何か提案はありますか？

formsinput-fields
31
Skizzo

検索の進行中に一度だけ表示される、入力の最後にあるミニチュアプログレスホイールをお勧めします。私は以前にこの動作を見たことがありますが（ユーザー名ボックスを信じています）、進行ホイールがはっきりしているため、何かが起こっていることを誰もが理解できると思います。

enter image description here

ユーザーが入力したら、簡単に非表示にして（または、ちらつきを減らすためにグレー表示にして）、再度表示します。検索が完了したら、肯定的な補強（たとえば、緑色の目盛り）を提供します。

enter image description here

または、ユーザーが追加の選択を行うことができるように、ユーザーにドロップダウン選択または類似のものを提供します。

enter image description here

50
Ian

私があなたの言うことを正しく理解していれば、実質的にオートコンプリートフィールドに取り組んでいます。それらの標準は、下部にドロップダウンがあるような検索結果を提供することです。したがって、検索が実行されるときはいつでも、ドロップダウンの最初の項目としてsearching...を追加するのが最も簡単です。

たぶんアニメ化する…/ 3つの点

  • 。
  • ..
  • ...
  • （リセット）

ユーザーの注意を引く何かを持つために検索が実行されたとき。検索結果が表示されたらアイテムを削除し、クリック挿入できるようにします。これは、ユーザーが現在焦点を合わせている場所であるため、微妙で効果的でなければなりません。

例：

Performing AJAX/Background Search
+-----------------------------+
| I am looking fo             |
+-----------------------------+
| searching..                 |
+-----------------------------+

Result
+-----------------------------+
| I am looking for a          |
+-----------------------------+
| Wale                        |
| Welsh                       |
| Warehouse                   |
+-----------------------------+
12
kaiser

検索アイコン（ちなみに大きなアイコン）は、ユーザーに検索がそのまま行われていることを理解させるために使用できると思います。私が行う唯一の変更は次のとおりです。

  1. アイコンは、検索が行われている間のみ表示され、検索が終了するとアイコンが消えます。
  2. 検索が行われている間、アイコンは点滅しているはずです（オプション）。

（2）の理由はオプションです。アイコンの点滅などに反対するものがあるためです。私は個人的に、穏やかなアニメーションが常にユーザーの注意を引くのに最適だと思います。

3
ethanfar

これがオートコンプリートについてであると示唆しているすべての人々に少し混乱しています。

オートコンプリートは、入力している内容の補完を提案します。例：Googleが検索フレーズを提案します。

つまり、notは検索結果の表示と同じです。

両者を混同すると、検索に時間がかかって混乱を招くと思います。

私は、フィールドが検索をトリガーすることを示す小さな検索アイコンのアイデアが好きです。したがって、検索はそれらのフィールドの横にあり、ユーザーにフィールドが特別であることを示します。

検索が実行されているとき、そのアイコンはアニメーション化できます。アイコンがアニメーションで表示された場合は、表示された場合よりも点滅効果が少なくなります。

そのようなアイコンがある場合、一部の人々がそれをクリックしようとするため、検索を即座にトリガーするためにクリック可能にする必要もあります。

一般的な検索に関する1つの注意事項-検索が非常に高速になる場合がある場合にアニメーションをトリガーしないようにするには、タイムアウトを使用します。

検索が常に高速であると想定しないでください。 WindowsのEvernoteは、2文字を入力した後に検索を開始しようとするので私を夢中にさせます。彼らは遅滞なくこの検索をトリガーします-私はゲシュタルトバーストで文字を入力する80wpmタイピストですが、タイピングの速度に関係なく、まだキックしています！

2
Andy Dent

私が理解していることから、TaxCodeフィールドはオートコンプリートフィールドであり、入力時に検索が実行されていることをユーザーに認識してほしいと思います。

私の経験では、オートコンプリートフィルタリングを使用してフィールドをドロップダウンにすることができました。税コードの値はランダムなユーザー生成値ではなく、入力された値はコードの可能な範囲の1つであると想定しています。したがって、ユーザーが入力を開始すると、一致する値がフィルタリングされてドロップダウンに表示され、キーボードの矢印を使用して選択できます。値が入力されていない場合、フィールドは通常のドロップダウンリストのように機能します。

ここ は実用的なデモです。

このアプローチの制限は、ドロップダウンの値の量が非常に多い場合であり、ユーザーの画面読み込み時間が長くなります。 。

1
PJagger