Friday, February 10, 2012

Immersive UI Design

Yesterday I started playing L.A. Noire (don't worry, no spoilers), a game in which you play the role of a detective in 1940's Los Angeles. It is published by Rockstar Games, makers of such games as the Grand Theft Auto series and Red Dead Redemption. The missions in these games mainly consist of going to a marked location on your map and shooting people at that location. Rinse and repeat. Some interesting characters and a bit of a narrative keep things moving, but this is really just icing. I have played several of these games and have failed to finish a single one. They just don't draw me in or motivate me to keep playing. Despite this misgivings, I had heard some interesting things about L.A. Noire and a sale on Steam convinced me to give it a shot.

Five minutes into the game I was more engaged than at any point in the publisher's past games. This was almost certainly due to the incredible immersive UI design. It begins with the opening menu:

Opening menu

In case it's not clear from the above image, the menu options are shown as shadows on the wall. At this point I just thought it was merely an interesting artistic choice and started a new game. The game begins with some fairly standard narration describing the general setting (who are you, where are you, what are you doing), but you soon arrive at a crime scene. There has been a murder and it's your job to search for evidence. As I picked up a piece of evidence, I was expecting a short cinematic explaining what I had found. Instead I was greeting with something like the following image (I was examining a gun instead):

Investigating evidence

Your controls rotate the image in your hand as you look it over for clues. Hold steady on a certain area for a moment and you are rewarded with an exclamation from your in-game character, "Serial number 01138, let's get to the local gun shop and check for some leads." The game designers could have chosen to just play a video showing the player what clue was discovered, but instead they let you hold the evidence and look it over for yourself. The result is the same either way, but one is altogether more engaging.

After discovering this new lead, I am told to hit 'tab' to open my journal and review the evidence. I expected a traditional menu showing where I should go next, but I was greeting with the following:

The notebook menu

Your cursor is gone, replaced by a pencil hovering next to the currently selected line of text. Again, a traditional menu would have provided the same functionality, but it also would have served as a reminder that I was playing a video game.

Good books are great at immersive story telling. The scene is described by the author and the imagination takes over, placing the reader right in the middle of the action. Movies and theater can also accomplish this feat if done well. Games, despite their inherit interactivity, usually do quite poorly at this task. Heads-Up-Displays and obtrusive menus serve as a constant reminder that you are playing a game. You are not an LAPD officer in the 1940's, you are sitting at home in front of a computer. By making the menus and interactions more organic, L.A. Noire attempts to succeed where most games fail. It still has several traditional menus and a mini-map in the corner of the screen, but the game was certainly designed with player immersion in mind.

I wonder if the Mystery at the Museum game could benefit from a similar treatment. The photo mechanic certainly lends itself to an immersive, first-person experience, as does the exploration element. I would be interested to see if a minimal, true to life UI could used in this game. Instead of cards in an inventory menu, maybe the player is shown a hand holding several polaroid pictures. The main game board might not be needed at all if the scenes included doors for the player to walk through into the next room. It would be a difficult design challenge, but I am interested in hearing some opinions about whether it might be something worth pursuing.

1 comment:

  1. As a member of your visual team, I would much rather have more of a 3D perspective than something flat. I think this ultimately will be determined by the CS technical team.

    I'm not sure many children will relate to Polaroids so I wonder if an interaction with a "touchscreen" display on a camera could be a modern substitute? I do really like that you noticed the cursor change to a pencil. That could be easily done here with replacing a cursor with a hand and animated "click" gesture.

    I'm ready for good challenge!

    Thanks for your post! It's helping the creativity juices flow!