Level: Introductory Sam Lantinga, lead programmer, Loki Entertainment Software
Lauren MacDonell, technical writer, SkilledNursing.com
01 Aug 2000 Sam Lantinga and Lauren MacDonell have been hard at work on the user interface for their "Pirates Ho!" game. In this installment of their diary documenting the creation of their swashbuckling role-playing game, the authors describe the principles they used in developing the preliminary design for the interface.
What is a user interface?
Our first consideration in designing the user interface was to define its purpose. Our three main goals were interaction, information, and entertainment for the user. Interaction
The interface allows the player to interact with the game, whether it consists of simple lines of text or a 3-D graphical marvel. The first and foremost purpose of the interface is to translate data between the game logic and the player. Without the interface, you can't play the game. The interface tells the player what's happening in the game and lets him or her respond accordingly.
Two user interface designs (Angband and Quake III)
Information
The interface displays information about the setting, characters, objects, and events in the game. This information allows players to make decisions. It's often said that a picture is worth a thousand words. In the case of the interface, images incorporated into the game often display information more efficiently and effectively than text. This can be done either through illustrations or through symbolic representations (like how many lives a character has left).
Interface employing graphical representation (Raptor)
Entertainment
It helps if the interface is fun to look at. We like games with good graphics and interesting scenery because the visual element adds something even to the most exciting story line. Besides, detailed illustrations are great for giving players a feel for each character's image or the local color of the setting. Without the illustrations these imaginative details would be missed. They make the game world richer. These three issues (interaction, information, entertainment) to a large degree determined our approach to interface design. Our task was clear: we had to create a way for players to interact with the game that would provide all the necessary information in a fun and entertaining way.
What is a GOOD interface?
We've had quite a bit of experience working with user interfaces for computer games, other software, and the occasional console game. So we have a pretty good idea what works for us and what doesn't. We're also fortunate to have friends in the game development industry whose advice has helped us reinforce and refine our definition of a good interface. The central principles that we kept in mind when we developed the interface for "Pirates Ho!" were: simplicity, consistency, and immersion. Simplicity
The most often heard response in our search for the magic formula for the Perfect Interface was
simplicity. In other words, build an interface that is easy to figure out and doesn't require an instruction manual. Or a sidebar telling the player what to do next. When we say that an interface is easy to figure out, we mean information in the game can be accessed and responded to without a whole bunch of intermediary steps, or commands, or keystrokes. The information is on the screen when the player needs it. And he or she doesn't have to take much time and trouble to figure out how to use the keyboard, mouse, joystick, or other tool to continue playing the game. One of our favorite games is Humongous Entertainment's "Pajama Sam 3: You Are What
You Eat from Your Head to Your Feet." The interface for this game is designed so that mousing over an object changes the appearance of the arrow. The change in the arrow indicates that clicking on the object will cause something to happen. Players can then click on the object to advance the action of the game in some way. The
arrow changes to a third style to indicate a path that leads to another screen. Players can view
inventory by moving the arrow to the bottom of the screen, which pops up pictures of the inventory items. The "computer" icon that players can use to save or exit the game also pops up at the bottom of the screen along with the inventory. Granted, the game is intended for a 3-8 year old audience. But the simplicity of the interface allows the player to immerse him- or herself in the charming and amusing story line. The fun of the story and the puzzles in this game is not diminished by an overly complicated interface. That's one of the reasons we like it so much.
"Pajama Sam 3" interface, including inventory
The tip about not requiring players to read was given to us by a couple of friends who work in the game industry. They tell us that players don't read unless they absolutely have to. They just want to play the game. That worked out
well for us because so far we had no plans to create a printed manual. But it also meant we had to be careful to ensure that our interface would be simple to use. Consistency
We have also found consistency to be very important in interface design. Every once in a while we run across a game
that looks easy to play, until we try to switch to a different view or mode. But when the view or mode is changed, different rules apply. It's nice to be able to do the same thing in the same way everywhere in the game. It's also nice to find vital information in the same place all the time. Our view of consistency doesn't necessarily require identical screen layouts throughout the game. But we do recommend using a logic in the layout that allows players to anticipate where information can be found and how commands can be executed in different parts of the game. For example, we've been playing a good bit of Blizzard's "Diablo II" lately. One of the
things we have noticed is a lot of interface consistency. The game's few basic commands can be used throughout
in the same way. It's also easy to navigate the various menus: inventory, buy/sell/trade, skills, attributes, etc. These menus are easy to navigate because they all follow the same layout. Players can also mouse over objects, people, and locations at any point in the game to view brief descriptions, which is immensely helpful.
"Diablo II" interface, including inventory menu
"Diablo II" is also consistent in its visual style. The graphics, menus, and control bars all
have the same gothic fantasy look. This kind of visual continuity isn't absolutely necessary, but it adds an aesthetic enjoyment to the gaming experience and enhances the illusion of immersion in the game world. Immersion
Most of us have shared in the delightful experience of becoming totally sucked into a movie. Skillful filmmakers combine the elements of light and sound to create and perpetuate vivid illusory worlds into which we can escape for a few
hours. It's nice when we can get sucked into a game in the same way. Elements of the user interface can help perpetuate the illusion of the player's direct involvement in the game world. Graphical elements let players visually
experience the setting, action, and local color of the game world. Music and sound effects
create a particular mood and make events in the game seem more realistic. Consider adrenaline-pumpers like "Quake III". They wouldn't be nearly as appealing without the grisly sound effects and intense graphics, would they?
"Quake III" interface
Another way to preserve the illusion of immersion in the game world is to disguise elements of the
interface as parts of the world. Film critics use the term "diegetic" to describe an element (usually music) that is given a visible source within the action or setting of the film. A simple example of a diegetic element is music accompanied by the visual of a piano or jukebox. The music is still part of the soundtrack, but rather than functioning as background music it becomes part of the world of the film. In terms of interface design, there's no better word than diegetic to describe tools, menus, or other features that are dressed up as part of the game. (Besides, your friends will be impressed when you use it in conversation.) Let's look at an example of a diegetic element in a game. The interface for Interplay's "Fallout II" includes the "Pip Boy" (a Palm-Pilotesque computer unit that contains quest information, electronic map displays, and
informational files about the game world). "Pip Boy" also allows the player to "wait" for a specific
amount of time (to instruct game world time to jump ahead by that amount). AND the "Pip Boy" is actually used IN the game to retrieve information from computer stations at different locations. This clever diegetic tool prevents the player from having to step outside of the game world to look for information, making the line between the game world and the real world just a wee bit blurrier.
"Fallout II" interface - "Pip Boy" view
What about OUR interface?
So how will all this be applied to the "Pirates Ho!" interface? We're still ironing out the kinks, but we do
have the preliminary design worked out. The operative word here is preliminary. We'll probably overhaul the entire thing before we're done, but until then it will look a little something like this... Action view
The focus of our interface is the action view. The action view allows players to see what is happening and to get
information about where, when, and with whom it is happening. This view displays combat, travel, and dialog (in other words, the action of the game). The large graphic on the right half of the screen shows either what the player sees or an overhead view of the ship and surrounding area (during sea travel and combat). The graphic on the upper left displays information about the location, surroundings, time of day, and weather conditions in whatever location the character currently finds him- or herself. The lower left graphic will always be a map of either the game world or a town or smaller area, depending on where the character is traveling. So far, the plan is to build everything in the interface to respond to point-and-click commands. We
may add some keyboard shortcuts or other functionality later, but for now that seems to be the simplest and most straightforward way to go. We plan to include descriptions of objects, places, buttons, and people that appear when players mouse over the items. By using the same layout for all of the interaction in the game and by providing readily available descriptions throughout, we hope to balance simplicity with consistency of appearance and availability of information.
Game layout
Ship's log
The "ship's log," is a good example of a diegetic element in our design. It's
our way of dressing up information about quest status, provisions, inventory, and ship's crew. It looks
like a log book, has three sections
that contain different pieces of information and will be accessible from the action view by clicking the book-shaped icon near the bottom of the
screen. One section or "page" of the log will contain basic quest information, which will be
entered and updated automatically.
Players can elaborate on this information by typing their own notes into the log. The next page will
show detailed information about
provisions, and possessions and will let players select weapons, provisions and other items to carry
with them when they leave the ship.
The third page will show information about the ship's crewmembers and will allow the player to
distribute wealth, weapons, and provisions
among the crew. We are trying to work out a way to incorporate summary information from the log into
the action view so that players will
not have to spend time searching different screens for something they need.
Ship's log
Game world information
Another diegetic tool that we're working on will document the history, economy, geography, and
culture of the game world. This information will give players an understanding of the basic patterns of events in the game world. The information will be presented in the context of a reference work called "A Brief History of the Isles," by Frederick Figgleworth, Master Cartographer. Figgleworth will also pop up in the game from time to time
and interact with the player. In light of our earlier statement against making players read too much, it seems a little hard to
justify including written information about
the game world. That's one of the reasons we're working to make this part of the interface
look "authentic" to the
game world. Our "Brief History" is also the most succinct way we've thought of to
summarize the patterns operating in the
game world. And of course, players don't have to read the history. They can eventually glean the same information from their interaction and
exploration throughout the game. The "Brief History" is intended as a supplementary
reference tool rather than the single
source of game world information.
"Brief History" reference tool
Audio
We plan to incorporate audio features into our interface, although we're not yet sure to what extent.
We may not have a running soundtrack throughout the game, but we will probably include some occasional mood music.
We've been keeping our ears open for traditional nautical-themed folk songs and sea chanties, and we've been calling up our musician friends to find a fiddler and a tin-whistle virtuoso. We're also hoping to include voice-overs for at least some of the dialog scenes to give players another sensory way of relating to the characters they encounter in the game. Of course, we'll also incorporate sound effects into our combat scenes and ambient sounds into the character interaction and travel scenes.
Conclusion
After much research and discussion, we now have a preliminary design for our user interface that
we can refine as we develop "Pirates Ho!". So far we're very satisfied with the simplicity and consistency of our design, and we're doing everything we can think of to use the interface as a way to immerse players in the game world.
Resources
About the authors  | | | Sam Lantinga is the author of the Simple DirectMedia Layer library, and is currently employed as lead programmer at Loki Entertainment Software, a company dedicated to bringing best-selling games to Linux. His involvement with Linux and games began in 1995 with various DOOM! tool ports and the port of the Macintosh game Maelstrom to Linux. |
| | | Lauren MacDonell is a technical writer with SkilledNursing.com and co-developer of "Pirates Ho!". When she isn't working, writing, or belly dancing, she takes care of her tropical fish. |
Rate this page
| 
