Skip to content

Analysis of the Design of the US Masters Swimming Website

September 19, 2011

US Masters Swimming is a large umbrella organization of swim clubs for adults of all abilities who swim for fitness and competition. Here’s a look at their website:

An idea:
At first glance, the site doesn’t have a single main idea, but rather a lot of different ideas mashed together into a confusing mess of information. The user is bombarded with sponsor ads, mismatched social media buttons, events, news and features. Other than the featured video, no single element is emphasized.

Typography:
The site sticks with san serif fonts throughout, using heavier weight typefaces when necessary.

Colors:
Like many American sports organizations, the main colors for U.S. Masters Swimming is red, white, and blue. Their use of these colors is fairly consistent, with the exception of an occasional use of a lighter shade blue. Also, the visited links appear as the browser default of purple, which clashes with the site’s color theme:

Negative space:
The website has an unbalanced use of negative space. A lot of content is pushed to the left side of the browser, leaving all the negative space on the right side. In addition to this the use of the large block of saturated blue on the right side can feel a little too potent. I would suggest centering the main column of the site and doing away with the big block of blue and instead use white. The website for The New York City Marathon is a good example of this style. The boxes around each section also tend to constrict the negative space, making the website feel cramped and not clean and open.

Communication with clear messages and word choices:
There’s a lot of information on the main page of U.S. Masters Swimming but it doesn’t clearly communicate what USMS is. I would suggest a tag line near the logo which succinctly states the purpose of USMS. Additionally, the tabs beneath the logo aren’t clear. What’s the difference between the tabs “Health & Fitness” and “Training” for instance?

Information hierarchy:
The tabs beneath the logo establish a hierarchy. The first box in the left rail lists the topics deeper within those topics. While some sections are unclear (as noted above), the site sticks to a strong hierarchical navigation scheme, making it easy for the user to find their way around the site.

Text justification:
The site mixes left and centered justification of text. While centered text can many times act as a heading, in the case of the USMS website, it does not. Most of the text is left justified, with the exception of events and the links to the USMS store. Oddly enough, the headers for those sections are left justified.

Grid:
The site’s grid is sloppy. Particularly offensive is the header, which includes the logo, the links in the upper right and the main topic tabs. Simply fixing this so that it’s more balanced and within the main column would make a huge improvement. Beneath the header is a long bar across the page with a search box on the left and text size buttons on the right. I would get rid of this bar, moving the search box into the header, above the tabs and doing away completely with the text size controller.

Interface:
The interface of the site is fairly intuitive because of its strong hierarchical layout. The tabs have rollover menus for subtopics, making it easy to navigate.

Advertisements
No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: