The new VirginAmerica.com
static.virginamerica.com
static.virginamerica.com
It seems as though Virgin America can bypass many of these because there are no (?) international flights.
The original boarding pass redesign post, to which the above was a rebuttal: http://passfail.squarespace.com/
Edit: wrong links.
Clients like it because they think the cool kids are doing it.
Clients also like gimmicky scroll effects and parallax.
How does that happen?
Apparently users like being told what they want
Design is two things: understanding people, and creating. You have to balance a pure empathy and understanding of needs and desires with uninhibited creativity. Only then will you create something that people both want and have never seen before.
http://blogs.plos.org/neurotribes/2011/10/28/what-kind-of-bu...
Those were my feelings exactly. It feels much more natural to be able to scroll the part of the page you're interested in to whatever part of the monitor is most comfortable for viewing. Also, this prevents you from quickly scrolling down to a lower section of the page.
Example: http://cl.ly/image/3D0f2u0Y300Y
With this mobile-first grid layout, there's no shortcut. You have to read each and every entry and then haul the cursor over to select one.
For me it started with 'Book from San Francisco'. I clicked on the 'Boston' button, and it shows this weird top status-bar drop down thing which flashes the message: 'Going to "Hahvahd," perchance?'. What?
Then the browser starts, a little bit too slowly, scrolling itself down automatically... Off putting.
A moment later, the mocking message slides up and away, and the top nav has been replaced by mostly broken status bar. Try clicking on some of those links in the status bar if you want to get totally lost.
Then that calendar view... I mean, if it showed 'From $199...' or whatever under each date, I could understand taking up so much space. I thought it was a lot harder to find the right date this way than with their standard date picker.
After picking a date, the flights table is significantly worse than their current design. No way to step forward/backward in dates, no weekly overview, super low contrast, overly spaced out, scroll down forever trying to see all the flights, no sorting,...
Even the seat map is weird, I don't know if it's just due to the super-low contrast, or the weird icons they put in place of seat numbers for the seats which are taken, or maybe the weird way they show the pricing for each seating area, but there was a lot of cognitive dissonance trying to understand what I was looking at.
What it comes down to is an interface which was trying to make things simpler actually introducing a huge amount of cognitive load where there didn't need to be any.
In the end, I zoomed out to 33% to get a birds eye view and while it's interesting to see everything on one page like that, I think they have a LOT of work ahead of them making it actually flow properly, fixing the contrast and layout, removing all the weird and distracting gimmicks, and bring back some of the core functionality that's missing.
I honestly don't understand how website trends can devolve so rapidly and radically. This blunder may well end up costing them millions of dollars in missed sales.
[1] http://passfail.squarespace.com/
[2] http://blog.timoni.org/post/318322031/a-practical-boarding-p...
[3] http://www.ryanholiday.net/this-is-what-real-analysis-looks-...
1. https://www.comscore.com/Insights/Press_Releases/2014/2/comS...
No javascript: http://i.imgur.com/8HkKyZx.png
There is a delay of at least 100ms scrolling up and down between pages. I would guess 150ms. I do not see any obvious way of changing this, and the scroll bars are hidden. What if I need to change something at the top of the page? I also managed to break scrolling ending up halfway between pages somehow. The only way to fix this was to painfully scroll all the way to one end to reset things. No CSS: http://i.imgur.com/u5g0eaS.png
The site appears to scale horribly, and it looks like they are using javascript to generate styles. IANA web developer and have not studied modern web stuff in a long time, but this seems like A Bad Idea. No CSS or javascript: http://i.imgur.com/Kb2JZAH.png
I do not even want to think about the accessibility issues.All in all it seems like they are just following the flat design trend, for the sake of following it. I am sure they have good intentions, but just from analyzing this page I am underwhelmed.
Accessible websites are usable without JS. Maybe not pretty, but at least usable.
I love how they put "life" into their brand with those avatars and make it fun in this all too boring process of buying tickets. To be honest, I would be jealous of how innovative Virgin is lately when I'm another airline.
UX wise there are some things I would do differently. There are some rough edges but it's an iterative process and they'll probably track tons of things now. For example, changing prior steps will reset the date selection.
Deep respect for their team, I also love their new logo. Awesome!
1. Boarding pass is great.
2. Being able to scroll back up to make changes is wonderful. A lot of airline sites are slow, your session breaks when you use the back button, etc. It's nice being able to scroll up, change a date, scroll back down. Well done.
As for the downside, it uses way too much space. This might work on a tablet or touch screen, but it's awful for the desktop. For example, your typical airline uses something like this...
http://i.imgur.com/bEjWWm0.png
A couple of autocomplete boxes, and a calendar picker that pops up. Works fine, it's all visible in a little box, and easy to use. The virgin site stretches this across a handful of pages, or if you're picking further off dates, it might be 10+ pages. That's just bad design.
What they should do is keep a more traditional method of selecting all your airports and dates, then scroll down to the prices when you click continue. I think it would be the best of both worlds.
They also need a method of finding the best price over a given time period. Jetstar is one of my favorites when it comes to this...
http://booknow.jetstar.com/Search.aspx
Pick a flight, say Brisbane to Sydney for a few weeks in June. Click the box to say you want the lowest price. It gives you a nice little graph with all the cheapest flights highlighted, so you can easily choose your days. Actually, the whole Jetstar booking process is decent, and I used it often in Australia.
Huh - did we look at the same site? Just the same old minimal bootstrap3core aesthetic that's everywhere nowadays. Found it pleasant to use, though.
Most flat design websites currently all use the same flat colors and the Flat UI template.
Flat design websites that are created by excellent designers begin to use gradients with specific color combinations. Like Stripe.
There's also an ongoing trend by using more thin fonts and thin graphs in charts. Looks more elegant. I really like this, but UX wise I hear a lot of signals that people find it hard to read.
Virgin has been my favorite airline for some time, but now just went up 3.14 notches.
/book/rt/a1c1i1/sfo_bos/20140524_20140528
Note the a1c1i1: that's "1 Adult 1 Child 1 Infant" and it changes as you adjust the widgets (without a page refresh).
Also, minor detail, but I'm interested to see that they use PUT as well as POST to update the server with the selections. So that's following modern "REST" guidelines (use verbs properly) but the URLs are anything but!
EDIT: I put "REST" in quotes to refer vaguely to modern API practices. I know REST is strictly something else, please let's not talk about that it's really boring.
EDIT: I take that back. Apparently, the back button does not undo something like adding a child to your booking.
If the URL looks like it might have some hidden information, what I usually do nowadays is to navigate to that location from a separate browser (in which I have no passwords, logins, cookies, history), and cut and paste the URL from there.
incognito/porn mode should work for that too
2. See more dates, but not enough
3. Click show more dates
4. See more dates, but not enough
5. Click show more dates
6. Nothing happens
7. Click show more dates
8. Nothing happens
9. Give up
beta.virginamerica.com is, of course, a blank white void.
Filling out a form and clicking some buttons is such futuristic technology that we can no longer figure out how to make it work without JavaScript.
There are quite a few comments here complaining about the gaudy unusable interface produced by "modern JavaScript-based techniques", which in this case appear to provide virtually nothing that static HTML and CSS can't do. The dev team was lazy and wanted to show off, and screw anyone who doesn't think running gobs of arbitrary code should be a necessity for buying a ticket.
And for what it's worth my non-developer artist girlfriend has been using noscript for longer than I have. I'll let her know what modern devs think of her, though I don't think she's heard of wget.
I'm not sure if the average customer will enjoy being treated as if they're five years old. I find this unbearably corny and unprofessional.
I like it. It's fun and refreshing to see such an output from a 'giant' corporation.
The cities being laid out in a grid looks nice but is ultimately far more difficult to understand then just looking at an alphabetical list in a dropdown. Auto-picking your departure city based on your current location is admittedly a nice detail, but it wasn't immediately obvious how I change where I'm starting as the "link" was different than anything else on the page.
The "Who's Flying" section is massive for having so little real information. And why are that the font is 120px (or 12rem) but the "+/-" controls are faded out and tiny by comparison?
The calendar is again completely oversized, low contrast, and difficult to understand. My laptop has a 1440x900 resolution screen and I can barely fit a single full month in the window. If I happen to want to buy a ticket more than a month or so in advance, I need to repeatedly click "More Dates" which then appends another two months to the already crazy long page? Also, the low contrast purple highlight for all the dates inbetween departure/return isn't immediately noticeable.
When I click on a ticket price another window slides up over it - took a few moments to figure out what actually happened there. Overall the "ticket selection" again looks pretty, but when I can only see a few in the window at any given time it's far less usable than a standard clean list. Also, the "Continue" button looks identical to the other addon options, and it isn't immediately obvious how to progress if you don't want to upgrade your ticket.
The seat selection admittedly is admittedly fun looking though why are half the faces looking upset? Also, versions of the seat selection where they actually place the seat INSIDE the plane in it's real physical location are more readable than this abstracted version, though I do like how they clearly broke it up into sections that show the different cabin/seat types. Again though, I can only fit about half the plane on my screen at any given time.
Having the form adjacent to the seat selection is a nice touch as you can then easily track who's sitting where as you enter their information (especially if you're a family with kids), but for some reason they neglected to highlight the seat on the visual map. Also, the form is again overly tall and I can only fit about 2/3 of it at any time.
Overall I think it's a good start but hardly production ready. My gut instinct is that most people will be impressed by how "pretty" it is, but that the overall conversion rates will decrease significantly. The one really well done idea is the fixed header, though realistically it should progressively fill out with information and not show/hide ticket info at different stages in the process (for instance, it did show my takeoff/landing times and price which was extremely useful, but now hiding that to ask me who's sitting in seat 4B, which is already emphasized at the top of the form).
All the airline sites seemed to have converged to a common model. They all follow exactly the same flow: pick cities and dates, then pricing, then sign in, etc. There was far greater variation in the flow in the early years.
> but from a usability perspective it might just be the worst
Oh, I can cite major airline websites that are much worse from a usability perspective. Trying to book a flight on any Brazilian airline is impossible unless you're Brazilian. That's because every airline in Brazil has inexplicably decided that they want you to enter your Brazilian identity number -- explained in more detail here:
http://brazilsense.com/index.php?title=Booking_a_domestic_fl...
If you're not Brazilian, you don't have such a number of course. Note that this is not any sort of legal requirement; it's just thoughtlessness about usability by the airlines.
I expect a lot of indignation this summer when visitors try to arrange flights inside of Brazil during the World Cup.
The Brazilian airline policy of requiring an identity number is definitely a terrible decision on their part, but that doesn't excuse other airlines from making needlessly flashy and overcomplicated complicated UI's.
Last time I had to book at SDU (Rio airport), I needed to take most of my day to go to the airport, wait in long lines and buy the ticket physically, with cash or (get this) by card! This was a 5-6h process including public transport (and I actually lived 10m away by car at the time).
___
At the risk of getting too off-topic (which I may have already done above), here's another recent public transport problem, when bus drivers went on strike in Sao Paulo, this is what happened on the metro. https://www.youtube.com/watch?v=CXycKeyDKXk
[1] http://brazilsense.com/index.php?title=Booking_a_domestic_fl...
I'm a UK citizen and recently booked and flew on an internal Brazilian flight. I used my UK passport number in the slot for the Brazilian identity number, there were no problems at all.
What airline did you use, btw?
Other than that, great job and hopefully they take a closer look at how to take advantage of desktop screen real estate better before taking it out of beta.
Maybe that's a good thing, maybe that's something people are used to in this day and age, but I personally think the desktop can achieve more density and be more effective for it.
But in the end, it's not that big a fail. Consistency on all platforms is nice.
I wonder if that's a bad thing. The reason I open my laptop to book a flight is because I anticipate it being almost impossible from my phone. Anything I believe will be pleasant to do on my phone I do on my phone.
I think it will take some time to get people to even consider it being easy to book a flight from a website on their phone. But that doesn't mean it's not a step in the right direction.
Not a fan of this refresh.
* Choosing departure / arrival is hard
* Choosing the date is hard
* The "Continue" button is hidden
* I see avatars but I don't know what it means, and then I see that I can choose my avatar.
* ...
But of course most of these booking sites actually hide pricing information until you tell them exactly when and where you want to fly. You won't find out that you can save some money by taking a two leg obscure routing or flying the day before.
I do like the aesthetic this new trend has, but accessibility wise, it's a no-go. I feel bad for anyone with eyesight problems in particular who comes across this site and has to read text on rainbow coloured backgrounds. These kinds of sites are not very well accommodating to colour blind visitors and that's no way to run a business.
Then there are screen height issues with the design. People on net-books and iPad's in landscape orientation are probably not going to enjoy this site very much as nothing really fits on the screen properly. The result is undeniably beautiful though, and from an investor/board member perspective, I can definitely feel the enthusiasm from here. This is the kind of site that gets everyone on board, except the developers who have to build it (in most cases).
Scrolling uis clearly tailored to touch devices like this one really should be an available alternative, not the only interface.
"Scrolling" is the bane of all things usable? Short of clicking on things, scrolling is probably the single most familiar and universal interaction on any computer of any form factor.
Not sure how scrolling necessitates loss of context nor how not-scrolling maintains context. The two are causally unrelated.
When a site scrolls for you, it can cause you to lose context (as what you just did is no longer on the page). I feel like a more apt term might be slideshow design?
Usually air travel is great and productive, but that "club" lighting has got to go.
After reloading the page, I now get text in the same color as the background. And the down arrows are missing.
This all happens in Safari. WFM in Firefox and even in IE8 it degrades acceptably.
My favorite airline is still United; their website will let you get to the final billing page, and submit your cc, only to find that "that flight isn't available".
Edit: tried a second time and slowed down my scrolling to get the site to work. 'get Booking' doesn't work.
Like the folding boarding pass though.
But overall, nice UI.
OSX Firefox 29.0.1
The cartoon characters strike me as misguided though. Their target demographic is not children.
Some reasons as to why I severely dislike it: 1) When it scrolls the background changes color. There's multiple transitions going on. It's sort of like going to a different website. I lose my entire concentration and interest. 2) No scroll bar. I can't get to the final slide without painfully going slide by slide. 3) When scrolling with the mouse, I lose control of the webpage for about a second. I can keep spinning the mouse wheel but nothing is happening. It's infuriating.
1) Some elements seem too far apart on a wider screen. Usual victim of responsive design without a max width.
2) The loading between steps is damn snappy, but feels slow sometimes due to the lack of an activity indicator. Slow is a relative term, but I instantly felt like I had done something wrong or the page wasn't responding.
Oh the irony...
Now, how do I report it? :)
Odd that other people are seeing a different default.