Does this site use a good UI for shopping cart? [closed]

Question

Does this site use a good UI for shopping cart? How do you drop something in the cart? Is it intuitive enough to be used?

Answer 1

Not really, I think.

The main irritating thing is that you can't drag an item from the front page (the link you gave). If you try to drag the image or the name of the set there, it doesn't work. And, that is a bit strange as the shopping cart is visible, and explaining you to drag items into it. It remains unclear what 'an item' is.

You have to get to the icon set page (which is a bit hard as you only get there via the small link, not via the image or the collection header) to get to something they mean with 'an item'. Second, when dragged, the item doesn't directly show that your drag was successful. When you hit the cart the display remains the same as if you were somewhere else on the page or not even dragging at all*. It takes a while before a wait-icon is visible and it becomes clear that you have dragged successful.

These two things should be improved I would say.

1. Don't show the cart on the front page or make collections dragable.
2. Make it clear directly that items are dragged in the cart correctly.

(* Apparently you don't even have to drag items in the cart, just start to drag them and it works..)

Answer 2

It's like one of those fancy UIs we see in movies that we don't in real life, not because they're hard to implement, but because they're hard to use.

For someone with difficulty in motor skills, this can be quite hard to use. Dragging and dropping using a trackpad isn't often as responsive as doing it with a mouse. (Some trackpads just happen not to be very responsive.) What could be done with one click now needs a mousedown, a precisely targeted mousemove, and a mouseup. Basic knowledge of Fitts' law can tell you why this is a harder task than simply clicking a button.

There is a reason computer interfaces do not try to mimic real life interfaces (which is what this UI is trying to do, IMO.) That's why we don't walk through "aisles" of "3D stores" but instead have pages dedicated to products where we click the "add to cart" button. What is natural for a walk-and-pick-up UI is not natural for a WIMP (windows, icons, menu, and pointing device) UI.

Answer 3

NO

1. First of all, a critical UI bug, customers with screen heights below the shopping cart height are unable to checkout. (think netbooks with screenheights of 600px.)
2. Shopping cart activity is shown on pages where there is no activity, text doesn't specify what to drag in the cart. (solution would be to )
3. No pricing information availble when changing license option.
4. Seperate Pages for "Vector Set" "Vector Single" and "Pixel Set" are unneeded and confusing. (a single page with buttons "Buy whole set (vector format)", "Buy whole set (Bitmap format)" and the header "Or buy icons individually", with the individual icon buy options below is less confusing)
5. Throbber is slow to appear, and not in the focus area when using the plus buttons.
6. Shopping cart does not make a difference between different versions of the same set.

I think I should stop now.

Answer 4

First, I noticed the "shopping cart" area on the right and the advice: "Drag item here to shop".

I tried dragging one of the large, inviting images from the home page right into the cart, but that didn't work.

I then noticed that each image actually represented different sets coming at different prices. I tried dragging the set link on the bar. However, that also didn't work.

I afterwards tried dragging the description, again the image, the whitespace in each product_item div... nothing.

I finally decided that I would open a set page, which featured a prominent "Add to cart" button and a "+" button over the image. This would let me purchase items traditionally, but made the dragging tip even more confusing: did I miss something on the homepage?

I skeptically tried dragging the large icon from the set page on the cart. That also didn--- oh wait, that's a throbber... and now it's there, unlabeled and scaled down.

---

Things you could consider: (to be taken with a grain of salt)

• Make the cart "react" to a "legal" drag and drop action in progress. Like this.
• React to user mistakes. Detect an item to drag and drop large icons where it doesn't make sense and display an error message. For example: "This collection comes in a number of sets. Which one would you like to purchase?"
• Be more reactive client-side. On drag and drop, show the item as dragged and disable the checkout button as you update things server side. This site handles voting like this, for example.

Answer 5

It took me a while to figure out why you added the drag-and-drop option because it wasn't obvious that it is possible to buy individual icons and not just sets.

I added a set and then tried to add individual icons but when I tried to add an icon that is a part of the set I already added - it just wasn't added. It's confusing and frustrating.

The cart is showing small arrows on the top and bottom for scrolling when there are many items in the cart. It's also confusing. Maybe just show these icons when the sixth icon is added or show a small part of the sixth icon so I would know there are more. Now I add additional icons and can't figure out where they went. Scrolling didn't work for me using Chrome 6.

It found it strange that you can't drag and drop by clicking the plus sign. BTW - the tooltip says "Remove".

Although this feature is cute, I prefer a single click on the add-to-cart button or plus sign than dragging items to the cart. It's more efficient.

I read somewhere an opinion that pagination is not really needed anymore, especially when it comes to pictures. The human eye is great at seeing many images and picking the ones you like. It may be easier for buyers if you just show all the icons on a single page - a much better shopping experience.

Site looks great and the icons are excellent.

Answer 6

It's OK.

I think it is one of those cases where they let the coolness distract them from the core functionality. It is a bit hard to use, shows very little info about what is in it.

So I would say that it is OK, most users would be able to buy there yet I don't think I would use it in my site.

also like @simon said, it would be an issue if JS is turned off.

Answer 7

Yes

I don't see a huge problem with it. As well as drag-and-drop, the icon set pages (that can be reached by clicking on them) have add to cart buttons. I also like the fact that, unlike many other online stores, you don't have to visit another page to see the contents of your shopping cart.

However, one big problem is that it doesn't work without javascript, or at least display a warning to users without it enabled that it needs to be turned on.