web-dev-qa-db-ja.com

配達時間フィルターで1つのオプションを選択できることを示す方法

モバイルサイトには、ユーザーが選択できるオプションのリストを含む配信フィルターがあり、オプションはラジオボタンとして機能します。ただし、ユーザーがオプションの1つを選択すると、選択したオプションがチェックされます(添付の画像で確認できます)。

ここで重要なのは、これはラジオボタンであるため、ユーザーが選択したオプションをオンまたはオフにできないことです。リストから別のオプションのみを選択できます。

私の懸念は、ユーザーがこのオプションをオンまたはオフにできないことをユーザーに示す方法です。彼は、例えば色のような他のフィルターでそれを行うことができます。

  • アイコンをチェックマーク(✓)から(。)ビルドに変更すると役立ちますか?

enter image description here

5
ahmed mansi

Nielsen Norman Groupからの抜粋:

常にラジオボタンリストのデフォルトの選択を提供します。定義により、ラジオボタンには常に1つのオプションしか選択されないため、オプションなしで表示することはできません。デフォルトの選択。 (対照的に、多くの場合、チェックボックスはデフォルトでオプションが選択されていません。)ユーザーが選択を行わないようにする必要がある場合は、「なし」というラベルの付いたものなど、この選択のラジオボタンを提供する必要があります。ユーザーにクリックに対する明示的で中立的なオプションを提供することは、リストから選択しないという暗黙の行為を要求するよりも優れています。後者を実行すると、常に1つのオプションのみが選択されるという規則に違反するためです。 チェックボックスとラジオボタン

ということで、私は:

  1. デフォルトとして選択されるフィルターのデフォルトオプションを追加する
  2. 選択したオプションを示す方法として、チェックについて考え直してください。これは、チェックボックスまたは複数選択のオプションを意味するため、ユーザーを少し混乱させます。代わりに選択した行全体を強調表示します(モックを参照)
  3. ボタンが役に立たない。これはラジオボタンです。ユーザーがクリックすると、選択されます。ボタンを使用して、実際には意味のない別のクリックをユーザーに追加します。さらに、たとえば「すべてクリア」と書くときのように、ラジオボタンではなく複数選択であるとユーザーに感じさせることができます。

enter image description here

1
noadavi

いい質問です。先ほどオフィスで話し合ったシナリオです。

後で質問しました。なぜ、ユーザーが選択したALSOよりも小さいすべての要素を表示することが関連するのですか? 「最大3週間」とは、既に行ったことですが、「3週間以下のすべてのもの」を意味しているため、他の項目にもマークを付ける必要はありません。

質問の横にある別の入力:maximum-delivery-time-filterは役に立たないことがわかりました:これにマークを付けると、まったくフィルタリングされません。スキップしました。もう1つ考えてみてください。ユーザーは短時間だけフィルター処理を行い、「長時間配信」フィルターはまったく使用されないことにすぐに気付くでしょう。私たちにとっては、「彼らは確かに迅速な配達を持っている!」という感覚から、販売あたりのPDPを減らし、AddToCartレートを上げて長い期間を削除しました。ローズ。

「マイナス面」は、ロングデリバリー商品の販売がさらに少なくなることです。これらは実際にはこれらの種類の製品であるため、USPの配信を強化するためにまったく除外することを検討する必要があります。

しかし、これもいつものように、これはコンテキストに依存する可能性があります。

1
Jan

これに対処するための別のアプローチを検討または検討する必要がある場合があります。これは、複数選択オプションまたは単一選択(ラジオまたはチェックボックス)で最適に機能します。

私はアマゾンのアプローチが本当に好きです:

アマゾンはこのような状況に対処し、「クリア」または「チェックボックス」をクリックして選択したオプションを選択/選択解除する方法を明確に示します。インタラクティブ機能を示す選択時に動的に「クリア」オプションを追加します。

ところで、「Amazon」のようなBIGブランドは、常に調査、ユーザビリティテスト(A/Bの場合もある)を行い、その機能を市場にリリースしています。だから、これは視覚的な手掛かりやアフォーダンスを与えるという点で、ほとんどのユーザーでうまく機能すると確信しています。

enter image description here

0
Deekshit-CUA

チェックボックスのような機能を提案するチェックマークではなく、ドットを使用して、ラジオボタンのような機能を提案することができます。

これは、GUIの初期の頃のWindows標準でした。

0
JeromeR

この画面は、複数のオプションを選択できる他のフィルター(カテゴリ、価格など)に使用することを想定しています。その場合、ユーザーはここでも複数のオプションを選択できることを期待します。

これが異なる動作であることを明確にするために、視覚的に異なるものにします。

解決策は、メインページのドロップダウン(配信オプション付き)を使用することです。これは視覚的に異なり、ドロップダウンでは1つのオプションのみを選択することを期待します。

mockup

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

0
Martyn

ラジオボタンの場合と同様に、可能な操作は1つの要素を選択することだけです。選択できるのは1つだけであることを明示する必要はないと思います。ラジオボタンとチェックボックスのように、それを理解していないユーザーは2回目の操作でそれを取得します。

したがって、ユーザーがクリックしたものはすべて選択され(以前に選択されていたとしても)、前に選択されていたものは選択解除されます。

ロード時にオプションの1つを選択するかどうかを選択できます。

アプリバーのフィルタリングメニューが マテリアルデザイン-アプリバー でどのように使用されているかを確認できます。

0
Alvaro

また、問題はビジネスルール固有です。次の回路図では、ユーザーが表示したときにすべてのオプション(価格、カテゴリなど)にデフォルト値がありますか?

enter image description here

その場合、デフォルトの配信時間の値を表示してから、他のすべてのフィルターと同じパターンを使用して、ユーザーがデフォルトの配信時間を変更できるようにすることもできます。 enter image description here

デフォルトの時間も明示的にラベル付けする必要があります(Amazonが同日配達または標準オプションで行うように)。これにより、一貫性が確保され、効果的な標識と言語でユーザーの問題が解決されます。

0
NVas