by Murray Turoff

Department of Computer and Information Science
New Jersey Institute of Technology
Newark NJ, 07102

TEL: 973 596 3399
email: turoff@vc.njit.edu
homepage: http://eies.njit.edu/~turoff/

© Copyright 1998 Murray Turoff

TABLE OF CONTENTS SET 2

Visibility (4)
Direct Manipulation (25)
Metaphors & Signs (39)
Typology & Symbols (66)
Color (121)
Proportions (169)
 

VISIBILITY (4)

© copyright 1998 Murray Turoff

Responses to limitations of command-based interfaces
 

Limitations	Evolutionary Response	Revolutionary? Response
Keyboard entry	Command abbreviation:   macros and scripts	Menus  depth & breath)
Remembering commands	Help queries	Menus  (rich systems)
Remembering system state	State queries	WYSIWYG  (system opacity)
Verb-object orientation	Object-verb with selection queries	Direct Manipulation  (lacks leverage)

 

Interface Evolution I (Nielson 1993)
 

	Current Interface Generation	Next-Generation Interface
User focus	Controlling computer	Controlling task domain
Computer’s role	Obeying orders literally	Interpreting user actions and doing what it deems appropriate.
Interface control	By user (interface is explicitly made visible)	By computer (since user does not worry about the interface as such)
Syntax	Object-action composites	None (single user token constitutes an interaction unit)
Object visibility	Essential for the use of direct manipulation	Some objects may be implicit and hidden
Interaction stream	Single device at a time	Parallel streams from multiple devices

 

Interface Evolution II (Nielson 1993)
 

	Current Interface Generation	Next Interface Generation
Bandwidth	Low: keyboard & mouse	High to very high (virtual realities)
Tracking feedback	Possible on lexical level	Needs deep knowledge of object semantics
Turn-taking	Yes, user and computer wait for each other	No: user and computer both keep going
Interface locus	Workstation screen, mouse, and keyboard	Embedded in user’s environment, including entire room and building
User programming	Imperative and poorly structured macro language	Programming by demonstration and non imperative, graphical language
Software packaging	Monolithic applications	Plug and play modules

 

HISTORY REPEATS I

Grass is always greener in the future but not different from past.
Computer control and task domain a problem of functional and system opacity
Interface control must extend to asynchronous process control (e.g. time sharing and operating system control)
Objects and tokens must be observable via status when desired.
Interaction stream is multitasking oriented

HISTORY REPEATS II

Bandwidth is not output but input constrained (leverage and law of requisite variety)
Deep object knowledge needs to be matched to expert task domain knowledge. Experts can manipulate abstractions of task domain.
Turn-taking becomes asynchronous communication process.
User programming via better languages, agents, modeling and computer literacy.
Modular user libraries was first approach to interactive systems in the sixties.
 

Mac vs. Anti-Mac Objectives
 

Mac	Anti-Mac
Metaphors	Reality
Direct Manipulation	Delegation
See and Point	Describe and Command
Consistency	Diversity
WYSIWYG	Represent Meaning
User Control	Shared Control
Feedback and Dialog	System Handles Details
Forgiveness	Model User Actions
Aesthetic Integrity: simple, clean	Graphic Variet: rich understandable complexity
Modelessness	Richer Cues

Mac and Anti Mac Comparison I (Gentner, Nielson, 1996)
 

Mac Interface	Anti Mac Interface
Users have no previous computer experience	Users have grown up with computers (P)
Office automation, productivity enhancement objectives	Work, play, Groupware, embedded and ubiquitous in all things (P)
Limited computer power	Unlimited computer power(!?)
Impoverished communications bandwidth	Rich communications bandwidth (TS)
Stand alone system that is stable unless the user decides to make a change	Connected system subjected to constant change. (TS)

 

Mac and Anti Mac Comparison II (Gentner, Nielson, 1996)
 

Mac Interface	Anti Mac-Interface
Direct manipulation of icons	Language (Hmmmm!)
Weak object orientation (Small number of large objects with very limited attributes)	Strong object orientation (Large number of small objects with rich attribute sets)
"Finder" (visible file system) is unifying home base, and files are the basic interaction object	Personal information (retrieval as unifying principle with atomic information units as basic interaction object.
Surf your hard drive	Information comes to you(!!)
The power to be your best.	You won’t always have to work that hard.(!!)

GUI Challenges

Graphical Modeling: larger number of interface components to manage
Interface Dialog Management: presentation and organization of components
Allowing Leverage: providing higher level abstraction and lower level manipulability
Data relationships: relating data to graphical components and visualization
 
 

Metaphors

Metaphors evolve to become models that provide a true representation of the target object
Takes place by the user learning from experience.
Horesless carriage becomes automobiles
A natural human process

Direct manipulation

Direct Manipulation only needs the use of abstract objects to provide leverage.
WYSIWYG: What You See Is What You Get!
WYSIATI: What you See Is All There Is!
WYSIWYG can encourage system opacity (e.g. HTML editors)

User Control

Will always be important
In dynamic environments of processes and agents:
Control provided over behavior of processes and agents
Need for observation of "Law of Requisite Variety"
Shared control for group activities the unexplored problem

 
VISIBLE LANGUAGE

Layout
Typography
Color and Texture
Metaphors
Imagery: sign, icons, symbols
Forms
Animation
3-D
Sound
Devices & Instruments

SCREEN AND GRID LAYOUT

Identify components to be arranged
Identify display space constraints
Explore interrelation of components
Explore interrelation of components
Develop single basic layout scheme
Determine basic units (e.g. text size)
Determine horizontal subdivisions
Determine vertical subdivisions
Determine angular lines
Determine overlaps, foreground, background

 GOALS OF SCREEN LAYOUT

Structure display by clarifying relation of windows, menus, and control panels.
Isolate Control, data, and status or feedback regions within display
Ensure that reoccurring but transient objects appear in predictable locations.

2 AND 1/2 DIMENSIONS

Color depth
Drop shadows
Beveled edges
Highlighting and low lighting
Brightness levels
Shrinking and growing
Texture
Size
Linear perspective
Aerial perspective

REASONS FOR VISUAL FORMALISMS

Exploitation of human visual skills
Manipulability
Specializability
Broad applicability
Familiarity
 
VISUAL MIMIC (SPREADSHEET) BENEFITS

Task-specific semantic primitives
Simple control structures
Behavioral complexity (richness) via interaction of small pieces of code attached to cells (micro object model)
Built in top level control flow
Good visualization of program state
Problems

Graphical Modeling: larger number of interface components to manage
Interface Dialog Management: presentation and organization of components
Allowing Leverage: providing higher level abstraction and lower level manipulability
Data relationships: relating data to graphical components and visualization

DIRECT MANIPULATION (25)

© copyright 1998 Murray Turoff

DISTANCES

Between users cognitive view and the way it is done

ENGAGEMENT CONVERSATION MODEL
 

Distance to user goals \	Semantic Control	Direct Manipulation Control
Large (Expert)	Low level language:  Pascal, C, APL	low level model:  Violin, Equations of a physical process, plane cockpit
Small (novice)	High level language:  SPSS, SAS, BASIC. UNIX, LISP	High level model:  CD Player, nuclear plant control panel

DESIGNER CHOICES
Higher order / specialized languages
Build new mental structure in user

Higher order languages:

Low level model

Immediacy of feedback
Translation of intentions to actions
Novices can learn quickly
Experts can work fast
Ease of use
Trial and error learning enhanced
Insensitive to expertise

Repetitive operations difficult
Variables/actions not easy to express
Problems with accuracy (e.g. drawing)
Cannot infer intentions
Emphasizes current way of thinking
Some sacrifices of reality
Manipulation of actions difficult
Match with mental model required
Inhibits expertise development

Internal coherence: components of knowledge are related in an integrated structure (consistency of syntax)
Validity: users mental model predicts system outcomes (internal model does not have to be the same)
Degree of similarity: match to the mental model gained from experience

DIRECT MANIPULATION MODEL TYPES:

Structural models: Sometimes difficult to learn (e.g. push down lists, Smalltalk)
Functional models: matches between input and output, easy to learn
Distributed models: transactions and state changes (e.g. networks), micro learning good, macro learning difficult (e.g. Hypertext)
Procedural models: programming like (Logo, Turtle graphics)
Common sense models: interacting objects, from clear to ambiguous
 

DESIGN MATRIX
 

	Cognitive	Physical	Computer
Current state
Intention (goal)
Change mechanism (control)
Sequence of operations
Final state
Feedback
Evaluation

PILOT CAI LANGUAGE
 

.T (text)	Type	.A (variable)	Answer
.R (text)	Remark	.E	End
.M /x/y/	Match x or y	.J (label)	Jump
.JY (label)	Jump If Yes	.JN (label)	Jump If No
.U (name)	Use	.C (expression)	Compute

ABSTRACT REDUCTION OF CAI TASK

Writing Lessons

"The way we think, what we experience, and what we do every day is very much a matter of metaphor" - - Lakoff & Johnson, 1980

THREE PROBLEMS WITH METAPHORS

The target domain has features not in the source domain
The source domain has features not in the target domain
Some features that exist in both domains work differently.

METAPHOR RELATIONSHIP EXAMPLES

Desk: drawers, files, folders, papers, piles
Document: books, newspapers, newsletters, articles, figures, forms
Photography: albums, photos, photo brackets/holders, frames
Television: program, channels, networks, commercials
Compact disk, cassette: tracks
Jukebox: Records, tracks
Deck of Cards: Cards, games, game rules, chips, gambling
Film: rolls, slide trays, shows, reels, movie
Tree: Branches, trunk, leaves, roots

GROUP DIVERSE METAPHORS

White collar workers: desktop, in box, telephone, files
Engineers, scientists: laboratory workbench
Middle Class consumers: pocket book, library, mall, VCR control, market, bazaar
Carpenter: tools, hammer, nails, lumber, plane, wood types

VISUAL SEMIOTICS

The study of signs which are things that stand for something else.
It is probably Hippocrates who is considered the father of semiotics which is the study of signs.
Signs can be icons, symbols or indexes.
Icons look like the physical object they represent
Symbols are understood on the basis of conventions
An Index is that which causes the sign to exist (e.g. flag at half mast)
 

DIMENSIONS OF SEMIOTICS

Lexical: production of signs from basic elements
Syntactic: visual display characteristics determining identification and visibility.
Semantic: the meaning of a sign
Pragmatic: the perception of the sign by the observers

RHETORIC

Semantic techniques for conveying meaning
Metaphor: conveying an analogy (skull for poison)
Symbol oriented metaphor types:
Metonymy: A symbol is substituted for the object (flag stands for country)
Prosopopoeia: Making an inanimate object animate. (cursor becomes a hand).
Synedoce: Substitute a part for a whole (I for all letters in italicize icon)
 

ICONS

An icon is something that represents something else that is usually static in nature.
The stars in the American flag "icon" represents the states and the stripes represent the original colonies.
The American flag represents the country just as religious icons represent God.
Many of the icons in a tool menu represent a specific menu choice that can be made.

SYMBOL

A symbol is somewhat more dynamic in nature and conveys a condition that is not obvious from the actual sign itself.
The American flag at half mast indicates the death of someone important to the country.
Meaning is not represented within the symbol itself but is convey by triggering semantic content in the mind of the viewer.
Many trademarks are really symbols in that the connection between the mark and what it represents has to be learned.

INDEXES:

Indexes are the most dynamic use of signs in that they signify a contextual situation.
The American flag on the battlefield may signify the position of the front line.
The flag on a ship signifies what country the ship is registered to.
Current use of signs in interfaces have largely focused only on icon usage and there is a great deal of future possibility for using signs as symbols and as indexes.

HOURGLASS EXAMPLE

The Hourglass can be used in all three ways.
When the cursor turns to an hourglass in windows, it is being used as a symbol that the processor is busy and that the user cannot undertake an action while that symbol is present.
If the computer knew how long it was going to be busy and the actual amount of sand in the hourglass was set to indicate at any instance how much longer the processor would be busy, then the hourglass becomes an index sign.
If the hourglass were on the toolbar and choosing it meant to start a run or execution of a task, then it is the usual icon.

OTHER SIGN DIMENSIONS:

Image: The sign resembles in appearance that of which it is a likeness.
Diagram: Reveals structure of the depicted fragment of reality.
Metaphor: Emphasizes important properties of the ubject it refers to.
Assimilative: Relationship to reality fragment is not obvious and must be learned.
Another factor that applies to signs (as well as words) is whether the meaning is inherent in the sign or the meaning depends upon the context of the communication. Such signs are called "shifters" in linguistics.

SEMANTOGRAPHY

Approximate 100 abstract images invented by Charles Bliss in 1949 to fit on an IBM typewriter ball.
They could be utilized to compose more complex figures.
There was some limited success in using this pictorial language with handicapped individuals as a communication medium.

THE STRUCTURAL MODEL OF COMMUNICATIONS

Pragmatics: Context, Virtual Channels
Semantics: Interprets, Formulates
Syntactic: Encode, Decode
 

THE STRUCTURAL MODEL OF COMMUNICATIONS

In the above model of communications, the virtual channels are the ones that determine the "success" of communications.
A sender has a pre conception of how the receiver will interpret the message (feed forward), that influences the formulation of the message, and the feedback that will be expected to confirm the interpretation of the message.
The process of modifying the virtual channels is in fact the process of learning.
The information content of the above types of messages are dependent upon the relative understandings of senders and receivers. (Transaction Dependent)

TRADEMARKS

Brands for livestock, wood, leather, etc.
Tool marks, Engravings
Some of the earliest signs in western civilization were the "house-marks" which denoted ownership of items by a family.
They were carved in the wood owned and harvested, the livestock were branded with it, and tools and other possessions were labeled with the marks.
Mystic Signs (Masonic/Dollar Bill)
 

PROFESSIONAL SIGNS

Families of Signs (powerful)
Circuit components, flow chart symbols, etc.
In many scientific engineering fields, the signs are standardized.
The use of signs in interface design is in a very primitive state considering the dynamic possibilities of animation that can go far beyond the historical use of signs.

FAMILIES OF SIGNS

Signs in an interface situation should be viewed in the context of establishing families of signs.
The following medieval set illustrates the power of this approach.

POPULAR AND BIZARRE CHARACTER NAMES
 

!	exclamation point, exclamation, bang, factorial, excel, ball-bat, smash, shriek, cuss, wow, hey
#	pound sign, number sign, sharp, crunch, mesh, hex, hash, flash, grid, pig-pen, tictactoe, scratch mark, octothorp
$	dollar sign, currency symbol, buck, cash, string, escape, ding, big-money
%	percent sign, percent, mod, double-oh-seven
&	ampersand, amper, and, address, andpersand

 

PARALINGUISTIC CUES IN ASCII
 

:-)	basic smiley, ha ha, happy
:-(	boo hoo, frowning, mad, sad
:'-(	crying
:-@	extremely angry, screaming
:-*	Oops!
@=	flame, nuclear bomb going off, war started
@l@	too many hours at terminal
[]	hugs
xx	kisses
_\\//	Vulcan salute
||*(	handshake offered
||*)	handshake accepted
@>--->----	a rose, a flower
@%&$%&*	obvious!

 

ICONS: SYNTACTIC DESIGN

Use simple, clear, unitary imagery
Use large objects and bold lines
Maintain a figural dark/light balance
Strive for balance and symmetry
Keep images stylistically consistent
Limit variation in size, shape, angle, line thickness, and white space

ICONS: SEMANTIC DESIGN

Select a distinctive point of view
Exploit archetypal features
Exploit user’s knowledge of the world
Avoid jargon-oriented "puns"
Respect established conventions

ICONS: PRAGMATIC DESIGN

Make icon appealing
Make distinctive features prominent
Make the icon readable at a glance
Match the icon to the display limitation
Enhance the viewers understanding of the icon’s message
 

ICONS: SET DESIGN

List objects to be represented
Generate quick concept sketches
Sort sketches by visual style
Select most promising sketch set
Create layout grid for selected style
Refine selected icons based on grid

MENUS ATTRIBUTES

Presentation, duration, and navigation
Pull-down, pop-up, stay-up static
Normal, default, selected, disabled, attached menus, dialogs
List (expandable), Table, Tree, Network, Chinese, Multiple choice, Answer ahead
Depth and Breath
Tool bars and tables
Ordering and grouping (by functionality)

MENU LAYOUT

Menu items grouped according to easily recognizable (learnable) relationships: logical, functional, frequency, numeric, alphabetical, etc.
Extreme positions easier to learn (Top, bottom, corners, etc.), remember and locate
Interior positions easier to move to

TYPOLOGY & SYMBOLS (66)

© copyright 1998 Murray Turoff

TYPE STRUCTURE

TYPES OF FONTS

Roman Serifs:
    Oldstyle: Graramond, Caslon
    Modern: Bodoni, Scotch Roman
    Transitional: Clearface, Bookman

Others:
    Traditional: Century, Baskerville
     Square serif: Clarendon, Stymie
    Sans serif (without serifs): News Gothic, Futura
     Script and cursive: Lydian Cursive
    Text letters: Old English, Engravers Text
  Non Proportional fonts: Courier, Typewriter
     Decorative types: Comstock, Caslon Openface
 

TYPE STRUCTURE

Baseline: the virtual line upon which the type rests. Descenders, such as the lower part of q, p, g, etc., fall below the baseline for lowercase text.
x-height: the height of the letter x. The ratio of x-height to the body size determines the visual importance of lowercase letters for a given typeface.
Faces with large x-heights tend to be very open, airy, and legible (e.g., Helvetica) and those with small x-heights tend to be more compact and restricted, but take up less space (e.g., Optima).
Given the same size type fonts those with smaller x-heights will look smaller.

SERIFS

Serifs at the bottom of letters help the eye visualize the "virtual" base line the type is on.
Serifs at the top help to move the eye along in the scanning process by effectively pointing to the right.
Serifs were originated with Roman stonecutters who wished to give the end of letters carved in stone more strength and crisp definition.
Typefaces without serifs are known as sans (without) Serifs and were developed after 1800.

SERIF PROPERTIES

Sans-serifs were designed as letters not for texts but for captions. Provides a more modern look but must be bigger for reading.
Types with serifs are more legible for reading bodies of text.
The more letters are differentiated from each other, the easier is the reading.
The longer a line is the more important it is to use a good serif type.
The more concentrated/dense the type the more critical is a good serif

SERIF TYPES

Bracketed: traditional, safe, and rather staid.
Hairline: graceful and nearly feminine
Wedged: impression of power
Square: exaggerated bulk that is energetic and forceful.
Rounded: familiarity with strength
Calligraphic: freely styled and informal

COUNTERS

A counter is a hollow space that forms an integral part of a letter. Letters such as a, b, d, and o have closed counters, whereas the letters c, n, and v have counters that are open.
Counters influence the sense of stress or tautness in a type font. There are three types of stress: rounded, vertical, and geometric.
Geometric (perfect circles for counters) is considered the no stress situation.

STRESS IN COUNTERS

Rounded stress is where the letters are widened so the O and others are wider and flatter than a perfect circle. This is the most legible choice.
Vertical stress is where the letters are squeezed so the O and others are taller and skinner than a perfect circle.
Vertically and geometrically stressed letters consist of less white space and more mass. Such type fonts are more dazzling and thus more attractive to the eye even if they can not be read as fast.
 

FONT PROPERTIES

Times Roman was designed for newspapers to be able to set legible, compact lines of types. It is too cramped for use as a heading.
Certain type fonts are so cleanly designed that they are felt to be transparent to the reader. The families of true Garamonds and Times New Roman are in this category.
They are good for the body of text and for allowing contrast with display fonts for headings and such.

FONT FAMILIES

For any family of fonts such as Helvetica the type font exists in many versions that differ in weight, proportion, angle, or texture. These changes result in versions that are slanted, lightened, darkened, stretched, widened, or reversed.
Weight is perhaps the most noticeable:
extra light, light, semilight, medium, semibold, bold, extra bold, and ultrabold
Other classifications of forms:
hairline, outline, inline, roman, italic, and bold italic.

LETTER STRUCTURE

Certain letters composed chiefly of oblique strokes appear rather heavy. This is the case of: A K M N V W X Y k v w x y
To avoid this heavy appearance, type designers make some of the oblique strokes thinner.
Letters divide up into the following classifications quite naturally:
Straight line letters: AEFHIKLMNTVXYZ
Curved line letters: BCDGJOPQRSU
Open letters (lighter): CDGOQ
Closed letters (darker): BHRKE

TYPE SIZING

Type is measure in a system of picas and points developed by Simon Fournier in 1737, and perfected by Firmin Didot in 1785.
There are 12 points to the pica and approximately 6 picas to the inch (six picas are actually .9962 inches). Using a base of 12 rather than 10 allowed easier calculation of alternative formats since 12 is divisible by more factors than 10.
Type size is commonly measured in points beginning around 6 points on up.
In general anything 14 points and under is considered body type for regular text and anything larger is considered display size (e.g., headings and titles).

TYPE SPACING

The spacing between lines is referred to as the "leading" because it was originally done with standardized strips of lead, each one or one and half points in width.
This spacing affects the "tone" of the text that is the sense of gray and smoothness one gets by holding the text a distance away where the individual lines are not discernible.
Decent sized spacing makes text more readable. Usually the automatic setting is 120 percent of the type size.
Typefaces with tall lowercase letters (x heights) would require more leading than those with small x heights.

TYPE SPACING RELATIONSHIPS

As the type size increases the need for letting space does not increase linearly.
The relationship between type size, type of font, line length, open space, and leading requires visual judgment of proportions. A safe start is using 20% of the type size for leading.
Leading should never be more than half the type size unless it is used to separate ideas in bullets or lists.
 

TYPE SIZE & SPACES

Point size: the distance from the lowest descender (e.g., p or g) to the highest part of the tallest ascender (e.g., d or b) is the type size.
em and en spaces: Em is a square space equal to the point size and an en is half that size in width. For example, a 12 point em is 12 points wide and used to be a square blank piece of metal type. An en is half an em.
A single em is considered to be the minimum and default indent for a paragraph so that the indent size is proportional to the type size.
Em and En are also represented by the long and short dashes.

LINE CHARACTERISTICS

Reading is easiest when a complete thought or sentence occupies one line.
If a line is too short or if sentences are so long they take many lines, then reading for comprehension is difficult, especially if the reader is not an expert on the subject material.
When a person reads the peripheral vision of the left eye is anchored to the left margin of the page. If the line is too wide and the reader looses that anchor then the eye has to use the baseline to find its way back to the beginning of the next line so that scanning and reading speed is lowered.
 

LINE SIZE

In general lines should be between 1.5 and 2.5 alphabets long.
Another rule of thumb is lines should be ten to twelve words long.
Once again the higher x-heights allow longer lines and smaller x-heights require shorter line lengths.
Clearly there is point where two columns of text are better than one long line.
 

KERNING I

This is the process of adjusting the space between certain character pairs to minimize gaps for the best appearance and readability (example 'Ye Te' instead of 'T e Y e').
When a constant letter space is used between words it should be the width of the "i"
When kerning, spacing that is visually proportional the letter's width affords the highest degree of legibility.

KERNING II

Good typography dictates that type be set with minimum letter spacing where possible.
Example letter pairs that are considered to be kerning pairs are: AC AL AN AO AT AV AW AY V, V. Va Ve Vo WA Wa We Wh Wi Wo Wr
Certain double and triple letter combinations were set as a separate piece of type to ensure close spacing: fi, ffi, fl, ffl, ff, ae, ce.
 

WHITESPACE I

The Italian Renaissance regarded empty space as background, further back, and encircling the object.
Modern art considers empty space as an equal part of the composition.
Consider the white space inside the D as representing the letter.

WHITESPACE MANIPULATION

The unprinted counterforms can also be enhanced in emphasis by placing letters closer together. Compare the internal form of the space in the D and the O for a number of different fonts.
Also, if you can graphically space letters take a word and move the letters closer and closer together until they overlap. These exercises show the impact of the whitespace.
Modern fonts tend to allow such manipulation and remain legible.
 

ILLUSION IN TYPE

Our visual perception and the associated aesthetic sense are different than the reality of geometric design. Humans see things differently from the real way they are drawn.
The proportions, arrangements, forms, and type fonts that look good to the eye cannot be constructed geometrically by using a straight edge and compass because of the illusions of the human eye.
The eye tends to magnify all horizontal values and diminish vertical ones. The resulting optical illusions are real and must be dealt with as part of the design process.

ILLUSION TYPES

They are well known in typography but apply equally well to interactive screen and icon design.
1. The geometric square looks greater in width than in height. An optical square must therefore be slightly increased in height to appear to the eye as a square.
2. When a geometric figure is divided transversely, the lower half looks smaller. (consider the design of the letters A and H.)
 

3. FORCE OF GRAVITY

The thick horizontal bar looks fatter than a bar of equal geometrical thickness placed on end.
The "force of gravity" active in a form makes it broader. (Consider why we make various parts of letters thicker and thinner.)
The thick bar placed on end looks thinner in the direction of gravity (at the bottom). (Consider the design of pillars in ancient buildings such as the Parthenon.)
Note that ascenders in type are usually shorter than descenders.

SMALL SQUARES & CURVES

4. Reducing a black square in size makes it look like a rounded dot.
5. The geometric circle looks wider than its height. Note that the letter O is rarely a perfect circle, at least on the inside, in a type font.
6. Two constructed semi-circles, joined to make an S, cannot form and organic whole. The two movements come to a halt (to the eye) at the point of the union and this break must be smoothed over optically.
7. A circular movement flows into two straight lines. The tendency of the semicircle to close must be prevented by two straight lines. Again there is a break at the points of transition. A U cannot be constructed geometrically.

SUBJECTIVE INFLUENCES

8. The same black circle changes in appearance depending on its position on a plane surface. In the upper part of the surface it seems to float (balloon) whereas the lower edge it conveys a sense of weight (wheel). Our visualization of an object is influenced by prior experiences.
9. The triangle placed like a pyramid looks stable; turned upside down the same form looks unstable and irresolute. The same is true of the square sitting flat or turned on end (diamond).
10. A thick bar placed horizontally and vertically. The form looks heavy and weighty when horizontal, but lighter and more mobile when vertical.

BACKGROUND & SIZE

11. Given a white square on a black background and a black square of the same size on a white background, the white square radiates beyond its edges against the black background and looks appreciably larger than the black square of equal size on a white background.

PARALLEL LINES

12. Taking a series of parallel lines to make up a square area, the use of horizontal lines make the square look higher than it is; while the vertical lines make the square look wider.
13. Given a square formed by either two horizontal or two vertical lines, the horizontal lines make the surface look wider; the vertical lines increase its height.

ENCOUNTERS

14. Two lines of the same length look shorter or longer on a relative basis by the shape of the arrows on the end(< > or > <). Serifs on ascenders or descenders can make them look longer or shorter by the shape of the serifs.
15. The eye creates movement as a result of its scanning process. The dot moves and gives rise to the line, the line moves and gives rise to a plane, and the plane moves and gives rise to a body.

TAUTNESS

Certain figures and shapes can exhibit stress that is referred to in typology as being "tautened."
A vertical line is tautened and the tautering lies in the direction of gravity.
A horizontal line that connects to two vertical supports (H) is tautened from left to right.
If there is sufficient blank space between the line and each side (l - l) the tension is removed and the line appears at rest.
 

TAUT EXAMPLES

TENSION, STRESS, & HARMONY

Design is a process of choosing a compromise between a degree of tension and a degree of harmony.
A group of lines to create a surface is in harmony with other lines; but a solid surface and line create a tension due to contrast and both the line and the surface is intensified.
The letter L is a combination of a linear form with a slight addition of surface.
Finally there is an illusion of motion. Humans seek to group things together mentally and this causes them to make inferences from objects in close proximity.
 

EXAMPLES

Feeling & Rhythm II

TYPE ILLUSIONS

No mechanical way of measuring spaces between letters. An optical illusion occurs.
Adding diagonals to lines makes them longer or shorter. ' I ' seems longer than ' J ' but they are the same height.
A line placed in the middle of a space will seem lower than the middle so the lines in H are usually above the middle.
Comparing IL and LI, the IL space seems larger, also YT seems closer than dose JT.
 

WORD ILLUSIONS

In the combinations HIT, HOT, and HOOK, the H and O have to be closer together than H and I to appear equal. The OO has to be still closer.
The unbalanced appearance of a word is produced in "COFFEE" or in "OGEE" when the open letters are exaggerated or are much wider than the other letters.
Some words have distinctive silhouettes: HEN, GOOD, BLOSSOM, ALMA, and COLLEGE.

TEXT ILLUSIONS

Lay a piece a paper over a line of capital letters, covering half, and most of the capital letters will be indistinguishable. Do the same with a line of lower case and most of the lower case letters can still be recognized with their bottom half missing.
A black square creates a hole in a white space and varying shades of gray create holes to a lesser extent.
The finer the lines of a gray square the more intense and uniform is the gray, even if the relative amount of actual white coverage is the same. Lines of type create a gray surface and what is called the "tone" of the type area.
 

TEXT LINES

In a book, readable lines are usually considered as ten to twelve words (6 characters on the average for words), while for newspapers it is considered to be five to seven words.
The margins of a page in a book help to increase the size of the line, while in a newspaper there is very narrow white spaces between columns so that if lines are too long it will send the eye scanning to the next column.
When lines become too long it is difficult to pick up the next line.
The longer the line, the more one has to increase the line spacing to ease the linear scanning process and the return of the eye to the beginning of the next line (this is referred to as 'registration').
 

TONE

Lay a piece a paper over a line of capital letters, covering half, and most of the capital letters will be indistinguishable. Do the same with a line of lower case and most of the lower case letters can still be recognized with their bottom half missing. A black square creates a hole in a white space and varying shades of gray create holes to a lesser extent. The finer the lines of a gray square the more intense and uniform is the gray, even if the relative amount of actual white coverage is the same. Lines of type create a gray surface and what is called the "tone" of the type area. In a book, readable lines are usually considered as ten to twelve words (6 characters on the average for words), while for newspapers it is considered to be five to seven words. The margins of a page in a book help to increase the size of the line, while in a newspaper there is very narrow white spaces between columns so that if lines are too long it will send the eye scanning to the next column. When lines become too long it is difficult to pick up the next line. The longer the line, the more one has to increase the line spacing to ease the linear scanning process and the return of the eye to the beginning of the next line (this is referred to as 'registration').

Lay a piece a paper over a line of capital letters, covering half, and most of the capital letters will be indistinguishable. Do the same with a line of lower case and most of the lower case letters can still be recognized with their bottom half missing. A black square creates a hole in a white space and varying shades of gray create holes to a lesser extent. The finer the lines of a gray square the more intense and uniform is the gray, even if the relative amount of actual white coverage is the same. Lines of type create a gray surface and what is called the "tone" of the type area. In a book, readable lines are usually considered as ten to twelve words (6 characters on the average for words), while for newspapers it is considered to be five to seven words. The margins of a page in a book help to increase the size of the line, while in a newspaper there is very narrow white spaces between columns so that if lines are too long it will send the eye scanning to the next column. When lines become too long it is difficult to pick up the next line. The longer the line, the more one has to increase the line spacing to ease the linear scanning process and the return of the eye to the beginning of the next line (this is referred to as 'registration').

Lay a piece a paper over a line of capital letters, covering half, and most of the capital letters will be indistinguishable. Do the same with a line of lower case and most of the lower case letters can still be recognized with their bottom half missing. A black square creates a hole in a white space and varying shades of gray create holes to a lesser extent. The finer the lines of a gray square the more intense and uniform is the gray, even if the relative amount of actual white coverage is the same. Lines of type create a gray surface and what is called the "tone" of the type area. In a book, readable lines are usually considered as ten to twelve words (6 characters on the average for words), while for newspapers it is considered to be five to seven words. The margins of a page in a book help to increase the size of the line, while in a newspaper there is very narrow white spaces between columns so that if lines are too long it will send the eye scanning to the next column. When lines become too long it is difficult to pick up the next line. The longer the line, the more one has to increase the line spacing to ease the linear scanning process and the return of the eye to the beginning of the next line (this is referred to as 'registration').

Lay a piece a paper over a line of capital letters, covering half, and most of the capital letters will be indistinguishable. Do the same with a line of lower case and most of the lower case letters can still be recognized with their bottom half missing. A black square creates a hole in a white space and varying shades of gray create holes to a lesser extent. The finer the lines of a gray square the more intense and uniform is the gray, even if the relative amount of actual white coverage is the same. Lines of type create a gray surface and what is called the "tone" of the type area. In a book, readable lines are usually considered as ten to twelve words (6 characters on the average for words), while for newspapers it is considered to be five to seven words. The margins of a page in a book help to increase the size of the line, while in a newspaper there is very narrow white spaces between columns so that if lines are too long it will send the eye scanning to the next column. When lines become too long it is difficult to pick up the next line. The longer the line, the more one has to increase the line spacing to ease the linear scanning process and the return of the eye to the beginning of the next line (this is referred to as 'registration').

MARGINS

The oldest theory about margins is known as the "golden section"
Jan Tschichold, a Bauhaus designer, observed that many medieval manuscripts used the proportion of 2:3:4:6 for the inner, outer, head, and foot margins.
One can construct this proportion uniquely using a compass and a straight edge on any two page layout.
Other such constructions exist to express alternative versions of a basic 2:3 proportion.

MARGIN RATIOS

The width of the page should be proportional to its depth by a ratio of 2:3.
The 6 by 9 inch book format conforms to this exactly.
The ratio of the text to the page area is also 2:3 so that for a 6 by 9 inch book the text is 4 by 6 inches.
Text should be at least as deep as the sheet is wide.

MARGINS IN TYPE

Margins used to facilitate scanning of and transfer between columns
Text needs breathing spaces, or margins within text area
Margins between paragraphs = one line
Spaces before and after headings to set them off (2:1)
 

POSTER & SCREEN DESIGN

There is a certain similarity between the art of designing a poster and that of designing an interface screen.
The objective of a poster is to go beyond the mere convenience of an impression and appeal to instincts, emotions, reason, and judgment.
A successful interface screen demands attention, holds it, and crates a desire to interact with it.

POSTER DESIGN VARIABLES

Simplicity
Unusual or Novel
Suitability
Tone and color
Spacing and proportion
Rhythm
All these are appropriate measures for screen design. Even "novel" is very appropriate for gaming applications or providing strategic screens that will be striking.
 

MEASURES OF TYPE QUALITY I

Distinctiveness: The distinguishing characteristics of each letter are strongly marked; for example, the lip on the Q from O; the R and P, the C and G; and within combinations such as LIT.
The more distinctive the letters the easier it is to read the font.
Simplicity: There are no unnecessary parts as in the Victorian fonts.

MEASURES OF TYPE QUALITY II

Proportion: No part of a letter is wrongly exaggerated or dwarfed.
Beauty of form: Each letter is an individual and living whole.
Beauty of Uniformity: The existence of a family likeness of the different letters so they go well together.
Beauty of the arrangement: the general fitness in the placing, connecting, and spacing of letters, words, and lines within the space.
 

BALANCE OF LAYOUTS

Most screen layouts are asymmetric or what is called informal balance.
Informal balance is livelier and holds greater interest than formal balance.
The golden division of a line or the "golden mean," is considered quite pleasing to the eye and is an imbalanced ratio that occurs quite a bit in nature (.618:1 or .382:.618). This ratio is sometimes approximated by 3:5 or 3/8:5/8.
If one is looking at a standard page the optical center is higher than the mathematical center and the Golden Division Line is slightly above the optical center.
 

TYPE & COLOR: READING SPEED TEST (Paterson & Tinker, 1940)
 

Color Combination	Differences in %
Black on white	0.0
Green on white	-3.0
Blue on white	-3.0
Black on yellow	-3.8
Red on yellow	-4.8
Red on white	-8.9
Green on red	-10.6
Orange on Black	-13.5
Orange on white	-20.9
Red on green	-39.5
Black on purple	-51.5

SCREEN CONSIDERATIONS IN TYPE

100 Pixels per inch = Minimum for standard page
1024 Pixels = 10.24 inches < 11 inches
40 to 60 characters desirable text line range
Average maximum reading speed = 53 Characters / line
Columns separate by "gutters" at least 2 character spaces (1 to 2 picas)
2 to 5 columns per page or screen, vertical or horizontal

COLOR (121)

© copyright 1998 Murray Turoff

COLOR DIMENSIONS

Hue: Spectral wavelength and resulting color
Value/illumination: Relative amount of lightness or darkness
Chrome: Purity of color from gray to most vivid (complete saturation)
Other ways of representing color for different media (photography, paint, printing, etc.) are used.

COLOR BENEFITS: CODING

Group, categorize, and chunk information (information coding)
Increase number of complementary coding dimensions
Identify elements of structure and/or processes
Provide a sense of realism or virtual realism
Imply certain physical states (speed of water)
Depict logical structure of ideas
Portray time and progress

COLOR BENEFITS: OTHER

Convey emotional content

More resources needed
About 8% ?(1 in 12) of males have color deficient vision
May cause discomfort, visual fatigue, afterimages, dizziness
May contribute to confusion (blue = death / coolness)
Disciplinary and cultural differences

COLOR DISADVANTAGES II

Confusing and conflicting guidelines
Distract the user when inadequately used.
Dependent on viewing and stimulus conditions
Result in information overload or misdirection
Unintentionally conflict with cultural conventions
 

PHYSIOLOGY OF PERCEPTION I

Light passes through lens without any color correction
Different wavelengths focus at different distances
Trying to focus on two colors far apart on spectrum causes strain on eye muscles and can result in illusions
e.g. blue objects come into focus nearer to lens than red ones so red objects appear closer

PHYSIOLOGY OF PERCEPTION II

Retina: light sensitive receptors
Rods: black and white
Cones: color receptors, require more light, one cone sensitive to one color
64% of cones red sensitive
32% are green sensitive
4% are blue sensitive
Blue receptors are more on peripheral, red and green more in center

PHYSIOLOGY OF PERCEPTION III

Incident light must reach threshold to trigger signal
Detection is a distribution about peak wavelength
Characteristics make evolutionary sense
red is danger and caution: blood
green is food and sought
blue is everywhere and should be ignored

AGING

With age lens develops a yellow coating
Filters shorter wavelengths reducing blue detection
Fluids in eye become less transparent causing colors to be come less vivid and of lower perceived brightness.
Older operators need higher brightness levels to distinguish colors
Use brighter colors for older viewers
Users with color deficiencies need to be able to tailor use of color

COLOR DIFFERENTIATION

It is difficult to focus on edges created by color alone
Demarcations in color should be made in conjunction with changes in brightness as well
A thin black line between the opposing colors will serve to further delineate them
Do not use adjacent colors that differ in blue, black, yellow (peripheral colors) as line between colors becomes fuzzy.
Use adjacent colors that differ in hue and value.
The perceived color and size of an area is affected by the color of its surrounding area

GENERAL GUIDELINES

Another problem is that colored graphs that are easy to see on a dark CRT are often hard to make out when plotted in the same colors on a white piece of paper
With an image containing many different colors, a neutral (gray) background should be used
Use a neutral or muted color for the display background to minimize interference with the subject matter
Color coding should be complementary to the use of other cues such as shape, location, pattern, or sound

COLOR WHEEL

A design should work in black, white, and shades of gray before applying color or no color combination will be any good.
The basic tool for a designer is a good color wheel.
The primary colors in a color wheel are: red, blue and yellow.
The secondary colors are: green, orange, purple.
Complementary colors are pairs of colors arranged opposite (a primary and a secondary: red with green). Placed side by side, these cause vibrations.

COLOR HARMONY ON THE WHEEL

A triad is three colors equally spaced around the wheel (use of an equilateral triangle) and they are usually quite pleasing to the eye (blue, red, and yellow; or orange, green, purple).
Any equal sided figure (square, pentagon) will give a set of pleasing colors if inscribed within the color wheel and rotated to any position.

FUNDAMENTAL HUES

Colors have both spatial and vibration or motion illusions.
When the six fundamental hues:
yellow, orange, red, violet, blue, and green
are placed next to each other on a black background, the light yellow appears to advance and the violet lurks in the depth of the black background.
If the background color is white, it is the violet that seems to advance while the yellow sinks back into the background. The other colors are in-between in their effect.

GOLDEN SECTION

It was discovered in 1915 that the depth perception of the six fundamental hues on a black background conform the ratio of the Golden Section in their gradation of depth.

The Golden section of a line can be defined as the proportion given by dividing a line at a point such that the shorter part is in the same proportion (r) to the longer part as the longer part is to the whole:

Golden Section Condition: r = b/a = a/(a+b)

which results in: r*r+r-1=0 and r=.618

For example, the depth perception from yellow to orange relative to orange to red follows the Golden Section.

COLOR MIXING

Your screen color is gotten by mixing red, green, and blue light (RGB) and are additive.
All three together forms white.
On paper pigment is an opaque substance that absorbs light. Since each pigment takes away color this is a subtractive process.
The subtractive primaries are cyan, yellow, and magenta (CYM).
All three colors together produces black.

COLOR NEIGHBORS AND OPPOSITES

Colors that sit next to each other in the color wheel are spectral neighbors (blue and green, red and orange, yellow and green)
These pairs can be used for shadowing or to suggest dimension, low contrast situations. Avoid these when you need a distinct visual boundary between touching colors.
Colors opposite one another on the color wheel are far apart visually and if they are fully saturated and placed side by side they will appear to move or vibrate.
If two such colors need to touch, one should reduce the saturation of one of them and/or use a thin white or black line to create a boundary between them.

COLOR HARMONY ALTERNATIVES

Another rule to determine the harmony of colors is that two or more colors are mutually harmonious if their mixture yields a neutral gray, complementary.
One also obtains harmony by ordering colors in their actual application by hue.

Coding of linear relationships (interval and quantitative scales) is better accomplished by utilizing saturation and/or luminance since they are linear.
Coding different nominal categories (no linear relationship) is better done by contrasting hues since perception of hues are represented by the color circle and have no beginning or end.

BLACK, WHITE, and GRAY

Black and white has the highest contrast and it is why we usually have black text on a white background for documents.
On a screen, a pure white background can become too bright and then fatigue may set in. A very light gray would be a better choice than pure white. Reducing contrast is needed for reducing fatigue and increasing contrast is needed for greater visibility.
The eye is more sensitive to changes in lighter shades of gray than it is to the same amount of change in darker grays. People can distinguish roughly five shades of gray in addition to the end points of black and white.
 

FOREGROUND AND BACKGROUND

The brightest or lightest element in a dark area will attract the eye first.
The role of the background is to recede, clarify and focus the foreground elements.
Foreground can be represented by lighter shades of gray and background by darker shades of gray.
Transparency can show contrast of background to foreground by both shadow and transparency techniques.

COLOR CAUTIONS

Avoid color coding small objects. For fine detail one should use black, white, and gray. Surround objects in a neutral color or complementary color.
For applications involving significant non redundant use of color it is important to check the performance of the color monitor and the surrounding lighting conditions.
Consistency of use of coding and no exceptions
Meaningful color code must be in terms of user relevance
 

SEVEN DIFFERENT FORMS OF COLOR CONTRAST

1. Contrast of hue
2. Light-dark contrast
3. Cold-warm contrast

Two colors are complementary

5. SIMULTANEOUS CONTRAST

Results from the fact that for any given color the eye simultaneously requires the complementary color.
This is an illusion that generates instability and tension
It can be used to convey excitement
The can be gotten by using two non complementary colors together or taking a rich primary color with a gray background.
Example: A red error flag on a gray background with no close green is a great error indicator to shake up the user.

6. CONTRAST OF SATURATION

Saturated colors are diluted by mixing them with white or black.
The most saturated or pure colors are the "florescent" tones.
The effect of the "dull-vivid" contrast brought about by saturation dilution is a relative effect
Vivid colors can be used to set off and highlight areas of dull colors in some situations. (marking, boxing)
 

7. CONTRAST OF EXTENSION I

One can arrive at relative areas that different colors should take up in order to balance the contrast between the colors.
This is contrast by extension.
Using these proportions produces areas that are static and quite.
When one violates these ratios and allows one color to dominate, the results can be extremely expressive.
Goethe estimated a scale using pure colors on a neutral gray background of medium brilliance:

    yellow : orange : red : violet : blue : green

      9             8         6     3         4         6

For example, yellow to violet is 9:3 or 3:1. Therefore violet must occupy three times the area that yellow does for the two be in a balanced contrast when they have the same purity. Yellow has three times the strength of violet. (e.g. pie charts)

NUMBER OF COLORS

Use a maximum of 5 +- 2 colors

Use spectral order in color coding

Use foveal (central) and peripheral colors appropriately
Blue for large areas, not for lines or text
Red and green in center of visual field, not edges
Use black, white, yellow, and blue in peripheral
 

COLOR COMBINATIONS

Use colors that exhibit minimum shift in color by size if the colors change in size in the image (depends on surrounding colors).

Size influences perception of both value and chrome

Light text, thin lines, small shapes in white, yellow, red on medium dark backgrounds (blue, green, red, dark gray) for dark viewing situations.

Use dark text, thin lines and small shapes (black, violet) on light backgrounds for light viewing situations.

Use highest contrast in composition for text

COLOR USAGE

Use common color for grouping related elements

Color can best be used as a redundant form of coding (e.g. with shape, text, sound)

Use color to enhance black and white information
 

COLOR VIBRATIONS & ILLUSIONS

Simultaneous use of high-chrome spectrally extreme colors cause vibrations, illusions of shadows and afterimages.

COMMON COMMERCE CODES
 

Field	Red =	Other Associations
Finance	Loss	Black = gain
Politics	Radicalism
Traffic Signs	Stop	Yellow = caution  Green = go
Safety	Danger	Yellow = caution  Green = safety

 

AMERICAN NATIONAL STANDARDS INSTITUTE (ANSI) COLOR RECOMMENDATIONS
 

Color	Meaning
Red	Danger, Stop
Orange	Dangerous Parts or Components
Yellow	Caution
Blue	Non-safety Messages
Green	Safety
Black on Yellow	Radiation
Black on White	Traffic Markings

CULTURAL NORMS
 

Culture	Red	Yellow	Green	Blue
European  Western	Danger	Caution, Cowardice	Safe, Sour	Masculinity, Sweet, Calm, Authority
Japanese	Anger, Danger	Grace, Nobility, Childish gaiety	Future, Youth, Energy	Villainy
Chinese	Joy, Festive Occasions	Honor, Royalty
Arabic		Happiness, Prosperity	Fertility, Strength	Virtue, Faith, Truth

 

CONSISTENT COLOR CODING

Red = stop, danger, hot, fire
Yellow = caution, slow, test
Green = OK, clear, vegetation, safety
Blue = cold, water, calm, sky
Warm colors = action, response required
Cool colors = status, remoteness
Grays, white, blue = neutrality

CULTURAL DIFFERENCES OF BLUE

Movie audiences: tenderness, pornography
Financial managers: reliability
Health care professionals: death
Power industry: coolness, water

EMOTIONS IN COLOR

High illumination: hot, active, comic
Low illumination: emotional, tense, tragic
High chrome: emotional, tense, hot, comic
Warm hues (red, orange, yellow): active, comedy, recreation
Cool hues (green, blue, violet, purple, gray): tragedy, romance, efficiency, work
 

COLOR CAN IMPROVE PERFORMANCE IN

recall tasks
search-and-locate tasks
retention tasks
comprehension of instructional materials.
decision judgment tasks where it is used to make alternatives and their supporting information clearly distinguishable.

MACRO GUIDELINES

Use color conservatively.
Limit the number of colors
Recognize the power of color as a coding technique.
Use color to help in formatting
Use color changes to indicate status changes.
Ensure that color-coding supports the task.
Use color in graphic displays for greater information density.
 

PROCESS GUIDELINES

Place color coding under user control.
Have color-coding appear with minimal user effort.
Design for monochrome first.
Be consistent in color expectations about color codes.
Be alert to common expectations about color codes.
Be alert to problems with color pairings.

COLOR & SHAPES

A conjecture about an association between shape and color
 

COLOR OBSERVATIONS

Prior notes not sufficient for complex uses of color
Numerous other details needed for:

© copyright 1998 Murray Turoff

CLASSICAL PROPORTIONS

1:1 Square
1:1.414 Square root of two
1:1.618 Golden rectangle
1:1.732 Square root of three
1:2 Double square
1:2.236 Square root of five

Examples

Attention getting
Stable, permanence
Dynamic on diagonal, unstable

Inscribed square natural division
Divided in two resulting rectangles with same proportion

GOLDEN PROPORTION

Artistic and iterative
Inscribed square produces another golden rectangle

Square root of three

SUMMARY OF PROPORTIONS

 

Name	side ratio	diagonal	equal division	ratio of inscribed square : rectangle
square	1:1	1.414 Ö 2	2:1	infinity
square root of two	1.414:1	1.732 Ö 3	* 1.414:1	2.414:1
square root of three	1.732:1	2.000 Ö 4	1.155:1	1.366:1
double square, or square root of four	2:1	2.236 Ö 5	1:1	1:1
square root of five	2.236:1	2.449 Ö 6	1:1.118	1:1.236
golden rectangle	1.618:1	1.902	1.236:1	* 1.618:1

 

GOLDEN RECTANGLE

Consider the summation series where each succeeding number is the sum of the prior twos:

    1-2-3-5-8-13-21-34-55-89 or n(i) = n(i-1) + n(i-2)

Consider A:B::B:C, for example: 1:2::2:3 or 2:3::3:5.

For this series, the product of the means BB is always 1 greater than the product of the extremes AC: BB = AC + 1
As the numbers in the series gets larger the error of one becomes very small and the resulting limit is the Golden Rectangle where the product of the means equals the product of the extremes.

GOLDEN RECTANGLE SPIRAL

Golden Rectangle produces a logarithmic spirals found in nature (e.g., pine cones, sunflowers, flower petal arrangements, pineapples, etc.).

Good example of the limit in not being able to specify numeric values for the drawing of objects.
 

DEPTH

1. Contrast and gradation in size.
2. Converging parallels and diagonal action.
3. Position in the picture plane.
4. Overlapping.
5. Transparency and exposure of hidden lines.
6. Diminishing detail
7. Atmospheric perspective
8. Advancing and receding color.
9. Motion in and out of the plane such as zooming.

PROPORTION CHARACTERISTICS

Margins used to allow transfer between mediums, windows, workspaces
Use of distinctive proportions can be more visually pleasing
Distinctive proportions to code window types
Constrained by resolution of screen
 

PANNING IN THE X AND Y DIMENSIONS

Up-down and right-left for panning
Forward-backward for depth
In-out for zooming
Rotation (aerial views, back views)
Distortion (e.g., fish eye)
Animation (movement of object by themselves)
Virtual Reality manipulation (putting ones hand in the screen)
Cycling (bagel / doughnut)

WINDOWS & SCREENS

Horizontal grid lines break up columns into zones for footers, primary titling, and main text
Screens appear less complicated when single line separates windows form each other, not combination lines and between spaces
Character or occupation density of screen ideal at about 30% and should never be more than 50% to prevent cluttered result
 

WINDOW CONTROLS

Typical