Ordering actions in a toolbar

Question

I'm building wireframes for a checkout/cart system. Based on the state of the cart, I have two toolbars within the item listings The actions are:

Save for later, Remove, Edit

Remove, Email When Available, Edit

I'd love some advice on the ordering of the actions and maybe a little justification as to why.

Answer 1

It seems like you have two categories of 1) Modifying (edit & delete) 2) Saving (Save for later & email when available)

As for the order I do not think it matter much if you do two things: reflect the above through graphics and consistency.

Graphics: I would graphically group "edit" and "Delete" and have the saving category appear as another group. This can be as simple as a line or is could be a different color. Or maybe the save has an icon and edit and delete do not. Hopefully you get the idea.

Consistency: It is likely that your user will encounter both states. So they should be predictable. Your Modify category should always be in the same place and your Saving category should always be in the same place. Now an example

Good Consistency: (edit, delete, save for later) & (edit, delete, email me when available) * the order stays like this (Modify, modify, save)

Bad Consistency: (edit, delete, save for later) & (email me when available, edit, delete) * the order changes (Modify, modify, save) to (Save, Modify, modify)

Answer 2

I would spread them:

Remove - an X on top right corner.

Edit (what does it really edit?), but maybe next to the title.

Save - Usually you save the entire cart, not one by one.

Get notified when available - next to an 'Out of stock' message.

You would also want to clear the distructions, so minimize this functionality. Show some of it only when rolling over an item.

Answer 3

The order and location of the buttons is the least of the problems with your cart design right now. You have several elements that can distract or confuse your visitors leading to cart abandonment.

• The whole concept of save for later when applied to in-stock items is confusing. People understand wishlists and notify when available better because those are similar to their brick-and-mortar shopping habits. Thus, all items can be added to a wishlist and only out-of-stock items can be saved for later with an automatic notification of availability. In addition, out-of-stock items cannot be added to cart in the first place.
• Update quantity/cart button is missing at all. It should be close to the quantity input box.
• You might also like shouldn't be there unless you have a great suggestion mechanism in place. Amazon upsells relevant items based on your own shopping habits as well as the items in the cart. Buy.com shows you a bunch of semi-random items that may be related to the category you have browsed or because they want to upsell them, which is distracting.
• Tax & shipping aren't applied - they're calculated.
• Providing an option for discount/coupon codes without explanation of where to get them gives the opportunity to your visitors to wander off your site searching the Web for them. NewEgg has learned the lesson and now has very clear instructions on where people can find discounts (see screenshot below).
• Overall, there's a strong visual separation between the list of items in the cart and area with totals & checkout button. Amazon does that, too, but Amazon does many other things that aren't considered best practice. Replace the hard boxes and color fill with something else to create more unity among elements.

Now, as for the actions, about which you asked specifically.

• When in the actual cart view, item-specific controls should be Add to wishlist, Remove, and Update. The first two should be in that particular order in the same place where you have them right now. Update should be as close to the quantity field as possible. This way options to postpone or cancel the item won't be "in the face".
• The list of items "saved for later" should be sorted by availability. The controls for those items should be Add to cart and Remove from the list. Email notifications should be enabled automatically whenever an item is saved because of being out-of-stock. In addition, you should display notifications on top of the screen when a visitor with a saved list comes back and some items are back in stock. The same notification should be displayed in the cart. This notification should read along the lines of "3 items you have saved previously are back in stock. View them now."

Finally, there are two very thorough articles in Smashing Magazine on shopping cart & checkout design: Improving The Online Shopping Experience, Part 2: Guiding Customers Through The Buying Process and Fundamental Guidelines Of E-Commerce Checkout Design

NewEgg's entry form for coupons & discounts: