web-dev-qa-db-ja.com

アイテムの長いリストでチェックボックスが何をするかをどのように説明できますか?

私のWebアプリでは、画面の片側にアイテムの長いリストがあり、反対側に買い物かごリストがあります。

次に例を示します。 enter image description here

アプリは、アイテムの横にあるチェックボックスをオンにして、[バスケットに追加]をクリックすることで機能します。これにより、買い物かごリストに移動します。

(リストの項目が多いので、ちなみにチェックボックスを使い続ける必要があると思います。この点はあまり気にしないでください。)

ほとんどの人は、左側のリストのチェックボックスがバスケットにアイテムを追加するためのものであることを理解していますが、右側のチェックボックスを理解していません。一部の人は、チェックアウトに移動する場合は右側のリストのボックスをオンにする必要があるとさえ考えています。

右側のチェックボックスが実際にバスケットからアイテムをまとめて削除することであることを明確にするにはどうすればよいですか?

5
JustCurious

アイテムの削除は、それ自体「一括操作」ではありません。

一見すると、「複数のアイテムを削除する」は一括操作であり、選択したチェックボックスパターンが広く使用されており、(おそらく)ユーザーに受け入れられています。

ただし、「削除/削除」以外のオプションがないため、ケースはかなり異なります。

したがって、「アイテムを選択してから、選択したアイテムにアクションを適用する」というシナリオでは扱いません。


複雑さの軽減:

一括編集以外の方法でトランザクションを見ると、ユーザーの複雑さを大幅に軽減できます。

mockup

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


ユーザーにとって何が必要ですか?

現在のシナリオで、ユーザーがカート内の3つのアイテムのうち2つを削除したい場合は、次のことを行う必要があります。

  • 彼が削除したい最初のアイテムのチェックボックスをクリックします
  • 彼が削除したい2番目のアイテムのチェックボックスをクリックします
  • 「バスケットから削除」ボタンを見つけて特定する
  • マウスをターゲットに移動します(現在のマウスの位置からかなり離れている可能性があります)
  • ターゲットをクリックします。

提案されたシナリオでは、同じタスクに対して、ユーザーは次のことを行う必要があります。

  • 「X」の目的を特定する
  • 彼が削除したい最初のアイテムの「X」をクリックします
  • 彼が削除したい2番目の項目の「X」をクリックします

ユーザーは1回の「ルックアップ」と1回のクリックを実行する必要があるだけでなく、エラーの可能性(質問で言及した「チェックアウトしたいアイテムのクリック」など)も減少します。

6
vzwick

Jqueryプラグインの確認を検討しました 選択済み

enter image description here

複数選択機能はシンプルです。ユーザーはドロップダウンから必要なものを選択でき、アイテムを削除する必要がある場合は、Xをクリックしてリストから削除し、ドロップダウンに戻します。オートコンプリート機能は、ユーザーが製品の名前を入力するだけで取得できるため、スクロールも削減されます。

このドロップダウンの下に、簡単なチェックアウトボタンを配置します。

1
Mervin

チェックボックスに自信があることは承知していますが、ユーザーがワンクリックでアイテムを追加できるようにすることを検討しましたか?一般的なパターンは、左側のペインのアイテムの横にプラスアイコンを配置し、右側のアイテムの横に交差するパターンです。追加をクリックすると、アイテムがカートに入れられ、クロスをクリックするとアイテムが削除されます。

0

買い物かごリストを削除し、チェックボックスを保持します

重要なのは、available stuffで何かをチェックすると、そのリストには残っているがチェックされていると想定しています。とすれば....

入手可能なもののチェック済みアイテムIS本質的に買い物かごです。もちろん、これがのチェックボックスの理由ですショッピングカートは混乱しています。私が欲しいのは利用可能なものにチェックインされていますが、ショッピングカートにはチェックインされていません。そしてチェックされているかどうかにかかわらず、「チェックアウト」はショッピングカートのすべてを取得します。混乱は理解できます。

リストが1つだけの場合、チェックの意味が非常に明確になります。もちろん、その上のニースヒントとともに、「購入したいものをチェックする」としましょう。

これに加えて、すべてのチェックされた項目をリストの一番上にソートする必要があります。

チェックボックスを削除し、両方のリストを保持します

代替ソリューション。アイテムをあるリストから別のリストに物理的に移動させます。今では、チェックボックスはまったく必要ありません。アイテムをダブルクリックして、他のリストに移動します。そしてもちろん、「バスケットに追加するにはダブルクリックしてください」のような素晴らしいヒントがあります。

0
radarbob