Lord Generic Productions

A Crash Course in Game Design and Production
  Week 3 - Screen Design and User Interface Specification

Welcome back! This is the third installment in "A Crash Course in Game Design and Production. Like last time, this lesson is in two parts. In PART ONE, we'll discuss Screen Layout and User Interface issues. In PART TWO We'll write the third part of the Design Spec for our Course Project, the Screen Design and User Interface Specification.

Part 1 - The Basics of Screen Design and User Interface Issues

What is a "Screen Design?"
A Screen Design is just a plan for how and where you intend to put things on the screen. There are usually many things you need to put on the screen, such as the player's score, number of lives left, Game Logo, level number, information messages, or whatever. It's your job as the Game Designer to determine what items need to be on the game screen, what they will look like, and where they need to go. Good Screen Design takes practice, and you will usually go through four or five designs before you get it "right."

How do you DO Screen Design?
The first step in screen design is referring back to the General Description
to see what screens we NEED to design, what NEEDS to be on each screen, and if
elements need to move around, what are they doing?

[Note: Often I do this backwards, I do a rough screen design\layout to see WHAT I NEED TO INCLUDE IN THE GENERAL DESCRIPTION. Most of the time when I get to the Screen Design Spec, I already have all the screens drawn up and then just have to describe what's there in the Screen Design Spec.]

Make a detailed list for each screen, go over it in your mind and elaborate and expand on what was in the General Description. The General Description is a starting point, a quickie overview of what you will include in the Screen Design Spec. Now it's time to fill in the details.

User Interface items
Parts of the User Interface include Pull Down Menus, screen "windows," player information - scores, number of lives, etc, system messages, about box, etc. you need to figure out what these should look like and where they need to go.

We'll discuss HOW these work below in the User Interface Specification section, but its CRITICAL to place these items where they can be easily seen by the player. The player should NEVER have to look for something, and should NEVER have to "figure out" your interface works. "Standard" places for player information are on the right side of the screen or at the top of the "play screen" Pull Down menus are ALWAYS at the top left of the screen, with New\resume game options on the left and Help\about on the right of the menu bar.

The next step is to go into your paint program and figure out how big things need to be and lay up a Mock Screen Shot of each screen.

[NOTE: I prefer using Autodesk Animator Pro for this. It handles all 256 color screen resolutions, allows you to set your image size, or clip a portion of the screen and save it as an image, shows you screen coordinates when you move things around, lets you scale and rotate pieces arbitrarily, has GREAT color palette handling, will let you have multiple versions of the screen at the same time, and will let you save in BMP format so you can load your images into Euphoria. (it's native file format is GIF, which I prefer.) Find a program you like using that has these features. Avoid Windows(tm) paint programs, they will give you more trouble than they are worth. I'll tell you why when we get to the Art Specification lesson.]

 
Draw mockup pieces in various sizes and try different screen layouts, go through each animation in your head and try to see what each piece would be and where it will end up on the screen. Move the pieces around until you get a layout you like. Then write down how big everything is, and where it's located on the screen.

Once you have all your mock up screens and notes, its time to write up the Screen Design Spec.

Anatomy of a Screen Design Specification
Here's ANOTHER anatomy for you.

The first part of the Screen Design Specification is called the General Design and Layout. It basically lists parts and features common to all screens, including color scheme, border width, etc., followed by the General
Interface Specification (see below)

It also lists all the screens to follow with one-line descriptions condensed from the General Description.

Then for EACH screen, the Screen Design Specification contains AT LEAST the following:

Screen Title
 
Screen Description
Write in EVERYTHING you can think of about this screen, what information needs to be on it, go step by step through any animation sequences, spell everything out. Include player interaction and controls to exit the screen.

Screen Layout
What goes where, and how big it is in pixels. Use coordinates for where each piece resides, section by section through the layout. You will need this information for the ART SPEC and when it comes time to write the code to put it on the screen, you'll know what numbers to plug in to the drawing routines.

Screen Exit
What happens when we exit this screen, where do we go?

User Interface Specification
Since you need to define and explain your User Interface issues for EACH SCREEN, it makes sense to make the User Interface Specification part of the Screen Design Specification.

In Part Two of this lesson we'll show you the completed Screen Design spec for each screen of our course project.

What is a User Interface?

Your User Interface is the mechanism your game uses to get information to and from the player. It consists generally of two parts: User Controls and Feedback Systems.

User Controls
Collectively, this is the set of controls the player used to affect the program, including character movement\actions, pull down menu choices, options screen controls, etc.

Feedback Systems - These are anything that conveys information to the player, such as his Score display, Number of Lives, Level Number, Sound Effects (SFX), Visual Effects (FX), sound volume, text messages, about box, etc.

The Key to intelligent User Interface Design is simplicity. Your feedback systems must be crystal clear, and your User Controls must be easy for an idiot to navigate without checking the manuals. If he has to think about how to find the information he needs you've lost him. The idea is to get him hooked and thinking about THE GAME and not THE INTERFACE.

MICHAEL'S RULES OF THUMB FOR USER INTERFACE DESIGN

  1. DON'T GET FANCY WITH YOUR USER CONTROLS OR FEEDBACK SYSTEMS JUST TO SEEM MORE INTELLIGENT OR SOPHISTICATED. It seems pretentious. I once saw game that had "Sound Attenuation" instead of a "Volume" control. It did the same thing only backwards. When you turned UP the Attenuation, the volume went DOWN. That's what "Attenuate" means, to reduce. The author was trying to make people think the program was more sophisticated than it was.

  2. DON'T DO THINGS JUST FOR THE SAKE OF DOING THEM. Just because you CAN do something doesn't mean you SHOULD do something. Some programs have menus that have sub-menus that have sub-menus that have sub-menus. While it's nifty to have an interface engine capable of handling complex menu structures, it wastes the player's time to have to wade through five levels of menus to change something. It's also very frustrating for the player searching for information he needs.

  3. HAVE AS FEW MENUS AS POSSIBLE. It's better to have 5 menus with 10 items each than 10 menus with five items each. Break down your controls into reasonable categories, like game, options, sound, etc. then use those category names for your pull down menus.

  4. HAVE HOT-KEYS FOR EVERY COMMONLY-USED MENU CHOICE. A Hot-Key is a keyboard shortcut to activate a menu item. Every option that will be regularly used should have a Hot-Key. Examples: Q to Quit, N for New Game, S for Sound, A for About, O for Options, etc.. It's better to have EVERY option Hot-Keyed, but you don't see that often. You must at least have the Menu Names Hot-Keyed, pressing the key bringing up the menu for you to choose an option from.

  5. ALWAYS USE THE CONTROLS PEOPLE EXPECT YOU TO USE, AND PUT MENU OPTIONS WHERE PEOPLE EXPECT TO FIND THEM. There are "standard" menu layouts and keyboard commands that people EXPECT your game to use. For example, for most character movement and actions, you WILL use the Arrow Cursor Keys, Ctrl, Alt, and Space Bar. Text pages scroll with the up\down arrows and PGUP\PGDN.

  6. DON'T RE-INVENT THE WHEEL, EVEN IF YOU DON'T LIKE IT. People hate having to learn new player controls. It's easy to check your biggest competitor's game and use the same controls they use for the same functions, and organize your menus roughly the same way they do. More than likely, your audience is already playing THEIR game, so the switch to YOUR game should be as painless as possible. If you have a LOT of player control options, say for a fighting game, put them in a logical keyboard layout, and let the player be able to customize the character controls if possible.

  7. IF YOUR PROGRAM IS MOUSE DRIVEN, MAKE ALL YOUR MENUS MOUSE CLICKABLE. Don't EVER make your players use the mouse for some things and not other things. EITHER YOUR PROGRAM IS MOUSE DRIVEN OR IT ISN'T. Nothing frustrates players more than not being able to click on the item they want to select, when they can click on other buttons on the SAME SCREEN. If you don't know how to make EVERYTHING mousable, don't make ANYTHING mousable.

  8. DON'T CLUTTER THE SCREEN WITH USELESS INFORMATION. You are probably keeping track of more information than the player needs to know at any given time. Only display what he NEEDS to know all the time, and make any information he needs only once in a while a hot-key away. You can have a status box that has multiple pages of information. Order the information on the pages by relevance to the player let the player call up the page he needs, rather than having everything on the screen at once. Instead of making him scan all over the screen to find what he needs to know, he knows it's in the box, on page 3, so he hits "3" on the keyboard and it pops up in the box.

Anatomy of a User Interface Specification

At the end of the General Screen Design and Layout is the General Interface Specification, which describes the Interface issues common to all screens.

Then for each screen we need:

Player Controls
Whatever the player can do on this screen, and how he does it. how he calls up any menus, how he can select something, Character controls, What he does to interact with the game.

Menus, Choices, and Functions
If this screen has special menu options, what they are, how the player changes those options, and how the game will let him know of those changes.

Example: When the player clicks the VOLUME + button, the sound volume increases, the VOLUME BAR GRAPH gets longer and the SAMPLE TONE is played at the NEW volume level.

Feedback Systems
What player information is displayed on the screen, where it is, how will how will the player access it? Also what FX, SFX are needed to alert the player of his status when he reaches a Milestone Event in the game. Anything from a printed score to a minute long cinematic animation is listed here in gross detail.
 
In Part Two, I'll show you how the Screen Design and User Interface Specification looks for our Course Project.

End of Week 3 - Screen Design and User Interface Specification
Part 1 - The Basics of Screen Design and User Interface Issues.

If you have any questions for group discussion or have any other questions, comments or suggestions, email them to me to Pastor@BeRighteous

Mail monetary donations large or small to
 Lord Generic Productions 1218 Karen Ave Santa Ana, Ca 92704
  A Crash Course in Game Design and Production - Euphoria Edition
(C) Copyright 1996,2001 Lord Generic Productions - All Rights Reserved