IF5170 Data Visualization

Semiotic of Graphics
Gestalst Principles

Saiful Akbar
Institut Teknologi Bandung © 2019
Objectives

• Student are able to explain the principle of

Semiotic of Graphic
• Students are able to explain Gestalt
Principles/Laws
• Students are able to use the principles for
constructing and analyzing a data visualization.

9/3/2019 SA/IF5170/Pengantar Visualisasi Data 2

Referensi
• [3] Information visualization: perception for design, Colin Ware, Morgan
Kaufmann, 2004
• Ch. 6 (Gestalt Laws)
• [1] Visualizing data, Ben Fry, O'Reilly Media, Inc., 2008
• Ch. 1-2, 9-10

• http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/g
estaltprinc.htm

9/3/2019 SA/IF5170/Pengantar Visualisasi Data 3

Semiotics of
Graphics

• The study of
symbols
and how
they convey
meaning
(a.k.a Semiology
of Graphics)

9/3/2019 SA/IF5170/Pengantar Visualisasi 4

Data
Pictures as Sensory Languages
• Pictures are “every bit as arbitrary as words” vs “there may be a
measure of similarity between pictures and the things that they
represent”

9/3/2019 SA/IF5170/Pengantar Visualisasi Data 5

Sensory vs Arbritrary Representation
• Sensory: • Arbitrary:
• Understanding – Hard to learning
without training – Easy to forget
• Resistance to
instructional bias – Embedded in
culture &
• Sensory immediacy
applications
• Cross-cultural
validity – Formally powerful
– Capable of rapid
change
9/3/2019 SA/IF5170/Pengantar Visualisasi 6
Data
Understanding without training

9/3/2019 SA/IF5170/Pengantar Visualisasi 7

Data
Resistance to instructional bias

9/3/2019 SA/IF5170/Pengantar Visualisasi 8

Data
Sensory Immediacy

9/3/2019 SA/IF5170/Pengantar Visualisasi 9

Data
9/3/2019 SA/IF5170/Pengantar Visualisasi 10
Data
Gestalt Principles
• These theories attempt to describe how people tend to organize
visual elements into groups or unified wholes when certain
principles are applied.
• proximity, similarity, connectedness, continuity, symmetry, closure,
relative size, and figure-and-ground

9/3/2019 SA/IF5170/Pengantar Visualisasi Data 11

Gestalt Laws
• Proximity
• Proximity occurs when elements are placed close together. They tend to be
perceived as a group.

9/3/2019 SA/IF5170/Pengantar Visualisasi Data 12

Gestalt Laws
• Similarity
• Similarity occurs when objects look similar to one another. People often
perceive them as a group or pattern.

9/3/2019 SA/IF5170/Pengantar Visualisasi Data 13

Gestalt Laws
• Connectedness

9/3/2019 SA/IF5170/Pengantar Visualisasi Data 14

Gestalt Laws
• Continuity
• Continuation occurs when the eye is compelled to move through one
object and continue to another object.

9/3/2019 SA/IF5170/Pengantar Visualisasi Data 15

Gestalt Laws
• Symmetry

9/3/2019 SA/IF5170/Pengantar Visualisasi Data 16

Gestalt Laws
• Closure
• Closure occurs when an object is incomplete or a space is not completely
enclosed. If enough of the shape is indicated, people perceive the whole by
filling in the missing information

9/3/2019 SA/IF5170/Pengantar Visualisasi Data 17

Gestalt Laws
• Figure-and-Ground
• The eye differentiates an object form its surrounding area. a form,
silhouette, or shape is naturally perceived as figure (object), while the
surrounding area is perceived as ground (background).
• Balancing figure and ground can make the perceived image more clear.
Using unusual figure/ground relationships can add interest and subtlety
to an image.

9/3/2019 SA/IF5170/Pengantar Visualisasi Data 18

Gestalt Laws
• Figure-and-Ground

9/3/2019 SA/IF5170/Pengantar Visualisasi Data 19