web-dev-qa-db-ja.com

検索基準を必須、ニース、ドントケアに分類するためのUI

ホテルのリゾート施設を必須、ニース、必須のいずれかに分類するためのUIを探しています。たとえば、これらはプール、ジム、レストラン、キッズクラブなどの特性です。人々に分類を依頼する理由は、個人の好みに基づいてより良い推奨を提供するためです。

アイデア#1:

  • グリッド内のすべての施設のアイコンを表示します(追跡するのは約15であるため、たとえば5x3グリッドの場合があります)。
  • 必須の施設をクリックするようにユーザーに依頼する
  • ユーザーはいくつかの必須アイテムをクリックし、[次へ]をクリックします
  • 残りのアイコンが表示され、ユーザーはそれらをクリックするように求められます気にしないについて
  • その後、すべての施設は3つのカテゴリに分類されます。デフォルト(つまり、アイコンがクリックされない)は、「持っているのがいい」を意味します

このアプローチは、少数のカテゴリ(3)のおかげで問題なく機能します。ただし、問題は、ユーザーが気が変わって選択を編集したい場合のUIを設計する方法です。

アイデア#2:

  • 上記と同様-施設アイコンのグリッドから開始
  • 必須の場合は1回、ドントケアの場合は2回クリックし、3回目はデフォルト(ナイストゥ持っている)状態に戻すようにユーザーに指示します。
  • カラーアイコンはデフォルトで白、必須の場合は緑、ドントケアの場合は赤

アイデア#3:

  • 「スライダー」にすべてのアイコンを1行に1つずつ表示します。デフォルトでは中央の位置にあります。
  • ユーザーは、アイコンを右にスライドさせて必須アイテムにしたり、左にスライドさせてドントケアを行うことができます。

このアイデアは人々にとって直感的ではないかもしれませんが(?)、彼らが考えを変えたり、選択を変更したい場合は、はるかに簡単です。

上記のアイデアやコメントはありますか?

1
rgareth

ドラッグアンドドロップをサポートするリストにすべてのオプションを表示するのはどうですか?また、「必須」という言い回しを自分で義務付けていないので、これによりバックエンドの柔軟性が高まると思います。ユーザーはアメニティの好みを全体的にランク付けするだけです。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

本当に「階層」が必要な場合は、静的なドラッグできないヘッダー(つまり、この行より上のすべてが「必須」)を使用でき、ユーザーはアメニティを行の上下に移動します。

あなたが思いついたアイデア(すべて良い)のうち、私は#3が一番好きです。

1
J. Dimeo