web-dev-qa-db-ja.com

このサイトはショッピングカートに優れたUIを使用していますか?

このサイト はショッピングカートに優れたUIを使用していますか?どのようにしてカートに何かを落としますか?使用するのに十分直感的ですか?

Screenshot of the home page

3
Tony_Henrich

それほどではないと思います。

主ないらいらすることは、あなたがフロントページ(あなたが与えたリンク)からアイテムをドラッグすることができないということです。画像またはセットの名前をそこにドラッグしようとしても機能しません。また、ショッピングカートが表示され、アイテムをそこにドラッグするように説明しているため、少し奇妙です。 「アイテム」が何であるかは不明のままです。

アイコンsetページにアクセスする必要があります(画像やコレクションではなく、小さなリンクからのみアクセスするので少し難しいです)ヘッダー)「アイテム」で意味するところに到達するため。 2つ目は、ドラッグしたときに、アイテムが直接ドラッグに成功したことを示していないことです。カートを押すと、表示はページのどこかにいるか、まったくドラッグしていない場合と同じです*。待機アイコンが表示されるまでしばらく時間がかかり、ドラッグが成功したことが明らかになります。

これらの2つは改善すべきだと思います。

  1. カートをフロントページに表示したり、コレクションをドラッグ可能にしたりしないでください。
  2. アイテムがカートに正しくドラッグされていることを直接明確にします。

(*どうやらカートにアイテムをドラッグする必要すらなく、ドラッグを開始するだけで動作します。)

9
Lode

まず、右側の「ショッピングカート」エリアと、「ここにドラッグして買い物をする」というアドバイスに気づきました。

大きな魅力的な画像の1つをホームページからカートにドラッグしてみましたが、うまくいきませんでした。

次に、各画像が実際には異なる価格で異​​なるセットを表していることに気付きました。セットしたリンクをバーにドラッグしてみました。しかし、それもうまくいきませんでした。

その後、説明、もう一度画像、各product_item divの空白をドラッグしてみました...何もありません。

画像の上に目立つ「カートに追加」ボタンと「+」ボタンを備えたセットページを開くことにしました。これは私が伝統的にアイテムを購入することを可能にしましたが、ドラッグのヒントをさらに混乱させました:ホームページで何かを見逃しましたか?

カートの設定ページから大きなアイコンをドラッグしてみました。それもそうではありませんでした-ちょっと待ってください、それはドキドキします...そして今では、ラベルなしで縮小されています。


考慮できること:(1粒の塩で服用すること)

  • 進行中のカートを「合法的な」ドラッグアンドドロップアクションに「反応」させます。 これのように
  • ユーザーのミスに対応します。大きなアイコンをドラッグアンドドロップして、意味のない場所にアイテムを検出し、エラーメッセージを表示します。例:「このコレクションは セット数 で提供されます。どれを購入しますか?」
  • クライアント側でより反応的になります。ドラッグアンドドロップでは、アイテムをドラッグした状態で表示し、サーバー側で更新するときにチェックアウトボタンを無効にします。このサイトは、例えばこのように投票を扱っています。
4
badp

これは、実装が難しいためではなく、使いにくいために、私たちが実際には見られない、映画に見られる豪華なUIの1つに似ています。

運動能力の難しさを持っている人にとっては、これはかなり使いにくいかもしれません。トラックパッドを使用したドラッグアンドドロップは、マウスを使用した場合ほど反応がよくありません。 (一部のトラックパッドは反応が良くない場合があります。)ワンクリックで実行できる操作には、マウスダウン、正確にターゲットを絞ったマウスムーブ、およびマウスアップが必要です。基本的な知識フィッツの法則は、これがボタンをクリックするだけでは難しい理由を教えてくれます。

コンピュータインターフェースが実際のインターフェースを模倣しようとしないのには理由があります(これは、このUIが実行しようとしていることです、IMOです)。そのため、「3Dストア」の「通路」ではなく、専用のページを用意しています。 「カートに追加」ボタンをクリックした商品ウォークアンドピックアップのUIに自然なものはWIMPには自然ではありません(ウィンドウ、アイコン、メニュー、ポインティングデバイス)I。

3
Manas Tungare

はい

大きな問題はありません。ドラッグアンドドロップと同様に、アイコンセットページ(ページをクリックしてアクセスできます)にはカートに追加ボタンがあります。他の多くのオンラインストアとは異なり、ショッピングカートの内容を確認するために別のページにアクセスする必要がないことも気に入っています。

ただし、大きな問題の1つは、JavaScriptなしでは機能しないか、少なくとも有効にしないとユーザーに警告を表示して、有効にする必要があることです。

3
Gelatin

番号

  1. まず、クリティカル UIのバグ、画面の高さがショッピングカートの高さよりも低いお客様は、チェックアウトできません。 (画面の高さが600pxのネットブックを考えてください。)
  2. ショッピングカートのアクティビティは、アクティビティがないページに表示されます。テキストはカートに何をドラッグするかを指定していません。 (解決策はになるでしょう)
  3. ライセンスオプションの変更時に利用できる価格情報はありません。
  4. 「Vector Set」、「Vector Single」、「Pixel Set」の個別のページは不要であり、混乱を招きます。 (ボタン「全セットを購入(ベクター形式)」、「全セットを購入(ビットマップ形式)」、およびヘッダー「またはアイコンを個別に購入」の単一のページ。以下の個々のアイコン購入オプションは混乱しにくいです)
  5. プラスボタンを使用すると、スローバーの表示が遅くなり、フォーカスエリアに表示されません。
  6. ショッピングカートは、同じセットの異なるバージョン間で違いを生じさせません。

もうやめるべきだと思います。

2
alexanderpas

大丈夫です。

クールさがコア機能の邪魔になるケースの1つだと思います。少し使いにくいですが、何が入っているかについての情報はほとんど表示されません。

だから大丈夫だと思います。ほとんどのユーザーはそこで購入できますが、自分のサイトで使用することはないと思います。

@simonが言ったように、JSがオフになっている場合は問題になります。

1
Sruly

セットだけではなく、個別のアイコンを購入できるかどうかがはっきりしなかったため、ドラッグアンドドロップオプションを追加した理由を理解するのにしばらく時間がかかりました。

セットを追加してから、個々のアイコンを追加しようとしましたが、セットの一部であるアイコンを追加しようとしたときに、既に追加しましたが、追加されませんでした。それは混乱し、イライラします。

カートに多数のアイテムがある場合、カートの上下にスクロール用の小さな矢印が表示されます。また、混乱を招きます。 6番目のアイコンが追加されたときにこれらのアイコンを表示するか、6番目のアイコンのごく一部を表示するだけで、さらに多くのアイコンがあることがわかります。今、私は追加のアイコンを追加し、それらがどこに行ったのか理解できません。 Chrome 6.を使用すると、スクロールが機能しませんでした。

プラス記号をクリックしてもドラッグアンドドロップできないのは不思議です。ところで、ツールチップには「削除」と書かれています。

この機能はかわいいですが、カートにアイテムをドラッグするよりも、[カートに追加]ボタンまたはプラス記号を1回クリックすることを好みます。より効率的です。

特に写真に関しては、ページ付けはもう必要ないという意見をどこかで読みました。人間の目は多くの画像を見て、好きなものを選ぶのが得意です。すべてのアイコンを1つのページに表示するだけの方が、購入者にとって簡単な場合があります。

サイトは見栄えがよく、アイコンは優れています。

1
idophir