Design principles

Get Started. It's Free
or sign up with your email address
Design principles by Mind Map: Design principles

1. Spatial grouping

1.1. Proximity

1.1.1. Things that are close together are perceptually grouped together

1.1.2. "we perceptually group regions of similar element density"

1.2. Similarity

1.2.1. Similar elements are grouped together even if they are not proximal

1.3. Continuity

1.3.1. More likely to construct visual entities out of continuous elements.

1.3.2. Implies connectedness, which is a fundamental organizing principle

1.4. Symmetry

1.5. Closure

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

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

1.6. New node

1.6.1. New node

2. Ambiguity

2.1. Uncertain interpretation of an image

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

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

2.1.3. Can affect how hierarchies are percieved

2.2. Can be due to...

2.2.1. Isolation

2.2.2. Competing cues

2.2.3. Lack of cues

2.2.4. Unbalanced compositions

2.2.4.1. Because the elements seem to be subject to change, the pattern doesn't allow perceptive judgment on the meaning. Multiple interpretations are possible.

2.2.4.2. Balanced patterns allow judgment of pattern within context

2.2.5. Common contours

2.3. Can be resolved with...

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

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

3. 2D visual field

3.1. Visual units are perceived within visual context

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

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

3.2. Planes create implicit boundaries

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

3.2.2. Axes are created by the shape of pictoral objects

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

3.3. Angular space promotes asymmetry

3.4. Convergent shapes promote unification by creating a central perspective.

4. 3D space

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

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

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

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

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

4.5. Motion in space pulls toward and implies a center

5. Patterns

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

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

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

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

5.5. Eye strives for balance and constructs patterns to do so

5.5.1. New node

5.5.1.1. New node

6. Movement

6.1. Attracts attention

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

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

6.2. Patterns in motion can be used to convey information

6.2.1. Causality

6.2.1.1. People order relationships via space-time, so movement implies causality and a change in the environment.

6.2.1.2. Causality is modulated by timing. Objects can be seen as "triggering" each other, and directionality can be causal cues

6.2.1.3. "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"

6.2.2. Motion can convey emotional qualities

6.3. Perceived motion highly dependent on context and frame

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

6.3.2. Motion of elements is modulated by motion of adjacent elements

7. Color

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

7.2. Colors can be pre-attentively distinct

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

8. Preattentive processing

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

8.2. Distinction

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

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

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

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

9. Emphasis

9.1. Certain elements lend to more or less emphasis

9.1.1. Weight increases with distance, isolation, size

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

9.1.3. Elements free of an anchor have more weight

9.1.4. Isolation increases emphasis

9.2. New node

10. Interactivity

10.1. Principles based on real-world metaphors

10.1.1. Spatial navigation

10.1.1.1. Requires perspective cues to provide sense of scale and distance

10.1.1.2. Potential metaphors as instructions include world-in-hand, eyeball-in-hand, walking, etc

10.1.2. Wayfinding

10.1.2.1. Involves information about key landmarks, knowledge about routes and landmarks, and cognitive spatial maps of distance

10.1.2.1.1. People are bad at finding relative positions of objects in different regions, but good at relative positions within a given region

10.1.2.2. User location and direction of view should be indicated

10.1.3. Landmarks

10.1.3.1. Should be enough landmarks that a small amount are visible at all times

10.1.3.2. Each landmark should be visually distinct from others

10.1.3.3. Landmarks should be visible and recognizable at all navigable scales

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

10.2.1. Structural scales allow different levels of detail

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

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

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

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

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