Aaron Chaisson UIs are one of the single most important design - - PowerPoint PPT Presentation

Aaron Chaisson

UI’s are one of the single most important design aspects to games, bad UI can ruin a great game. Also the interface is the most discussed component in game reviews. However, you are greatly restricted due to the most important rule of UI design.

Do not innovate!

Stick to what people are comfortable with, they expect certain standards and conventions. Though your changes may seem good the player can be uncomfortable and make subconscious judgements about the game due to this.

 Visual Elements

• Main view & feedback elements

 Audio Elements

• Game sound, auditory feedback & dialog

 Input Devices

• Dimensions, devices, & datatypes

 Navigation Mechanisms

• Orientation & interaction

 Customization

 Windowed Views

• Easiest to design.
• Work well with complex UIs (RTS, Simulation games).
• Does not mean feedback elements do not obstruct the main

view, just that they are grouped around the edges of it.

• They can make it seem like looking through a window, in an

FPS style game this could break immersion.

• This does; however, make them well suited for aerial/top

down views.

Windowed View Example

Visual Elements – Main View

 Opaque Overlays

• Main view fills entire screen, feedback elements

superimposed over it creating an “overlay”.

• Elements block all view behind them, best suited for games

that will not suffer from the loss and few visual elements.

• Commonly used in fighting games since the action is

contained in a predetermined screen section.

Opaque Overlay Example

Visual Elements – Main View

 Semi-transparent Overlays

• Simular to opaque overlay; however, you can see through

elements.

• Feels much less intrusive, and great for first person camera

views.

• Care must be taken when designing the feedback elements as

background colouring can bleed through, confusing the information.

Semi-transparent Overlay Example

Visual Elements – Main View

 Indicators

• Relay information quickly (quick glance).
• Can be modelled to match the theme of game.
• Match the style of indicator to the appropriate data.
• Data from indicators fall into 3 categories:

 Large numbers and fractions  Small integers  Symbolic & State based

Display methods for large numbers

 Digits – accurate, compact but hard to convey meaning, and

easy to misread.

 Needle Gauge – Great for mechanical components, readably,

but large and very theme based.

 Power Bar – easy to match theme, easy to read, can convey a

lot of information.

Display methods for small integers (0-5)

 Small multiples – small repeated icon, can match theme

easily. Display methods for Symbolic and state (binary, tri-state etc)

 Coloured lights – efficient, good for on/off or hi/med/low,

doesn’t convey much data .

 Icons – efficient, match theme, but can be ambiguous.  Text Indicators – Represent abstract ideas well, localization

issues, takes more time to get data, can be boring and easily

• verused.

Visual Elements – Feedback Elements Examples

 Mini Maps

• World Oriented – Displays entire world WRT North, contains indicators
• f important areas, character position, direction facing etc.
• Character Oriented (radar) – player is center of map, rotates and moves

with player, viewable area shown, contains compass. Generally take up 5-10% of screen, only show critical info to avoid clutter, placed in a corner, shouldn’t show hidden area. World Oriented are popular with aerial view games like RTS, while Character Oriented are great for FPS.

 Mini Map Examples

Colour

 Allows you to double up on indicators, changing colour of

needle gauge, health bar going from green to red.

 Works best with imprecise data.  Can be used to distinguish elements and ownership, enemy

units red, an npc’s items coloured the same way.

 Also transparent colour changes overlaying the screen used to

relay information.

Character Portraits

 Can be used as a feedback element by show character’s

status.

 Helps player manage/monitor his party.  Can be tied into other feedback elements.

Screen Buttons and Menus

 Use sparingly as they can clutter the game.  Modelled to match graphic theme.  Allow player to control processes to complex for direct

controller input.

Text

 Ensure readability, proper typeface usage, and aesthetics.  Commonly used to:

• Label menus and buttons
• Indicate meaning of elements in game/UI (tooltips)
• Narration
• Dialog
• In game logs, journals, quest descriptions
• Item, character, attribute descriptions and names
• Also could appear in the environment on signs

Text Localization

Preparing game for launch in other languages/regions. Text should be in a .txt file so references can be easily changed for different settings. Account for differences in text size when designing buttons and menus, could completely break the visual and lead to poor navigation. Unless on an in game texture(billboard, sign) do not embed text on pictures since it will make localization harder.

General rules for game audio

 Keep music, sound effects, and recorded speech in separate files and play

• n separate channels, allowing for adjustment of them independently.

 Borrowing techniques from film is often a great idea.  Almost all actions should have some form of audio feedback, especially in

menus so the user doesn't have to guess if the actions are working.

 Audio can also provide feedback along with visual elements to enhance

the experience.

 Vibration also falls under audio feedback.

Ambient Sounds

 Consistent with setting.  Positional audio is not guaranteed but can be very effective.  Background noises should not be overpowering nor should

they be irritating, be careful with how they loop.

 Subtle environmental noises can really add to the atmosphere

• f the game.

Music

 Greatly affect mood and tone of game, more of an art than a

science, again borrow from film.

 Has to stand up to repetition, avoid slow to intense loops.  Layering of music is commonly used, harmonizing pieces

added/removed to fit the changing mood or pace of game.

Narration and Dialog

 Avoid repetitive spoken content, repetition should be short.  Bad writing and voice acting breaks immersion and ruins the

feel of the game.

 Actors should not ever fake accents, and characters accents

and vocal ticks should fit the games setting and theme.

There are several different categories of input devices, which return different dimensions of data and behave differently. Neutral position devices (joystick, dpad) are state control devices that return to an initial state after input. These devices return absolute values, this is a limited range value measured from the neutral position. Devices like a mouse return relative values, they have no neutral position and the values are relative to their previous position. Within these devices you have 3D 2D and 1D input.

Deliver 3 values simultaneously Accelerometers (absolute values)

• Most common in motion based devices (wii).
• Multiple accels. Used to determine how remote is moved in 3D space

based on acceleration of the device.

GPS (absolute)

• Uncommon, mostly found in phone apps.
• Rarely implemented, security and precision issues.

2 data values (generally x and y) D-Pad (absolute)

• 8 directions, less control than joysticks.
• Generally not used for navigation.

Joysticks (absolute)

• Returns x&y tilts, uses these to find direction and rate.
• Well suited for navigation.
• Spring return neutral position makes it poor for precise pointing.

Mouse (relative)

• Unlimited travel in xy plane.
• Lack of neutral position makes it great for pointing but can lead to awkward

navigation especially with vehicles.

Touch Screens

• Can be made to return to neutral or work like mouse.
• Very device dependant, multi-touch and pressure detection.

Binary values, generally a button or switch

 Can return different data depending on what is desired:

• One shot – on press action.
• Repeating – starts at press and repeats till release.
• Continuous – time between press and release.

 Buttons should be assigned in logical ways.  Some buttons are pressure sensitive and have multiple states.  Devices also include knobs, sliders, and wheels.

 Develops a relationship between movement in the controls

and the avatars response.

 Design for the most part is use what works, there are pre

existing expectations on what controls should drive a car, fly a plane – stick with them.

 Must be simplistic, fluid, and consistant.  Broken up into 3 main styles:

• Screen Oriented
• Avatar Oriented
• Point and Click

Screen Oriented Steering

 Common in 2D games, up move up the screen/jump, left moves left etc.  3D games generally up means forward/away from camera,

implementation of camera following direction change differs.

 Not great for games involving precise aiming, but can be helpful in

platformers and other game modes involving aerobatics.

Avatar Oriented

 Only method suited for first person camera games, also great for precise

aiming modes like FPS’s.

 Does not work well with other camera models.

Point and Click

 Great for aerial views or context sensitive camera models.  Useful for party based games or micro/macro management like strategy

and tactics based games.

 Intricate games with a large variety of context sensitive actions and

commands also work well and can be combine with feedback indicators that would not be suited for any other navigation method.

 This method generally requires path finding AI to control movement of

characters and can also use waypoint systems and other advanced control mechanisms.

 Control remapping through a shell menu.

• Generally two actions with the same number of dimensions can have

their input swapped, assuming the input values are of the same type.

 Customizations should be saved and linked to a profile.  Include restore default buttons.

Generally do not stray to far from standards, this can make the player uncomfortable. Look at what the genres top games do and stick with the basic principles.