Travel in Style

Travelocity has redesigned, and is now laid out in CSS. Navigation appears to be some variation of the suckerfish, and the dropdowns break rather badly in Opera 7, dissolving into a mess of unfloated, overlapping list items which loop in and out of a :hover state repeatedly whenever the mouse is over them. In Safari, only the first item in each nav list drops down; the rest are hidden away from the user’s eyes, denying Travelocity the views and profits of Mac OS X users everywhere. This effort to move towards cleaner, more usable, standards-friendly design is admirable, but till Travelocity’s cross-platform deficiencies can be fixed, I’ll be sticking with my preferred travel site for now, thank you.

Sippey has written/drawn up some visual analysis of Travelocity and other travel sites. I’m not sold on Expedia’s “front-and-center” treatment of the flight search box as the best scheme. Remember the “visual Z”: On first viewing, readers and users tend to scan newspaper, magazine, and website layouts in a quick “Z” above the fold, starting at the top left of the page and ending at the bottom right. It’s most important to put the focal points of pivotal elements — such as primary navigation or reservation forms — right where the Z starts. Center-of-the-page positioning is not terribly wrong, of course, as long as the form is designed to be prominent enough to catch the viewer’s attention, but on a subliminal level, the user only sees the reservation form when beginning the diagonal leg of the “Z-scan,” thus lessening its perceived importance for precious seconds before more detailed reading comes in.

It might be argued that Travelocity and Orbitz get the “Z” wrong, placing the reservations form below primary navigation and branding, but it must be remembered that we’re talking about scanning here, not reading. The user’s vision takes in a wide swath of detail, making instinctive connections between borders, headers, and boxes. In Travelocity’s case, we first see the logo, the navigation bar, the reservations form, and the special promo graphic — all important elements. In Expedia’s case, we see a logo, a white space, a banner/textad, and a bunch of tabs in the moments before we even start to notice the reservations form.

These are all unconscious thought processes that occur in the first few seconds that a page is viewed, and those seconds count. As I constantly told my graphic design staffers back in my Guidon days, the designer’s job is mostly subliminal. A good layout is barely noticed, introducing the reader to the content and keeping them with it to the end. Or, as usability guru Steve Krug puts it, “Don’t Make Me Think.”


  1. Jason Wall says:

    For some reason though, both Orbitz and Travelocity feel lopsided. I get the impression that the travel aspect is small and contained. When I do my search I’m presented with a radically different design layout and theme than the front page and its confusing, Orbitz more so than travelocity.

    For some reason, Travelocity’s color scheme gave me the impression that they were small time or lacking in polish, and it bothered me.

  2. Pau, can you recommend something fairly simple on CSS layout for dummies? I’d really like to learn, but I found simple CSS for text challenging enough, so I’ve been timid about tackling it for layout!

  3. daniel says:

    They seem to have fixed the drop-down bug in Safari. They must’ve read your post!