I’d like to take a look at some UI from a few browser based massively multiplayer online strategy games and see if we can learn anything. In general, all of these games need their top UI to communicate the same information to the player: how many of each resource the player has and the links to the main pages of the game – these generally include a “city view”, a map or world view, a page for in-game messages, and a few more depending on the game.
Each of these images are screen captures from the top of the browser to the bottom of the maing navigation bar. The first image is actual size, the other three are at 70%.
Travian
Imperia
Kings Age
Ikariam
Which of these examples is the best? Which is the worst? Which game looks the most fun?
The Travian UI is very simplistic. The graphics play a very small roll, but the game communicates the necessary information, and only the necessary information, very clearly. The large circular buttons are easy to find and have a bright roll-over effect.
Imperia has some very unfortunate UI. The actual information is very small and hard to make out from the background image. What boggles my mind, is that they have plenty of room to make the icons 4x bigger, but apparently feel that tiled brick pattern is more important.
Kings Age is attempting to communicate a lot of information. They half-fall into the same trap as Imperia, dedicating nigh on half their nav bar to the giant “KingsAge” crest a some clouds. They also have the difficulty of having to convey a load of information / links, but they make everything the same size. Because nothing really stands out, everything visually blends together into a messy table.
Ikariam faces the same problem as Kings Age, having a lot of information to get across, but is far more successful. The white links across the top are hardly used during gameplay, and are rightly smaller and out of the way. The core information – the resources and different views (world, island, town, and the advisors) – is quite prominent. The advisors themselves are a brilliant addition, making the game very friendly to its “casual gamer” audience. Ikariam also makes use of changes to the same space. i.e. the numbers next to the amount of resources change color based on how close to capacity they are, which saves them from having to print the actual number. The advisors also turn gold when a plus account is active, again communicating more information without taking up more screen space.
Overall I feel the Travian and Ikariam UI’s are very successful. Travian’s is definitely cleaner, but Ikariam does a great job with the amount of information they have to get across. It’s no wonder that those two are the more successful games, but it is perplexing why Imperia and Kings Age haven’t learned from their competition.
Cheers,
Oliver