Scale, Contrast & Proportion

(material from: Designing Visual Interfaces by Mullet and Sano)
 

need to achieve a balance in the relationsips between elements in the design

Scale - relative size or magnitude of a given design element in relation to other design elements - always relative

Contrast - noticeable differences along a common visual dimension (shape, size, color, position, orientation, movement)

Proportion - ratios of dimensions

Differentiation - contrast provides differentiation

Emphasis - scale and contrast are used to emphasize important elements of the design

Activity - scale and contrast move the viewer's eye through the composition in a predictable sequence

Interest - scale and contrast add visual interest
 

Visual contrasts established by manipulating perceptual qualities

the following are retinal variables - perceived immediately and effortlessly

• Size
• Value
• Orientation
• Texture
• Shape
• Position
• Hue (not in the figure below)

Information represented in a visual display is characterized by

• Number of dimensions (things being measured)
• Length of each dimension (number of possible values in each dimension)
• Scale of measurement for each dimension
  • nominal (associative, selective)
  • ordered
  • quantitative

Nominal - categories

In associative perception viewer ignores variation in one visible dimension in reading the remainder of the display

Associative variable does not affect the visibility of other dimensions (e.g. we can recognize hue regardless of orientation.) Variable is dissociative if visibility is significantly reduced for some values along that dimension (hard to determine hue of a very thin line or small dot)

Hue, Orientation, Texture, Shape, Position are associative

Size and Value are dissociative - they dominate perception and disrupt processing of other correlated dimensions
  

In selective perception viewer attempts to isolate all instances of a given category and perceptually group them into a single image. Task is to ignore everything but the target value on the dimension of interest - to see at a glance where all the targets are within the display
  

All the variables except shape are selective

Orientation is selective when represented by points or lines but not when represented by an area

 

In ordered perception the viewer must determine the relative ordering of values along a perceptual dimension. Given any two visual elements, a natural ordering must be clearly apparent so the element representing 'more' of the corresponding quality is immediately obvious

Position, size, and value are ordered

Texture is ordered to the extent that value covaries with the granularity of the texture

In quantitative perception the viewer must determine the amount of difference between two ordered values. The user does not need to refer to an index or key - the relative magnitudes must be immediately apparent
 

Position and size are quantitative

Visual variables differ substantially in length-

• Shape is longest - almost infinite variety
• Position in 2D space is limited by display size and resolution, but very fine grained
• Size and color 10-15
• Value and texture support less than 10
• Orientation is shortest - confusion arises if more than 4 levels are attempted

Principles:

• Clarity
• Harmony
• Activity
• Restraint

Common Errors:
 

Insufficient contrast

 

Excessive contrast

Visual interference

Spatial tension

Overextension

Awkward dimensions

Techniques:

 Establishing perceptual layers

1. Group each item of information intoa small number (7+/-2) of categories according to its origin or intended use. A group must be established for any group of items that will need to be processed independently. Each item must be assigned to at least one group.
2. Determine the rank or importance of the various groups and organize them into an even smaller number (e.g. 3-5) of echelons based on this ranking
3. Use appropriate perceptual variables to establish the layering effect. Size and value can establish clear perceptual hierarchies, while hue is most effective for non-hierarchical grouping
4. Maximize the perceptual difference between groups while minimizing the difference within groups
5. Use the squint test to ensure that elements in the same layer group together as a unit, but that group itself can be visually separated from the rest of the display

Sharpening visual distinctions

1. Identify the ranking that need to be established across the groups of information (see layering)
2. Determine the range of variation (e.g. minimum and maximum values or sized, number of colors, etc.) available and use as much of it as possible in the resulting code.
3. Use logarithmic rather than linear scaling across the visible range to ensure the discriminability of contrasts at large absolute magnitudes. Doubling each successive level is usually sufficient.
4. Use the squint test to ensure that at least the first two or three echelons can be easily recognized 'at a glance.'

Integrating figure and ground

1. Determine the overall size of the figure/ground combination. Note that desgins will usually require adjustment as the overall size is changed, since critical internal relationships are disrupted when a figure is scaled uniformly. Also note that the size of either figure or ground may be adjusted to produce the necessary scale relationships
2. Equalize the visual weight of figure and ground. Use the squint test to check that neither the positive or negative space dominate.
3. Provide enough space around the margins of the figure to eliminate unwarrented visual tension. This is often the most difficult aspect of the technique in GUI design, particularly since screen real estate is such a precious resource.
4. Position the figure correctly within the ground. The figure should usually be centered within the ground unless communication requirements dictate otherwise. Use the squint test to ensure that the figure still appears to be centered.

Here is some informative text ... its all one paragraph, all the same font, the same font size:

ILLINOIS STATE FORECAST, NATIONAL WEATHER SERVICE CHICAGO IL, 430 PM CST TUE MAR 23 1999 TONIGHT...CLEAR NORTH...CLEARING CENTRAL...MOSTLY CLOUDY FAR SOUTH. LOWS FROM THE UPPER 20S FAR NORTHWEST TO NEAR 40 FAR SOUTH. WEDNESDAY...MOSTLY CLOUDY NORTHEAST...PARTLY SUNNY ELSEWHERE. HIGHS NEAR 40 NORTH...45 TO 50 CENTRAL AND NEAR 60 FAR SOUTH. WEDNESDAY NIGHT...PARTLY CLOUDY. LOWS IN THE 20S NORTH TO 30S SOUTH. THURSDAY...PARTLY OR MOSTLY SUNNY. HIGHS FROM NEAR 40 NORTH TO THE 5OS SOUTH. EXTENDED FORECAST... FRIDAY THROUGH SUNDAY...DRY WITH A SLOW WARMING TREND. LOWS FROM THE 20S NORTH TO 30S SOUTH FRIDAY...WARMING TO THE 30S NORTH TO 40S SOUTH SUNDAY. HIGHS FROM THE 40S NORTH TO 50S SOUTH FRIDAY...GRADUALLY WARMING TO THE MIDDLE 50S NORTH TO LOWER 60S SOUTH BY SUNDAY.

1 - Given a blank page, and without changing the font size, lay out this text on the page in a better format

2 - Given another blank page, and starting from the original paragraph above, and given the ability to change the font size, lay out this text on the page in a better format