March 17, 2003, 3:27 AM ET
A review of Web NCAA bracket interfaces
It's college basketball tournament time in America, and millions of sports fans are taking their best shot at predicting the winners.
I took some time to look at a few online bracket contests. Not that I'm a sports fan in any way; I was mostly interested in how various sports news sites presented a means for user-submitted brackets. Some highlights:
FOXSports.com
Method: JavaScript, via buttons. Users click the yellow button next to a team to designate it as a winner. All four regions (East, South, Midwest, West) are on the same page, in separate brackets.
Comments: The yellow buttons are a bit small (and thus difficult to click). Plus, they all look the same; it's easy to mistake one for another, especially in the crammed-for-space first round. And users without JavaScript cannot use it (and aren't even notified of their browser's shortcomings via a noscript message). Otherwise, it's nice and clean.
SI.com
Method: JavaScript, via links. Users click the team name itself (which is a blue, underlined link) to designate it as a winner. The four regions are split across several DHTML layers on the same page, accessed via a horizontal navbar.
Comments: Beautifully simple -- once I understood I was supposed to click the team names in order to choose them as winners. (This works against the Web convention that clicking on a link gives you more information about it.) Doesn't provide a way for non-JavaScript-enabled users to submit their picks, though.
Yahoo! Sports
Method: HTML drop-down select boxes. Users choose the team that sits in a particular slot on the bracket (a subtle difference from the previous two examples). The four regions are split across four pages.
Comments: A clear advantage here is users' ability to work backwards. (Some people like to fill out their brackets this way.) Plus, users with JavaScript disabled can still use it, and hitting the Back button after a submission won't erase all your picks. (JavaScript will.) The tradeoff: Selecting each pick via a drop-down box is significantly more laborious than the point-and-click of the previous two examples.
ESPN: Flash version
Method: Flash. Users can either click on a team to advance it, or drag a team as far as they think it should advance. The four regions appear on four different areas of the screen in the same Flash interface.
Comments: Beautifully done and a joy to use -- if you have Flash. The drag-a-team feature is brilliant; it meets the needs of backward-users and forward-users. The clicking of team names is straightforward and didn't make me double-take (as SI.com's blue underlined links did).
ESPN: HTML version
Method: HTML radio buttons. All four regions are on the same page; each round gets a separate page.
Comments: Those radio buttons are awfully hard to pinpoint with a mouse cursor. This'd be a good deal easier if the team names were marked up with the label tag, which extends the clickable area of the form element to include the text. But the usual advantages of standard Web forms apply: It works for all users, and the choices stick around after a click of the Back button.
Final comment: My own bracket
This weekend, I put together an interactive bracket selector, similar to the above brackets, for our KUSports.com 2003 NCAA Tournament Contest. It uses JavaScript with buttons, with a noscript message for users without JavaScript. The cool thing about it: Users get a customized PDF file of their bracket as soon as they submit it. (I used PHP's PDF libraries to do so.) As far as I can tell, we're the only site that offers this feature.
