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.
Visual Elements – Main View Windowed View Example
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.
Visual Elements – Main View Opaque Overlay Example
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.
Visual Elements – Main View Semi-transparent Overlay Example
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 overused.
Visual Elements – Feedback Elements Examples
Mini Maps ◦ World Oriented – Displays entire world WRT North, contains indicators of 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 on 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 of 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.
Recommend
More recommend
