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!

  • have you looked at Hipmunk? It provides users with a great data visualization of flight information. It's pretty well organized and has a high density of information.
    – user9251
    Oct 27, 2011 at 1:14

4 Answers 4


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.

  • everyone here has great ideas. i can't say i never thought about showing less data but it is just so stupidly simple that i think it's very useful and your suggestion of giving users the ability to show more is spot on. i wish i could select multiple answers but i think this change will provide the most impact. i'm working on showing the cheapest flights first and then allowing the user to clutter the page if they wish. since flights span the year i'll use a slider to allow them to restrict date ranges. will post a link when done if anyone's interested. thanks again! Oct 27, 2011 at 18:11

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:

Planning a flight from Amsterdam to SF with Hipmunk

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.

  • A beautiful interface design. The one thing that bugged me was the time spent at the airport, if they made that bar skinnier, it would help the visual display even more. It is a brilliant find, +1 for finding this gold nugget :)
    – eLouai
    Oct 27, 2011 at 17:19

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 :

Calendar View of Prices/Dates

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


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

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.