Game Design 2 (2013): Lecture 6 - Icons and Semiotics in Game UI Design

2013

Game Design 2
Lecture 6: Semiotics & Icons

http://gcugd2.com
Sunday, 3 November 13

david.farrell@gcu.ac.uk

Reading
• Duarte p44 - p61 (icon stuff)
• These two short articles:
• http://bit.ly/t5CK8s (Bejewelled 1)
• http://bit.ly/tEfaaC (Bewjewlled 2)


Semiotics
A sign is “something that stands for
something to someone in some capacity”


Literacy
• Literacy is normally thought of as the ability
to read and write.

• But - you can interpret meaning from other
stimuli than just text.

• art, music, ﬁlm, fashion, advertising

• Many mediums convey more through
images than text


Reading & Writing
• You don’t just read, you read or write
something in some way.

• newspaper vs rap
• essays vs ﬁction

• Each domain has its own rules &
requirements

• These can be considered separate literacies

What does this mean?
“The guard dribbled down court, held up
two ﬁngers and passed to the open man.”


Semiotic Domains
• Within each domain, all sorts of things can
take on meaning.

• Someone can be musically literate without
knowing how to read notation.

• they are part of a different semiotic
domain


Games Literacy


Game Domains
• Game literacy is really an umbrella term for
many sub domain literacies.

• FPS game domain expectations of a box
would differ from a platform game


Short Cut
• By understanding the meaning of symbols,

the designer can avoid the need to explain
or teach the player what something does.


Cultural Semiotics
• Swastika symbol has many meanings but in
western culture the association with
Naziism is overwhelming.

• Possible to cause offence or create meaning
where none intended.


• Escapist discussed train
• http://bit.ly/18QuKV9
• can watch Brenda Brathwaite’s talk on the
GDC Vault

• http://bit.ly/1aV95jj


Game Tells
• The decisions you make about your game’s
art style convey information to the
potential player.

• This is not aesthetics this is games design.


Sci Fi Corridors
• Sci Fi corridors and doors often have
angled or curved walls.

• In the future, we’ll probably have

rectangular walls but the art design isn’t
trying to be realistic, it’s trying to
communicate.

• Desaturated, gloomy colours are often used
to imply a grim future environment.


Association
• People associate and identify themselves
with certain things.

• Blue for boys, pink for girls
• Brands like Apple, The Hundreds have a lot
of meaning for people.

• The visual style of a game is important.

Part 2: Icons
• Reading:
• Duarte
• Gnome Project
• Rule of thumb: If you have to think

about an icon to ‘get it’, the metaphor is
too complex.
http://developer.gnome.org/projects/gup/hig/2.0/icons-design.html


Rules of Icon Design
• 1: An icon should suggest its function.
• 2: Icons shouldn’t suggest the name


• 3: Avoid text in icons
• text provides no metaphor and requires
more effort to scan than a good icon.

• 4: Don’t rely on information users won’t
have

• users should be able to predict outcome

• 5: Avoid useless information
• if you have an icon for the game’s help
ﬁles, having a pen would mislead implying the creation of documents.


• 6: Icons which work as silhouettes work
better than those which require detail

• 7: Avoid ambiguity
• if two icons could represent same

function, one should be redesigned


Abstract Vs Realistic
• It is challenging to design visual

representations of some concepts.

• Some game functions may represent abstract
notions and suit an abstract icon.

• Other functions are more speciﬁc and

realistic and don’t require a distant metaphor.


Abstract

• Abstract icons are usually shapes that
combine to show relationships.


Abstract: Flow
• Linear Flow: Flow construction that

illustrates a process with a deﬁnite start
and end point.

• The Diagram can follow a straight line or
be a series of steps along a line.


Circular Flow
• Flow that represents a continuous process
without an end point.

• Any closed loop shape could work.


Divergent and Convergent
• Flow that occurs when two or more

elements either collide or separate out
form each other as if splitting off.


Multidirectional
• Flow that expresses complex relationships
- ﬂow charts for instance.

• Often these ﬂows result from a

combination of the preceding types.


Abstract: Structure
• Matrices - structures that compare data
with at least two different data sets.

• One set of data can even be a yes / no set
of data as in a checklist.


Abstract: Trees
• Structures that indicate clear hierarchy.
• Relationships can be expressed between
any number of objects.


Abstract: Layers
• Structures that show elements that stack
or build on each other.

• They can depict both hierarchy and
sequence.


Abstract: Cluster
• Overlapping - Clusters that overlap and
indicate shared sets, interest, or
responsibility.

• Sometimes they form a new shape or area
within the overlap.


Closure
• Clusters that emerge when shapes combine
to create another shape.

• This principle of Gestalt psychology can be
useful when expressing the idea that “the
sum is greater than the parts.”


Enclosed
• Clusters that are enclosed and contain at
least one element that envelops another.

• Grouping in this way indicates which

elements are part of a higher order, and
which stand alone.


Linked
• Clusters that are linked as a unifying
element to group items.

• A unifying element links related groups of
items.

• It could be a line, shape, or connector of
any kind.


Abstract: Radiate
• From a point radiation occurs when a

single directional “burst” emerges from
either a graphic or point that has a clear
point of origin.


With a Core
• creates a parent - child relationship.
• The outer elements connect with a central
element to hold the family together.


Without a Core
• Implies that the elements connect through
proximity or mutual attraction.

• They are tied to one central area.


Realistic: Pictorial
• Process pictorials are snapshots of how

things work sequentially as a product or
system.


Reveal
• An illustration of hidden information shown
by slicing, peeling or otherwise exposing a
thing’s inner workings


Direction
• Showing where to go or how to get
somewhere.

• Usually feature a starting location and

destination, and may contain directions.


Location
• Showing where something is in the context
of geography, topography, system, or shape.

• These diagrams call attention to a speciﬁc
location while providing context.


Inﬂuence

• Demonstrating the resulting impact of
various interacting elements.


Realistic: Displaying Data
• Comparison icons juxtapose two or more

sets of information to illustrate differences.

• Bar graphs, pie charts and other methods
are suitable.


Trend
• One parameter of data represents time, to
indicate a trend.

• Change over time is the most important
aspect of these diagrams.


Distribution
• Expression of a pattern in seemingly
disparate data.

• Whether a scatter plot, bell curve or other
model, distribution diagrams correlate
singular instances into a larger pattern.


Game Design 2 (2013): Lecture 6 - Icons and Semiotics in Game UI Design

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Game Design 2 (2013): Lecture 6 - Icons and Semiotics in Game UI Design

Similar to Game Design 2 (2013): Lecture 6 - Icons and Semiotics in Game UI Design (8)

More from David Farrell

More from David Farrell (11)

Recently uploaded

Recently uploaded (20)

Game Design 2 (2013): Lecture 6 - Icons and Semiotics in Game UI Design