Project: Usable Design Analysis of Southwest.com

The website that I chose to analyze for this project belongs to Southwest Airlines and is located at www.southwest.com. My analysis is primarily based on the navigational elements of the home page and the process of navigating between the home page and associated travel booking pages. The primary function of this website is to facilitate booking airfare and other travel arrangements with Southwest’s partners.

Criteria:

  • Are the main navigation elements functional, clear, and easy to locate?
  • Is the search function clearly presented?
  • Do navigation elements adequately persist beyond the home page?
  • Are breadcrumbs positioned and styled appropriately for clear navigation?
  • Does overall design support or detract from clarity of navigational elements?

Are the main navigation elements functional, clear, and easy to locate?

The main navigation elements on the home page of this website include, the Southwest logo with link to home, top navigation bar, and booking navigation bar along with additional resources listed in the footer.

SW-initial-home-view-desktop

The Southwest logo

The logo is located in the top left corner, is highly visible, and persists across all pages of the site.

The top navigation

SW-home-top-nav

A simple top navigation bar is anchored to the right top corner. From this navigation bar, users may select from four main categories, which when clicked produce a popup menu for further exploration.

  • Flight | Hotel | Car

screenshot-www.southwest.com 2016-07-01 15-42-15

  • Special Offers

SW-home-top-offers-popup

  • Rapid Rewards

SW-home-top-rewards-popup

  • For Search, please see next criteria.

Although the top navigation is clearly written, it is unobtrusive and not immediately visible upon initial page view. Using a larger, or bolder, font would make this easier to see when scanning the page for navigation.

The booking navigation

The primary function of this website is to provide users with a seamless way to search and book flights. This navigation element is elegantly designed and performs well. The transitions between tabbed menu items are appealing and the content is clear and concise. Entering travel details into the flight search form is straightforward and easy.

The booking navigation bar is styled to standout and draw attention, but the announcement for the “Fall Sale” pushes it too far down the page, which may cause it to be overlooked. It is located mid-page on initial view with a larger desktop screen.

SW-home-initial-comments

The booking navigation appears closer to the bottom of the page on smaller screens.

SW-booking-belowfold

The visual impact of both navigation bars would be improved if the “Fall Sale” announcement were not in the most visually prominent page location. This may be the best placement for driving traffic to the “book now” call to action (CTA) for this sale, however, it may have the unintentional result of pushing users not interested in this offer away from the main booking page.

Additional resources in the footer

The numerous resources included in the footer are clearly stated and organized logically. It is primarily a list of links to other pages, but does have graphic elements, such as buttons for social media and Southwest subsidiaries.

SW-footer

A nice addition to the footer are icons that identify links that will take the user away from the www.southwest.com domain.

SW-footer-icon

The footer is the only place where links to customer service and other FAQ type content can be found. Since the home page is rather lengthy to scroll through, it would be helpful to include a general link in the top navigation for “Customer Service” in order to avoid customers using the search function at the top to find it, which would generate the following error:

SW-search-error

Is the search function clearly presented?

On the home page, there is a magnifying glass icon located in the upper left corner. Although this is an anticipated location and icon, it is not evident on initial view due to the background graphic. The icon doesn’t stand out enough when scanning the page.

SW-home-top-search-icon

The addition of an accompanying “Search” label beside the icon may be of benefit in this situation to prevent the icon from being overlooked. Another possible solution is to darken the header background in order to improve visibility of the icon.

After locating the magnifying glass icon and clicking it, a search box appears, which is very large and easy to read.

SW-search-popup

If the icon were more visible initially, the icon along with the popup would be a clear and easily understandable presentation of the search function.

Do navigation elements adequately persist beyond the home page?

The Southwest logo with link to home and the top navigation (including search icon) persist throughout the site. However, booking selections made from the top navigation will not return the user to the booking navigation located on the home page.

SW-home-top-nav-popup

Instead, users arrive at a completely different page with an older design style, rather than the style they became acquainted with on home page. The lack of design continuity may cause momentary confusion, or cause the user to question whether they are on the same site.

SW-redirects-oldhome

The footer present on the home page is not present on many pages of site, which contributes to a lack of unity and clear branding site wide. The majority of the pages on the site would not be harmed by the addition of consistent footer content.

A great example of consistent footer usage can be found on Alaska Airlines website:

screenshot-www.alaskaair.com 2016-07-04 02-13-13

 

Are breadcrumbs positioned and styles appropriately for clear navigation?

The home page has a different look and feel than most of the pages within the site. Most of the time, the only way to return home is by clicking the logo. For instance, take a look at this capture:

SW-booking

After navigating to this flight booking page from the home page, there appears to be no clear path backwards other than the logo or back button. The same format, without a clear return home, is repeated on the majority of the site’s pages. Granted, on booking pages it might be an intentional tactic to prevent backpedaling on the sale, but these pages are so different from the home page that it requires a bit of time to orient to a new set of navigation elements. Adding a clear link to the home page at the root of the breadcrumbs would remove any questions about how to return.

On the plus side, this page does provide very clear and appropriately placed breadcrumbs detailing the progression of how the booking process will continue from this page forward. This is also true of other booking pages across the site.

Does overall design support or detract from clarity of navigational elements?

Booking air travel, or any travel for that matter, can be an extremely complicated endeavor for a person planning a trip. There are great number of important details and moving parts that have to come together in order for travel to be successful all the way from planning to booking to returning home. The less the traveler has to check and double check on every detail, the more time they will have to enjoy the experience and the more they will appreciate any service provider they can trust with their travel arrangements.

The Southwest home page design is very different from all of the other site pages. While this is not uncommon, it may bring up questions for users, like whether they are still on the same site, or if they will find the same fares starting from the home page as they would starting from other pages on the site. They may even wonder if the company isn’t able to afford a full site redesign.

While using a similar format and organization on all pages of the Southwest website would be ideal, the addition of similar styling on at least the booking pages would create a more unified look and feel, as well as removing the need for users to start over with a new format.

A Better Example

A competitor, Alaska Airlines, has a unified look and feel throughout their website, using the same header, footer, and basic layout elements on all pages.

Navigating this site, it’s unlikely a user would have any worry over whether they had wandered away onto another website.

Recommendation Recap:

  • Re-positioning advertising for the “Fall Sale” would improve the visibility of both the top navigation and booking navigation.
  • The search icon and top navigation would be more visible with a larger font or darker header background.
  • Adding the label “Search” might also be warranted to improve the clarity and visibility of the search icon.
  • Adding a customer service link to the top navigation, or improving search function results, is important in order ensure that users are able to find this content with ease.
  • The style for all booking pages should use design elements and forms in common with the home page in order to avoid making users learn a new navigation if they backtrack, or select booking from the top navigation menu.
  • Making a return path to the home page clearer on all pages would improve clarity of navigation between pages and home.
  • Using a consistent footer design, as Alaska Airlines does, would improve navigation especially on pages that are not using the same design elements as the home page.
  • Ideally the entire site would express the same design and navigation style. At the very least, design elements from the home page should be echoed throughout the site to improve the look and feel as well as presenting a unified presence to foster consumer confidence.

Project: Analyze Ticketmaster.com for Usability

For this assignment, I chose to analyze Ticketmaster.com for usability. As you may guess from the name, or past experience, Ticketmaster is a major corporate seller of event tickets of all kinds, both online and some still over the phone.

Criteria

My criteria for analysis were influence greatly by Steve Krug’s “Don’t Make Me Think”1.

  • Effectiveness of visual hierarchy
  • Content organized by clearly defined area
  • Presence of distracting content
  • Content supports scanning
  • Omits Unnecessary words, redundancies

View Full Screen Capture with Author Notes

Is the visual hierarchy effective?

The logo in left corner and main navigation across the top is standard and approachable. There is also an easy- to-spot search box upper right corner, which makes it clear where to initiate a search and bypass content that is not of interest. The size of event dates in the ‘hot tickets’ section draws the eye and provides good scan-ability.

Unfortunately, barely a pixel from the main navigation are 3rd party advertising banners that are more prominent visually than items for sale on Ticketmaster… like tickets. If I was interested in charcoal and grilling this is not the place I would expect to see it. Injecting more space above and below the banner ad would make the top navigation and start of main content more clearly defined.

A “shop for events by date form” is below the initial view and looks no different than the many lists of links on the left. I didn’t notice it on my initial scan and may not have noticed it at all, if I wasn’t analyzing this page. If this is a search option that visitors use often, than it should be placed higher on the page to make it more visible, perhaps in the same location as the “happening soon” content block now resides.

A better example.

VividSeats uses better placement of its search box, as well as having more “breathing room” overall.

screenshot-www.vividseats.com 2016-06-26 20-00-06

Is the content broken up into clearly defined areas?

The way the content is broken up is generally effective, but some content is lost in the pile up.

Streamlining of redundant content, such as removing identical event lists that appear in multiple locations, would give highly sought after content more prominent placement. A simple change that could correct some of these redundancies would be creating a single event list as a fixed sidebar that appears to follow users while scrolling.

Simplifying content categories by type (e.g. Sports, Concerts, Theater) rather than tag line (“Hot Now”, “Right Now”, “Hot Today”), might also be a more effective way to organize the content and make it more accessible for users.

Are there distractions?

The main page is full of teasers, which although distracting, do entice clicking to view an event that a user may not know was happening. But a lot of the images are jammed up in a small area of the site, which, for some, may make it more difficult to scan and comprehend the different choices.

Too many options all in one location can be just as bad as not enough. Breaking up or rethinking the layout of highly graphic content to inject more “air” into the design would give customers a chance to breathe and make selections without getting distracted.

VividSeats (as seen above), doesn’t bombard the customer. Instead, the content is in a logical, clean layout that customers are able to navigate with fewer, but clearer choices.

Does the content support scanning?

For the most part, the page is built for scanning, but from a user standpoint, the amount of scanning necessary to reach a single goal seems excessive. As I’ve mentioned in other criteria, streamlining the content and taking a “less is more” approach would result in a cleaner layout, reduce distractions, and allow the user to reach the content they are most interested in viewing.

Are unnecessary words or content omitted? Are there redundancies?

The page is busy. Many of the content areas are redundant. (E.g. The same sport events are listed in the carousel, “Happening Soon”, “Hot Tickets”, “Hot Right Now” and under “Sports”.)

Adding prominently displayed buttons, or content blocks, dedicated to events/artists that fall into numerous categories (like the Seattle Mariners a.k.a. M’s), would clear up some of the clutter. The M’s are obviously a huge draw for customers, so make it easier for them to go right to the event info.

A better example.

Take a look at AEG Worldwide. This a great example of the type of suggestions I’ve made throughout my analysis. They have a streamline page with easy to understand graphical elements that draw attention and there  are no unnecessary lists or other content anywhere to be seen.

screenshot-www.aegworldwide.com 2016-06-26 19-11-55

AEG has created a page that invites entry into their webspace. You make an easy choice from the main categories and click. They don’t make you think.


1. Krug, S. (2014). Don’t Make Me Think Revisited. Pearson Education: U.S.A. (29).