UI design for games

Report
UI design for games
Where is the "chrome" for games?
Character builders
Inventory/resource management
Leaderboards and trophy rooms
Level/mission/map navigation
Start/pause/save/exit controls
Character Builders
Ref: http://www.charactercreator.net
Inventory systems
One platformer dev's history:
http://electromagneticproject.wordpress.com/2
012/03/09/menuinventory-design-in-games
And her progress:
http://electromagneticproject.wordpress.com/2
012/04/12/updates-and-remodels/
Leaderboards
Level/mission navigation
Start/pause/save/exit controls
Diagetic and Spatial and Meta:
Oh My!
2 Key Gameplay UI Questions:
1. Is the UI element part of the game story?
2 Key Gameplay UI Questions:
2. Is the UI element part of the game world?
What is Diegesis?
Diegesis
 By utilizing the concept of diegesis one can define
what is and what is not part of a virtual world, and
what the characters inhabiting this alternative
world can and cannot see.
 In movies, non-diegetic elements are for example
the subtitles or the musical score, while diegetic
elements are the elements that make up the
world that the film characters live and act in.
Movie Time
Diegetic and Non-Diegetic Elements
Quizlette
You’re watching a live play in a
theater. It’s about a 19th-century
family sitting in their house doing
various things.
1. Name some diegetic elements in
the play.
2. Name some non-diegetic
elements.
Diegetic elements
1. Is the UI element part of the
fictional game story? Yes
2. Is the UI element drawn as part of
the game space? Yes
Diegetic elements are UI elements
that are both part of the spatial and
the fictional game world; entities that
exist in the game world, and are
presented as they were viewed by the
player character. Few games seem t o
explore diegetic user interface
elements in a manner similar to Farcry
2 or Dead Space (see 6.2).
Signifiers
Signifiers are a sub-group of diegetic
elements, and subsequently both part
of the 3D geometry and the fictional
world of the game. Rather than
conveying information in a direct
manner like normal diegetic UI
elements, signifiers provide the player
with subtle informational cues for the
player to interpret by logical
reasoning. A signifier is separated
from the object that it provides
information about.
“Smoke is a signifier of fire, an empty
train station platform signifies that
the train has just left, and a pool of
blood is a signifier for danger."
Meta representation
elements
1. Is the UI element part of the
fictional game story? Yes
2. Is the UI element drawn as part of
the game space? No
Meta-representations are
information-carrying entities existing
in the fictional game world, but
visualized in a manner not spatial
regarding the game world. Looking at
the subjective game study, metarepresentations could be exemplified
by the Grand Theft Auto IV cell phone,
which is a part of the player avatar’s
inventory but presented in an overlay
manner.
Meta perception
elements
1. Is the UI element part of the fictional
game story? Maybe
2. Is the UI element drawn as part of the
game space? Yes
Meta-perception elements reside in the
non-spatial part of the design space, and
make up for the broken perceptual link
that occurs when a player is linked to a
virtual avatar through a display, an audio
system and a controller . Typically, metaperception conveys information about
one’s in-game internal status in a way
reminiscent of some kind of perception if
it were to be visualized graphically.
Conventionally, meta-perception is not
connected to the game fiction, although
games like Killzone 2 prove that the
fictional world can be used (using blood
to inform the player of health, rather
than an abstract visualization).
Meta-perception is not restricted to the
visual part of the user interface. For
example, heartbeat audio can be used to
convey a critical level of health, and a
similar approach can be taken if the
haptic information channel was to be
used for the same purpose, by utilizing
pulsating controller vibrations in a
heartbeat manner.
Spatial/geometric
elements
1. Is the UI element part of the
fictional game story? No
2. Is the UI element drawn as part of
the game space? Yes
Spatial/geometric elements are UI
elements presented in the 3D
geometry without being an entity of
the fictional game world. Examples of
geometric representations are the
character outlines of Left 4 Dead, the
runner vision or checkpoint beacons in
Mirror's Edge, or the mission briefings
projected onto the game
environments in Splinter Cell:
Conviction.
Non-diegetic elements
1. Is the UI element part of the
fictional game story? No
2. Is the UI element drawn as part of
the game space? No
Non-diegetic elements are visual UI
elements residing in the non-fictional,
non-spatial part of the design space.
These are elements presented in an
overlay manner, and this type of
element is what conventionally makes
up most of the user interface of FPS
games.
Quizlette 2
1. Name some diegetic elements.
2. Name some non-diegetic
elements.
3. Name some
meta-representation elements.
4. Name some meta-perception
elements.
5. Name some spatial/geometric
elements.
Still work both GUI aspects:
Visual organization
 “Visual contrast and visual
hierarchy to create layouts
that guide users through
content
(i.e. work the Gestalt
principles and CRAP)
Personality (look & feel)
 “Selecting the right fonts,
colors, shapes, textures,
and images to
communicate an
appropriate message to
your target audience

similar documents