TJ Kelly

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.

UMass Athletics Website homepage

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.

UMass Athletics Website main page masthead flash.

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.

UMass Athletics Website main page navigation menu

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.

UMass Athletics Website main page secondary navigation menu

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

UMass Athletics Website main page

6 thoughts on “UMass Athletics Website Critique

  1. John Leonard

    When I first went to the webpage, what was in the middle in the black pixel nether-regions was a long flash video set to the Hoop Band recording of Fight Mass from the 1990’s. I’m assuming that nobody asked for permission, but I also assume it’s public domain.

    This flash video displays all the teams that won conference titles last year. Long transitions with confusing spiral dissolves. It has subtitles like “2008 All-Conference Champions” but leaves out subtle descriptors like “Baseball” so you know what sports team they’re showing you a picture of. You have to take in the entirety of the picture and the equipment they’re wearing, then read the text. By that time it’s already transitioned to the next picture.

    The irony in the too fast transitions is that they run out of teams to boast about before the song Fight Mass ends, and they have to fade the song out. I feel fairly confident that given a half hour and iMovie I could do a better job and time all the transitions to change with the music, and use the whole track.

    Oh UMass…..

    Reply
  2. Won

    I enjoyed reading this review! I must add: I don’t have some high resolution monitor, just the one that’s attached to my laptop, 1280×800. In the splash page, I spent too much time looking for what to do next, because of the fact that the buttons were placed on the bottom. I didn’t know I had to scroll down for a while! The actual website also seems incredibly busy…

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *