New user interfaces

transcript

FUNDAMENTALS OF GAME DESIGNUSER INTERFACE DESIGN

Sayed AhmedBSc. Eng. in CSc. & Eng. (BUET)MSc. in CSc. (U of Manitoba)http://sayed.justetc.nethttp://www.justETC.net

Just E.T.C for Business, Education, and Technology Solutions

sayed@justetc.net www.justETC.net JustETC

TOPICS General Principles of User Interface Design A process for designing your interface

How to manage the complexity Interaction Models Camera Models Examine most widely used visual and audio

elements in game UI Analyze the functionality of various types of

input devices A variety of navigation mechanism

Camera Models Input Devices 2

TOPICS How to make your game customizable

sayed@justetc.net www.justETC.net JustETC Tech.

IS USER INTERFACE IMPORTANT? A bad interface can kill a game

Even with a great game play The User Interface creates the player’s

experience Making the game Visible, Audible, and Playable

The user interface has an enormous effect on how the player perceive the Game Satisfying Disappointing Elegant Graceless Fun Frustrating 4

WHAT IS THE USER INTERFACE? Lies in between the player and the internals

of the game Knows all about any supported input and

output hardware Translates the player’s input

Into actions in the game Pass those actions to the core-mechanics

Presents internal data that the player needs In visible and audible format

UI Output Visual Elements and Audio Elements

UI Input Control Elements

WHAT IS THE USER INTERFACE Feedback to the player

Gives important information to the player About his activities The state of the game world The state of his Avatar

Feedback Elements The elements that provide this information

Visual or Audio

PLAYER CENTRIC INTERFACE DESIGN UI plays more complex rules in games than in any other

software Games exist to entertain

Other software take data, process data, control processes, and visualize results

Game UI must be easy to learn but Must not tell everything that is happening inside the

game Must not give the player the maximum control Mediate between the internals and the player Create an experience for the player that feels to

him like game play and storytelling7

PLAYER CENTRIC INTERFACE DESIGN Focus on what the player needs to play the game well Provide smooth and enjoyable experience

ABOUT INNOVATIVE UI Innovation is good in almost all aspects of

Game Design Theme Game World Storytelling Art Sound Gameplay

Do not innovate unnecessarily when designing a new interface Button assignments on controllers and keyboards

ABOUT INNOVATIVE UI Over the years

Most genres have evolved a practical set of feedback elements Control mechanisms suited to their gameplay

Play the games in your chosen genre Pay special attention to games that are widely admired as

the best – Their UI probably helped them secure that reputation

Adopt whichever of them is appropriate for your game Want to offer a new user interface for a familiar

problem Build a tutorial level Test them with novice and experienced players Take their feedback Check if it’s a substantial improvement or not

If not, go back to what works Allow the player to customize the interface

SOME GENERAL PRINCIPLES Be consistent Give good feedback Remember that the player is the one in control Limit the number of steps required to take an

action Permit easy reversal of actions

Remember game balance Minimize physical stress Don’t strain the player’s short-term memory Group related screen-based controls and

feedback mechanisms on the screen 11

SOME GENERAL PRINCIPLES Provide shortcuts for experienced players

WHAT THE PLAYER NEEDS TO KNOW What is happening in the game world What they should do next Need to know whether their actions are

leading them to success or failure Information the player must know to play the

game – according to player centric view of game design Where am I? main view, map, audio feedback What am I actually doing right now? What challenges am I facing? Did my action succeed or fail? Do I have what I need to play successfully Am I in danger of losing the game 13

WHAT THE PLAYER NEEDS TO KNOW Am I making progress? What should I do next? How did I do?

sayed@justetc.net www.justETC.net

JustETC Tech.

WHAT THE PLAYER WANTS TO DO Move Look around Interact physically with nonplayer characters Pick portable objects up and put them down Manipulate fixed objects Construct and demolish objects Conduct negotiations and financial transactions,

and set numeric values Give orders to units or characters Conduct conversations with nonplayer

characters Customize a character or vehicle Talk to friends in networked multiplayer games

JustETC Tech.

WHAT THE PLAYER WANTS TO DO Pause the game Set game options Save the game End the game

JustETC Tech.

THE DESIGN PROCESS UI design happens in the early elaboration

phase If you do just after concept

Your UI work may get wasted Overall design may change dramatically

Define the Game play Modes First Choosing a Screen Layout Telling the Player What he Needs to know Letting the Player Do What She wants to do Shell Menus

JustETC Tech.

DESIGN PROCESS Define the Game play Modes First

Once you have chosen Camera Model Interaction Model Gameplay for the primary gameplay mode Elaboration phase: start with Game Play

You can begin to create the details of the user interface (for the primary game play for instance)

Initial game play design Plan the structure of the game using flow board Think about story related activities Think about ways to interrupt narrative and come back to

game play For small number of game play modes

Start UI design as soon as you understand those modes But too many modes, wait until after you have planned the

structure of the game And understand how the game moves from mode to

mode18

JustETC Tech.

DESIGN PROCESS When you have got understanding of the

game play modes Start to think

Visual elements and controls each mode will need Use graph paper, diagramming tool such as

Microsoft Visio Flowchart of progression of menus, dialog boxes,

other user interface elements that you plan to use Define what input devices will do in each mode

Game play modes may share the same UI Can only differ in game play challenges

JustETC Tech.

BUILD A PROTOTYPE Tools

Flash Microsoft Power point Blitz Basic

JustETC Tech.

DESIGN PROCESS Choosing a Screen Layout

After primary game play mode is thought out Camera model and interaction model are chosen Choose General screen layout

The visual elements that it will include Main view – largest

Decide – will it occupy a subset of the screen A window Full screen with overlays (control elements)

Balance between main view and feedback elements and on-screen control Not a big issue in computer or console games Serious challenge for handheld devices

Mobile phones especially21

JustETC Tech.

TELLING THE PLAYER WHAT HE NEEDS TO KNOW Think what the player needs to know

Apart from the current view of the game world What critical resources does he need to be aware

of all times What’s the best way to make that information

available to him Select the data from your core-mechanics that

you want to show Choose the feedback elements most suited to

display those data What warnings the player needs to be given

Decide how New type of feedback element 22

JustETC Tech.

LETTING THE PLAYER DO WHAT SHE WANTS TO DO Devise a control mechanism

Define every action that the player can take that affects the game

Check what the player wants to do Move, look around

JustETC Tech.

SHELL MENUS Allow the user to

Start, configure, manage the operation of the game before and after the play

Should allowConfigure the video and audio settingsGame controlsSave and load gamesShut down the games

Players should not spend much time in shell menu

Many games include ugly shell menusRemember: Players see shell menus first

JustETC Tech.

MANAGING COMPLEXITY Simplify the Game

Abstraction Automation

Depth Versus Breadth Broad Interface Deep Interface

Context Sensitive Interfaces Show only relevant information

Avoiding Obscurity Artistic Over Enthusiasm The pressure to reduce UI screen usage Developer familiarity with the material

JustETC Tech.

INTERACTION MODELS Interaction Models

The relationship between the player’s inputs and the resulting actions

How to create interaction model Define how the players press the controller button How those will be translated into game world

actions Avatar Based Multi present Party-based interaction model Contestant model Desktop model 26

CAMERA MODELS 3D Versus 2D Question

For 2D Graphics 1st and 3rd person perspectives will not be available

Most games running on powerful game hardware are 3D Small games or games played in browsers are

sometimes 2D First-Person Perspective

Advantages Don’t display avatar – reduced development cost No AI to control the camera Players find it easier to aim the enemies The player may find interaction with the environment easy

Disadvantages Doesn’t have the pleasure to watch himself – cannot

customize looks 27

JustETC Tech.

FIRST PERSON PERSPECTIVES No body language or facial expressions

Reduces the player’s sense of her as a distinct character with a personality and a current mode

Personality must be expressed in other ways No cinematic camera angles for dramatic

effect Certain types of moves become difficult Motion sickness

JustETC Tech.

CAMERA MODELS Third Person Perspective

Challenges Camera Behavior when the Avatar turns

Camera always behind Motion sickness No fun of watching his or her side and front

Camera moves behind slowly Implement side view – slow camera move – image

dizzying Super Mario 64

Camera reorients only after the avatar stops moving Toy story

Intruding Land Scape Objects Player adjustments to the camera 29

JustETC Tech.

CAMERA MODELS Aerial Perspective

Omnipresent interaction model Top down perspective Isometric Perspective Free roaming camera

Aerial Perspectives

JustETC Tech.

VISUAL ELEMENTS Main View Windowed Views Opaque Overlays Semitransparent Overlays

JustETC Tech.

FEEDBACK ELEMENTS Indicators

Digits Needle gauge Power bar Small multiples Colored lights Icons Text indicators Mimi maps Color Character Portraits Screen buttons and menus Text Localization Typefaces and formatting

JustETC Tech.

AUDIO ELEMENTS

Sound Effects Vibration Ambient Sounds Music Dialog and Voiceover Narration

JustETC Tech.

SOUND EFFECTS Most common of use of Sound Actions and events of the game world

A burst of Gunfire Sound often represent the first warning of

approaching danger Provide feedback Screen button audible click

Interface effect that harmonize with the theme of the game

JustETC Tech.

VIBRATION Some device have vibration input Use if appropriate Ambient Sound

Traffic, noise, silenceThe traffic shows that it’s near/in the street

Use positional audio (First & Third) if supported Don’t over use sound effects

If the game involves mostly mental challenges

MUSIC Sets the tone Establishes the pace of your game Think about music that will harmonize Make sure it can tolerate repetition Avoid intrusive music

Wide dynamic range

JustETC Tech.

INPUT DEVICES Three Dimensional

Accelerometers GPS

JustETC Tech.

TWO DIMENSIONAL INPUT DEVICES Directional Pads Joysticks Mouse Touch Sensitive Devices

JustETC Tech.

D-PADS

JustETC Tech.

ONE DIMENSIONAL INPUT DEVICES One Dimensional Input Devices

Send one value to the game Common controllers and keys send binary values

On or off Knobs, sliders, and pressure sensitive buttons send

analog values Different ways to use buttons and keys

One shot actions Repeating actions Continuous actions

Knobs, Sliders, and Pressure-Sensitive Buttons

JustETC Tech.

NAVIGATION MECHANISMS Screen Oriented Avatar Oriented Point and Click Screen Oriented

Top Down and Isometric 2D Side-Scrolling 3D Games

Avatar Oriented Joystick and D-Pad Control Mouse-Based Control Flying Fixed-Wing Aircraft Helicopters Spacecraft

JustETC Tech.

ALLOW FOR CUSTOMIZATION Swap left and right mouse buttons Swap up and down directions in mouse or

joystick based games

JustETC Tech.

SUMMARY A smooth and intuitive user interface

improves the players perception of the game

JustETC Tech.