ショッピングカート内の複数のアイテムを効率的に削除する

Question

上司は、ユーザーがショッピングカートから複数のアイテムを一度に削除できるようにする機能を構築する必要があると主張しています（たとえば、チェックボックス、[すべて選択]ボタン/リンク、ページの上部と下部にある[削除]）。

現在、アイテム/製品レベルではるかに典型的な「削除」オプションがあります。

私は数十の競合カートを調査しましたが、1つでは複数アイテムの一括削除機能を提供していません。編集：AmazonSupplyはこれを行いますが、ラインアイテムの削除を犠牲にします。

私はこれを押し戻して、それが悪いユーザーエクスペリエンスであることを証明できるようになりたいと思っています。しかし、正直なところ、要求者はそれについて非常に強く、おそらく勝てない議論です。

とにかく、この機能の優れた実装の例は誰にもありますか？それは多くの乱雑さと視覚的なノイズを追加するようであり、全体的には非定型の実装です。私たちのサイトには「後で保存する」機能がいくつかありますが、複数選択は有益かもしれませんが、全体的にはあまり広く行われていないように思われるため、全体的に実装を心配しています。

とにかく、誰かがショッピングカートで複数選択の削除/保存の良い例を持っている場合-または、その機能を使用して要件を打ち消すために私が使用できないようにする説得力のある記事があれば助かります-ありがとう！

tohster · Accepted Answer

理由が勝つ

2つの選択肢があるとします。

オプションA-ショッピングカート（Amazon.comを参照）。カート内の各アイテムにdeleteリンクがあります。

オプションB-各アイテムにチェックボックスがあり、どこかにSelect allおよびDelete allボタンがあるショッピングカート。すべてのアイテムのチェックボックスに加えてdeleteリンクを含めることもできますが、その理由は以下で明らかになるため、かなり愚かです。

ここで、ユーザーの視点を見てください。すべてのケースを見てみましょう：

ユーザーが1つのアイテムを削除したい。オプションAでは、これはワンクリック操作です。オプションBでは、ユーザーはチェックボックスをオンにしてから、削除...を押す必要があります。 2クリック操作。
ユーザーが複数のアイテムを削除したい。オプションAでは、ユーザーは各アイテムのdeleteをクリックします=アイテムごとに1クリック。オプションBでは、ユーザーは各アイテムを選択してから、delete =アイテムごとに1クリック+追加の削除クリックを1回クリックします。
ユーザーがすべてのアイテムを削除したい。オプションAでは、ユーザーはすべてのアイテムについてdeleteをクリックします。オプションBでは、ユーザーはSelect allをクリックし、次にDelete = 2クリックします。
- しかし、オプションAを調整してカートにDelete allボタンを1つ追加した場合はどうなるでしょうか。その後、ユーザーは1回クリックするだけです。

したがって、わずかな調整で、オプションAはオプションBよりも間違いなく優れています。

それはクリック分析を使用しているだけです。 Bが意味をなさない理由は他にもあります。

チェックボックスは使いにくい。レイアウトの場合、チェックボックスはアイテムの左側にあります。ユーザーは、タイトルを左から右に読んで決定し、左に戻ってチェックボックスをオンにしてから、画面の他の場所に移動してタイトルを削除する必要があります。フィットの法則を参照してください。これは、認知負荷のlotです。
- これがまさに、Amazonがdeleteリンクをアイテムのすぐ下に配置する理由です。目はタイトルをスキャンし、アクションのために自然に下に移動します。
読みやすい「削除」アクションは、アイテムと併置されていません。ユーザーには、抽象的なチェックボックスが表示された後、画面全体を再スキャンしてDeleteボタンを見つけ、1か所のチェックボックスが実際に実行（削除）したいアクションにどのように関連しているかを把握する必要があります。
チェックボックスと削除により、ユーザーは「フローから外れます」。ショッピングカートに、ユーザーがスムーズにチェックアウトできるように、上から下への明確なワークフローを提示する必要があります。画面の周りのダートにユーザーの目を向けてアイテムを操作および削除することにより、フローからアイテムを強制し、ユーザーに購入を再考させるための認知的中断を提供します。しないでください。
Select allボタンを作成したら、Unselect allボタンが必要になります。また、削除ボタン。これで、画面上に追加のボタンが表示され、レイアウトが乱雑になり、ユーザーが希望するスムーズなチェックアウトフローから離れることができます。

PhillipW · Answer

それは、実際には悪いUXではなく、やり過ぎのように聞こえます。

それはあなたが販売しているものがユーザーが一度に多くのアイテムを購入することを含むかどうかに依存します（例えば、これはあなたが小さな部品を販売していた場合に当てはまるかもしれません。

ユーザーが実際に行っていることの証拠を見てみましょう。

a-ユーザーは通常、カートに多数（たとえば10以上）の商品を入れていますか？

b-そもそもそれらをそこに配置した後で、それらを大量に削除したい理由はありますか？

「はい」と「はい」の場合、これを行う理由があるかもしれません。どちらでもない場合は、これを行う理由はありません。

Seth Lee · Answer

私がこのディスカッションに遭遇したときにAmazonで複数のアイテムを一度に削除する方法を探していた顧客として、非常に重要な点が1つ省略されていると思います。ここでの応答は、レイテンシがなければ、理論的には正しいです。

したがって、これを検討してください。10個のアイテムを削除していて、ボタンやボックスに移動してクリックするのに約1/10秒かかり、ページをリロードするのに1/2秒かかります（これはすべてのクリックの場合です） Amazonの削除ボタン）。オプションAでは、合計10個の削除ボタンをクリックするのに1秒かかり、ページをリロードするのに5秒かかるので、カートを希望どおりに6秒にすることができます。オプションBでは、すべてのボックス（アイテムの横にある10個のボックスの後の削除ボックスを含む）をクリックするのに合計1.1秒かかり、リロードに.5秒待った後、カートに入れるのに1.6秒しかかかりませんでした私がそれを望む方法。では、アイテムが1つある場合はどうなりますか？さて、私は余分なボタンを1つクリックするのにかかる時間を失っていますが、2つのアイテムを削除する場合は、すでに時間を占めています。

頭のてっぺんのこれらの数値を計算したので、クリックが速くなるか、クリックが遅くなるか、インターネットが速くなったり遅くなったりしますが、ロード時間が存在しないかのように見せかけることはできません。結局、私がこのページに出くわした理由は、私の欲求不満を緩和する方法を見つけるためでした、そして私はあなたの上司に同意しなければなりません。

私の提案：購入する商品の数量の横にドロップダウンセレクターがあり、下部にある[カートの更新]ボタンで商品の数量をゼロまで調整できます。私はウェブサイトの作成やコーディングなどについて何も知りません。イライラした顧客が削除ボタンをクリックしてページがリロードされるのを待っているだけです。お役に立てば幸いです。