Bringing attention to overlooked feature

18 Mar 2010 - 5:24pm
6 years ago
13 replies
1006 reads
Mathew Sanders

As a favour, I've been asked for my opinion and possible solution for a usability problem.

Imagine a website that gives a calendar grid of prices for each day and you can view a month at a time.

To change the month, there is a horizontal slider above the calendar grid, but when I watched someone use the page they commented that they wanted to change to a later month but missed the slider completely.

(you can view the page in action here:

Pop up bubble

One suggestion I thought of was an overlay styled like a speech bubble that points to the slider and reads: "Did you know... you can view another month by dragging the date slider" which would have a close button, or close automatically when clicking outside the bubble.

I feel like I've seen this used before, maybe to show new features of a website after a redesign in the past (Yahoo! or BBC?) but now I can't find any examples, does any one have any examples of this, or other ways of pointing out functionality?

Don't use a slider

Another idea is not to use a slider at all - buttons or tabs could be used to allow people to change the month that is currently viewed, as could a drop-down list with months as options. The slider was chosen because it was though it would be more fun to use, and make the page feel more interactive rather than completing a form - again I'd love to hear anyones thoughts around this Smile


18 Mar 2010 - 5:43pm

I tried out the slider and it didn't actually slide in Chrome (though the click on a given month worked) and the slide worked at first in Firefox, but not after the first couple of slides).

Have you thought of fading out or nudging in the slider either before or after the calendar appears, then populating the purple dates below so the user makes a correlation between them?  It's less intrusive than the bubble, calls attention to the functionality without being obnoxious. If you fade it OUT, and then fade it in only when they're interacting, it becomes both less obtrusive if you're not using it, and fun and interactive if you are.




18 Mar 2010 - 10:08pm
Mathew Sanders

Yes! I had though about nudging the slider, but I'd not thought about the fade-in possibility. I think they are both good ideas, but probably also rely on having a design that isn't quite so overwhelming (for example I think the fade in works okay on Google, and the nudge on Apple because it's more obvious).

Thank you, I'll have another think about those possibilities...

18 Mar 2010 - 6:24pm
Ivan Burmistrov


They are trying to apply a non-standard approach in a standard situation and worse, their design looks like a standard one thus breaking user’s expectations about how their design should work. Although I understand the intention behind their design, my strong recommendation is to use a standard 7*7 (departure week * return week) matrix with buttons allowing to scroll (jump) weeks back and forth.

(I was a usability consultant to airlines and online travel agencies during last 5 years and my basic recommendation to them was “be like others, but slightly better than others”. Serious “innovation” in the booking process design most probably will be a “suicide” to a travel website. Research shows that customers visit from 4 to 20 travel websites before actual booking. This means that your website should not be very different from websites of your competitors. Nobody will learn your “groundbreaking” website, instead customers will simply leave it for your competitors’ “commonplace” sites. There is a “classical canon” of designing booking websites and a designer must have very serious reasons to break it.)

Feel free to contact me for further details…


18 Mar 2010 - 10:26pm
Mathew Sanders

Hi Ivan,

I totally agree with you around sticking with conventional models (regardless of how much we like them or not) but I think this can warrant an exception because its intended to supplement the 'classic' booking process rather than replace it. Also in the New Zealand market, this company (currently) doesn't have a lot of online competition. They are the only non-airline travel website that has a serious share of the market (Travelocity and Orbitz do exist, but they are not promoted much, and not well known).

Thank you for your suggestion, but I don't know if I understand it completely...Are you describing a matrix where (for example) departure dates would be on the horizontal axis, and return dates on the vertical axis (with individual cells being the total best possible price?)

Many thanks Smile

19 Mar 2010 - 1:26pm
Ivan Burmistrov

Hi Mathew,

You got it completely right: 7*7 is a matrix where departure dates are on the horizontal axis, and return dates on the vertical axis – with individual cells being the total (and final) best price.

This matrix is implemented by Orbitz, Travelocity and many other OTAs, and – among airlines flying to NZ – by Lufthansa, Air Canada, Emirates, Singapore Airlines, Cathay, Thai Airways, Argentinas, LAN, Aircalin, Air Tahiti Nui and United (5*5 matrix in the last case). (Naturally, nobody uses 1month+1month solution.) This overwhelming majority of flying-to-NZ-airlines means that NZ users may be quite familiar with 7*7 solution and 1month+1month design may be confusing to them because it looks like 7*7 but is completely different.

Other arguments against 1month+1month design:

(a) the user have to permanently scroll the webpage up and down and mentally summarize prices for outbound and inbound flights,

(b) the task becomes more difficult when the trip starts in one month and ends in another: in contrast to continuous 7*7 solution which ignores months’ ends and beginnings, 1month+1month design is unnaturally discrete.

Again, my recommendation is to implement standard 7*7 matrix. It will work.

There is a lot of other usability flaws on this website to deal with... Smile

18 Mar 2010 - 9:45pm
Vicky Teinaki

I tried the site out when it first launched, and like that other user, initially missed the slider. That said, for me it was a bit of a kayak problem - one I found it it was fine.

What got me was that it isn't really a slider at all - I was expecting to be able to scroll by week (or some other fine grained measure) and see a lot more results - i.e see all of the times for each day and the price. As it stands, it'd be better for the months to just be clickable (which they aren't).

18 Mar 2010 - 10:43pm
Mathew Sanders

I think a finer grained scroll would be great too!

I can't think of a way that more results could be shown at this stage without overwhelming people with an excess of information - but I'll have a think about it... 

18 Mar 2010 - 10:49pm
Mathew Sanders

Also... as a related question.. what are your thoughts about the tones of purple to show variation in prices?

I think that maybe the lowest prices would have been better represented as white, and the higher prices in the darker colour.

My (possibly bizarre) logic behind that is that we tend to see gradients shown with a top-down light source, and sometimes use a contrast of lighter elements to represent things 'sticking out' and darker elements to represent thinks 'sunken in'.

So, if the lower prices were white they would look like they were 'sticking out' of the screen. What do you think, or am I pushing that analogy too far?

19 Mar 2010 - 3:34am
Ivan Burmistrov

My opinion is that probably only two colors should be used instead of a gradient: days with cheapest price colored while all other days white. The color must be warm (e. g. light orange). Purple is rather cold color and can barely be used for color-coding the most attractive prices. (Purple as a mix of red and dark blue also interferes with color coding for temperature scale…)

I am not sure and do not insist on these ideas…

19 Mar 2010 - 8:03am

Hey, about about a range slider with two points on the range?  Think Google Finance, only with a better "bracket" design to show what your range actually is.  It would look something like this:
          Displaying Feb 2 - Mar 7 2010
Jan     Feb     Mar     Apr    May    Jun

Then a kind of scrolling calendar (not an actual scrollbar or animation, just the idea that you might not display an entire month and the calendar would display a part of two different months in the range) that goes from the first to the second date?

On the gradient color: Given the look of the site, I think it might break the design a bit.  That said, a subtle VERTICAL gradient (that won't be confused to represent an actual value representation of the slider) might be something you can play with.

19 Mar 2010 - 10:23pm
Mathew Sanders

Loving the slider idea here!

19 Mar 2010 - 12:42pm
Justin Davis

A few things:

  • I'd try tabs on the left and right of the calendar box, with forward and back arrows respectively.  Support how users think about months - they exist between other months.  Illustrate that mental model more clearly by making the current month appear to be in-between others.

  • Unrelated, but I think putting a header for the current month (just an <h1> above the grid) will help with some clarity issues ("What month am I looking at").

  • Also unrelated, but related to the above - at first it was unclear to me that the months were changing as I slid - I saw the change of colors/days, but because there's no month title to indicate a transition, it was a little strange. If you find people clicking through months, then not fully sure if the month has loaded, you might try slowing down the transition between months, and place a couple seconds of the ajax loader gif in there, to indicate that the webpage is going to get new data.

19 Mar 2010 - 10:30pm
Mathew Sanders

Great observations and ideas :) I think these small tweaks would offer some good improvements...

Syndicate content Get the feed