I decided to take a stab at refining the search results a bit. The striped area indicates the average delay for a particular flight, so it visually eats into the layover, just as it does in real life, so you can plan accordingly.
In the real world, this would have considerably more space to fill out, but I condensed it down for the shot. And yes, that means the design is completely elastic.
over 3 years ago
Happy to see more of this on Dribbble. Love that average delays are built into the graphic - really useful to see how small your window is on layovers.
A standard deviation feels like it would be useful here, though perhaps that's overkill for the average consumer.
Fantastic that it's elastic. I hope you didn't do that just for Dribbble :)
I had given some thought to the likelihood of a delay, but I think I'll just take that into account prior to this screen. If the standard deviation and average delay are within certain thresholds, it just wouldn't show any delay. Passengers know there's always some chance of delays, I just want to highlight the cases where it's likely to cause problems. The delays used on this particular example are completely made up because I haven't loaded the on-time database yet.
And no, I made it elastic because it's considerably easy to get it to work, and it'll allow me to reuse the markup and most of the styles in a mobile version. Reducing it for Dribbble was just an added bonus.
In particular, I should point out that the last flight in this example illustrates exactly why I'm doing this. The second segment is on-time less than 50% of the time (I did check that one), and it's followed by a 33-minute layover.
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter