Game Design 2Lecture 8: Semiotics & Icons

http://www.comu346.com

david.farrell@gcu.ac.uk

2011

Reading

•Duarte p44 - p61 (icon stuff)

•These two short articles:

•http://bit.ly/t5CK8s

•http://bit.ly/tEfaaC

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.

•You can interpret meaning from other stimuli than just text.

•art, music, film, 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 fiction

•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 fingers 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

•can watch Brenda Brathwaite’s talk on gdcvault.com

Game Tells

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

•This is not ‘art’ 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, FCUK have a lot of meaning for people.

•The visual style of a game is important.

Part 2: Icons

•Duarte and 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

Functionally Suggestive

•An icon should suggest its function.

•Icons shouldn’t suggest the name of its function.

Good Icon Design•Avoid text in icons

•text provides no metaphor and requires more effort to scan than a good icon.

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

•users should be able to predict outcome

•Avoid useless information

•if you have an icon for the game’s help files, having a pen would mislead - implying the creation of documents.

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

•Avoid ambiguity

•if two icons could represent same function, one should be redesigned

Abstract Vs Realistic

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

•Other functions are more specific 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 definite 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 - flow charts for instance.

•Often these flows 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 specific location while providing context.

Influence

•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.