Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

Design principles by Mind Map: Design principles
5.0 stars - 1 reviews range from 0 to 5

Design principles

Movement

Ware, Information Visualization, p.166

Attracts attention

Ware, Information Visualization, p.158

A rapidly oscillating/moving target demands more attention than a slower-moving target. Velocity coding urgency

Visual speed modulated by size - larger objects seem to move more slowly than small objects.

Patterns in motion can be used to convey information

Ware, Information Visualization, p.232-239

Causality, People order relationships via space-time, so movement implies causality and a change in the environment., Causality is modulated by timing. Objects can be seen as "triggering" each other, and directionality can be causal cues, "Perceived when objects are sufficiently distinguished to appear as not identical and when at the same time, the sequence is unified to appear as one process"

Motion can convey emotional qualities

Perceived motion highly dependent on context and frame

Ware, Information Visualization, p.233

Rectangular frame provides a strong cue for motion detection. Smaller frames could highlight smaller groups

Motion of elements is modulated by motion of adjacent elements

Spatial grouping

Ware, Information Visualization, p.179: Visual space is divided into regions according to the predominant spatial info and orientation info

Proximity

Things that are close together are perceptually grouped together

"we perceptually group regions of similar element density"

Similarity

Similar elements are grouped together even if they are not proximal

Continuity

More likely to construct visual entities out of continuous elements.

Implies connectedness, which is a fundamental organizing principle

Symmetry

Ware, Information Visualization, p.208

Closure

Closed contour tends to be seen as an object, because of our tendency to close objects with gaps in them

Induces perceptual tendency to divide space into "inside" and "outside"

New node

New node

Color

Color allows the visual system to cluster elements as long as they are not overdone

Ware, Information Visualization, p.146

Colors can be pre-attentively distinct

Ware, Information Visualization, p.168

Distinguishing from surrounding colors easier when objects are grouped into clusters in which that color is rare

Ambiguity

Uncertain interpretation of an image

Perception influenced by experience, recency, familiarity, context. "What we see is determined simply by what we have known before"

Induces subjective judgments on the part of the viewer due to lack of visual pattern

Can affect how hierarchies are percieved

Can be due to...

Isolation

Competing cues

Lack of cues

Unbalanced compositions, Because the elements seem to be subject to change, the pattern doesn't allow perceptive judgment on the meaning. Multiple interpretations are possible., Balanced patterns allow judgment of pattern within context

Common contours

Can be resolved with...

"Sharpening" - changing ambiguous elements into ones with clear asymmetrical dominance

"Leveling" - changing ambiguous elements into ones with clear symmetrical dominance.

2D visual field

Visual units are perceived within visual context

Space is defined by the motor forces that populate it. Elements withdrawing from each other create distance, centrality is established when elements relate to it.

Visual units are perceived as relationships on a visual background. 'Background' can include range of immediate surroundings to the optical field as a whole (p.17). Limitations of the picture surface become the frame of reference.

Planes create implicit boundaries

The 2D plane assumes the center of a spatial field, and "every optical unit appears to advance or recede from it"

Axes are created by the shape of pictoral objects

Frames in application windows create a frame of reference where "every object within the frame tends to be judged relative to the enclosing frame"

Angular space promotes asymmetry

Arnheim, Art & Visual Perception. p.229

Convergent shapes promote unification by creating a central perspective.

Arnheim, Art & Visual Perception, p.229

3D space

Certain optical measures/perceptual gradients create sensation of space. These include size, location, distance, color, value

Arnheim, Art & Visual Perception, p.229 Kepes, Language of Vision, p.23

In a visual field with no definite boundaries, spatial relationships are defined vis-a-vis self.

Kepes, Language of Vision, p.19 Directions are up, down, advance, recess. Ego-centered axes create latent background. If this holds true for a visualization framed by a computer, spatial relationships can be 'broken' vis-a-vis the self, using elements such as panning, zooming, profiles/avatars...decenter the viewer sitting before the monitor, or help pull the viewer into the screen.

Spatial forces are only perceived as opposing other spatial forces. No unit lives alone on the picture-plane, it merges into a whole.

Kepes, Language of Vision,p.83 & 51

In an interactive space, brain constructs patterns primarily with movement and proximity. Frame limitations necessitate that shapes, colors, orientations convey meaning as well

Ware, Information Visualization, p.231

Correspondence of shape more meaningful than correspondence of color in "determining perceived motion"

Motion in space pulls toward and implies a center

Arnheim, Art & Visual Perception, p.309 This principle can be leveraged in decentering a visualization, and decentering can be useful in de-ephasizing axes and frame

Preattentive processing

Ware, Information Visualization, p.151: Perception as instant organization, then constructed into recognition. Kepes, Language of Vision, p. 45-51: "Visual representation operates by means of a sign system based upon a correspondence between the sensory stimulations and the visible structure of the physical world. Space-time events of the physical world must be translated into the relationships of color surfaces on the picture-plane. Man has gradually learned to order certain visible relationships of space-time events; that is, of extent, of depth, and of movement. The historical development of representation shows a gradual conquest of these optical relationships in the terms of the two-dimensional picture surface." p.67

color, motion, spatial grouping, size, line (orientation, length, width, collinearity), numerosity

Ware, Information Visualization, p.166 (numerosity = we can easily see up to four objects in a group)

Distinction

Ware, Information Visualization, p.166

Symbols can be pre-attentively distinct from others using these pre-attentive cues...as long as it's not overdone

Adding highlights to distinguish better than trying to spot the odd one out

Depends on surrounding objects - some elements are more distinct than others. Must be robust against visual noise

But we can still easily/rapidly perceive odd one out in a visual space

Emphasis

Certain elements lend to more or less emphasis

Weight increases with distance, isolation, size

In directions, such as in the upper and right sides of the composition, in vertical directions

Elements free of an anchor have more weight

Isolation increases emphasis

New node

Patterns

A few salient features determine the identity of a perceived object, creating an integrated pattern

Arnheim, Art & Visual Perception, p.29.

Visual organization is a tendency to find the most economic unity in ordering.

Kepes, Language of vision, p.45-51. These optical units are seen as together in spatial configurations: organization and group differences, close to one another, similar in size, direction, shape, closure.  

Overlapping intensifies relationships between elements by creating a pattern. This helps visual grouping.

Arnheim, Art & Visual Perception,p.83 Good way to group and relate elements in the viz, but have to be careful to obscure as little information as possible

Patterns tell us how to organize data so important structures are perceived

Ware, Information Visualization, p.203

Eye strives for balance and constructs patterns to do so

New node, New node

Interactivity

Ware, Information Visualization, ch. 10

Principles based on real-world metaphors

Spatial navigation, Requires perspective cues to provide sense of scale and distance, Potential metaphors as instructions include world-in-hand, eyeball-in-hand, walking, etc

Wayfinding, Involves information about key landmarks, knowledge about routes and landmarks, and cognitive spatial maps of distance, People are bad at finding relative positions of objects in different regions, but good at relative positions within a given region, User location and direction of view should be indicated

Landmarks, Should be enough landmarks that a small amount are visible at all times, Each landmark should be visually distinct from others, Landmarks should be visible and recognizable at all navigable scales

Outside metaphor, you have the focus-context problem: how to find detail in a larger context?

Ware, Information Visualization, p.355

Structural scales allow different levels of detail

Selective zooming: giving more room to data of interest and decreasing space given away from those regions

Multiple windows: overview/detail method. Good to connect boundaries of zoom with source image in larger view.

Rapid zooming: allows user to manipulate focus and context - even though they are not together, the user unifies in their mind

Ellision: parts of a structure are hidden until needed. Collapsing. Allows visual chunking

Mappings between data and visual representation need to be fluid and dynamic w/r/t spatial and temporal feedback

Ware, Information Visualization, p.362