2008.09.05 18:54:30
Susan Jackman

 

Doing case studies is a method of research. Case studies are in-depth investigations into real-life cases

Based upon data and research that help you to identify a problem and suggest strategies and resolutions.  It also an important way to see how other put key concepts into action.  I will from time to time share what I have learned in my case studies here.

Case Study: Usability Comparison

Travelocity Current Site is http://www.travelocity.com
Expedia Current Site http://www.expedia.com/


10 Elements to be discussed include:

#1 emphasizing what that site does that is of value to the visitor

#2 Using hierarchy to emphasize the most important tasks

#3 Making your homepage stand out against the rest of the site by being visually different and easy to locate in the navigation.

#4 Keep Links and headings simple and straightforward so that they are easy to understand.

#5 Consistent Style (Typography and design)

#6 Use examples of the content to reveal site content instead of just an explanation

#7 Make links to detailed information obvious and different than links to general information or categories.

#8 don't use the work links to describe links, make them stand out visually by underlining them or using blue text. If using a heading for the links use a word that describes the category they belong to.

#9 clearly indicate if a link opens media, downloads something, or sends/submits something.

#10 Group navigational items together that are similar to each other.

#1 Emphasizing what that site does that is of value to the visitor

Travelocity Site http://www.travelocity.com/

Reading the navigation items, does of course indicate to me what the site is for, but I am primarily drawn to the Garden Knome, (which tells me nothing if I am not familiar with their commercial) Although to me the Name of the site/domain is extremely clear as to what the company is offering it's visitors.  I put down this assignment and came back later to work on it and noticed that their main graphic had changed to a Caribbean beach shot, which I feel is much more engaging and appropriate.  I'm not sure if their main image changes according to a schedule or if the site was updated while I was away, but this does indicate to me that this graphic area is meant to be a container for a featured deal/item.

Expedia Site http://www.expedia.com/

Expedia's site name is not as descriptive as Travelocity, but what the name lacks they make up for with their logo, a plane zooming around the world. The navigation categories are nearly identical to Travelocity and the main graphic of a child flying a kite is as irrelevant as the Garden Knome on Travelocity.

#2 Using hierarchy to emphasize the most important tasks

Travelocity Site http://www.travelocity.com/

The home page dedicated a large area of the page for it's most popular feature, finding the best priced flight. (Which is also the first link after the home page) The main navigation is strongly contrasting with a very dark background and light text, which helps it stand out well. The secondary navigation is just below the primary navigation. And is smaller and not as bold, drawing less attention to it. The content area of the page stands out very well with a high contrast between it and the navigation, heading and footer sections. I think the site has great visual hierarchy and composition.

Expedia Site http://www.expedia.com/

There was some hierarchy but very little on Expedia's site. The main Navigation links were a little larger than the rest of the text and they had visual separation. The Plan your trip feature is the first real content on the page but the much larger graphic of the boy flying the kite actually draws attention away from it rather than helps it.

#3 Making your homepage stand out against the rest of the site by being visually different and easy to locate in the navigation.

Travelocity Site http://www.travelocity.com/

There is nothing different about the home page, it looks the same as every other page. In fact the Home page has it's own sublevels and secondary navigation just like the rest of the site.

Expedia Site http://www.expedia.com/

The home page has the same layout as the other pages just like the Travelocity page. The only difference is that the Expedia site doesn't beak down each section into lower levels like the Travelocity site. To save viewable space, all of the content is present on each page and the page must be scrolled to view it all.

#4 Keep Links and headings simple and straightforward so that they are easy to understand.

Travelocity Site http://www.travelocity.com/

For the initial Gnome graphic, the large heading could have been worded clearer to indicate the site content but its attempt to be catchy makes it less clear. The current Caribbean ad is appropriately labeled, stating exactly what the site is offering its visitor.

Expedia Site http://www.expedia.com/

I did not find any ambiguous headings or links. But the content is not well organized and feel ambiguous.

#5 Consistent Style (Typography and design)

Travelocity Site http://www.travelocity.com/

Fantastic job on this point with both the design and the Typography.

Expedia Site http://www.expedia.com/

The Design and Typography is consistent, however I wouldn't say that it is well done.  Both could be greatly improved.

#6 Use examples of the content to reveal site content instead of just an explanation.

Travelocity Site http://www.travelocity.com/

Travelocity did a great job here as well.  They have very eye catching (small but appropriate) images of 4 of their most popular destinations with links beneath labeled Las Vegas Deals and so forth.

Expedia Site http://www.expedia.com/

Expedia does a good job with this element as well. They use relevant Icons and graphics throughout the page and site.

#7 Make links to detailed information obvious and different than links to general information or categories.

Travelocity Site http://www.travelocity.com/

Site links are bold text with underlines when you rollover them and links to more detailed information are underlined text.

Expedia Site http://www.expedia.com/

This was a little confusing, they use a combination of plain text links with no rollovers, underlined text, and image links and I was not able to ascertain a pattern or sense of organization as to why they used each different type. (Aside from the main site navigation, which is graphically separated, very similar to how Travelocity's was)

#8 Don't use the word links to describe a list of links, make them stand out visually by underlining them or using blue text. If using a heading for the links use a word that describes the category they belong to.

Travelocity Site http://www.travelocity.com/

I think that they have some elements that do a great job of describing the category, like Last Minute Deals, and Cruise Deals, but the one labeled also is really unclear, especially since they are referring to something else that is not labeled.

Expedia Site http://www.expedia.com/

They did a good job of labeling categories of links well. However there seamed to be a lot of categories that were very similar, I felt the content could have been organized better.

#9 clearly indicate if a link opens media, downloads something, or sends/submits something.

Travelocity Site http://www.travelocity.com/

They used large square buttons to indicate their form submissions, (without rollovers to help indicate that they do something) I was unable to find any media links.

Expedia Site http://www.expedia.com/

Expedia indicated links to forms and email requests using an arrow icon.  Similarly, customer and account related links had icons of a person.  I think that Expedia did better with this element than Travelocity.

#10 Group navigational items together that are similar to each other.

Travelocity Site http://www.travelocity.com/

They do this fairly well; with the exception of the Vacation packages and last minute packages being separated by cruises.

Expedia Site http://www.expedia.com/

Expedia's main navigation was grouped the same as Travelocity with the addition of 3 extra sections for deals, maps and corporate travel.

Conclusion

Visually the Travelocity site is much more appealing, it was clean and well designed.¬† The Expedia site wasn't as good compositionally; it looked cluttered and was not as well organized as the Travelocity site.¬† The Typography was not clean.¬† The Travelocity site kept all the content on the main pages viewable without scrolling; While the Expedia's home page was stuffed to the brim with a lot of distracting content.  Overall Travelocity's site seamed better-organized and easier to browse and navigate.  Travelocity had 9 of ten elements superior to Expedia's and I would say that 8 of those 9 elements were far superior to Expedia's. As far as the functionality and the design of the home pages, Travelocity has the better design.  My next question would be, which site's trip finding/planning functions work better, since this is the primary function of both of these sites.


  Web Development | Usability | Case Study | Internet | Susan Jackman