web-dev-qa-db-ja.com

複数選択可能なカードのUXの改善

ユーザーができるはずの画面を設計しています。
1。白黒の複数のオプションを選択(カードに表示)
2。他のカードを検索し、それらも選択できるようにします。
これは、より良い説明のための写真です:

Option to search or select the various options さまざまなオプションを検索または選択するオプション

User selects option 2 from recent options ユーザーは最近のオプションからオプション2を選択します

User now searches for another option ユーザーは別のオプションを検索して選択します。

His selections are only displayed when he clears his search 彼の選択は、彼が検索をクリアしたときにのみ表示されます

そのようなインターフェースのユーザーエクスペリエンスの部分について混乱しています。
1。これは直感的なUIですか?
2。選択したオプションが不可能に思われるため、検索結果と個別の両方で同じカードを操作して表示するための場所はあまりありません。これを行う他のサイトの例はありますか?
3。理想的なマルチカード検索はどのようにすべきですか

3
Ashwin Nepal

Muhammad Jahangirがすでに示唆したように、検索で複数の結果を選択するために Chips を使用することは非常に一般的なアプローチです。

「ux search multi select」をググると、結果の多くは次のようになります。

enter image description hereenter image description here


提案:

そのようなものを使用してください:
それほど多くの面積を占有しませんが、要素を認識するのに十分な情報を表示します。名前のほかに追加の要素を使用して、簡単に区別できるようにします。例としてカラードットを含めました。

search Ui option with example chips

3
Big_Chair

いくつかの提案

1-カード全体を表示する代わりに、検索バーの下に選択したカードのデザインビューのタブの種類をタイトルで表示できます。たとえば、「オプション2」「オプション56」このような何か enter image description here

2-テキストをキャンセル/削除するには、検索アイコンを「クロスアイコン」に変更します

3-ユーザーが検索と選択を完了したら、十字アイコンをクリックして検索を閉じ、メインリスト/カードビューに戻ります。上記のように、選択した結果は常にタブビューの検索バーの下に表示されるため、この場合は選択したカードを表示する必要はありません。

1

それはあなたがそこに持っていると予想するカードの量にも依存すると思います。カードがたくさんある場合、検索よりも意味がありますが、そうでない場合は、検索を取り除くことを検討してください。

選択+検索に関する質問に戻るには、ユーザーがカードを選択した後、以前の入力検索条件を削除する追加のステップにたどり着くために、ユーザーが現在までに選択したカードの数を示す必要があると思います。 Distribute (2)のような数字とDistributeボタンを使用して、これまでにこの数のカードを選択したことを示します。

また、彼/彼女が選択した検索条件から戻った後、Recently used optionが表示されなくなったのはなぜですか?これがクールな製品のどこかで使用されているとしても、私はそれが直感的であることを疑っています。選択したすべての製品を彼に表示するには、それらを表示するための何らかの入力を彼に与えることを考えることができますか?

どう思いますか?最近使ったオプションを見た後、検索して何かを選択した後、最近使ったオプションをもう一度見たいと思うかもしれませんが、今は消えて、選択したすべてのカードが表示されています。

0
denis_lor