There are lots of flight comparison websites and almost all of them follow a very similar layout on their search results pages. They all have a long table with rows of complex information including airline, price, departure times, arrival times, flight durations and stopover durations.
Users have 2 challenges with such pages:
1. All the information is represented by text, and there’s too much text overall which makes it difficult to absorb the overall picture and choose the best overall flight
2. Picking out a criteria, such as the duration, and scanning the list for this detail can be difficult because there’s so much information surrounding it on the screen
A solution is out there!
Hipmunk have a really innovative solution on their website which shows flights overlaid on a bar chart with time and price as the axes. Users can scan the screen and absorb a lot of information without having to read much text, which makes scanning very quick. This is a really simple, innovative and effective solution.

How does it work?
- A horizontal bar represents each flight. The position of the bar in the timeline shows when it departs and arrives, the width of the bar shows the flight’s duration and the size of any gap in the bar shows the stopover duration. A complex set of results is made easy to digest.
- Another interesting Hipmunk feature is the default sort order: ‘Agony’. This takes into account factors that make a flight less appealing as well as the cost. For example, the flights with a long stopover get pushed further down the results.
- It’s slightly more difficult to see the some of the precise details, such as the exact departure or arrival times – users are shown this when they hover over a flight’s ‘bar’.
Checking flights on the go?

Hipmunk’s results layout is even more of an advantage on a smartphone. These devices have smaller screens which makes comparing large amounts of data even more challenging. Their iPhone app uses the same bar chart style layout and works very well.
The Hipmunk’s website and iPhone app brings a fresh innovation approach to flight comparisons.
Want to know more about building a top notch mobile strategy? Do you know if a mobile website or an app would suit your business, what content and features you will need, which designs will work best and how to conduct usability testing?
Gain the knowledge you need at our mobile user experience training course. Get in touch if you want more info!

Sky TV’s bar chart tried to show the breadth of opinions. For example, they didn’t just show the average rating for Nick Clegg. Instead Sky showed how far the ratings from most people ranged for Nick Clegg. So, the more the ratings differed the taller the yellow bar would be. This added a different dimension to how the ratings were displayed. However, it was a little more complicated and harder to interpret than the Guardian’s simple line chart. Also, the bar didn’t seem to move that much and you had to look carefully to notice any movement. Most of the time I wanted to look at the leaders themselves so I often missed changes in the ratings.
I wrote about this last week. It showed whether viewers felt positively or negatively towards what the leaders were saying. A single line went up or down in reaction to what the leaders were saying. There were 2 great things about this. Firstly, the line moved instantly in reaction to what was being said, giving immediate reactions. Secondly, the scale was set just right so that when viewers liked/disliked a leader’s comments the line rose/dropped markedly, these made the changes look and feel more dramatic. Out of the 3 displays ITV’s Worm was the best to watch.
For me, the most captivating example of social TV came from the ‘Worm’. ITV added a live graph line, called a ‘Worm’, on top of a live video of the debate. This continuously showed how much a select group of 20 viewers felt positively or negatively towards what the leaders were saying (they were provided a special device to do this).


Hotels.com
Macmillan
Hitachi Capital
User experience training
Website optimisation training
Online copywriting training
Web development training
Online marketing training




