I’ve got a little site I built for myself and a friend that let’s us run our tiny little March Madness pool. Functionally, it works great. But for the display of the brackets, it’s, well, just plain ugly.
Quick NCAA Bracket Explanation in case anyone doesn’t know. There need to be 64 total teams on the outside, divided into 4 quadrants. Inside each quadrant there are 4 more levels of games (16 teams down to 8, to 4, to 2, to 1). After that the winners of the 4 brackets each play 1 other, then those winners play each other
Each team is “clickable”, and for me, each little colored square has to be in its own selectable elements based on id. Currently it’s a table design (boo!), and, as you can see, so ugly.
Any ideas for making this look a little nicer? The rest of the site is ultra plain (I call it clean) with gray/black/white, but I could change this easily.
Couple of possible suggestions:
-Could you allow users to scale it up or down so they’re viewing only a single round (or a couple of rounds, or half the teams, etc.)? It’s a little easier to scroll up and down in a browser than it is to scroll left-right, so if you had to scroll down a little most users would probably not have a problem with this.
-Grey out defeated teams / levels (so that only currently active teams have colors)
-Use something like a border around each pair so it’s easier to see who’s playing who (this would be more useful at the beginning since there are so many more choices to start)
Could you use s instead of table elements? This way you could simply change the div id of individual team(s) to things like active, inactive (defeated), currently playing, etc. That shouldn’t interfere with the clickability (is that a word?) of each element yet allow you more control over the shape, size and outline of each block element.
Also, what do each of the colors mean? Are they an NCAA division, “owned” by a certain individual, etc? If it’s something standard (like geographical or NCAA division) I’m assuming the users will all understand it, but if it’s just done to try and visually separate the various teams you might be better off creating a physical border.