Displaying varying prices

The holiday accommodations my company rents out have varying prices, depending on the day of arrival and the duration of the stay. Currently, these prices are charted in a scrollable table, with on the horizontal axis all dates, and on the vertical axis the duration, in number of night ranging from 3-21. Intersections that are booked don't show a price. This has the advantage of the customer being able to see what he/she would spend to depart one day later, or stay for two more days, or start their vacation a week earlier, etc. However, this also causes a pretty large grid of prices, displaying up to 7 dates * 12 durations = 84 different prices at a time. I fear this way of displaying might scare off customers, and I'd like to a/b test a new way of displaying these prices.

How could I simplify the price display, while keeping in mind the following things?

• Prices differ with every departure-date, and every duration.
• Being able to see the prices of nearby durations and departures is something that has worked very well in the past, and having no fixed arrival dates is a rare thing in the holiday business.

Thanks for your input!

• 7*12 is it 7 days and 12 hours or is it 7 days and 12 weeks? Not quite sure what the calculations are about... Jan 23, 2013 at 9:49
• Updated that in the question. Jan 23, 2013 at 18:07
• We have a similar issue too: ux.stackexchange.com/questions/34361/… Feb 8, 2013 at 15:55

1 Answer

Perhaps you could consider a design where you have a bar-chart of prices over your period. I have seen a design like that on airline sites, and I liked it a lot. Horizontally, you'd set your arrival dates, and vertically the price. You'd start with a standard-length stay, that the user might customize. I am not sure if showing a single night would make most sense, or showing a lengthier period like a week.

download bmml source – Wireframes created with Balsamiq Mockups

Then, on hovering the bar representing a day, you could show an overlay or an area below the graph that shows prices for the different lengths of stay starting at that date, perhaps with both a total and a price-per-night for each of the stay lengths.

download bmml source

That way, you avoid drowning your price page in numbers.

• As a minor enhancement to this suggestion, I recommend highlighting Sat/Sun in a slightly different color. Jan 23, 2013 at 14:23
• I like the basic idea here, but what would you say this does to complexity? Whereas there are no options now, in this solution the user has to select his desired stay-duration, and loses the ability to see what one night longer would cost him. How would you solve that, if I may ask? Jan 23, 2013 at 18:15
• @Brian: good idea, added a bit of shading for 2 out of every 7 bars to indicate weekends (though the bar lenghts would in reality probably peak at those days)... Jan 23, 2013 at 18:37
• @Lg102: The indicated stay length would only be used for the graph. The idea was that if you hover or select a day, you'd get an overview of the prices for the different lengths of stay so the user can easily spot the price difference for an extra night (or a night less). I'll try to add a mockup of that as soon as I figure out how to create a new mockup based off the existing one... Jan 23, 2013 at 18:40
• This looks a lot like the Google Flights UI: google.com/flights/… Jan 23, 2013 at 21:35