Ecommerce statistics are often divided into travel and non-travel sales. But for the developer, there is little difference. In both cases you need to create an environment wherein shoppers can find the products they seek, purchase those products online, and feel confident that the transaction was handled well.
Ecommerce-powered travel sites can be a great source of inspiration since they often lead the industry in configurable product merchandising and presentation strategies. In this showcase, I have put together a list of eight examples of commerce-enabled travel sites that do a good job of presenting complex product offers in a usable way.
Orbitz
The Orbitz home page is dense. The upper left portion of the page is devoted to a travel configuration tool, which is almost essential in the travel segment. The upper right contains a simple content slider displaying package offers. Some 15 of the page's 18 external JavaScript files are included at the end of the HTML document, which is considered a best practice.
Like many travel sites, Orbitz must run complex database queries to locate the proper flight times and connections for its customers. While crunching the numbers, shoppers see an attractive splash screen that lets them know that the site is working.
Orbitz landing pages include an easy-to-read comparison table and tabs that make it easier to sort the results.
Priceline
Try searching for airline tickets in the search engine of your choice. Then click on a Priceline link in the search results. What you'll find is that Priceline does a very good job of capturing where site traffic originates. The site also tracks session data to learn whether or not a visitor converts. Priceline is also very good about how and when it sets cookies.
Priceline also makes good use of the time it takes for its servers to run a database query and return the desired results.
On the Priceline results-landing page, there is a very short header, which places all of the important comparison data very near the top of the page.
Delta Air Lines
With a more corporate design, Delta's home page is aesthetically attractive and compact. The site does a good job minifying JavaScript and CSS files, and is one of the fastest-loading travel sites in this showcase. The site also uses Ajax to verify form fields and make suggestions to users.
Delta's transition page uses an active loading icon to help convey why the user is waiting.
Search results are displayed as a grid with sort and filter options in the head. The site provides for a significant amount of refinement, including stops, aircraft types, travel times and more.
Kayak
Kayak's developers integrated a Facebook "Like" section directly into the home page, making the site one of the most forward looking in terms of social media integration. The site also uses Ajax for hints and validation.
Kayak returns results quickly, making its intermediate splash screen little more than a blur. The landing page offers a faceted navigation that could make it easier to find the proper travel options.
Kayak also offers a unique feature that lets users view four other travel sites in new browser windows.
JetBlue
JetBlue uses a relatively wide content slider on its home page. The slider is a jQuery plug-in, and the site actually makes use of both the jQuery and YUI JavaScript libraries.
JetBlue's landing pages calculate not just the requested data, but provide information about other travel dates, so that the user knows right away if flying a day earlier or later would be cheaper.
The site also includes a full screen video that introduces potential customers the company's offerings and service. It is a very nice use of Flash.
Amtrak
The Amtrak home page makes good use of JavaScript, including a very functional mega menu, a smooth content slider, and tabs for "Tickets," "Status," "Schedules," and "My Trip." As with many travel sites, Amtrak uses Ajax to help users find stations in the page's various forms.
Results pages load very quickly and provide opportunities for users to upgrade.
The Amtrak site also makes interesting use of chat with a conductor avatar that offers help as travelers consider their non-plane travel options.
Disney Cruise Line
Paying thousands of dollars for a vacation is no easy thing. Doing it with the click of a button online, even less so. But the Disney site uses a larger content slider to communicate the experience of traveling on one of its cruise ships, helping shoppers understand what they are getting for their investments.
In its "New Cruiser" section, Disney uses a Flash-based video slider that lets visitors quickly sort through a number of video presentations about the cruise line's offerings.
An Ajax-driven "Find a Cruise" page, lets visitors know how their filtering selections affect the total number of available results.
Norwegian Cruise Lines
The Norwegian Cruise Lines home page features an expandable Flash player that can be enlarged, paused, and repositioned easily. The Flash player integrates very well with the other page elements.
The site also makes very good use of its mega menu, going beyond simple text links to include its configuration tool on every page as part of the top navigation.
The site's search results pages are laid out as a grid and include a lot of high-quality images inline.
