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.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related download
- paper title use style paper title
- new routines for working with the dialect topography databases
- higher graphic communication desk top publishing
- author s guide for electronic submittal of acm
- section ii learning outcomes objectives
- wisconsin s model academic standards visual arts
- gsa advantage
- authors template csj
- overheads set 2 design of interactive systems
Related searches
- types of economic systems quizlet
- importance of information systems pdf
- types of economic systems pdf
- roles of information systems pdf
- types of information systems pdf
- department of retirement systems wa
- design of analog cmos integrated circuits
- examples of information systems pdf
- management of information systems jobs
- management of information systems pdf
- design of analog cmos integrated circuits 2nd
- aashto design of pavement structures