Definitions
icon
sign/symbol
metaphor

''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

The 32 x 32 pixel matrix

O. Neurath, 1936, Basic by Isotype, Psyche Minitures General Series No. 86, Kegan Paul, p.27.

Acrobat full article: Designing Icons for Graphical User Interfaces. 272K download

At present most system icons have a 32 x 32 pixel matrix which keeps elements within an Internet icon together. If the size of the matrix is increased, which is normal for the Internet, then the internal relationships that work closely together do not extend the possibilities for the relationships that form within a compound icon - all can be said within 32 pixels. More recent website redesigns use icons sets that are within a 16 x 16 pixel matrix. Examples of this are africaonline (Namibia) and infovia (Guatemala).

When discussing symbols Otto Neurath points out that 'a picture which makes good use of the system gives all the important facts in the statement it is picturing. At the first look you see the most important points, at the second, the less important points, at the third, the details, at the fourth, nothing more'.

At present a 32 x 32 pixel matrix keeps elements within an icon together. So, to consider Neuraths observations - if elements within an icon are considered as squares, and four squares are placed close together a fifth negative white space is created between the four squares in the form of a thin white cross. Visual oscillation occurs when both positive and negative space are balanced. The eye perceives both four black squares and a thick white cross. Any more space and the squares become four individual items. Space now serves to break-up the relationships. If the squares were placed against the background of the web page, this also changes the relationship of the squares.

The square elements relate to each other even when a border is added. When the edge has been added the relationship of the elements become closer with the border, these elements are no longer related to each other. So, it is not only the website interface that surrounds an icon which impacts upon it, it is also the compound icon itself. The relationships illustrated with the squares do not take into account that when a border is used, it is also normally part of the metaphor. First if we consider system icons the most commonly used metaphor for a border is a file. Other borders create family groups of icons such as 'Extensions', 'Control panels' and 'Control strips'. Regardless of what a border represents, shapes can be assigned meaning, which allows the user to identify the computer symbol family type and function. For websites this again will aid user navigation and task guidance.