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

enter image description here

  • I would not use chevrons next to numbers as (some) people may read that as a Greater Than or Less Than sign.
    – jhurley
    Commented Sep 26, 2017 at 18:34

3 Answers 3


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):

Edited screenshot with buttons


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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.