Displaying multiple options on product page

Question

I am working on a design for the product page of a commerce website. I have the requirement to show multiple options (SKUs) on each product page. In the examples below, the product comes in four different sizes.

I am contemplating two potential solutions.

The first option is to display a list of all options. This makes it easy to see all options at a glance and compare the prices etc. I could potentially replace the 'Add to Basket' button next to each option with a single button below the list. That would certainly make sense if the customer wanted to add more than one option to their basket, but that is not likely.

^{download bmml source – Wireframes created with Balsamiq Mockups}

The second option is to display the options in some form of dropdown menu, with the control to add the selected option to the basket below. This is more compact and perhaps less visually complex, but is more fiddly and makes it harder to compare the options.

^{download bmml source}

What is the best way to present products that have multiple options like this? I wonder what people think of the above solutions. Suggestions for alternatives?

Answer 1

I would go with a similar approach to the 1st option, since the 2nd option has a few issues:

1. User can not easily add bottles of multiple sizes (e.g. 2*500ml for home + 1*60ml for travelling).
2. Options are not very visible, especially if you are comparing the prices of different types of paint (you would have to open each type up, click on combobox, then calculate price per volume).

The changes I would make, would be:

1. To grey out the options that are out of stock (yet not hide them, so the user can still add to wishlist or perhaps request a notification when available).

2. To add price per volume (e.g. per 100ml) to make the user's decision easier.

Answer 2

The one drawback of the second option is how to handle "out of stock" items. Do you simply not list them (thereby giving the false impression that the company does not stock that particular variant of the item), or do you allow people to see the item in the list, but not select it (I am not sure how easy/confusing this could be for a user to understand).

The other situation to possibly account for is if you have to include images for the specific items. Again, you could try to solve this using a select box, but it starts to get crowded quickly.

Lastly, listing many items at once allows the user to perhaps select different quantities of different variants and then add multiple items to the basket in one action, instead of pressing add to basket many times. This is not the intent of your original design, but I mention it as an alternative benefit.

If you have a whole page dedicated to a product and its variants, I would rather use the space and list the variants individually (first solution). If the number of variants become too much (more than 10?) then you'll have to start thinking about compacting it (in my opinion).

Answer 3

I like the first one. :) But there are some improvements on it: 1. will you calculate the total price if I add more than one? 2. maybe add checkbox before every item and with only one Add to basket button will be more clear.

Answer 4

2nd one is similar to ebay which works great and most users will understand it. The only drawback that I could think of is if the user would like to add 250ml bottle and 60ml bottle. That could be solved by adding "Add another product" after the user pressed "Add to Basket"

Answer 5

In my opinion I too vote for the first option but with some following changes. These include taking the out of stock item out of the list; moving the add to wishlist link and changing the color to under the product description (I wonder without further discovery how much these functions get used?); added a number stepper; separated with whitespace, button from number of items counter. I also have the number stepper and button in disabled state, if the product hasn't been selected (it would return to normal state, when one item or more is selected).

Not based on research just my preference.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 6

Both solutions are good. I would suggest using the first one on individual listings and the latter for listings mixed with other products, just to make it shorter. Into the mixed listing it makes sense to offer a link to the individual full listing. That may be solution for users who want add more products from the same category.