Module 10

Question 1

Visual Variables

Answer 1

Shape, size, position, orientation, color, texture, etc.

Question 2

Organizational Relations Between Elements

Answer 2

Balance, structure, proportion, etc.

Question 3

Visual Syntax

Answer 3

Rules for assembling elements within design language

Question 4

Goals for Visual Design

Answer 4

• Successfully transmit info
• Present coherent and consistent design that reduces ambiguity and potential confusion
• Reduce visual search time through layout and organization
• Create desired emotional reaction through aesthetic choices

Question 5

General Guidelines for Visual Design

Answer 5

1. Elegance & Simplicity
2. Reduce a Design to its Essence
3. Avoid Excessive Skeuomorphism

Question 6

Benefits of Simplicity

Answer 6

1. Approachability
2. Immediacy

Question 7

Approachability

Answer 7

Rapidly understood affordances, allowing glanceable understanding of possible interactions

Question 8

Immediacy

Answer 8

Greater emotional impact because interactions can be quickly understood

Question 9

Steps to Reduce a Design to its Essence

Answer 9

1. Determine essential qualities and info to be converged
2. Critically examine each element and ask how design would suffer without it
3. Try removing elements - see what happens

Question 10

Skeuomorphism

Answer 10

Making visual design resemble reality

Question 11

Contrast

Answer 11

Visually noticeable distinctions along a common visual dimension

Question 12

Proportion

Answer 12

Ratio and balance between elements

Question 13

Scale

Answer 13

Relative size or magnitude of element in comparison to related elements

Question 14

Emphasis

Answer 14

Contrasts can emphasize important elements or areas and add visual interest by creating tension and drama

Question 15

Principles of Scale, Contrast, and Proportion

Answer 15

1. Clarity
2. Harmony
3. Activity
4. Restraint

Question 16

Clarity

Answer 16

Contrasts should be clear and easily differentiated, not slight and subtle

Question 17

Harmony

Answer 17

Proportions and ratios should be harmonious

Question 18

Activity

Answer 18

Use contrasts to maintain orientation and context within design

Question 19

Restraint

Answer 19

Contrasts should be conscious, strong, few in number, and never overwhelming

Question 20

Layers

Answer 20

Contrasting color, value, texture can segregate info into separate layers.

Supports overlapping info in displays, allowing selective processing of specific sets of elements.

Question 21

Steps to Create Layers

Answer 21

1. Group items into categories based on intended use
2. Determine rank and importance of groups
3. Use perceptual variables (size, value, hue, etc.) to establish layering effect
4. Maximize differences between groups while minimizing differences within groups
5. Use squint test to ensure elements in group remain together but visually separated

Question 22

Gestalt

Answer 22

Psychology of perception

Question 23

Gestalt Principle of Proximity

Answer 23

Elements associated most strongly with nearby elements

Question 24

Gestalt Principle of Similarity

Answer 24

Elements are associated more strongly when they share common visual attributes than when they differ

Question 25

Gestalt Principle of Continuity

Answer 25

Human visual system prefers the simplest physical explanation of a complex figure

Question 26

Gestalt Principle of Closure

Answer 26

Human visual system prefers to interpret figures as complete, even when information is missing

Question 27

Gestalt Principle of Area

Answer 27

Humans prefer to interpret smaller overlapping elements as a figure and larger elements as ground underneath

Question 28

Gestalt Principle of Symmetry

Answer 28

Humans prefer to interpret an ambiguous form as multiple symmetric elements

Question 29

Grouping

Answer 29

Binding UI elements tightly together while distinguishing them from surrounding controls

Question 30

Grouping can be achieved through:

Answer 30

- Bounding boxes (not good) - Negative space and contrasts - Arrangements and alignments