web-dev-qa-db-ja.com

食事の好みでフィルタリングする

食品注文アプリの食事設定フィルターを設計しています。ユーザーが選択したフィルターを表示したい通常のフィルターとは異なり、この場合、ユーザーは食べ物に入れたくないものを選択します。これは一種の除外フィルターなので。

enter image description here

これは私がそれを設計している方法です。これはユーザーが慣れているフィルターロジックの逆なので心配ですが、これは直感的ですか？これを行うより良い方法はありますか？

filteruser-preferencesintuitivepreferences
14
Ameen Akbar

チェックボックスのラベルをネガティブにすることができます（たとえば、ポークフリーまたはポークなし）。チェックボックスをトグルに変更すると、除外するものまたは含めるものにチェックマークを付けるかどうかがより明確になります。

dietary filters

これは、ルートを検索するときに交通手段を除外する場合と非常によく似た問題です。そこでもっとインスピレーションを得るかもしれません。

Means of transport

14
Nash

この方法でフィルターを作成すると、使用している他のフィルターとの一貫性が失われますか？もしそうなら、クエリを言い換えることによって一貫したロジックを使用してフィルターを作成する方法を見つける方が良いでしょう。

下の左側の最初のオプションでは、リスト内のすべてのオプションが事前に選択されているため、ユーザーは要件に応じて特定の食品の選択を解除できます。

2番目のオプション（右側）は、質問を書き直して食べないようにするため、好みを確認できます。

"Include foods that contain" list with all items checked vs "What foods do you want to avoid?" with only one item selected.

11
Steve O'Connor

これまでの答えには明らかなトリックがありません。包含フィルターと除外フィルターを組み合わせます。各項目には、含めるおよび除外するためのラジオボタンがあります。

ここでは、ユーザーは鶏肉とナッツを含み、キノコを含まない食品を見たいと考えています。

-- Filter by ingredients --
    Inc. Exc.
     ☐   ☐    Prawns
     ☐   ☐    Pork
     ☑   ☐    Chicken meat
     ☐   ☒    Mushrooms
     ☑   ☐    Nuts

これはSteve O'Connorの回答に似ていますが、ユーザーが「何が入っているのか気にしない、キノコが欲しくない」などのステートメントを伝えることができるため、微妙に優れていると思いますそして「私は間違いなくチキンが欲しいことを知っています」。

可能性のある成分の大きなリストがあるとすると、オプションをフィルタリングできる検索ボックスを使用できます。ここで、ユーザーはパスタが必要だとすでに決めているので、オプションはリストの一番上に「固定」され、乳製品のオプションを確認したいと思います。

-- Filter by ingredients --
    Inc. Exc. [Dairy]
     ☑   ☐    Pasta
    -----------------
     ☐   ☐    All Dairy
     ☐   ☐    Butter
     ☐   ☐    Milk
     ☐   ☐    Cheese
     ☐   ☐    Yoghurt
4
Robin Georg

このフィルターが他のフィルターと完全に異なって見えて機能することを望まないでしょう。それは上記の正しいタイトル/ラベルに関するすべてです。明確にしてください。タイトルの下に、フィルターの目的をもう少し説明する説明を追加する必要があるかもしれません。

また、取り消し線を追加することで、フィルターに「独占性」を少しよく表示させることができます。

enter image description here

3
jazZRo

この選択リストの目的は何ですか？

その質問への回答によっては、解決策が異なる場合があります。例えば：

  • フィルターが顧客のアレルギーに対処する場合、それに応じて見出しを言い換えることができます。

    enter image description here

  • より複雑な食事制限については、一部の航空会社がHalal、Kosher、Vegetarianなどのオプションを備えたシンプルなポップアップメニューを使用するのを見てきました。

  • これが個人の好みについての「ちょうど」である場合、私はデフォルトですべてのオプションがチェックされているリストのスティーブの提案を好むので、ユーザーは意識的にuncheck彼らが嫌いなもの。

いずれにせよ、使用するデザインがターゲットユーザーに対して十分にテストできることを確認してください。これが実際にアレルギーの場合は特にそうです。

1
JochenW

私はここですべてのアイデアを取り入れ、ある種の合成を行っています：

  1. リストall使用可能なオプションのリスト

  2. 次のように、左側に含めるには緑のボタン、右側に含めるには赤のボタンのあるトグル形式を使用します。

✓ | Kosher | x✓ | Meats | x

  1. 最初はすべてニュートラルにします（たぶん白）。ただし、ユーザーが制限の直接設定を指定する場合は、その選択を強調します（OKの場合は正の色で、非OKの場合は負/危険の色でトグルを着色します）もの）

  2. [OK]を上に移動し、[OK]をリストの一番下に移動します。

ご想像のとおり、申し訳ありませんが、現在のところ、グラフィカルな表示を目的としたコンピュータに直接アクセスすることはできません。Gmailの[To]ボックス内のメールアドレスの扱い。左側のXで削除するトグルを取得します。

1
jonvyltra

上記のロビンを跳ね返して、基本的には、リストアイテムが必要かそうでないかのどちらかです。

したがって、IMOはそれらの隣にスイッチを作成することになる可能性があります。

それらをオンまたはオフにします。

複雑なレイアウトはなく、アイテムの横にあるいくつかのスイッチだけで、おそらくグリッド形式のより広い列にあります。

0
mastablasta