I am designing a product detail page for an e-commerce site on mobile. Some of the products have different options with different prices and some of those options have sub-option. So at the end some products have up to 6 different prices. The attached design has already been approved but there are still concerns about the clickability of the boxes. My team wants me to add chevrons (>) beside the prices but since there is a lot info going on and there is not too much space I am not sure that is the best solution. Any ideas? Thanks
3 Answers
From my first impressions (as a standard user), it's not immediately clear to me that these boxes are clickable.
I think a button would serve you well here, like so:
download bmml source – Wireframes created with Balsamiq Mockups
If you want "clickability", give them a button for each option! That will have the best affordance of anything else you can do.
Here's a rough idea (you would probably want to make them more button-like):
We are all familiar with Pricing Charts and understand the top row is the Header while the text below is the description. Can we change the headers? I know it's a "return to the past" design BUT how about make the headers (OPTION A1) look like rounded-edge buttons and NOT just rectangles with white text?
Am I going to get my Design Degree revoked for this 1990s solution?