To the left are the standings for the NHL’s Eastern Conference. The teams placing 1st through 8th are ordered by points and when the points are equal, tie-breaking rules are applied. I’ve highlighted the 1st place (Boston) and 8th place (Montreal) teams.
Why is playoff ranking important? It determines who has home ice advantage during the playoffs. During a best-of-seven series games are played as such: home-home-away-away-home-away-home. The team ranking higher plays 4 home games and 3 away games.
During the playoffs, it’s typical for a new interface to be used to display playoff matchups. For the 2009 Stanley Cup Playoffs, here is that UI, with the Eastern Conference selected (notice the word “EAST” in white).
Before we get started, sports fans will recall how games are listed in box scores. It’s always “away team – home team – eastern time zone time”. For example if Vancouver was playing at San Jose at 7pm PST, you would see a listing for “VAN-SJ, 10pm EST”. This is the same across all sports, not just hockey.
Now, notice the areas indicated in green and remember: Boston is the #1 team in the playoff seeding, and Montreal is #8.
“Well Boston is the home team for the first game, so I’ll put their icon second”, choosing to use box score game description to denote the brackets.
The problem is that when displaying playoff brackets you always display the higher-seeded team first from which any sports fan is able to instantly derive where the games are played / who has home ice advantage. Otherwise this picture is interpreted as “#1 Montreal versus #8 Boston”.
Yahoo! even confused itself. By the time the next person started working on the bottom of the UI, they must have understood playoff rankings and used the position of the bracket icons to draw the seeds – listing Montreal as #1 and Boston as #8 (3rd green box above the photographs). Oops!
There is no standard to be found for how to display playoff brackets, it’s a format that’s been around as long as I can remember – not in the rulebooks though. If you have a look at NHL.com or ESPN.com you’ll see what I mean. This is How It’s Done(tm).
This underscores the need for domain knowledge when working on a UI and beyond that, a basic level of understanding contemporary design patterns that you won’t find in books. I would characterize this as a very soft, advanced skill because unless you understand the basics you can find yourself “off the reservation” doing something that’s done on a couple of sites / applications / devices you personally prefer.