UMass Athletics Website Critique

The UMass Athletic Association just unveiled their new website. I’m not particularly impressed. I’ve listed a few constructive criticisms that I hope will help my alma mater when she decides to upgrade again.

Homepage: Unnecessary & Inaccessible

First things first: this website has a “front door” or a welcome-page as its homepage. Granted, this page probably won’t stay forever, but still, the front door page is 110% unnecessary. The point is simple, “We put a lot of time and money into redesigning our website. We want people to notice!” Ok, but don’t you think a completely different-looking website will be noticeable on its own? I understand the need for marketing announcements, but one would hope that your website would speak for itself.

A bit of source-sniffing tells me that there’s supposed to be some flash element in the middle of the page. But as of this writing, there are 475 vertical pixels of empty black space. Probably a simple error, but if this website is public, all errors are fair game.

(At this point, it’s important to state that no one is perfect. Ya know that old “glass houses” saying? Yea, I know, my websites (this one included) are not without flaws. I acknowledge that, but I still hope to offer some feedback and advice for others’ websites.)

The biggest problems with this page are the big, red “enter” buttons at the bottom of the page. At face value, they’re fine: clear, simple, effective. However, when viewing the page without any CSS styles (as a screen-reader and some older mobile browsers would), these buttons completely disappear. The links call a 1×1 spacer.gif image, stretch it to the height & width of the red button images, don’t use an alt tag (at all, not even alt=""), and pull the red buttons in with CSS. There is no text on the page saying anything about “enter here” or “click to continue” etc. This hides the links completely from screen readers and many mobile browsers. Users on these devices simply cannot access this website at all, ever.

Consider what this means for Google’s crawl of the site. The UMAA has destroyed their homepage SEO efforts. The only redeeming qualities of this page are (1) it looks cool, definitely a slick, modern design—for those who can access it—and (2) it provides the option to “permanently skip this page.”

Main Page: Flash, Tables, and Auto-Play

Ok, where to begin on the main page… let’s start with flash. The page’s masthead is almost one big flash movie. Any screen reader and many mobile browsers will skip over it entirely. It just doesn’t exist.

The non-flash parts are a promo image with no alt tag and a Yahoo! search form with no labels. That’s bad enough, but it gets worse—and we’re only in the masthead. The promo image on the right side of the masthead is displayed through the miracle of Javascript. The image source calls the same 1×1 spacer.gif image as on the front door page. And, after the page loads, the source is overwritten to call a random-number-image. So, with no Javascript functionality (like screen readers, many mobile browsers, and the Googlebot crawler), that image doesn’t exist either.

So far: not so good.

Navigation: Good and Bad

First, the good. With the main navigation menu, this website does some good work. The five main navigation items (“Men’s Sports,” “Women’s Sports,” etc.) are plain-text unordered lists, dressed up through CSS. This is good. From a usability perspective, five is the magic number. This is good.

The images are manipulated for the hover-state through CSS Sprites. This is good. Each of these five items has a Suckerfish-style drop-down menu, accomplished mostly with CSS. This is good. Remove styles (like many mobile devices do) and the navigation results in a multi-layered unordered list. This is good.

Now, the bad. The main navigation relies entirely on hover-states (that is, if you can’t hover over these items, you can’t access any sub-navigation). Clicking on these nav items does nothing. This completely eliminates anyone using an iPhone or any mobile browser that relies on touchscreen functionality (Palm Pre, Blackberry Storm, etc.), since these devices can’t “hover.”

The way around this is to either (a) trigger the same drop-down functionality on-click AND on-hover (since touchscreen browsers rely on clicks [or taps]) or (b) create separate pages for navigation menus, so that users can click on a main-nav item and see a page describing that section and its sub-sections & sub-navigation items.

From a usability perspective, I have mixed feelings about the main nav. It’s prominently displayed and clearly separated. Good. Its font is very small. Bad. The drop-downs are simple and effective. Good. The drop-down fonts are much too small. Bad.

Secondary Navigation: Mostly Good

The secondary navigation menu (“Watch,” “Listen,” “Live Stats,” etc.) is mostly good. Two of the items (“Watch” and “Photos”) rely on Javascript functionality to launch a popup window. Therefore, the content in these popup windows is hidden from the Googlebot crawler and many mobile browsers.

Beyond that, the “Watch” popup likely contains video elements, but I have no idea. It requires users to download and install Microsoft Silverlight. Good luck with that. The “Photos” popup contains several albums of photos, but they’re all contained in a flash movie. Hidden to many users and devices. Otherwise, this secondary nav menu is decent.

From a usability perspective, I don’t love the secondary nav. The words are too small and the icons don’t convey enough meaning. I find myself hovering over them just to investigate what they’re about. However, since the links don’t contain a title attribute, hovering doesn’t tell me anything either. An interface should provide feedback to its user. This section does not do that.

Layout, Bells & Whistles

The website uses tables for its layout, which is just stupid. I don’t like to be harsh or insulting, but this is a terrible, lazy, stupid decision. Tables haven’t been used for layout by any respectable, knowledgeable website for 5 or 6 years! You might as well have a welcome message written in yellow Comic Sans font that says “This website is best viewed using Netscape Navigator at 800×600.”

Beyond that, the “All Access” video player in the right column automatically starts playing when the main page is loaded. Usability 101: All movement and sound generated by the interface should be initiated by the user. Otherwise, users find these things startling and annoying. I doubt UMass Athletics listed “startling and annoying” among their desired redesign qualities.

Conclusions (Already?)

Yes, already. I can tell this website has some habits that will repeat all across the website. After perusing some of the inner-sections of the website, I’m confident in my assessment.

1. Relies too much on Javascript
   It’s fine to use Javascript, but don’t let your site become dependent on it. The progressive enhancement/graceful degradation idea comes to mind. This website needs better degradation for its “non-standard” users.
2. Too much flash content
   Flash is, well… flashy. It’s shiny and cool, but it’s not very useful. It’s an impractical method of delivering content. I can’t wait until people learn to look past its aesthetic appeal and “coolness” and start to understand its down-side.
3. Ignores the user
   This site has clearly illustrated that its priority is to sell advertisements to cash in on traffic. Its architects based a website on making money, instead of on its user. They maximized the ad dollars, but ignored the user experience.
4. It’s not UMass’ fault
   This website is part of CSTV which is part of CBS Sports. I’m sure UMass Athletics had very little involvement in its redesign. Because of that, it’s just another example of corporations treating websites like TV or magazines.

The web is inherently different than other media. Its so much more interactive that it breaks the old-media mold and forges its own category. This isn’t news anymore. But some people (and companies) refuse to catch up, and so they hold the web back from reaching its potential. This is a bad website but it’s the leading standard for corporate, media-related companies. And it’s a damn shame. I just wish UMass Athletics could have gone a different route and pioneered a new level of interactive college sports websites.

Full Screenshot