Skip to page content or skip to Accesskey List.
Search evolt.org
evolt.org login: or register

Work

Main Page Content

Travelocity.com's homepage: lessons to be learnt

Rated 3.2 (Ratings: 7) (Add your rating)

Log in to add a comment
(10 comments so far)

Want more?

 
Picture of Luc

Luc Carton

Member info | Full bio

User since: February 01, 2002

Last login: February 01, 2002

Articles written: 3

5.77 out of 10: that's the score eShopability has given Travelocity.com's new site (version of February 8, 2002).

Length, width and size

The site uses the liquid layout technique, which enables the page to automatically adapt itself in width to the screen resolution used by the visitor.

This is an interesting technique, since it optimizes the way the page is displayed no matter what screen resolution the visitor uses.

However, the structure of the homepage has be constructed with great care to ensure that the display maintains a certain coherence with all resolutions and guides the user's eye to the parts of the page the site wants him to look at.

This is where Travelocity's new homepage makes its first big mistake.

The automatic repositioning of the elements has a disastrous effect here when a resolution of 800x600 pixels (the most common) is used: a large empty space appears to the right of the search engine, which unbalances the right-hand side of the page and greatly reduces its effectiveness.

Screenshot of Travelocity homepage
800x600 resolution
Screenshot of Travelocity homepage
1024x768 resolution

Another point to be mentioned on the technical side is that, at 129KB, Travelocity.com's homepage is clearly too big: it takes 36 seconds to download it with a 28.8 kbps modem, which is much too long for a homepage.

This is due to the length of the page - 1420 pixels - meaning that the user with a screen resolution of 800x600 pixels has to scroll down 4 screens to get to the bottom of the page.

Merchandising elements ... not very visible

This brings us to Travelocity's second big mistake: with a 800x600 resolution, its special offers and deals - in fact, all the categories except for the search engine - are only visible from the second vertical screen onwards and stretch over 3 screens lengthwise.

From the 2nd vertical screen onwards, all the merchandising elements (Fare watcher, flight deals, etc.) are displayed more or less in the center of the page, and are stuck between a menu on the right and a column on the left that, like the top part of the screen, includes a huge empty space (more than half its surface).

Moreover, with a 800x600 resolution, when you scroll down from the second screen, you can't help noticing that the elements are placed not only in three columns of different widths, but also at varying heights in each column, making it extremely tiring to read the page.

The elements in the three columns are not separated clearly enough, the gray lines between the different areas are too faint to create a clear division between the categories. It follows that, on this part of the page, there is no clear eye-path.

This means that users will look at it in an unfocused way, which greatly reduces its effectiveness.

It should also be noted that only one photo, and a rather small one at that (100x80 pixels), is used to help sell the products on the page.

At Travelocity.com, they seem think that they will be able to get users dreaming about taking a trip simply by presenting it to them in text format …

To finish with the merchandising aspect, we also noted that new products are found right at the bottom of the page - 1150 pixels down from the top: bravo to the users who scroll right down to the 4th screen to find them!

The site's online identity: quality and clarity

A certain number of elements enter into the equation here: logo, tag line, window title, favicon.ico, etc.

Although the logo is fine (except that it hasn't been changed the site was first created, and hasn't aged very well), putting "A Sabre Company" under the Travelocity.com name as a kind of tag line, is not, in my opinion, a very bright idea commercially. Although all travel agents know what Sabre is, I'm not convinced that the majority of visitors do.

The site's real tag line is, in fact, only displayed in the window title: "Travelocity.com - Go Virtually Anywhere! Airline Tickets, Hotels, Cars, Vacations and Cruises."

And when we look at the window title, we can see that the site has made another mistake: it's too long!

Window titles should be limited to 64 characters so that they can be displayed in full when users bookmark the page. As you can see in the image below, the tag line is cut off after the word "Cars":

One positive point, though, is that the site uses a favicon.ico file reproducing its logo, as you can see in the image. In addition, the title starts with the name of the site, another positive point.

Search engine - navigation

Search engines are one of the key elements on an eTourism homepage. However, some of the sites in the sector put several search features (flights, vacations, cars, etc), on their homepages, with the result that they crowd up the page.

Travelocity.com has found a very intelligent way of getting round the problem: on its homepage it only offers a search feature for flights, and lets users access 5 other search engines - lodging, cars/rail, vacations, cruises and deals - simply by clicking on the tabs to the left of the search feature.

The tabs, with their highly visible pictograms, stand out well on the page. They allow users to access not just the corresponding search engine, but also the main page for that category.

The choice of displaying one search engine at a time, and combining it with navigation functions, is an idea to worth remembering.

It is also worth noting that the site's main navigation features are all found on these tabs; the top menu bar is just a mirror reflection of the tabs.

Customer relation elements - almost nonexistent

No phone number, no chat feature, no email address on the homepage.

To contact the site, you have to go through the "Customer Care" category (which changes its name, moreover, in the footer menu at the bottom of the page, where it is called "Customer Service"...) and search through an extremely dense page (3 and a half screens long!) to find what you're looking for.

Similarly, if you want to subscribe one of the newsletters offered by the site (Travelocity real deals and Travelocity Insider), there is no way of doing this on the homepage. Not only that, but before you can actually subscribe to them, you have to become a Travelocity member.

And, while we're on the subject, nowhere on the site does it mention how often the newsletters are sent out.

To sum up then, this is a homepage with rather limited eShop-ability capacities (ability to convert browsers into buyers), that only manages to achieve a slightly above average score (5.77 out of 10) because its search engine is well-presented and intelligently combined with navigation functions.

Apart from that, we found that, out of the 160 criteria we use to judge the quality of homepages (see our study "Homepages that sell"), nearly half were unsatisfactory.

All in all, a rather surprising and disappointing result for one of the world leaders in the sector.

Luc Carton
eShopability.com

Luc Carton
Author of Homepages that sell
http://www.eshopability.com
Bio: http://www.eshopability.com/biolc.htm
eMail: luc_carton@eshopability.com
Phone: 331 45 45 15 22
Fax: 331 53 01 32 68

Interesting calculus

Submitted by SleepwalkR on February 27, 2002 - 09:59.

1420/600 = 4? =)

login or register to post comments

Sorry

Submitted by SleepwalkR on February 27, 2002 - 10:02.

Apart from that, it's a very interesting article. Thank you for sharing your insight, it probably helps us to prevent such errors in the future!

login or register to post comments

I've met Jakob Nielsen and you, sir, are no ...

Submitted by gb on February 27, 2002 - 10:05.

Firstly, you'll be happy to know that as of at least today (February 27, 2002) Travelocity.com has a highly visible "customer service" tab at the top of the page, from which users can go through Travelocity's FAQ and contact Travelocity directly.

That said and done I think you focused on many of the wrong things when analyzing the Travelocity web site.

Firstly, if you are going to Travelocity's web site, chances are your going to be looking for information on airline flights. Well right there on the hompage, in the upper-left area, on the FIRST screen ( no scrolling needed ) is a simple but comprehensive search engine feature to look up available flights. This is the meat of Travelocity's functionality, it's featured prominently on the home page, and is (farily) easy to use. I think this was absolutely the right choice. It increases productivity of users who know what they're doing ( no need to click into second level pages to get this feature ) as well it offers the option up front to users who might be "fleetingly curious".

You should point out when a site does something GOOD in its design as well as bad elements when critiquing a web site.

Now let's tackle the issues raised in this article.

Liquid design, very nice. Not enough people are doing this yet and the concept really needs to be driven home to people who are reading this column. Liquid designs don't descriminate users with high or low resolutions, which is nice. One of the worst experiences one can have online is to view a web site that's fixed at 600 pixels wide on a 1280x1024 screen resolution. That's 50% of my screen left unused. At the other end of the spectrum, it's also a horrible experience to have to scroll horizontally every time you begin reading a new line of text on a page. CNN.com has a fixed layout that's at least keeps all the information within the first 600 pixels so lower-resolution users don't need to scroll horizontally to read stories. CNN.com's design is still not a good one however, since higher-resolution users are stuck to using only have of their screen because of the fixed-width.

Liquid designs are effective and effecient and even if the page design is bad, a liquid design still goes far.

One of the down sides of a liquid design is handling multi-column content. Having designed several such sites myself, I can tell you from first-hand knowledge that multi-column liquid sites are a NIGHTMARE. Why? Look at the point brought up about Travelocity's web site in the beginnings of this article. At 800x600 resolution, a HUGE whitespace area appears below the center graphic on the homepage. This is because the site uses a multi-column liquid layout.

Let's look at what's happening here.

At 1024x768, the center image on the hompage and the text column to the right of it are at about equal height. At 800x600 the text column resizes itself to fit inside of the window. This causes the height of that column to increase, thus creating the open whitespace beneath the center image on the page. This is the nightmare. Having two columns next to each other, the tallest one must dictate the height of the other. If there isn't an equal amount of content in both columns, you're going to get whitespace in one of the columns. In Travelocity's case, they've placed a static image next to a text column which willy dynamically change size based on the size of the browser window.

Was this a poor choice on Travelocity's part, since this will invariably generate whitespace on lower resolutions?

Some might say to either nix the right-hand column or remove the image and put dynamic content in its place. I would probably get rid of both the graphic and the right-column and move everything up so the farewatcher is at the top of the page. But that might make the page too busy (as if it wasn't already). The fix might call for a different design approach alltogether. It's not my job to figure it out right now so I won't. On to other things.

The gray lines separating the different areas of content... too light?! Well first off I'm not so sure they need to be there in the first place. Each section is already separated from other content by the fact that each begins with a large, bolded font with a title describing the 3 or 4 links below it. I don't think the gray lines are needed at all, the content is already divided up naturally. But are the gray lines too light? I don't think so. If you made them black they'd probably stand out too much and detract from the flow of information to the reader. BBC's web site uses similar lines but has them a little darker, perhaps #66666 would suffice.

Were Jakob Nielsen here, he'd harp on the tagline too. It definately does nothing for me, so they should probably rethink their text. While I'm on it, let's nix the fact that the Travelocity.com text is being displayed in an image. This probably is not the best idea. Want to cut down on the bandwidth used up by the site, then cut it down to just the logo as an image and use CSS to specify font family, size, ect.. for the "Travelocity.com" text in the upper-right.

Were Jakob Neilsen here, he'd also go off on the duplication of navigation links. The left-hand navigation and the tab navigation at the top link to the same places. There's no need for two navigational elements that do the same job. I would remove the left-hand navigation and add OBVIOUS icons to the top-row navigation. This way you keep the simple icon element that the left-hand navigation is trying to use, while freeing up some horizontal space at the same time. You would cut down on bandwidth used by the web site (no more left-hand nav images) and the freed up space would allow for the right-hand dynamic column to stretch out more thus reducing the whitespace generated below the center image on the homepage. Everyone comes out happy.

On a similar note, "A Sabre Company" really doesn't need to be there since down at the bottom of the page is the Sabre logo. Travel agents who know what Sabre is can see the icon and recognize who Travelocity is part of and at the same time give users a tagline that makes sense and may even grab a few.

As nice as the phrase "Go virtually anywhere!" is, unless you already know what Travelocity does, it means nothing to a user. That phrase by itself does not give me, the user, any information at all. I would remove it from the window title.

Or how about something dealing with "plan a vacation" or "plan your trip", something short that can encompass all the functions the web site offers. The shorter the tagline, the sweeter it can be.

There may be too much information on the homepage as well. The "What's New" section is placed way down at the bottom of the page. Users who visit the site frequently have to scroll through a lot of (to them) meaningless content to get to it. Perhaps making a separate section on special deals, and moving the content of the middle column into that would be more effective. One section could then be placed in the middle column on special deals with 2 or 3 sample deals and a link to the special deals section. That would probably free some more room up without detracting from the effectiveness of the site.

There's more content management elements I'd go off on, but I've already written a novel.

All for now.

-gb

login or register to post comments

1420/400 =~ 3.6

Submitted by gb on February 27, 2002 - 10:07.

SleepwalkR:

600 = screen WIDTH not height.

screen height at 600x480 is probably closer to 400 pixels after taking into consideration the web browser's navigational elements.

so it would be 1420 / 400 which equals out to 4 pages.

login or register to post comments

GOOD Search Engine

Submitted by Luc on February 27, 2002 - 10:44.

Thank you gb for your comment. You say about the search engine of Travelocity "You should point out when a site does something GOOD in its design as well as bad elements when critiquing a web site" I did it in the article, even saying it was a "very intelligent" dispaly :-) Search engine - navigation Search engines are one of the key elements on an eTourism homepage. However, some of the sites in the sector put several search features (flights, vacations, cars, etc), on their homepages, with the result that they crowd up the page. Travelocity.com has found a very intelligent way of getting round the problem: on its homepage it only offers a search feature for flights, and lets users access 5 other search engines - lodging, cars/rail, vacations, cruises and deals - simply by clicking on the tabs to the left of the search feature. Thank you also for your very complete response Cheers, Luc

login or register to post comments

Two problems with liquid design

Submitted by wb38 on February 27, 2002 - 16:47.

I see two problems with liquid design that a web developer should consider:

You don't have to use every pixel. Just because a monitor might have 500 pixels leftover when a site is displayed does not mean those pixels should be used. (I have 30GB on my hard drive, but I don't mandate that it be filled up.) It's not really a moral/value judgment (if you don't use the space you're "wasting" it). Rather, it's a design consideration. For instance, if you go into a bookstore and browse around, you'll discover that white space can be used quite effectively. Sometimes it is better (and makes a stronger design) to have a wider margin than usual. Sometimes it is a comfort to the eyes to have less stuff on the page (that is, avoiding "overdesign"). And sometimes it is a delibrate attempt to aid in readability. Which leads to my more important point...

Long line widths destroy readability. The wider a liquid design stretches, the more difficult it may become to read text. A basic tenet of typography is that a typical line should not be too wide for a reader to 1) scan it quickly and comfortably, and then 2) drop her eyes down to find the beginning of the next line—all without a hitch. This is why newspapers use narrow columns: it's much easier to read a thin column downward than to read even a few lengthy lines across. (Try it some time!) It becomes next to impossible to read efficiently when the beginning of the line is 1000 pixels away; you have to actually move your head! The problem is compounded by display resolutions that are routinely less than 100ppi. It's a good idea for a web developer to consider this issue as part of her decision in building a site. There is a good reason that many sites, especially those with heavy reading content, stick to a fixed design.

[Side note: I wouldn't count on everyone having their browser window size maximized. The larger the typical reader's display becomes (and the higher the resolution), the more ridiculous it seems to have the browser window fully open and supersized. On a 21" display at a high resolution, 2/3 of the screen is more than enough!]

login or register to post comments

liquid layout

Submitted by atdt1991 on March 4, 2002 - 10:26.

Ved Bok Entertainment uses a liquid layout.

While extremely heavy on bandwidth, they seem to make the most of their space while providing some appealing 'whitespace' at higher resolutions. I find the column(s) used appealing at 800x600 and 1024x768.

login or register to post comments

IMHO

Submitted by ericd on March 8, 2002 - 12:58.

1. I suspect designers do not like fluid layouts because its a challenge to make content scale gracefully. This feature, however, gives the user back the control (and that is always a good thing). It allows users to regulate the amount of content displayed (per browser window) via window scaling/management. This includes control of line length which is important. A 'readable' or preferred line length may differ between users... and this is relative to the font scale which browsers allow to be scaled.

2. Counting vertical page length to the pixel seem to be overboard. I think the only concern is the target resolutions 'fold'. I think users actually do not mind scrolling. In fact, I think they immediately do upon getting to a page if they don't see anything right away that interests them. What is more in danger of being invisible is the very very top of the page. User testing have showed me that nobody really looks up there. I think the page content should be regulated to a digestable amount, but not the real estate. See a typical article page from suck.com (http://www.suck.com/daily/2001/05/29/). Content is digestable at every 'display' but may scroll endlessly if desired. And look at all that white space. A good experience in my book.

3. Something I like to practice and say is... "Its not empty space, its full of empty space!". Since when did some white space hurt the user experience?

login or register to post comments

The desicion to go with a "Liquid" design should..

Submitted by BlackHaloBender on April 18, 2002 - 15:02.

The desicion to go with a "Liquid" design, like all design considerations should be based on the content. Whether or not the content needs to stretch (JN, useit.com uses this word, i think its less pretentious then liquid), should be made during the test phase, after the content has been added to the site.

All but the lunatic-fringe would agree that yahoo's fixed width and useit.com's browser dependant width, are both appropriate for each site's layout. The fixed width vs. strechable debate is pointless.

Just for Jakob Nielsenites (like me sometimes) it be wise to read their bible before flaming this post. Smack dab in the middle of it JN admits that in the end, Sun (where he worked at the time) used a fixed width site for its homepage under his approval. He even gives reasons why (read em your dang self!). Also, according to his first law and the ONLY web standard i really adhere to= Yahoo's fixed width should be standard for any portal type page, Amazon's stetchy width should be standard for shopping sites and so on...

FlameBaitBelow!!!
As a side note, Luc, did you test your site? Did you design it yourself? I dont know how it works in France but an entire homepage that looks like an advertisement is a big turn off in America (not that im all that smitten with my fellow Yanks). I would be interested in seeing the stats on your homepage. Which users from which countries actually continue on from the home page and which users, from where, just hit the back button (like i did). To be honest, it reminded me most of a ahem, "male self enlargement service" that me and a couple friends stumbled on to one time. It, like your site just SCREAMED of scam. I would be glad to get my usual group of seattle testers i use, to look at your site and give you some input.

login or register to post comments

looks like you already took that advert off

Submitted by BlackHaloBender on April 18, 2002 - 18:15.

looks like you already took that advert off, it already looks better. :)

login or register to post comments

The access keys for this page are: ALT (Control on a Mac) plus:

evolt.orgEvolt.org is an all-volunteer resource for web developers made up of a discussion list, a browser archive, and member-submitted articles. This article is the property of its author, please do not redistribute or use elsewhere without checking with the author.