Our site offers discount travel packages that are redeemable only on specific dates. We are able to offer these deals because of the pre-purchase guarantee we offer to our partners.

We are considering offering premium products that offer more flexibility (ala Southwest airlines "anytime fares"). The flexibility gives customers the option to change their redemption dates, at a cost of purchasing a higher priced product ahead of time.

What is the preferred way of displaying these options?

Option 1 Display three prices, $75, $95, $105

Option 2 Display a base price, and show add on options for flexibility (+$25, +$45, etc.)

I have read studies regarding the merits of both options, but am wondering if this has been studied in greater detail. Any experiences with A/B testing this concept would be very helpful!

Points for option 1

  • How many packages will have multiple price options -- all of them or only a few?
    – quietmint
    Jul 7, 2013 at 16:12

5 Answers 5


It all depends on what you're selling really, and your personal preference.

Most hosting companies use the first method, displaying 3 prices. It seems effective if you want to compare the 3 packages, where they're all different.


As you can see, it makes it extremely simple to compare the features versus the cost.

That being said, they may also use the second option later on in ordering, when you need to pick additional features that don't come by default.


To answer your question, I don't think there's really many studies to show the benefits of each. It really does depend on what you need them for, and your personal preference. You could always use both, to first compare the plans, then to add things onto the selected plan. It seems to work great for the hosting companies.

I know you're not a hosting company, but it seemed to relate the closest and that's what I'm used to using. You could easily use it for your travel site as well.

An example is compare 3 different packages on the main page, then when you select one, you select how many days you want, what time to depart, what time to come back, what hotel to stay at, all of that kind of stuff.


Option 1

The first option is desirable because it immediately communicates the information sought by the user.

Option 2 adds a cognitive load to the user by making them perform the addition from the base price, rather than having the site do it for them.

  • And by "desirable," it seems that you're talking about "desirable for buyers." I'd say that this often/usually results in more sales but not necessarily.
    – conan
    Feb 25, 2015 at 19:53

I think you can mix both two techniques together. You can display all three option but with emphasis on the offer you want promote firstly. Like image at bottom. Anyway to make a good use experience, I think the best way is to implement a responsive design to grant interaction to the user with the offers. (an example)

enter image description here

Read this article for more inspiration: Top Responsive CSS3 Pricing Tables Elements


Option 1

  • So the Higher Price is on the left and the Low is on the right. it will make a little difference compare to others sites in the web.

  • And if the 3 prices have 20% off don't put it in each square - put a large banner that cover the 3 boxes, as in this example:

enter image description here

  • I don't understand your second bullet point. Can you clarify what you mean there? Maybe a mockup example to show what you're referring to.
    – JonW
    Jul 21, 2013 at 16:36
  • See this mockup just to give an idea dropbox.com/s/36xs85d4rg4l9j8/web-banner.fw.png Jul 21, 2013 at 17:52
  • 1
    I've added your image to the post, but I don't think it fits the question - you're more suggesting changes to an example image posted in another answer.
    – JonW
    Jul 21, 2013 at 18:43
  • Welcome to the UX Stack Exchange @Jose! You say the high price is on the left, but in your image the high price is on the right...can you edit your post to clarify? Also, do you have any justification for why you think it's a good idea to dissociate the discount from the selected option? Please keep in mind that your post should answer the question rather than comment on an existing answer. Jul 21, 2013 at 20:13
  • To clarify, the screenshot I posted on my answer was taken from Hostgator, not my personal design for him. Send your "suggestion" to Hostgator, it doesn't fit as an answer here.
    – Mike
    Jul 22, 2013 at 18:21

Why not change up the experience and include the prices you are going to charge for flexibility into the price you are displaying and then advertise to users that there is 'no cost' to change their flight plans.

Then it will appear to be a 'no-cost' benefit to the user, the fact that they can change their flight plan for free.

  • 1
    This does not seem to address the question. Jun 11, 2013 at 17:37
  • @rubysoho If I'm understanding you correctly, you're suggesting letting the user first pick an option and then later allowing them to upgrade to a more expensive option with "no cost" charged for changing, but still with the additional cost of paying for the more expensive option. Is that right? If so, it smells a bit too much of dark patterns; it doesn't have the user's best interests at heart. Jul 21, 2013 at 20:18
  • @3nafish No, that's not what I meant - but it appears many others have addressed your question so I'm not going to bother reiterating.
    – rubysoho
    Jul 23, 2013 at 17:21

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.