Suggestions to display large amounts of flight prices?

Question

I have an app that I wrote as a hobby project (when I was learning F#) that collects price data for flights for a given route. I now want to open this up on the web but the major stumbling block I have is displaying the data in a sensible way.

Users search for a specific route -- say, JFK to LAX. This results in 2 buckets of price data -- depart & return. But there's a year worth of prices for each (though some dates are missing when the flight isn't available) -- roughly 300 data points per bucket! People using this don't care necessarily when they fly, they just want a cheap flight. So I need to display this pair of 300 data points each in a way that:

1. The user understands what they're looking at.
2. The user can easily grok the date associated with each flight.
3. The user can easily spot cheap flights vs expensive flights.
4. The user can easily spot a decent trip -- a cheap flight departing and returning that are spread out around the time period they're looking to fly (e.g. "i was looking for a roughly 2 week holiday and if I book this cheap depart and this other cheap return i would be in spain for 12 days total -- perfect!"
5. As a hobby project I can't write a custom html5/js/flash awesome UI -- I gotta be able to use something already available (though I don't mind tweaking).

As a programmer this is really not my forte. The most obvious thing (and what's used by the airlines) is just displaying calendars sometimes with color coded dates. But i couldn't figure out a way to display a years worth of dates with prices for both depart and return flights this way. The first thing I did try was a bar graph but i found that friends i had use it just couldn't figure out what they were looking at! And since there was so much data, dates scrolled off the page. By the time they scrolled further on into the year they were even more lost and couldn't really compare things!

My next thought was using Google Charting's Annotated Timeline which I figure is at least familiar to the user. but i don't think it's necessarily going to work out great and I don't want to invest the amount of time necessary to get this working without passing it by some UX experts!

I'd love any suggestions you guys have!

Answer 1

I think maybe the solution is just not to display all 300 options. You are right - users just want cheap flights. So why not display the 10 cheapest options per flight? You can give the users the option of then viewing the next 10 flights if they are not satisfied with the first set.

Answer 2

Hipmunk does 4 of the 5 things you want. Unfortunately, asking for a world-class UI like this and for it to be something you can just hang into your project is a bit far-fetched. But here it is:

Note the following:

• Incredibly easy to scan for prices, as they're shown in the left column and you can scroll down to see more. Similar flights are collapsed into one row which you can expand by using the right column.
• Incredibly easy to scan for flights of different durations by looking at how long the horizontal bars stretching across the screen are.
• Incredibly easy to identify which flights are direct and which involve multiple legs by looking at how a horizontal bar is broken up into multiple colours.
• Incredibly easy to scan the entire page for your favourite airline using colour coding.
• Incredibly easy to find flights that fit your schedule as denoted by the heading at the top of the table.

In short, it's easy to see what time and date you're looking at, various data associated with each flight, and whether it's a cheap or expensive flight.

Hipmunk is fantastic in part because I still don't understand how they discovered this UI. It's mind-bogglingly brilliant; dense but easy to follow, clear and sharp, extremely customisable, and conventional but innovative.

Disclaimer: I don't, in fact, work for Hipmunk. But I sort of wish I did.

Answer 3

Show them on a cut-down calendar and allow them to filter by which price-ranges they want to see.

Colour/Contrast the different ranges to allow the user to quickly scan the list and see which prices / dates suit them.

Quick hastily put together example i've put together of how I'm thinking it would work :

(probably the lightest contrast colour should be first rather than last really so the colours get darker as they get more expensive. Unticking the 'Show on Calendar' should remove those days from the calendar that are in that unticked price-range)

Answer 4

Perhaps look at presenting the data graphically, similar to http://lifehacker.com/5615169/hipmunk-is-a-fantastic-surprisingly-usable-flight-search-site

graphical information is a lot easier to understand and process than large amounts of textual information