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.
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?