Tag Archives: ui design

Current Game/Tournament Tabs

Beta Phase 21 is still a ways away, so don’t get your hopes up. But I wanted to share one change I made tonight since it’s on the top of my mind now.

Under the multi-player tab, there are these two pesky tabs named “Current Game” and “Current Tournament”. I’ve never been happy with them.

Current Tabs

There are several things I don’t like about them:

1. They don’t show up until you first visit a game or tournament. Typically tabs don’t dynamically appear, so this is probably a bit jarring when it’s noticed. (Although I bet most people don’t notice.)

2. Their names are not descriptive. Sure, Current Game makes sense when you’re looking at a game and you see the tab is highlighted. But when you’re on a different tab, seeing a tab named Current Game doesn’t make any sense. Long-time players will remember that this tab used to be called “Last Game”. This has the opposite problem – it makes sense to go to the last game you played, but if you’re looking at a game, why is Last Game highlighted? At one point I considered dynamically renaming it, but I decided against it in fear it would be even more jarring.

3. All of these tabs take up extra horizontal space. With both Current tabs, the Sound link, and the Design Maps tab (which only shows up if you’re a WarLight map creator), you need a browser 1144 pixels wide to see everything! This provides a poor experience for those in low resolutions. It’s important to remember that 1024×768 is still a very popular resolution. But it’s not really as bleak as it sounds, since most players won’t have the Design Maps tab or be in tournaments.

The horizontal space issue is fine as long as I don’t need to add a new tab here. But a feature I’m working on for Phase 21 calls for a new tab. Uh oh. Adding more would make it far too wide. Something’s got to go.

I thought a lot about how I could save space here. I could move Create Game to be a button instead of a tab (that would make it more in-line with tournaments, which is a plus). I could move Design Maps somewhere else (it doesn’t really make sense to be under multi-player anyway). I could abbreviate “Tournaments” (why must that word be so long?). I could squish everything together. All of these solutions have their own unique problems.

But ultimately I just kept coming back to the “Current” tabs – they’re taking up almost 40% of the space on that tab bar, and I’ve never been happy with them for the reasons cited above.

I thought about getting rid of them completely since they’re not strictly necessary to play. However, they are useful in a few situations. The time I use them the most often is when checking out a bunch of games in a tournament. The “Current Tournament” makes it easy to switch back and forth.

So maybe keep “Current Tournament” but ditch “Current Game”? It’s not as needed, but I still fear is that people have grown accustomed to using Current Game. I know I have. As a species, we suck at changing our habits, so I’d like to keep both if possible.

In the end I decided to move these out and make them buttons instead of tabs:

Making them buttons instead of tabs may not seem like a profound change, but it actually has subtle advantages. These buttons can be hidden when their click would not make sense – both before you visit a game/tournament, or when you’re already looking at a game/tournament. Hiding tabs wouldn’t really work out since shifting all of the tabs around would be too jarring.

Further, since they can be hidden instead of “activating” when visiting a game/tournament, their text doesn’t suffer from issue #2 described above. This will make it clearer to new players exactly what this does, and how to use it.

Best of all, it frees up valuable space under the multi-player tab. Yes, this does create an even worse horizontal space issue on the top tab bar. However, that’s not nearly as bad in this case, since neither of these buttons are strictly needed to play the game. If we have to push something off, it’s much better to push off “Recall Last Tournament” than “Create Game” since the latter gets used far more often. Even in 1024×768, you can still see the “Recall Last Tournament” button enough to click on it. You may not be able to read the words, but it’s still functional and you can still tell what it does by reading the tooltip text.

While it’s not perfect, I’m happy with the change.