Bracketology (or the Study of Brackets)

This is the second article in a series on usability. Read the first article.

It was inevitable – my bracket has been decimated. But managing brackets in four different applications, I’ve learned that not only do I have no knowledge of college basketball, but also how to take Bracketology to a whole new level.

An NCAA tournament bracket needs tells you a lot in just a little bit of space. It needs to convey information about teams, regions, game details, and other news. And it needs to do it 64 times (65 if you count the play-in game).

So let’s set our monitors to 1024×768, and see how the final four perform.

CBS Sportsline

CBS tries to fit your whole bracket into one screen – and comes close, but doesn’t succeed. But in trying to put all that information in a tight space, a lot is lost in quality. The fonts look smushed – just look at the “I” in Michigan state:

What’s that little note next to each team? It’s a neat overlay full of information. But it doesn’t work quite right in Firefox. It does give me a lot of information – CBS’s analysis of the game, team statistics, and the percentage for the Team Outlook. I’m sure that would be a fascinating statistic, if only I knew what it was.

Here are some other things I expected to see, but didn’t:

• The scores of the games already played
• Seed information that follows the team throughout the bracket (I had to look back to the first round to recall Michigan State’s seed)
• Better use of font contrast and colors

Yahoo

Yahoo gives me a choice of viewing my brackets by region, or by the full bracket. So when my eyes are tired, I can really zoom in and look at one region at a time. Or, when I want to get the big picture and full bracket, I can, and in full at the 1024×768 view.

The only thing I don’t like about Yahoo is that news and information about teams is very limited. The only way to get information about a particular team is to go back to the first round and click on that team’s name.

Otherwise, Yahoo gives a very solid performance.

Facebook

I was curious how Facebook would fit a bracket in the smalls pace allotted. The solution was a little surprising. Developers completely diverged from the traditional bracket structure, and stacked the regions.

I could never tell what region I was looking at. And there was no easy way to jump from region to region, or even a line to delineate when you left a particular region.

I had expected that if I clicked on a team in my bracket, I’d get news on that team. Instead, I’m actually asked to join the Fan group for each team.

ESPN

In this round, ESPN is the big winner. The bracket falls a bit below the fold. But that’s okay. By not squishing everything above the fold, the result is a pleasant-looking, easy-to-read bracket. It’s even easy to see the dates of all the games. The use of mascots in just the big games makes for a fun and appealing look. The only thing that is lacking is individual team information.

So what lessons have we learned in Bracketology class today:

• Represent your information in multiple ways. Let the users decide which way they are more comfortable with.
• Don’t fear the the scroll bar. It’s not worth sacrificing quality in order to squish everything up above the fold.
• Don’t mess with convention. You shouldn’t change a standard just so it fits into your own space.