This report is also available as an Acrobat file.

Contents
Authoring and Design for the WWW

DESIGN INTO PRODUCTION

Some basic principles of information design

There are basic principles of information design which apply as much to the Web as to paper documents. In addition new issues arise which are specific to interactive electronic documents. This section provides a background to the discussion of design examples which follows.

Since HTML was devised as a means of presenting information visually, based on the functional description of the elements of the text, it is no surprise that it attempts to embody some of the basic principles of information design, which it does by laying out information according to simple rules' stored in the various browser packages. Examples of such simple rule-based design include the use of scale (in different font sizes) to represent importance; grouping (for example into appropriately separated paragraphs), and alignment (including indenting and the use of tabulation).

Scale

We can use differences in size to indicate relative importance.

In practice

Sizing of type for headings is automated in HTML, using a hierarchy where H1 is the most important and largest, down to H6, the smallest. Arbitrary pieces of text can be sized differently in HTML using the ; and  tag where N is an increment in size in relation to the size defined in BASEFONT (the default is three). HTML-3 has tags called BIG and SMALL.

Pictures can be any size you wish. Originally in HTML they appeared on the user's screen in the same size as the originator's original picture, but HTML-3 offers HEIGHT and WIDTH attributes which can be set. Relative sizes of pictorial graphics are an obvious way to indicate hierarchies of importance to the user. For example , if an HEI's logo appears on every page it will be sufficient to have it as small as possible consistent with being decipherable. There is no need for this visual reminder to compete with substantive elements of the page.

Of course making items the same size as each other is a powerful cue that they have similar status see similarity below.

Grouping and spacing

Items which are clustered together are perceived as forming part of a meaningful group, especially if another separate group is also clustered.

In practice

Whereas page layout packages allow adjustment of the spacing between letters and words, no control is provided in HTML. For paragraphs, the HTML paragraph tags and identify the start and end of each one. To identify these paragraphs visually, Web browsers insert extra space. The typists convention of using an extra carriage-return to make a paragraph break is not used: in fact, all carriage-return characters are ignored in HTML. Because the space between paragraphs is determined by the browser, the control that a graphic designer might expect over how much space is inserted is not available. Still less is it possible to dictate whether space is inserted before or after the paragraph.

Similar automatic spacing is used for all other HTML elements, including the various levels of heading, H1 to H6. It is impossible to get less spacing in a Web page than is automatically created, and the only option for making more space is to insert one or more complete empty lines using the   tag. Using extra  tags to make spaces is not correct and is unlikely to work in many browsers, simply being ignored.

Grouping is also used to enable interface controls to be perceived as forming sets with similar functions.

A cluster of controls, whose grouping implies relatedness of function.

Grouping is a powerful aid to successful information design. In tabular information (see Alignment) different interpretations can be promoted by using grouping in different ways.

                             Coal      Gas       Oil
                   1992      1.2       1.3       1.2
                   1994      1.4       1.5       1.4
                   1996      1.6       1.4       1.5

In this table, comparisons within fuel categories are prioritised

                             Coal Gas  Oil
                   1992      1.2  1.3  1.2

                   1994      1.4  1.5  1.4

                   1996      1.6  1.4  1.5

In this table, attention is drawn instead to the profile within each year

Many browsers now support the HTML Table element. Tables made in this way allow a high degree of control over the placing of items.

Tables are an example of something which is tedious and error-prone when done by writing HTML code, and will certainly be automated using graphical layout tools for all but the most purist authors. For more on tables, see Alignment, next.

A special case of Grouping is the use of framing and other devices to form a graphical barrier between one block of information and another. See Framing, below.

Contents

Graphics Multimedia Virtual Environments Visualisation Contents