私のWebアプリでは、画面の片側にアイテムの長いリストがあり、反対側に買い物かごリストがあります。
次に例を示します。
アプリは、アイテムの横にあるチェックボックスをオンにして、[バスケットに追加]をクリックすることで機能します。これにより、買い物かごリストに移動します。
(リストの項目が多いので、ちなみにチェックボックスを使い続ける必要があると思います。この点はあまり気にしないでください。)
ほとんどの人は、左側のリストのチェックボックスがバスケットにアイテムを追加するためのものであることを理解していますが、右側のチェックボックスを理解していません。一部の人は、チェックアウトに移動する場合は右側のリストのボックスをオンにする必要があるとさえ考えています。
右側のチェックボックスが実際にバスケットからアイテムをまとめて削除することであることを明確にするにはどうすればよいですか?
一見すると、「複数のアイテムを削除する」は一括操作であり、選択したチェックボックスパターンが広く使用されており、(おそらく)ユーザーに受け入れられています。
ただし、「削除/削除」以外のオプションがないため、ケースはかなり異なります。
したがって、「アイテムを選択してから、選択したアイテムにアクションを適用する」というシナリオでは扱いません。
一括編集以外の方法でトランザクションを見ると、ユーザーの複雑さを大幅に軽減できます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
現在のシナリオで、ユーザーがカート内の3つのアイテムのうち2つを削除したい場合は、次のことを行う必要があります。
提案されたシナリオでは、同じタスクに対して、ユーザーは次のことを行う必要があります。
ユーザーは1回の「ルックアップ」と1回のクリックを実行する必要があるだけでなく、エラーの可能性(質問で言及した「チェックアウトしたいアイテムのクリック」など)も減少します。
Jqueryプラグインの確認を検討しました 選択済み
複数選択機能はシンプルです。ユーザーはドロップダウンから必要なものを選択でき、アイテムを削除する必要がある場合は、Xをクリックしてリストから削除し、ドロップダウンに戻します。オートコンプリート機能は、ユーザーが製品の名前を入力するだけで取得できるため、スクロールも削減されます。
このドロップダウンの下に、簡単なチェックアウトボタンを配置します。
チェックボックスに自信があることは承知していますが、ユーザーがワンクリックでアイテムを追加できるようにすることを検討しましたか?一般的なパターンは、左側のペインのアイテムの横にプラスアイコンを配置し、右側のアイテムの横に交差するパターンです。追加をクリックすると、アイテムがカートに入れられ、クロスをクリックするとアイテムが削除されます。
買い物かごリストを削除し、チェックボックスを保持します
重要なのは、available stuffで何かをチェックすると、そのリストには残っているがチェックされていると想定しています。とすれば....
入手可能なもののチェック済みアイテムIS本質的に買い物かごです。もちろん、これがのチェックボックスの理由ですショッピングカートは混乱しています。私が欲しいのは利用可能なものにチェックインされていますが、ショッピングカートにはチェックインされていません。そしてチェックされているかどうかにかかわらず、「チェックアウト」はショッピングカートのすべてを取得します。混乱は理解できます。
リストが1つだけの場合、チェックの意味が非常に明確になります。もちろん、その上のニースヒントとともに、「購入したいものをチェックする」としましょう。
これに加えて、すべてのチェックされた項目をリストの一番上にソートする必要があります。
チェックボックスを削除し、両方のリストを保持します
代替ソリューション。アイテムをあるリストから別のリストに物理的に移動させます。今では、チェックボックスはまったく必要ありません。アイテムをダブルクリックして、他のリストに移動します。そしてもちろん、「バスケットに追加するにはダブルクリックしてください」のような素晴らしいヒントがあります。