This is the third entry in my series of reviews of websites and programs that have to display a large amount of data to the user. By examining what sites do right and wrong, I can come up with good idea for how to make the data display better for the profiler that I’m working on. My two previous entries covered the Social Security Administration’s Index of Popular Baby Names and the Football Outsiders web site. In the spirit of March Madness, todays entry will be looking at the pros and cons of ESPN’s NCAA Tournament Challenge website.
During the NCAA tournament, ESPN provides a free bracket service to anyone who signs up on the site. Each year the site hosts millions of user’s brackets for the length of the tournament. As any sports fan (or compulsive gambler) can tell you, the numbers is part of what makes the NCAA tournament such fun. So how good of a job does ESPN do at providing a clean, quality interface and access to deep statistics? To answer this question, I’ll be looking at several important categories for a good data display UI design.
Interesting Information (Data):
There are two main sections that the common user uses to follow along with the NCAA tournament. The first section is the display of their bracket, pictured below. The applet is what you use to keep tabs on all your picks throughout the tournament. It uses a simple scheme of crossing out incorrect picks, while highlighting correct picks in bold green. Also, picks that cannot be correct (due to earlier losses) are in light gray. So you can see from my bracket quickly and easily just how much UConn not making it into the Sweet Sixteen hurts. In the top right of the bracket, you can get the info about the current amount of points you have, as well as some other interesting stats, such as how well you are doing vs. the entire nation, and how many possible point you have remaining to get. The possible points remaining is a very useful stat, you can correctly pick every team but one in the first round, but if that incorrect pick was your pick for national champ, then your possible points remaining will take a big hit. The bracket page provides all the major bracket info you need, as well as some interesting info as to the relative strength of your bracket.
The second main section is the scoreboard section. This section shows the scores of all the games being played on a specific date. For the games in progress it updates the scores in close to real-time, and lists how the most recent points were scored. While the visual design of this page can use some major work, it does provide the very basics that you need to follow the tournament. It would be very nice if they could put the game flow graphs used elsewhere (see picture below) on this page so that you can track the runs that teams make during a game. The game flow charts are smart little graphs that chart the scores of the two teams during the game, so you can see what team is making a run or continuing to fall behind. Also, providing some mechanism to access more info without leaving the page (perhaps mousing over a specific game) would be a nice addition.
Accessing Information (Functionality):
Here is where the NCAA tournament challenge website starts to run into some major issues. First off, the bracket page and the scores page need to get some better degree of interaction with each other. Why not have continually updating scores on the bracket page itself? In fact, the bracket page is often not updated until the end of a full day of play, greatly reducing its value to the user. Also, to actually get to your bracket, you have to dig through too many layers of menus from the ESPN.com homepage. ESPN should recognize what the fans want and give them a link straight to their bracket from the home page.
In regards to the scores page (shown below), it needs more information on the current events in the game. Instead of just posing the last score, post the last five major events to happen in each game. With a little better layout there would be more then enough room to add the five latest events. There are game by game update pages, but I see no reason why the main scoreboard page can’t be improved so that you can monitor several games from one window. As mentioned above, it would be nice to have some richer statistics available without having to open a new window for just one particular game.
Look and Feel (Sex Appeal):
The bracket page is a quality example of design for a web-based bracket. It is well proportioned, with almost all the space in it dedicated to user data. The color coding system works well and lets you sum up an entire tournament in a glance. My only major concern with this page is the useless text in the middle top of the page. The options surfaced here (such as the link to the bulletin board) would be better placed in a menu or a sidebar of some sort.
The scoreboard page, on the other hand, could use a large amount of graphical revamping. The overly cute “hardwood” graphics on the right side of the screen eat up tons of valuable real estate. Also, there is far too much clutter at the top of the page, which you must glance over before you get to the actual scores. I understand that advertising is needed in a site like this, but it should be placed in sidebars or at the bottom of the page. Perhaps a good redesign would replace the “hardwood” graphic on the right side with an ad bar, and move the scores up to the top of the page. This would also free more room for the individual game boxes to provide more data on current game events.
Summary (The Lowdown):
In summary, the NCAA bracket tools provided by ESPN are decent examples of data displaying websites. However, some layout blunders and lack of functionality keep them from being really laudable examples to use. Also, they need to provide access to deeper information, without making you open any new pages.
Later this week I’ll be back with the next walkthrough on analyzing a performance report in the IDE.