検索でのフィルターの使用に関する視覚的フィードバック
私は検索エンジンのモバイルバージョンの設計に取り組んでいます。これにはいくつかのフィルターがあり、ユーザーがフィルターを選択したときにユーザーに視覚的なフィードバックを提供したいので、フィルターを使用して、ユーザーは検索を知っています結果がフィルターされているか、フィルターを選択してから変更されています。
これはモバイル向けに設計されているため、使用できるスペースが限られていることに注意してください。
背景をぼかしてローダーアイコンを提供できます。オプションのフィルタリングが進行中であることをユーザーに伝えます。これに加えて、フィルターオプションはどこに表示されますか？
これに取り組む1つの方法は、フィルターをモーダルとして表示することです。これは2つの問題に対処します。
1）ユーザーは「完了」または「適用」を押してモーダルを閉じます。これにより、検索結果が変更されたことを確認できます。
2）ユーザーは、下にある結果に到達するためにフィルターの長いリストをスクロールする必要はありません。これは問題になる可能性があります。特に、結果が複数のページに分散していて、それらをナビゲートすると、ユーザーが毎回ページの上部に移動する場合に問題になります。
添付画像はnext.co.ukからのものです。 「フィルター」ボタンを押すと、フィルターモーダル（2番目の画像）が下から上にスライドするため、ユーザーはフィルターを別のページに移動していないことがわかります。
[画面全体を覆わずに下部にフィルターを追加することは1つの方法であり、別の問題は、フィルターを変更した後に適用ボタンを使用することです。サーバーが各フィルターの変更に基づいてデータをプルする必要があり、最終的にクラッシュする場合に問題が発生するため、それを使用する前に、サーバーにヒットして結果を取得できるように[フィルターの適用]ボタンを追加することを検討してください。
次のようなフィードバックをユーザーに提供する必要があります。
- ページは彼の相互作用を受けました。
- ページは彼が要求したものを提供して応えた。
結果が同じであっても関係ありません。 重要なのは、ユーザーが自分のインタラクションが成功したことを理解し、現在見ているのはそれに対する応答であることです。
私が考えることができる最も簡単で効率的な方法は、古い結果がフェードアウトし、新しい結果がフェードインまたは表示される場合、これはたとえばGoogleが行う方法です。
ユーザーがフィルターを選択したときのユーザーへの視覚的なフィードバック-これは、ユーザーがフィルターを選択したときに、結果ペインの単純なローダーアイコンを使用して達成できます。
フィルターはflyout menヘッダーの下にあり、ユーザーがフィルターを選択すると折りたたまれると思います。
そのような場合、メニューが折りたたまれたら、ユーザーが結果を待つ間、中央のローダーアイコンで結果画面を暗くすることをお勧めしますサーバーから。
また、折りたたまれたフィルターメニューセクションに数字を表示して、フィルターが適用されていることをユーザーがいつでも確認できるようにします。
「5つのフィルターで43件の結果を表示しています」という別のバーなど、明らかに永続的なものを設定する必要はないと思います。各段階で舞台裏で何をしているのかをユーザーに知らせれば、彼らは彼らが彼らのサーチジャーニーのどこにいるかに満足するでしょう。
これを実現するには、大きな緑色の目盛りが付いた素敵な大きなオーバーレイで、他の場所で使用しているアニメーションをすべてピックアップし、「フィルタの適用：Februari 2017」のようなものを1秒間実行するだけで十分です。
各セクションのフィルターの数も、それらが占めるスペースの量にとって有益であるため、上部セクションには「Startmoment（1）v」と表示することができます。タイトル。
少しのテストはここで大いに役立ちます-いくつかの異なるデザインやプロトタイプをユーザーの前に置きます。彼らの言うことを見てください。
編集：私が「読み込み中」アイコンを提案しているわけではないことに注意してください。これは、ユーザーが何が起こっているのかを理解するために検索機能を遅くする必要があることを意味します！むしろ、これはあなたからユーザーへのメッセージであり、検索速度に関係なく表示されます。
