Radial Menus

I love Radial menus. They're a great example of adapting a user interface around the limitations of the joypad.
You've more than likely come across them if you played any of a dozen relatively recent AAA titles, Mass Effect with it's radial pause menu, and of course its famous dialogue menu.

The recent shooter Brink, from developer Splash Damage has a particularly noteworthy implementation:

(Unfortunately I only have the PC version, so I can't speak with complete authority to the console versions, but I would be surprised if they differed significantly.)

If you look at the video of the menu in action you'll notice a few cool things going on.

Firstly, the world is blurred to draw attention to the menu and to minimise distractions (It also looks pretty).

Secondly, when the player highlights an option, the camera turns to focus at the real world location of the objective that option represents. It's a really nice subtle reinforcement of where the player needs to go, and so (hopefully) he or she will be less likely to get lost afterwards.

The icons are also quite clear and simple and easily identifiable and also come with a short text description of what the task entails. Unfortunately the text is sometimes too long to fit and so becomes a small scrolling textbox when highlighted. There is also an additional icon showing the reward for doing this mission.
All this can become too much noise on the screen (you can even see in the video that the bottom right option's description is overlapping the kill event notifications).

I have a few suggestions for how I might go about improving it if given the chance:

Integrate the Yin Yang reward icon and value with the menu option itself rather than have it floating above and separate. There's lots of empty space on each button, it could easily be done.

There's no difference between the icons for "capture the enemy health command post" and "capture the supply command post". Possibly a flag or symbol added to the icon that changes to indicate current ownership might be better than specifying "enemy" in text.
Also, I understand that they are "Command Posts", but surely the name can be shortened to "Health Post" or "Supply Post".

I'd consider moving the text description to inside the circle and only display the description of the currently highlighted option. This would mean that a player couldn't see every choice at a glance, they'd have to go through each option in turn (which would be bad) before deciding, but I think that the icons could be made more descriptive and do a better job than scrolling text boxes.
Of course this is the kind of thing you'd need to experiment with to see if it's actually possible, and no matter how good your icons eventually are at conveying the information required, it would mean a tougher difficulty curve (however slight).
However, I think you could get around that by displaying the text in a similar manner to how it is now for the first X minutes of play (whilst the player learns to associate icons with meaning), and then switch them off.
I'd be curious to know if that would work, or if it'd leave player's feeling like they've suddenly been thrown in the dark.

TV Remotes: Part 1

UI design isn't limited to the digital. Take a look at this poor excuse for button layout for a Hitachi TV.

The first thing you'll notice is the big giant "wheel" in the middle, which is how they've chosen to organise the standard channel up/down and volume +/- buttons. It's not really a wheel so much as it is a large 4 directional rocker.
Generally speaking I think you'll probably find that most TV remotes will have two separate vertical 2 way rocker buttons side by side, somewhere near the middle, for these functions.
  You could think of it as a little attempt at innovation, which is always a good thing, regardless as to how well it accomplishes it's goals, however, in this instance, I don't think it's necessarily done anything to improve upon more common designs.
  I don't think there's anything particular about volume controls that mean it's more intuitive to have it laid out horizontally and channel controls vertically. I actually suspect that since it goes against the grain you'd actually end up changing channels when you mean to up the volume a little bit.

I actually reckon there should be an established standard for this kind of thing. Channel Up/Down on the Left, Volume on the right. In the same way that any computer program should have next on the right and previous on the next (for the most part).

However, that's minor compared to this: The other, smaller wheel at the top, which is used for navigating the on screen display for the TV (switching input sources, changing display settings etc).
  To bring up the menu, you press the big button in the middle marked "M". Each setting screen has a "store" option at the bottom to save the options once you've changed them, so you have to select that and then press "OK" (just to the bottom left of the wheel at the top).
  This is the wrong way around! The OK button should be the the large one in the centre as it should be the most prominent. When you go to store your changed settings, the urge is to press the large button in the middle, but unfortunately it acts as a back button once you're within a menu, removing your changes once pressed.
  Being forced to repeat every menu change twice due to familiarity with the other remotes in your house can be frustrating to no end.

There'll be more TV remote evaluation to come!

Crimes against UI Design: Global Agenda

Sometimes games just don't seem to care when it comes to the UI. Take Global Agenda, for instance, an otherwise pretty decent mmo/rpg/tps/thing.

Lets start with the equipment screen, as it's generally one of the more used menus in the game - along the bottom you have a list of categories and item slots that belong to the currently selected category.

To the right you have a list of available items that can be equipped in the current slot.

For some reason, the developers have decided it's a good idea to only display item stats when the mouse cursor is hovering over the icon of an item. At the very least the tooltip could have been displayed when the cursor was over any part of the item's inventory listing and not just the icon.
But that's tackling the problem from the wrong angle, what would have been a much better solution would have been to display the important stats in the inventory listing, rather than the tooltip, so that you can quickly and easily compare the various items you have at your disposal.
I don't think "Generation 1" is particularly important information to know at-a-glance (and "Assault boosts" is just plain redundant information, since I know that I have selected the "Boost" item slot and that my character is an agent of the Assault class).

You'll notice a little spanner icon beneath some of the item slots, this is how modifications are applied. I had to seek help when I first wanted to install a weapon mod because I couldn't for the life of me figure out how to do it. Surely I should be able to click on a mod in my inventory and select "apply to slot x" from a drop down list or something similar? Nope, I must click this tiny little button, select "modify" (the other option being to repair a damaged item) and then find the item I want from a secondary inventory view.

Buying and selling in the NPC shops doesn't fare any better. Immediately you'll notice that there is a difference in how the items are displayed between your inventory and the shop's.

It's actually quite hard figuring out which items of yours you want to sell, given that you have to hover the cursor over the icons to see what it does. The only information you are given at-a-glance is the colour of the text, which indicates how rare the item is.

There is no value listed with an item in your inventory (even if you hover the cursor over the icon), you have to click the sell button to see how much you'll get for it.

A lot of the items you receive whilst playing the game have no function in and of themselves and are just building blocks for crafting items, unfortunately there's no way of telling if these components are something you want to keep when you're at this screen.
Though having said that I'm not sure if many games provide you that kind of information when you're at a shop about to sell them, so it might be asking a bit much - but it's definitely the kind of feature that should be considered when implementing a crafting system into a game.

The auction house is another example of just how little information the UI gives you.

When you first open it up you are presented with a blank screen. If you attempt to search for something, you are told to first select a category. Of course, that by itself isn't enough: you must select a category and then hit search to actually display anything at all.
Which seems backwards to me, the auction should by default display all things currently for sale (or at least the first page or so). The category listings on the left should then be used to filter the items on auction and then, if you so require it, you can use the search to narrow it down further - with or without a category selected, who's to say you know which category the item you have in mind belongs to?

It's also very unclear as to how bidding actually works - surely the developers have seen ebay? That's a great source of inspiration when looking to develop some kind of in-game auction system!

Like I said at the beginning of this post, the game itself is perfectly fine, it's just got a horrendous menu system that clearly wasn't given the attention it deserved during development.

Social Divergence

Twitter and Facebook are essentially very similar social networks these days. The only real thing separating them  is for which social groups they are used for.

So it is no surprise that their Android applications are close to identical in many respects. The desktop widgets are in fact identical, aside from a few aesthetic differences.

For both, each status update or tweet is sectioned off in it's own individual box. The profile pic for the original poster is in a column on the left with their name to the right along with the body of the post and any additional information, such as time it was posted and number of comments of likes (in the case of Facebook), at the bottom.

Now as you are probably already aware of it's very common for things like pictures, videos and URLs to be the main contents of a post, and it is in how they are treated that these respective apps differ.

Twitter treats it almost like you would expect a web page to work - tapping a person's name takes you to their profile, a URL to the respective web page (or application in the case of things like the Youtube app).


It also has a drop-down menu of sorts on the right that allows you to do standard Twitter actions such as @reply or retweet.

Facebook on the other hand, does something slightly differently. Instead of individual elements the whole box is one area that can be tapped on. A single tap takes you to the status update itself where you can comment on it if you want. A long press pops up a menu with a list of options related to the status update. For instance, any URL included in the message is given it's own selectable item in the menu.

This is much better than twitter's method, as the text is so small, my giant fingers often have difficulty tapping on URLs - especially if they're directly underneath the tweeter's username as that is also a link that takes you to their profile.

Unfortunately Facebook breaks it's own rules as any photos shared with the status update must be tapped directly if you want to look at them, and they're not included in the long press menu. So points will be deducted for breaking consistency here.

I think Facebook definitely have the right approach here - touch screens can't be designed expecting a high fidelity input. Large clickable areas should be the order of the day.

The Lobby Divide

I have a strange curiosity with a certain aspect of the Gears of War 2 menu system, which is this: it's split into two stages.
When you host or join a custom multiplayer game, you're taken to the first lobby screen (or "Multiplayer party lobby" as it's officially called), where the host can choose game mode (such as Horde or Wingman) and options (number of lives, game duration). When the host is satisfied and selects play, you're taken to the second screen (or "Pregame lobby") where the host can then choose the map (players can also select character and starting weapon at this point).

There's a 5-10 second loading screen between the two. Which is odd as I can't tell what it's loading, if indeed it's loading anything at all (the game itself loads in the background once the map has been picked and the game start countdown reaches 0). It can't be loading the map or characters as they're picked afterwards.
Friends can't join the game once you're in the "Pregame lobby" either, though most games allow joining in the middle so it's not a huge issue, just another strange quirk of the menu.

It seems to have been designed this way so that they could fit all the options on screen rather than splitting them off into a separate menu and displaying a simple summary instead in the lobby.

Ultimately I think this could easily have been refactored into a screen for the lobby and an options screen for the host to configure the game properties. Whilst this is still two screens, there would be no cumbersome loading screen separating the two (and you would be able to travel back and forth between them without having to incur the wrath of the loading screen multiple times either).

blur

blur has an attractive UI. It has one of those menus that can be rotated using the right analogue stick, which is a purely aesthetic effect, but you still go "ooooooooh" when it happens.

It also has a very slick transition from the loading screen to the start of the race, whereby the static screenshot on the loading screen expands to fill the whole screen whilst, at the same time, it seamlessly starts to play the intro sequence.

There's just one small issue I have with it. When you're waiting for the countdown to reach 0 and the next race to start loading, unless you've been playing the game for a while and have learned all the tracks by name, then the only clue as to what kind of track you'll be racing on was the brief moment of voting for the next one. There's no track preview to see the layout, until you get to the loading screen, by which point it's too late anyway if you want to change your vehicle.

It just seems strange to me that a game as well polished as blur would have such a glaring oversight in the multiplayer lobby.