Monday, 20 December 2010

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.

Thursday, 9 September 2010

Improvements in Chromium Metallurgy

It's been a week or so now since Google released version 6 of Chrome and so I thought it would be a good time to take note of the improvements they've made to the UI.

I actually find it tantamount to genius that they have been able to yet further minimise the already minimal interface further - they have removed the "go" button (which was always pointless - for any browser, as they all seemed to have them at one point or another - once finished typing an address, people press enter, they don't switch to the mouse to press a gui button).
That leaves the stop button, which they have moved to the left of the address bar and integrated with the reload button. This comes as a welcome change to me, as all other browsers that I've known have had the stop button on the left and for some reason I've not been able to adjust to Chome's original placement of the control.

They've also combined the two different drop down menus that used to be to the right of the address bar into a single menu. I always found the separation of the options to be rather arbitrary and always ended searching the wrong menu anyway for the option I wanted, so again, points to the developers for recognising that.

The the bookmark star has moved to the other side of the address bar which I didn't understand at first until I remembered that due to it's previous proximity to the home button I was constantly creating bookmarks to pages I didn't want. I guess they suffered from the same problem.

The other changes are just subtle tweaks to the look and feel that they claim "make it easier on the eyes", but seeing as I don't think it was ever particularly hard on the eyes in the first place, it's a strange way of mentioning that you've updated the look slightly to make it feel fresh and new again (any product or company that has had a life span of longer than a few months is guilty of this - just take a look at this to see what  mean).

So this all goes to show that there is always room for improvement if you know where to look.

Wednesday, 25 August 2010

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.

Wednesday, 11 August 2010

GUI Toolkits and the art of Documentation

For an API designed to empower you with the ability to create graphical interfaces for your applications, the documentation for wxWidgets is really lacking when it comes to graphical aids.

For the most part, the reference documentation for wxWidgets is complete, only the newer/lesser used/incomplete features lack documentation. It's also got pretty good descriptions on how you're meant to use certain classes.

However, it seems straightforward to me, that when creating something visual from pre-defined building blocks, it would be helpful to have an example of what those building blocks might look like. For instance, take a look at the following items:

When reading the documentation, it's not hard to figure out what a "notebook" probably is (though of course, until you actually use it, or see it in action it's not for definite). A "toolbook" though? Not sure what that is, apparently it uses a toolbar instead of tabs. How does that work? Thankfully there's a sample in the SDK which demos all of the various "book" widgets. At which point it becomes obvious what a "toolbook" is and you start kicking yourself for not realising from the off. Though you wouldn't have had this confusion in the first place if the documentation had some pictures or diagrams to show you exactly what it is.

Though in that instance we were able to rely on the presence of a sample to inform us that's not necessarily always the case. But in either case, it would be nice not to have to compile some source code in order to know what a certain widget looks like.

It's not as though this problem is limited to wxWidgets either. Here's the official MSDN documentation for a couple of widgets:
They've gone to great lengths to describe how these two similarly named but very different widgets look and operate and yet there is not one image to assist the description. A picture is worth a thousand words became a cliché for good reason, don't forget. Juce also does exactly the same thing. Perhaps it's unfair to judge their documentation when a lot of it is actually generated from the source code - but there's no reason why they couldn't have a separate page with a bunch of reference screenshots (which they could then link to from the main docs).

Is it just me that finds this to be an incredibly obvious oversight?

Thursday, 5 August 2010

CrunchGear: Reports Of The Mouse’s Death Have Been Greatly Exaggerated

An Excellent article on the supposed "End of the mouse": Reports Of The Mouse’s Death Have Been Greatly Exaggerated - an article with which I share quite a few of the sentiments.

Wednesday, 4 August 2010

Relatively directional

Take a look at the video of Dragon Age on the left. More specifically take a look at the Mini-map in the top right hand corner when the camera pans around a character (this happens most after the 45 second mark).

You'll notice that the highlighted field of view changes to reflect where the camera is pointing, but the map itself stays fixed with up as north.

Now take a look at this video of Grand Theft Auto 4 on the right. You'll notice there is no marker indicating where the camera is currently facing, but instead the map itself rotates so that up is forward.

This difference in UI functionality is probably more down to the fact that Dragon Age was developed primarily as a PC game (as opposed to say, Mass Effect) and as such has quite a few similarities with the real time strategy genre (you'll notice in the video above - if you watch it all the way through - that the player pauses to order his troops around the battlefield).

Usually in an RTS game, the mini-map will display up as north, and overlay a marker with the camera's orientation and position.

In the version of the game for 360, the game has been retrofitted to work on a control pad, and for the most part it works fine, but this change means it's closer again to Mass Effect than your typical RTS, played predominately from the 3rd person perspective of your character.
What this means for the mini-map at least is that you'll look on the map for the exit to the room you're currently occupying, see that it is on your left and then get momentarily stumped by the lack of door in the west wall. You then of course realise that it wasn't left but east.

You'll notice for instance, that any good SatNav will display driving instructions in a manner relative to the driver - before Google Navigation, I was stuck with Google Maps, which is a great program, but as the name would imply it is as useful as giving a driver an A-Z with a route drawn out on it's pages. Driving south for instance means that a turn to the west is actually to the right, which is (generally speaking) the opposite of what you expect, convention placing the west to the left.

So, in summary, relativity is king.

Friday, 30 July 2010

Zoom and the RTS

Source: Wikipedia
With everyone talking about Starcraft 2, I thought I'd take the opportunity to mention a feature I've only seen a very small number of real time strategy games: Zoom.

I'm talking about the kind of zoom that allows you to start in the thick of the action, camera on the ground, and with a scroll of the mouse wheel you're transported up an away until you can see the entire map at once.

Then, with a second spin of the mouse wheel, you're sent to a different part of the battlefield, giving orders to your support troops or a secondary base.

In fact, this method of navigating the map becomes second nature incredibly quickly, that the more traditional methods of moving the camera about the place (scrolling when the cursor reaches the edge of the map, arrow keys, bookmark hotkeys) are quickly forgotten.

Yet, despite this, most RTS games still conform to the old methods, a mini-map in the corner, a camera that's relatively fixed in position, the only zoom available being one that lowers the camera slightly and alters the angle.
Supreme commander, in an act of brazen showing off, allows you to turn on a mini-map (which is disabled by default) which is actually a second view port identical to the main one you play the game through, so if you want you can even zoom in to ground level with the mini-map. Of course, this kind of functionality isn't without performance costs, which is why it's disabled by default. A mini-map is also relatively superfluous when you're used to zooming out to see what's going on at a global scale.

I sincerely hope that this becomes a standard "can not do without" feature for RTS games, as I find trying to do without in a game of Company of Heroes (which is a very good game) exacerbating at times - so cut off, do I feel, from the big picture, without my zoom.

Thursday, 29 July 2010

Jucey

I discovered Juce via the rather handy list on Wikipedia. It's actually really easy to get started with and provides lots of documentation for the burgeoning front end developer. And like any decent GUI toolkit it's cross compatible on Windows, Linux and Mac (and even iPhone).

And that's why I'm talking about it today. Where most GUI toolkits seek to wrap the native functionality of the platform or at least emulate it in some way, Juce has it's own look and feel (which is actually quite similar to OS X) which it maintains across all platforms.

This has the end result that (for the most part at least) an application developed with Juce will look the same no matter if it was run on Windows or Linux or OS X. This also means it won't blend in with your standard window decorations.

I'm in 2 minds about whether this is a good idea or not. On the one hand, variety is what keeps things new and interesting, and if you can pull it off well, like Google Chrome or Steam, you can get away with it. There's also the idea that if you have to use the program in an unfamiliar OS you won't succumb to culture shock doing so.

But on the other hand, consistency (across your platform of choice) with window decorations makes new programs easier to figure out and understand, and can also make them feel a lot more polished and professional. I've downloaded many applications from Sourceforge that are perfectly good at what they do, but because they've used a GUI toolkit that draws the widgets differently from the native application, it can stick out like a sore thumb. Take BoncEnc - it's a fantastic program that I use to rip my CDs for playing on my MP3 player, but it doesn't invoke confidence to look at. The strangely thin menu buttons (and drop down items), and the title bar with it's minutiae minimise/maximise/close buttons - it just feels so out of date.

Another thing that Juce does is adopt the OS X traffic light system for the close/minimise/maximise buttons. Unfortunately (in Windows at least, and probably Linux too) to stay consistent with the standard order of these buttons the colour order is amber->green->red. Also, in my personal opinion, I don't really consider "maximise window" to be the opposite of "close window". For me, it would be "Run", but that's not really applicable in this context. In the standard Windows XP theme, the close button is indeed red, but the other two are just blue, the same as the rest of the window decorations.

Sunday, 25 July 2010

Rock Band 2 vs Guitar Hero 4

For the most part I consider Rock Band to be the superior franchise. This is clearly evidenced by the sheer number of hours my friends and I have logged playing Rock Band over Guitar Hero. I think there are several reasons for this, the most obvious being the hugantic™ amount of tracks available to buy on the Rock Band store (A large proportion of which we have in fact purchased).

But the other reasons are a lot more subtle. Take a look at these two screenshots, on the left, Rock Band, and on the right, Guitar Hero:

In Rock Band, you'll notice at the bottom of each player's respective highway is that player's current score multiplier and the overdrive power bar. This is even true of the singer whose highway is at the top of the screen - you'll notice the score multiplier disc is in line with the target line, which is the place on the screen where each player's eyesight will be focused for the majority of the song.

By comparison, the Guitar Hero score multiplier is displayed up and to the side of each highway, which, whilst not a particularly large distance, is still enough that you're not really looking at the target line any more. The star power metre (the Guitar Hero equivalent to Rock Band's "Overdrive") is well out of the way in the top left corner. Of course, Guitar Hero's star power is combined for all players, which explains why it's as it is, but I think there's an argument for duplicating the information on each of the three highways so that player's don't have to look away from the target line to know how they're doing in that regard.

Rock band also has the "crowd metre" on the left, which shows the players how well they're performing or how close they are to failing a song. All player's are presented on a vertical bar as simple, clear icons which are easy to separate. Guitar Hero has combined this aspect of the HUD with the star power metre. You've got glowing yellow icons for each of the players on 4 separate power bars which has the end result of creating a very murky looking interface item that takes more than a brief moment to see how well you're doing.
I think the fact that each player has their own bar means that, if you think about it, a player has to find their icon amongst the 4, and then look at the bar above (which is 2 steps). Whereas in Rock Band, once a player has found their icon, they know how well they're doing as it's the icon itself that moves, and the bar is very clearly visible in the periphery.
It may sound a bit pedantic, but I think this kind of game bears a lot of similarities to driving a car - you must minimise the amount of time you take your eyes off the road. That's one of the reasons road signs are designed to be as simple (and non-distracting) as possible (the other of course being that if it's a long or complicated message on a sign you'll have driven past it before finishing reading it).

There are a few things though, that Guitar Hero does right, and they're so obvious as well, that I can't imagine why they're not present in Rock Band:

Singers are presented with a choice of scrolling text, where the text is constantly scrolling on screen from the right in a similar fashion to the other instruments, or paged text, meaning the text is static on screen, and the whole line changes at once (to a new "page") when the marker reaches the end. Rock Band only has scrolling text.

The other is a simple countdown from the pause menu. Rock Band simply throws you back into the action, usually meaning you'll miss the first few beats or notes as you get back into it, but Guitar Hero gives you a fighting chance by giving you a 3-2-1 at the same tempo as the song no less!

There is a lot of polish to be found in the little things - of any game - that I think can be what separates the good from the great.

Friday, 23 July 2010

Search

These days it seems that more and more interfaces are emphasising the use of search over more traditional methods of navigating applications.

Microsoft have replaced the Windows start bar with a search field, Apple have a context sensitive system wide search called "Spotlight" in OS X, my android phone even has a dedicated hardware search button.

Google of course are the reigning champions of things search. Take Chrome for instance, It's almost insidious in how it's changed how I browse the web, so used am I to just partially typing an address or search term into it's all knowing all powerful "Omnibox" and expecting it to pick up on exactly what I want, that when I have to resort to using another browser such as Firefox - which I used for years without complaint, I might add - I end up typing searches into the address bar (instead of it's separate search bar) and wondering why it's not working.

This shift in the paradigm of how we use computers is one I wholly support. How many minutes have you wasted searching each of the drop down boxes in a program like Word, looking for a specific feature?

For where games are concerned, I feel it's imperative to integrate a decent search feature into the tool chain, including (but not limited to) things like the world builder and string and asset libraries.

For games themselves, it's a slightly different matter, for big MMOs like World of Warcraft or Eve Online which have huge numbers of craftable items, enemies, locations and of course players, you obviously need a way to sift through it all to find what you're looking for.

For your regular triple A first person shooter, a search function is probably not going to help the game itself, but if you've got more than a dozen preferences in the options menu it could be a benefit. How about a console command search feature for first person shooters from the likes of Valve software and id?

Obviously a text based search is pretty pointless on consoles, which don't really support keyboards as standard. On consoles, simplicity is king, as you have a limited number of controls in which to grant the player access to your world.

For the most part though, Search is becoming more and more predominant in user interfaces and with good reason.

Monday, 19 July 2010

Customising the Visual studio debugger

If you delve deep into the bowels of your install of visual studio you might come across autoexp.dat. "What does this file do?" you might ask. Well, you're in luck.

The default behaviour of the windows that display the contents of your variables (autos/locals/watch) in visual studio is, if it's a basic type, such as an int or a float, to display it as is.
If it's a struct or a class, then allow the user to navigate it's structure revealing all variables contained within.

The autoexp.dat file allows for the customisation of this process (and if you look in the file you'll notice Microsoft has already pre-populated it with lots of entries, predominantly for things in the c++ standard library).

Why would you want to customise something if the default behaviour is perfectly acceptable?
Well, here's an example. Say you've got a 3D Maths Vector class which contains 3 floats: X, Y and Z. It's also got all the usual functions you need for doing all the various things you might with a vector, such as dot and cross products etc.
You might then think of a great idea to include some common vectors as static const members to the class. These could include a definition for "UP" where you have Y=1, or another could simply be "ZERO" for when you want a comparison but don't want the overhead [or hassle] of creating a new instance.

It's a good plan, but has the unfortunate side effect of bloating the debugger display to showing you all of your constants every time you expand a vector variable.

In steps autoexp.dat, and here's a simple example of how to write a definition:

;-----------------------------------------------------------
; Vector3d
;-----------------------------------------------------------
Vector3d{
  preview
  (
    #(
      "[",
      $e.x,
      ",",
      $e.y,
      ",",
      $e.z,
      "]"
    )
  )
  children
  (  
    #(
      X                 : $e.x,
      Y                 : $e.y,
      Z                 : $e.z,
      [actual members]  : [$e,!]
    )
  )
}

First things first, any line that begins with a ";" is treated as a comment and ignored.

Next you have the name of the type you wish to define. In this case it's my 3d vector class. This also supports templates, so "SomeType<*>" is perfectly acceptable, as is template specialisation, e.g. "SomeType".

You'll notice the opening brace "{" is immediately after the type rather than on it's own line. This is because the parser is very unstable and prone to breaking easily. If there is any space between the type and the brace, it just doesn't work.

Next you have your categories. In the example I've given there's "preview" and "children", but there's also "stringview" available, should you require it.

Preview defines what is displayed in the value box for the main type. In this case it will be "[X,Y,Z]" where X, Y and Z are floating point numbers. $e means display in scientific notation should the number be large or small enough to warrant. If you take a look at the top of the autoexp.dat file, you will notice that you have a choice of several different types. $f for instance should allow you to display the number as a standard floating point and never factorise into scientific notation, though, again for me at least, the parser preferred to crash rather than work with anything other than $e.

The "#()" notation simply means here is a comma delimited list of values.

The Children section defines what should be displayed when the user expands the variable. As you can see I include the three members of the vector and an escape clause, if for some reason I need to see the original default formatting of the variable.

I learned everything myself from this wonderful post over at virtualdub.org.

Sunday, 18 July 2010

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).

Saturday, 17 July 2010

wxAUI

These guys know what I'm talking about when I mention tearaway windows and customisable easy to use interfaces. Take a look at the example video found here: http://www.kirix.com/labs/wxaui/screenshots.html

Playing around with it briefly using wxPython was reasonably painless and showed how easy it was to accomplish something like this relatively quickly. Unfortunately it also showed up some instabilities in the latest build.

I'm going to have a play around with wxWidgets in C++, see if it has the same issues I experienced with the python wrapper. If that doesn't work I guess I'll start looking at other widget systems.

Friday, 16 July 2010

Point and click adventure creator

A Project I've had at the back of my mind for a while now is to create an old fashioned 2d point and click adventure game for a touch screen device. Think about it! Touch screen devices are perfect for adapting old games like Full Throttle and Monkey Island to, because they don't rely on quick reactions and "twitch" style gaming.
You can take your time with them, spend as long as you like figuring out the solution to next puzzle, and if you don't make it before your train arrives at the station? Autosave should make sure that the game resumes from wherever you last were next time around.

Core to this concept is the idea of some kind of world builder tool, that allows you to manipulate all the assets you have to hand to create an environment and characters that can interact.
For the most part, I envision the tool to look and feel in some ways like a movie editing suite or perhaps more appropriately, the Adobe Flash editor.

You've got your main preview window in which you can see the main goings on in the current "scene".

Then you've got the assets area, which will be a collapsible hierarchy of all characters and environments, into which you can drill down to character animations and then again to see individual frames.

Finally there's the Timeline window. This will be where you layout a scene. This can be as simple as a single animation playing on an object when the player touches it, to a whole cast of NPCs travelling across the screen, but not before stopping to insult the protagonist on the way.

There are of course a lot more components required to enable the editor to create fully featured point and click adventure games, but I shall save those for another post.

There are some GUI conventions I wish for this editor to follow:

  • All of the windows will be resizeable, and "tearaway" meaning they can be dragged out of the main window to form their own separate one. This means people with dual monitor setups can use their desktop space more efficiently.
  • As well as having a File->Add->New Asset drop down menu option, any graphic dragged from an explorer window onto the editor will be immediately placed into assets section and highlighted ready for use.
The idea is, everything should be as customisable and easy to use as possible. It should also be responsive, but in theory that should go without saying. 

The Artful Gamer: The Changing nature of gaming interfaces

There's an interesting article over on Kotaku talking about how touch screens have affected the interactions we take for granted with computer games.

Go check it out.

Thursday, 15 July 2010

Achievement Progress

For the platforms that support them, in-game achievement progress notifications are a great way of making a game feel more polished and providing feedback on just how much work is left for the player before they will be awarded. This is as opposed to just relying on the platform entirely, so the only information players get about them is via the Dashboard or the XMB with no mention in game anywhere of achievements.

Now, there are a lot of achievements for which measuring progress is not applicable, as it could be for performing one specific stunt in a fantastic and noteworthy way and thus you've either done it or you haven't. But there are also a lot of achievements along the lines of "do thing X for Y number of times". When Y is a significantly large enough number, you can be several sessions into the game before you get it.

Before you do, it can sometimes get to the point where you're wondering why you don't yet have it. "Surely I've killed enough bad guys with the machine gun to get the achievement!" you cry out, but without some indication that you're nearing the target, you don't even know if what you're doing is what you need to do to earn the achievement in the first place!

Gears of War 2 is a great game for progress notification. As well as the "War Journal" in the main menu, that details all of your achievements gained to date and how close you are to those you haven't, you also get in game pop-ups that inform you just how close you are every time you cross a certain threshold.

Team Fortress 2 is similar to Gears with it's in-game notifications as well, but Valve have worked hard on Steam and you can get a lot of information on your achievement progress without loading the game up at all. However it doesn't seem to be consistent.
Browsing my list of achievements, for instance, shows a lot of them with progress bars, quite a few of which are still at 0, such as this one:

Trailblazer
Ignite 10 enemies that have recently used a teleporter.

But then there's this one:

Infernal Medicine
Extinguish 100 burning teammates.

Which doesn't have a progress bar (and doesn't provide any information as to why that might be).


Geometry Wars: Retro Evolved 2 is an example of a different way of doing achievement progress.
The "Wax On" achievement description is "Rub your ship along all four arena walls in pacifism".
To show the player's progress, the game highlights the parts of the wall that have already been touched - that way the player knows for certain what is left to do to earn the achievements.

You can see an example of this in the video (you may want to mute it).

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.

Wednesday, 14 July 2010

X-Com: Apocalypse

This is one of my favourite games. It's also quite an old one, being released in the early years of Windows 95 but actually designed for DOS, meaning there are a few standard UI conventions we take for granted on modern systems that aren't present.

The screen shots you see are of the game running though DOSBox 0.72 which itself has been loaded through Steam. As such there are a few graphical artefacts in the game that I cannot contest to being caused by the game it self or the emulation.

By way of a quick gameplay summary, X Com: Apocalypse is a strategy game where you have to save a city from an alien menace. There are two main modes of play in the game, the first is the city scape view, where you manage your agents, research new equipment, buy stuff and fight any invading UFOs. Should the UFOs make it past your defences you'll have to send your agents in to clean up the place - which is where the second game mode occurs. This second game mode is the tactical view, which shows your agents on the ground along with all the bad guys.

First up, it's the loading screen which you can see on the left here. My save game naming scheme aside, you'll notice each save game is automatically given the in-game date and time (which is why it's 74 odd years in the future) so you know which save game was the last. Unfortunately, there is an issue with the game which can cause this to be a bit unclear. When you send agents in to a location and it switches from city to tactical view, the tactical view has the exact same time as when you left the city view. Which makes sense, as that's when the agents got there.
Now, you can spend ages in tactical mode, but due to the nature of the game and the time controls generally only 5-10 minutes (on average) will have elapsed of in game time for any given mission. Unfortunately, when you return to the cityscape, the time has reset back to the time you entered the tactical mode. The mission is still complete, but the agents are returning to base technically before they've even done anything.
My immediate reaction after completing a mission is to save a game. But if you've also saved the game during the tactical mission, you'll be in a position where your most recent save is dated prior to earlier ones.

There are two issues with this. Obviously the game is doing the correct thing in returning to the time at which the mission started, but:

  • The agents should remain in the building and "out of play" until the same amount of time passes in the cityscape as did in the mission. This isn't strictly a UI issue but it's related and I felt it worth mentioning.
  • The save games need to be given the real world date and time, either in-addition to, or instead of the in-game time. I think this should be a standard feature of any game that offers you multiple save slots. In fact, a lot of games nowadays are keeping count of your total play time, which would be a suitable alternative to displaying date and time (see Mass Effect).

Next we have the Cityscape. The lower half of the screen is occupied by what you see in the screenshot here. Time controls on the right, various info screen buttons on the left and a whole bunch of tabs for the different aspects of x-com management that can crop up whilst defending the city from an evil menace.

For the most part the interface is perfectly serviceable, and considering you can take your time whilst the game is paused mean's it's fine. But that doesn't mean it's great.

There's a lot going on when you first look at the controls. The bar in the centre lists all the vehicles, agents, researchers, corporations, ufos et al depending on the highlighted tab and when you have a lot (as seen in the screenshot) it can get a bit unwieldy. If you take training agents - newly hired ones have no training option specified, and to do so, you must select them from the long horizontal bar and then press one of the two training buttons on the bottom right. However, if you can't remember what your new trainee looks like after you've hired him (or her), you have to click on each face in turn until you find one without any training option specified. Later on in the game this isn't too big a problem as agent ranks are displayed and so the rookies are easily separated from the crowd.

There's no reason why you couldn't put the training options in another menu, either with the equip screen or on it's own. Trying to bribe/influence other corporations is also similarly clunky.


Moving on, there is a rather large oversight on the part of the developers. One big thing about the game is how quickly you respond to invasions. Basically, the longer you leave it after the aliens have beamed down into a building, the harder it'll be for you to clean house. When the klaxon's sound you're presented with a screen not dissimilar to this one. Where you're expected to pick which agents you want to go and deal with the infestation.
One of the things you can do to improve matters later in the game is purchase multiple bases throughout the city and spread your agents out throughout them so you can send the closest to deal with the threats as they happen. Problem is, there's no map on display telling you where it's happening. There's just the name of the warehouse it's happening at, which could be anywhere as sometimes there are two or three identical warehouses dotted amongst the city.
You can of course choose to not send anyone, quit out of the menu to see where it is, and then manually send the agents in. But then, what's the point in the menu in the first place?

Other problems with the menu include:
  • You'll notice there are two columns there, one for agents in your numerous bases, and one for those assigned to vehicles. But there's only one scrollbar (and this being the days of DOS, your mouse wheel does nothing). This scrollbar scrolls both columns at the same time, so if you want an agent from the bottom of column A to be assigned to a vehicle at the top of column B it can be a bit of a pain as you have to drag and drop them. Thankfully all highlighted agents move as one, so it's only an issue if you're wanting to move one agent by themselves.
  • Vehicles have a maximum occupancy. If you drag more agents to a vehicle than can physically fit, those left over won't be assigned and stay in the base (but still selected). If you're not careful, you can end up sending people to the target building on foot, which can take a very long time.

There are a bunch of other niggles as well. Scrollbars don't scroll in terms of items, but in pixels, so you can end up with one half of an item showing at the bottom  and top of a menu.
When dragging items in the equip agent screen the items snap to grid, not to locations. If you see the thing being dragged in the screen shot, you can place that anywhere on the empty hand slot and it'll snap in place, but whilst it's being dragged, it treats it like a grid (like the backpack area it's hovering over).
What it should do is snap to the centre of the hand area reaffirming to the player that it will go there when the mouse button is released.

When you are in tactical view, if you wish to change what a character is holding (be it a grenade, or medikit) you have to open the equip agent screen, drag the items around and exit back to tactical view. Then, once you've thrown the grenade or healed your agent's wound, you have to go back into the equip menu to restore whatever it was they were holding before.
Now what you really want is some kind of pre-configured layouts that you can switch between with the click of a button. I'm constantly throwing grenades in this game, and it's a very tedious and clumsy method for doing so.

It does do nice things however - if you look to the left, you can see the agent's skills. The bits at the end of the bar indicate how much they have improved since they were first hired.
Speed is partially empty, turning into an outline at the end, this represents encumbrance, due to the agent's relatively low strength.

I fear I have rambled on far too much. So I shall leave you with this for now. But I shall return tomorrow with more UI annoyances!

Welcome

In this here humble blog I shall now attempt to look at the user interfaces of various computer games and applications, and talk about what works and what doesn't and why.