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

Game Design 2Lecture 6: Semiotics & Icons

http://gcugd2.com [email protected]

2013

Sunday, 3 November 13

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, 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

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



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

Education

game design

rules of icon design

abstract abstract icons

games design

good icon

flow linear flow

circular flow flow

design visualrepresentations