OVERHEADS SET 2: DESIGN OF INTERACTIVE SYSTEMS



OVERHEADS SET 2: DESIGN OF INTERACTIVE SYSTEMS

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:

© 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 |By computer (since user does not worry about the |

| |visible) |interface as such) |

|Syntax |Object-action composites |None (single user token constitutes an interaction|

| | |unit) |

|Object visibility |Essential for the use of direct |Some objects may be implicit and hidden |

| |manipulation | |

|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 |No: user and computer both keep going |

| |other | |

|Interface locus |Workstation screen, mouse, and keyboard |Embedded in user’s environment, including entire |

| | |room and building |

|User programming |Imperative and poorly structured macro |Programming by demonstration and non imperative, |

| |language |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|Connected system subjected to constant change. (TS) |

|a change | |

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 |Strong object orientation (Large number of small objects with rich |

|very limited attributes) |attribute sets) |

|“Finder” (visible file system) is unifying home base, and |Personal information (retrieval as unifying principle with atomic |

|files are the basic interaction object |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

No view of the total macro level

Always on the trial with no scenic views of the forest

Difficulty of detecting errors

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

DIRECT MANIPULATION (25)

© copyright 1998 Murray Turoff

DISTANCES

Between users cognitive view and the way it is done

Semantic: APL, Spreadsheets

Articulatory: Pinball Construction

Gulf of execution: functional opacity (control)

Gulf of Evaluation: system opacity (output understanding)

"Turing Tar Pit" (lack of leverage & abstraction)

ENGAGEMENT CONVERSATION MODEL

|Distance to user goals \ |Semantic Control |Direct Manipulation Control |

|Large (Expert) |Low level language: |low level model: |

| |Pascal, C, APL |Violin, Equations of a physical process, plane |

| | |cockpit |

|Small (novice) |High level language: |High level model: |

| |SPSS, SAS, BASIC. UNIX, LISP |CD Player, nuclear plant control panel |

DESIGNER CHOICES

Higher order / specialized languages

Build new mental structure in user

Rubber band graphics

Turtle graphics

SEMANTIC OPTIONS

Higher order languages:

Over specialization

Tasks do not decompose

Examples: LISP, UNIX

Language grows in size to accommodate new requirements

Playing a phonograph to hit a single note

Low level languages:

More effort to program

Disguised automation

Playing a violin to hit a note

For experts: APL

DIRECT MANIPULATION OPTIONS

Low level model

Deal with abstractions

Requires expertise

Can promote Learning

Equations of pool game

High level model

Direct control

Limits abstraction

Flight simulator

Physical pool cue and balls

More novice oriented

DIRECT MANIPULATION VIRTUES

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

Playing violin or putting on record

DIRECT MANIPULATION VICES

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

Directness is trade off with generality and abstraction

DIRECT MANIPULATION MEASURES

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

Creating material

Questions

Answers

Explanations

Setting up logic

Organizing modules

Organizing lessons

Organizing course

METAPHORS & SIGNS (39)

“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 subject 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.

Semantography Samples

[pic]

THE STRUCTURAL MODEL OF COMMUNICATIONS

[pic]

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.

[pic]

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

[pic]

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.

[pic]

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.

[pic]

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

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download