1. A Crash Course in Game Design and Production- Week 3

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

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.

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.

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.

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

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.

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 post them to the list server.
    E-mail any other questions, comments or suggestions to lgp at exo.com

                 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 Lord Generic Productions - All Rights Reserved
 ===========================================================================

new topic     » topic index » view message » categorize

Search



Quick Links

User menu

Not signed in.

Misc Menu