Academia.eduAcademia.edu

Visual Techniques for Traditional and Multimedia Layouts

1994

3. the arrangement, which answers to the question "according to which order to place information on a screen?" (or "how should IO be arranged in a PU?" by logical order, by frequency or by predefined format?). This study is devoted to the layout problem in the TRIDENT project (Tools foR an Interactive Development ENvironmenT) , which is dedicated to highly interactive business -oriented applications. In this project, the placement problem consists of a computer-aided visual placement of interaction objects (IO) included in a more composite IO called Presentation Unit (PU). Two strategies for placing IO within a PU are characterised and investigated : a static two-column based strategy and a dynamic right/bottom strategy. Each strategy decomposes the placement into three partially overlapping dimensions : localisation, dimensioning, and arrangement. A set of simple mathematical relationships is introduced to rate the quality of visual principles gained with the re...

Visual Techniques for Traditional and Multimedia Layouts Jean Vanderdonckt Facultés Universitaires Notre-Dame de la Paix, Institut d'Informatique, rue Grandgagnage, 21, B-5000 NAMUR (Belgium) Tel: +32 (0)81-72.49.75 Fax: +32 (0)81-72.49.67 E-mail: jvanderdonckt@info.fundp.ac.be ABSTRACT Character User Interfaces (CUI) generally display only pieces of text and semi-graphical objects, whereas Graphical User Interfaces (GUI) display interaction objects (IO) such as icons, check boxes, list boxes, radio buttons and push buttons. Traditional GUI do not often go beyond such existing IO. Multimedia GUI add interactive objects such as pictures, images, video sequences that could serve as a base for sophisticated user interaction. All these types of user interfaces have in common the problem of determining a basic layout of IO. The complexity of this problem is proportional to the variety of IO accessible for the designer. This paper summarises visual techniques exported from the area of visual design to be further exploited for user interface. These visual techniques provide the designer a wide range of means for laying out IO. A small set of guidelines for effectively applying these visual techniques is given. KEYWORDS: Graphical Applications, Grid, Interaction Objects, Interactive Objects, Layout, Multimedia Applications, Visual Interface Design and Management, Visual Interaction, Visual Placement, Visual Techniques. INTRODUCTION When the designer sketches the components of a user interface, the first thing to do is to select appropriate interaction and interactive objects according to the user's task. The second responsibility is to determine the basic layout of these selected objects ranging from the most important to the least important: e.g. the main application window, the title and menu bars, if any, the functional areas of the application window (e.g. the status bar, the toolbar), all child windows, dialog boxes and panels with their contents. This layout consists of interaction objects and interactive objects [11]. Interaction objects, also called widgets or controls, encompass static objects (e.g. labels, separators, group boxes) and dynamic objects (e.g. edit boxes, radio boxes, option boxes). Interactive objects cover every other kind of object Xavier Gillo Facultés Universitaires Notre-Dame de la Paix, Centre de Calcul, rue Grandgagnage, 21, B-5000 NAMUR (Belgium) Tel : +32 (0)81-72.50.10 Fax : +32 (0)81-72.50.23 E-mail : xgillo@cc.fundp.ac.be that a multimedia user interface could virtually display : static icons, drawings, pictures, images, sketches, video sequences, graphics, Each object is dedicated for some special user interaction. For instance, an image of the human body might include hot spots for defining different sensitive regions of the body in order to be selected, displayed, explained or zoomed. Some images might be extracted from a video sequence to be analysed by an image-processing system. In the rest of this paper, interaction and interactive objects will be referred to as IO.  Fig. 1. The layout of a dialog box and its underlying grid. Up to now, determining the basic layout consisted of calculating and drawing any geographical composition of functional areas of the user interface into a comprehensive format depending on the user's task. In particular, solving the layout problem for a dialog box consists of drawing aside the set of related IO, assembling them into a rectangular area, and surrounding them by borders. The layout then looks like a set of rectangles when drawn around each IO (fig. 1a). A layout grid consists of a set of parallel horizontal and vertical lines that divide the layout into units that have visual and conceptual integrity [5,9,21,29, 31]. The line intersections delimit these units into rectangles that constraint the localisation of the IO (fig. 1b). Equally spaced lines typically establish external margins in the layout and consistent space between different IO. Layout grids are very practical for form fill-in user interfaces and for text displays since their IO reflect the layout of the source document or the page of a book [15,23]. Such a layout grid can be applied for both the background and foreground of screens, as in HyperCard [16]. Today, one problem arises in modern user interfaces (especially multimedia interfaces) where layout grids are no longer valid since the layout no longer consists of vertical and horizontal lines. Instead, the layout may be based on other lines (e.g. oblique lines, discontinuous lines), convex shapes (e.g. lozenge), planes (e.g. planes with a vanishing point), and volumes (e.g. cylinder). Therefore, the concept of layout grid should be extended to the concept of layout frame. A layout frame consists of dots, lines, shapes and volumes that constraint the localisation of IO [2]. In the rest of this paper, the term "layout" will be used for short. To help the designer deciding such a layout, several visual techniques are now introduced and exemplified. to the left of the vertical axis, instability is provoked and immediately countered by adding an IO if the same weight to the right of the vertical axis. DEFINITION OF VISUAL TECHNIQUES Fig. 3. Symmetrically and asymmetrically balanced layouts. A visual technique relies on a commonly accepted visual principle to suggest the arrangement of the layout components. The visual techniques listed in this section are sorted by similarity and not by rank of importance because all visual principles cannot be applied with the same representativeness. Some principles are very thorough to apply, some other are more difficult to compel with, and some other become very hard to translate. Moreover, applying this or that principle mostly depends of the involved IO and the visual aims that the designer has in mind. Some principles cannot be excluded nor all principles can be included. Five sets of visual techniques which can be appeared by similarity are identified :      physical techniques : balance, symmetry, regularity, alignment, proportion, and horizontality; composition techniques : simplicity, economy, understatement, neutrality, singularity, positivity, and transparency; association and dissociation techniques : unity, repartition, grouping, and sparing; ordering techniques : consistency, predictability, sequentiality, and continuity; photographic techniques : sharpness, roundness, stability, levelling, activeness, subtlety, representation, realism, and flatness. Balance does not have to take necessarily the form of symmetry. Balance can be realised through symmetry (fig. 3a) and asymmetry (fig. 3b) (see symmetry). Symmetry provides a balance to the layout by centring titles, headings on both sides of the axis, by placing two columns of equal length, one on the left, one on the right. The weights of IO can be adjusted asymmetrically [6], although it is technically more complicated to reach a balance with dynamic asymmetry than with static symmetry. Reaching asymmetric balance is a matter of weight, size and position. Symmetry [6,13,17] consists of duplicating the visual image of IO along a horizontal (fig. 4a) and/or vertical axis (fig. 4b) (e.g. left on the right, top to bottom, or vice versa). Achieving symmetry automatically preserves balance, but the balance can be performed without symmetry. Symmetry (fig. 5a) is very simple to verify and logical to imagine, but can lead to static layouts without originality [6]. The opposite of symmetry is asymmetry (fig. 5b) where at least one IO does not possess a replication on the other axis side. Fig. 4. Horizontally and vertically symmetric layouts. PHYSICAL TECHNIQUES Balance is a highly recommended technique evoked by many authors [6,7,13,14,17]. Balance is a search for equilibrium along a vertical or horizontal axis in the layout. If a weight is attached to every IO, balance requires that the sum of IO weights on each hand of the axis remains similar (fig. 2a). Balance is justified by the human perception and intense need for it in visual layouts [30]. Balance is a technique in which there exists a gravity centre located on a vertical or horizontal axis. The opposite of balance is instability where IO are not distributed equally on each hand of the axis (fig. 2b). "They seem ready to topple over. "[13]. Fig. 5. Symmetric and asymmetric layouts. Regularity [6,13] is a visual technique establishing uniformity of IO placed according to some principle, method, convention that does not change in one particular layout or across different layouts. Regularity is very concerned with the horizontal and vertical uniformity and equilibrium. For instance, a layout where IO are uniformly spaced in columns and rows is qualified of regular (fig. 6a). Fig. 2. Balanced and unbalanced layouts. Balanced layouts are not only easy to understand, but, also, easy to design by a game of counterpoise. If an IO is placed Fig. 6. Regular and irregular layouts. Irregularity arises when no such principle, method or convention exists, when no logical order of IO is apparent (fig. 6b). Irregularity emphasises unexpected, unusual and unconforming layout grids [6]. Alignment [18,24,27] is probably the most accessible and practical visual technique. Alignment is guaranteed if the number of vertical alignment points in a row and the number of horizontal alignment points in a column is reduced, minimised (fig. 7). Misalignment - the opposite of the alignment - occurs when the number of alignment points is significantly high (fig. 7). Misalignment is accentuated when all IO containing task's data are placed just after their identification labels. Fonts with descenders and ascenders may affect alignment of similar IO if badly used. 1 Fig. 9. Horizontal and vertical layouts. COMPOSITION TECHNIQUES Simplicity [6,13,24,32,33] is directness and singleness of layout, free from secondary complication or sophistication (fig. 10a). Simplicity improves largely the ease of understanding the layout grid or frame. Simplicity is guaranteed by placing IO according to a logical and natural arrangement (e.g. by frequency, by physical property) driven by the task's semantics. Complexity - the opposite of simplicity - increases visual intricacy with too much units, forces and results and hinders any organisation of the layout grid (fig. 10b). Tiled IO are considered as a simple layout ; varying overlapping IO are considered as a complex layout. 2 1 2 3 4 1 2 1 2 3 4 5 6 Fig. 7. Vertical, horizontal alignments and misalignments. Fig. 10. Simple and complex layouts. Proportion [6,13,17,21,24,31] strives for an aesthetically appealing ratio between the dimensions of IO (often composite IO) (fig. 8a). Because dimensions exist in the real world, we can feel them, we can see them, we can compare them. Mirroring dimensions in layouts consists of retracing this feeling, this illusion in the user interface. The ratio is calculated by dividing the height of an IO by its length. Several proportions have been either proved aesthetic (e.g. the Golden Ratio 1: 1  5 used by the Greeks) or widely 2 and conventionally preferred (e.g. 1:2, 1:2, 1:1.29, 1:1:5, 1:4/3, 1:1.6 as recommended by Marcus [21] and Tufte [31]). Disproportion - the opposite of proportion - is implied at the time no special ratio is used or a large difference appears between the two dimensions (fig. 8b). Economy [3,6,13,20] is the frugal and judicious use of IO in the layout to present information as simply as possible. Economy can be pursued when necessary and sufficient IO are placed in the layout and nothing else : no IO that are extraneous to the user's task (fig. 11a). The aim of economy is the fundamental visual layout, emphasising the conservative and understatement of the poor and the pure [6]. Economy is intended to define the boundaries of necessity within which it can work successfully [3]. Intricacy - the opposite of economy - is manifested when infrequent, unwanted IO encumber the layout unnecessarily visually or not. Intricacy endlessly details the layout with ornamentation or overcrowding IO (fig. 11b). This situation particularly occurs when highly detailed or digitised images with a lot of decoration are placed rather than simple IO that are reduced to the essentials and whose important features are the only salient features. Fig. 8. Proportioned and disproportioned layouts. Horizontality [6] is a corollary of the previous technique : it shows that layouts with greater length than height (i.e. with a horizontal ratio) are predominant (fig. 9a). Fig. 11. Economic and uneconomic (or intricate) layouts. Verticality - the opposite of horizontality - arises if unwanted layouts have greater height than length (i.e. with a vertical ratio). Horizontality is highly preferred than verticality : having long, narrow vertical dialog box is not sober (fig. 9b). Understatement [6] and its opposite, the exaggeration, are equivalent to the couple economy-intricacy, but in the domain of intellectual, mental representation rather than physical, spatial representation. Understatement supposes that the viewer of the layout is able to deduce a maximum of information from a minimum of IO to be presented (fig. 12a). The verbal counterparts of understatement is euphemism and ellipsis, i.e. the art of saying much things with little words. Exaggeration shows in the layout a minimum of information with maximised IO (fig. 12b). The verbal counterparts of exaggeration is hyperbole. Exaggeration is achieved through extravagance, amplified expressions that are enlarged far beyond possible. negativity - displays IO in a bright colour on a dark background (fig. 15b). If negativity has been experimentally tested to reduce errors and reading time, to increase subjective satisfaction and legibility, positivity may still be used to convey special atmospheres, often with light IO (e.g. grey pictures). Fig. 15. Negative and positive layouts. Fig. 12. Understated and exaggerated layouts. Neutrality [6,14] cuts every resistance, repulsion, or even belligerency of the layout's viewer (fig. 13a). A neutral atmosphere in the layout is obtained by placing all IO at the same level, with the same presentation attributes (or, at least, with little variations) as much as possible and, preferably, with no highlighting method (e.g. no blinking, no underlining, no bolding, no boxing). Accent - the opposite of neutrality - is equivalent to the rendering of any highlighting method on a particular IO against a sameness of background (fig. 13b). Most graphical highlighting methods are useful : reverse video, colour, brightness, boldness, boxes, borders, different sizes, overprinting, magnifying [14]. Transparency [6,26] means a visual layout where IO, superseded by other IO, can still stay visible behind or through them (fig. 16a). Transparency is typically required when displaying text on a colourful picture. A light transparent surface (e.g. grey or blue) is added between the text and the picture to improve the legibility of the text and to allow in spite of all the visibility of the picture behind the text. Transparency can be used by creating a semi-transparent text container so that columns of text can be incorporated into an image without obscuring the artwork. Opacity - the opposite of transparency - means the complete blocking out, concealing of IO that become visually occulted (fig. 16b). Having partially occulted IO force the user to guess what IO (part or complete) are hidden. Opacity can also be used to give the impression of a relative distance or depth (see depth) legislated by overlapping (fig. 16c). Fig. 13. Neutral and accentuated layouts. Fig. 16. Transparent and opaque layouts. Singularity [6] is the focus of a layout on one separate and solitary IO, unsupported by any other IO or composition of IO (fig. 14a). Specific emphasis is conveyed on a simple IO, despite the presence of other IO. Juxtaposition - the opposite of singularity - expresses an interaction between IO placed side by side or to be compared with an activated relationship or to be related by any other visual technique (fig. 14b). ASSOCIATION AND DISSOCIATION TECHNIQUES Unity [3,6,13] is the placement of individual IO into one totality (e.g. a window) that is visually all of a piece (fig. 17a). With unity, all IO seem to belong to each together and to be bound so that they can be seen as a whole and taken as one sealed unsectile thing : seeing one element is seeing the whole. Unity can be revealed with similar sizes, colours, surrounding blank spaces, logical organisation exhibiting interrelation of IO in terms of the whole. Fig. 14. Singular and juxtaposed layouts. Negativity [6,14] displays IO in dark colours on a light background. Black IO (text, separators, labels, fields) and coloured IO (bitmaps, images) are generally displayed on a white or grey layout (fig. 15a). Positivity - the opposite of Fig. 17. Unitary and fragmented layouts. With fragmentation - the opposite of unity -, all IO seem to be isolated, to retain their own character themselves (fig. 17b). Fragmentation is one of the most unbelievable danger of multimedia layouts where IO, as they appear non convex, are not aggregated nor related. Repartition [7,14] proposes to share IO among the four quadrants of the layout as systematically as possible (fig. 19a). Experimental results argued it is not often the case while first, second, third, and fourth quadrants consume 40%, 20%, 15%, and 25% of the IO, respectively (fig. 18). 40% 20% 25% 15% Fig. 18. IO Repartition among the screen quadrants. Quadrant preference - the opposite of repartition - occurs when IO are preferably placed in one or many specific quadrants. Of course, we have taken into account the fact that human eyes favour the left-hand and lower area of any layout (this phenomenon is called Preference for lower left). But there are numerous examples of poorly distributed user interfaces. Most of these examples show displays in which IO are pushed over to the left-hand portion of the layout (fig. 19b). Is it because Western users read from left to right or because programmers find very easy this way of placing IO? In all cases, Cobbaert [4] recommends that the repartition should be compatible with the task structure, rather than with the file or database structure. amount of IO that are placed in Indian file or where there is some free space all over the layout. Fig. 20. Grouped and split layouts. Sparing [6,13,14] looks for avoiding cluttered or overcrowded layouts : it suggest to keep the visual loading of a layout within reasonable boundaries (fig. 21a). Density - the opposite of sparing - takes no care about stacking and packing IO too tightly in the layout (fig. 21b). Generally, much layouts contain too much IO to the point that easy scanning is no longer possible. The trend is to fill each layout space with as much IO as possible (e.g. text, fields, push buttons, images). The visual loading, sometimes called density, is, by definition, the proportion of busy positions on the layout. For alphanumeric displays, it can be expressed as the ratio of displayed characters by the total amount of characters in the layout [33]. In graphical user interfaces, the density is calculated by dividing the number of lighted pixels by the total number of available pixels. Streveler & Wasserman [27] also measure the field density which is the total amount of fields (static of dynamic) in the layout, and the box density, which is the total amount of visual groups whether surrounded or not. Tullis [33] recommends that layout density should not exceed 25%. Horton [14] recalls us that density of a well-designed paper page is located around 40%. Fig. 19. Equally repartitioned and sprinkled layouts. Grouping [6,12,14,22,32,34] is a visual technique that creates a circumstance of give and take of relative interaction (fig. 20a). Grouping is mainly based on the law of attraction : two grouped IO fight for attention in their interaction by establishing individual statements depending on the distance between the IO. The close the IO are, the stronger the attraction is. Grouping is also affected by the law of similarity : opposite, dissimilar IO repel each other, but equal, similar IO attract each other. When dissimilar IO are grouped, the human eye increases the relation between them. When similar and dissimilar IO are grouped, hidden connections are identified as fast. Grouping is one of the best techniques for structuring a layout namely by providing an aesthetic appearance, by helping remembering and by accelerating a layout search. Splitting - the opposite of grouping - means that no such structure is appearing: IO are disseminated without the ability to visually perceive an attraction or a repulsion between IO (fig. 20b). Typically, the layout consists of a certain Fig. 21. Uncluttered and cluttered layouts. ORDERING TECHNIQUES Consistency [6,13,20] is a visual technique for expressing visual compatibility with the subject, for developing a layout whose IO are dominated by one sound, uniform, constant thematic (fig. 22a). Consistency takes place not only in the dimensions or the ordering of IO, but, also in their (little) differences. Variation - the opposite of consistency - has no burdens for the domination of one or many themes (fig. 22b). Variation is the strategy for identifying changes, elaborations as variations in musical themes. Variation do not have necessarily to take the form of inconsistency, where same IO are laid out at different places from one layout to another. Moreover, variation can be assumed by a series, a continuum of IO from which contents, shapes, colours, themes vary significantly. Fig. 22. Consistent land varied layouts. Predictability [6,13,20] is a visual technique where IO are placed according to some order or plan that is highly conventional and recognisable (fig. 23a). Knowing the information structure of the task, viewing one layout or remembering it should enable the user to predict how another layout will be arranged. Predictability also suggests the user is able to foretell in advance what the entire layout will be just by seeing a minimum part or some significant part of it. Predictability is enhanced through layout consistency (see consistency). Spontaneity - the opposite of predictability does not suggest such a highly conventional plan (fig. 23b). The user will therefore be unable to infer successive layouts from already viewed layouts or to generalise the entire layout from its parts. Spontaneity is synonym to impulsion, freedom, unconstrained, and unselfconsciousness. posite of continuity - interrupts the visual connections that may exist between IO (fig. 25b). Episodicity exploits the rupture of connection, the disconnection, or the loosing of these connections. Episodicity means the reinforcement of the parts of a layout without adding new meaning or message with all IO taken as a whole. Fig. 25. Continuous and episodic layouts. PHOTOGRAPHIC TECHNIQUES Sharpness [6] is a visual technique that is closely related to clarity of both physical state and expression (fig. 26a). Having sharpness in a layout can be interpreted as having clearly distinctive IO (e.g. information to be input by the user should be distinctive of information to be displayed by the system); IO with precise outlines, hard edges, distinct margins.   The effect of sharpness is a distinct atmosphere, easy to assimilate. Diffusion - the opposite of sharpness - does not draw, place IO carefully, opting for less precision of character, but more fuzzy, wadded atmosphere, more feeling and warmth (fig. 26b). Fig. 23. Predictable and spontaneous layouts. Sequentiality [6,13,20] is a plan of layout that is arranged in a logical, rhythmic, expected order (fig. 24a). Many orders can be followed to sequentially place IO : numerical order, alphabetical order, chronological order, physical order, type order, sequential order, functional order, logical order, frequency order, importance order, consensus order, designation order, For example, the importance order sorts IO by decreasing rank of importance by placing first important IO and relegating secondary IO to the background. Randomness - the opposite of sequentiality - promotes the absence of a particular ordering plan, that is a layout where the IO flow cannot be detected due to the lack of plan, or a disorganised, accidental, random one (fig. 24b).  Fig. 26. Sharp land diffused layouts. Roundness [6,14] is the preference for round IO giving a smooth atmosphere (fig. 27a). Angularity - the opposite of roundness- is the preference for IO with angular, rugged outlines (fig. 27b). Fig. 27. Round and angular layouts. Fig. 24. Sequential and random layouts. Continuity [6] uninterrupts the visual connections existing between the IO (fig. 25a). These connections are fundamental for preserving a unitised visual statement. Continuity can be achieved by uninterrupting steps from one IO to another. This is often the case in video sequences, series of snapshots, morphing pictures, Continuity means the cohesion of the parts to the whole layout. Episodicity - the op-  Stability [6] is the expression of preference for IO that have clear base to rest on. When rectangular, squared IO are placed on their bases, the layout appears stable because of the stability of its inherent IO (fig. 28a). Stress - the opposite of stability - arises when IO are not placed on their firm base or stability : a circle is a good example (fig. 28b). But placing a lozenge, a rectangle or a triangle on one of its edges causes stress (fig. 28c,d,e). When an IO is intrinsically irregular, the analysis and establishment of balance is more involved and intricate. Stress needs a stabilisation process. Fig. 28. Stable rectangle, unstable circle, lozenge, rectangle and triangle. Levelling [6] is a visual technique for automatically establishing balance through artefacts. IO are laid out so that balance axis will stand out (fig. 29). Fig. 29. Levelling of a layout. Through our automatic perception, balance can be emphasised (or de-emphasised, respectively) when we recognise easily (with difficulty, respectively) the abstract visual condition of balance. This is often the case when IO are equally distributed in two columns with two alignment points per column. Sharpening - the opposite of levelling - on the other hand destroys any automatic balance by placing IO on unexpected, unbalanced locations (fig. 30). Fig. 30. Sharpening of a layout. Activeness [6] reflects motion through explicit representation or implicit suggestion. The goal of activeness is to design an active and energetic layout with lively postures (e.g. arrows, stopped image in a video sequence, an action snapshot) (fig. 31a). Passiveness - the opposite of activeness withdraws any IO that could bring a dynamic effect (fig. 31b). Passiveness relies on the technique of static representation, which presents an atmosphere of quiescence, resting by equilibrating IO. Fig. 32. Subtle and bold layouts. Representation [6,26] subsumes subtlety since its intended purpose is to use IO that concretely represent the real world in details (fig. 33a). Abstraction - the opposite of representation - uses IO that abstract the real world in many ways (fig. 33b). Icons, for example, can be representative if they simply translate a physical object or can be abstract if they mimic some action or just represents metaphors or major characteristics of the physical objects. For instance, concrete icons are believed to be better than abstract icons. Fig. 33. Representative and abstracted layouts. Realism [6,26] is the natural technique of camera. Many tricks and conventions are able to replicate the same visual cues that our eyes convey to our brain when receiving an external image (fig. 33a). Realism tries to follow the same way by reproducing exactly what we see (maybe is it "what you see is what you lay out"?). Perspective [26] is one possible technique for providing realism in 3D contexts. Distortion - the opposite of realism - tampers with realism, seeking control of effect through the deformation of the real IO in shape, form, colour, (fig. 33b) This technique covers zooming in and out, magnifying lens, fish-eye views [12,19], pictures cut in moved rows, teared pictures,   Fig. 33. Real and distorted layouts. Fig. 31. Active and passive layouts. Subtlety [6] is a visual technique in order to make a fine distinction, shunning any obviousness and energy of purpose (fig. 32a). Subtlety is often synonym with ingeniosity since it requires delicate, highly refined IO. Boldness - the opposite of subtlety - looks for every obvious IO in its context (fig. 32b). Boldness is often synonym with optimum visibility of all IO in the layout. Flatness [6] does not use any technique for providing perspective, so erasing the natural feeling of dimension and space (fig. 35a). Depth - the opposite of flatness - tries to render perspective by replicating the environment through effects of light, shade, gradient, overlapping, (fig. 35b).  Fig. 35. Flat and depth layouts. Fig. 37. A highly-interactive multimedia layout. Fig. 36. A simple multimedia layout. EXAMPLES OF VISUAL TECHNIQUES Fig. 36 illustrates very well the three first sets of visual techniques (i.e. physical, composition, association and dissociation techniques). Symmetry is not preserved, but balance is partially established with the two columns whose length are equal, but whose heights differ significantly. The plan used for regularity promotes the localisation of the picture on the upper left part of the layout, because this information is the centre of all interactions and informations displayed elsewhere. Alignment is extremely well achieved because of the two columns reducing the number of alignment points. Even if these columns highlight more verticality than horizontality, they are sized with appropriate proportions : the area containing the picture has a good aspect ratio [9], the textual zones are limited in height and separated. Visual techniques are most of the time combined with themselves for one part or for the whole layout. The most original application of combined visual techniques comes in fig. 37. The layout frame is made of a wide variety of shapes (flat title and oblique floor) and volumes including cone, cube, ellipse, cylinder, sphere, and parallelepiped (fig. 38). Depth (caused by the wired plan with perspective) is fairly combined with stress (caused by the oblique plan). Repartition (there is space enough between the objects) is combined with fragmentation (all objects are placed separately in a non-sequential way). It is highly abstract because interactive objects only consist of volumes with sliding arrows to let the user input a bounded value. There is not any consistency in the main interactive objects since their manipulation vary from one to another. That background of this layout is black, showing white and green information, grey buttons. Therefore, positivity with a very high degree (this may obscure the reading) is reached rather than negativity, but the accent is placed on the picture since it is lighter. Repartition is guaranteed by filling the two columns of the layout, with push buttons on the bottom. Grouping is also used due to the progressive disclosure of objects : the title and the picture are first displayed, textual information follow group by group, with different definitions highlighted in each group, commands end the reading path of the layout in each column. The order of objects in each column is highly predictable and sequential since it follows a natural and logical order of reading and understanding. Locating the text objects first should force the reader to first look at the picture on the right before understanding the contents of the information. Photographic visual techniques are relevant to the picture : sharpness, angularity; stability, levelling, passiveness, boldness, representation, realism and flatness give a 6/9 score in favour of harmony and a 3/9 score in favour of contrast. Despite these qualities, this screen still relies on a layout grid only consisting of vertical and horizontal lines. Fig. 38. The underlying layout frame. Clicking on the spheres or the cylinders on the right triggers the application functions. All physical visual techniques are no longer preserved, e.g. no balance, no symmetry, no regularity, no alignment. If one judges the appropriateness of such interactive objects to input a bounded value, this layout is more intricate than economic and more exaggerated than understated. If traditional interaction objects were employed, spin buttons or scales should have been selected instead. APPLYING VISUAL TECHNIQUES Layout Guidelines Based On Visual Techniques The experience gained by applying these visual techniques broadly allows to suggest some guidelines, as already done in HyperCard [16] :  apply physical visual techniques for traditional layouts and especially when the layout is text-dominant rather than graphic-dominant; balance is the most important visual technique to achieve;  apply composition visual techniques with contrast so that visibility is not endangered;  apply association and dissociation visual techniques with contrast carefully : fragmentation and quadrant preference may hold in certain cases, but splitting and density are to be avoided in every case;  apply ordering visual techniques with contrast where the user's task is intrinsically unstructured or asynchronous, and with harmony where the user's task is structured or sequential;  apply exaggeration, accent, singularity to draw a visual impact on the most important objects of the frame if no ordering visual techniques can be applied;  apply photographic visual techniques for pure multimedia elements only;  prefer abstraction rather than representation in each frame where the real world should not necessarily be depicted as is : abstract images or raster pictures are more easily understood than complex digitised images;  combine visual techniques with contrast only when appropriate : the combination of techniques increases the visual impact of the frame, but uncareful combination may destroy the intended purpose; Automatic Layout Generation GRIDS [8,9,10] is a good example of a system for automatically generating a layout. It allows automated layout of text, pictures and virtual interaction devices according to a layout grid. From the architecture point of view, Feiner [9] recommends to build a media layout component for laying out IO. This component may rely on the mentioned visual techniques to determine the localisation, the dimensions and the arrangement of each object [1]. The media layout could generate a first layout to be further adjusted by the designer or the designer may first layout roughly the IO to be further constrained by the media layout component. Seligmann & Feiner [25] also use some of the introduced visual techniques to automatically generate the layout of a control panel for an electronic device. Though the visual techniques cannot be controlled nor parameterised, this generation is intent-based on three-dimensional illustrations with the help of a predefined set of interactive objects (e.g. push button, light indicator, switch, knob). In all cases, these systems prove the feasibility of automatic generation of layout with some partial visual techniques. Our future work will focus on automatic layout according to an existing layout frame. Each predefined and specific lay- out is to be defined first as a template for future usage and reusability. Each template would include effective combinations of visual techniques that have been proved successful for certain cases. Each case is defined according to its content which can be text-dominant, graphic-dominant, image-dominant, and the nature of the content. Automatic Evaluation Based On Visual Techniques On the other hand, it is sound to imagine an automatic tool that would provide the designer more assistance in the evaluation process. All physical visual techniques can be automatically and easily computed [17,27]. Evaluating composition visual techniques should compare the objects included in the layout with the task analysis. Singularity vs. juxtaposition can be evaluated by examining the proximity of the localisation of the objects. Negativity vs. positivity can be evaluated by a colour analysis where a weight is allocated to each colour. Association and dissociation visual techniques can be evaluated by comparing the positions of all the objects within the whole frame. Evaluating photographic visual techniques seems the most complex task since it is rather based on the visual feeling and impression. CONCLUSION Maybe is still to soon for speaking about a real system which effectively and automatically generates a layout for a multimedia application from specifications? As a matter of fact, our knowledge about multimedia IO is insufficient. Nevertheless, we are able to say some things :  multimedia IO could be qualified with attributes [28];  reasonable proportions for displaying images and video sequences are already known [9,10];  visualisation techniques for special IO (e.g. 3D objects, maps) are well studied [12];  the layout frame should be governed by these attributes and information [2]. It is sure that the introduced visual techniques could be part of such a layout generator, but one cannot assume that these visual techniques are the only aspect to consider : 1. visual techniques that have been exposed are purely visual, resting on aesthetic and psychological factors and disregarding human aspects deriving from user requirements; 2. effective visual design should rely on task analysis. Our visual techniques are considered separately from task and user's requirements. This disconnection should not be forgotten, but should be re-established once the user's task is known; 3. the visual techniques only form one of the very fist steps towards a better understanding of effective visual layouts. The present study should therefore be inscribed in a continuous framework; 4. applying these techniques in a general fashion does not preclude that users have to be avoided. Conversely, specifying layouts should follow one actual trend characterised by the co-operative participation of the users. The aim of the visual techniques is simply to keep the designer's mind conscious to the visual choices made with these users; 5. other techniques should not be left out : for instance, time, window sequencing, animation, window overlapping and tiling should also be considered, typically in multimedia applications. These techniques are complementary with present visual techniques, not mutually exclusive. ACKNOWLEDGMENTS The authors would like to thank the reviewers for their helpful comments. This work was partially supported by the FIRST, Ref. RASE/SCHL319/Conv. 1487 and by the "Informatique du Futur" project under contract N°IT/IF/1. Any opinions, findings, conclusions or recommendations expressed in this paper are those of the authors, and do not necessarily reflect the view of the Belgian Government. REFERENCES 1. Bodart, F., and Vanderdonckt, J. (1994). Guide ergonomique de la présentation des applications hautement interactives. Namur: Presses Universitaires de Namur. 2. Bodart, F., and Vanderdonckt, J. (1994). Visual Layout Techniques in Multimedia Applications. In CHI'94 Companion, New York: ACM Press, pp. 121-122. 3. Bowman, W.J. (1968). Graphic Communication. New York: John Wiley & Sons. 4. Cobbaert, J.L. (1985). La Communication homme-machine dans le monde informatisé de demain. In R. Patesson (Ed.), Ergonomie et Conditions de travail en informatique. Brussels: Editions de l'Université de Bruxelles, pp. 160-176. 5. de Baar, D., Foley, J.D., and Mullet, K.E. (1992). Coupling Application Design and User Interface Design. In Proceedings of CHI'92. New York: ACM Press, pp. 259-266. 6. Dondis, D.A. (1973). A Primer of Visual Literacy. Cambridge: The MIT Press. 7. Dumas, J.S. (1988). Designing User Interfaces for Software. Englewood Cliffs: Prentice Hall. 8. Feiner, S. (1988). A Grid-Based Approach to Automating Display Layout. In Proceedings of Graphics Interface'88), pp. 192-197. 9. Feiner, S. (1991). An Architecture for Knowledge-Based Graphical Interfaces. In J.W. Sullivan and S.W. Tyler (Eds.), Intelligent User Interfaces. Reading: ACM Press, pp. 259-279. 10. Feiner, S., McKeown, K. (1990). Coordinating Text and Graphics in Explanation Generation. In Proceedings of AAIA-90, pp. 442-449. 11. Foley, J., van Dam, A., Feiner, S., Hughes, J. (1990). Fundamentals of Interactive Computer Graphics. Reading: Addison-Wesley. 12. Furnas, G.W. (1986). Generalized Fisheye Views. In Proc. of CHI'86. New York: ACM Press, pp. 16-23. 13. Galitz, W.O. (1989). Handbook of Screen Format Design. Wellesley: Q.E.D. Information Sciences. 14. Horton, W.K. (1990). Designing & Writing Online Documentation-Helpfiles to Hypertext. New York: John Wiley & Sons. 15. Hurlburt, A. (1978). Layout: the design of the printed page, New York: Watson-Guptill Publishing. 16. HyperCard® Stack Design Guidelines (1990). Apple Computer Inc., Reading: Addison-Wesley. 17. Kim, W.C. and Foley, J.D. (1993). Providing High-level Control and Expert Assistance in the User Interface Presentation Design. In Proceedings of InterCHI'93. New York: ACM Press, pp. 430-437. 18. Kobara, S. (1991). Visual Design with OSF/Motif, Reading: Addison-Wesley. 19. Leung, Y.K. and Apperley, M.D. (1993). E3, Towards the Metrication of Graphical Presentation Techniques for Large Data Sets. In Proceedings of EWHCI'93. Moscow: ICSTI, Vol. II, pp. 9-26. 20. Marcus, A. (1990). Designing Graphical User Interface. Unix World, Vol. 7, No. 8, pp. 107-116. 21. Marcus, A. (1992). Graphic Design for Electronic Documents and User Interfaces. New York: ACM Press. 22.Mayhew, D.J. (1990). Principles in Software User Interface Design. Englewood Cliffs: Prentice-Hall. 23. Müller-Brockman, J. (1981). Grid Systems in Graphic Design. Niederteufen: Arthur Niggli Verlag. 24. Mullet, K. and Sano, D. (1993). Applying Visual Design; Trade Secrets for Elegant Interfaces, InterCHI'93 Tutorial #9 Notes, New York: ACM Press. 25. Seligmann, D.D. and Feiner, S. (1991). Automated Generation of Intent-Based 3D Illustrations. In Proc. of SIGGRAPH'91, New York: ACM Press, pp. 123-132. 26. Stapples, L. (1993). Representation in Virtual Space: Visual Convention in the Graphical User Interface. In Proceedings of InterCHI'93. New York: ACM Press, pp. 348-354. 27. Streveler, D.J. and Wasserman, A.I. (1984). Quantitative Measures of the Spatial Properties of Screen Designs. In Proceedings of INTERACT'84. Amsterdam: Elsevier Science Publishers, pp. 1125-1133. 28. Sutcliffe, A. and Faraday, P. (1994). Designing Multimedia Interfaces. In Proceedings of CHI'94. New York: ACM Press, pp. 92-98. 29. Tarlin, E. (1990). Direct Manipulation Design Studio, CHI'90 Tutorial #6 Notes, New York: ACM Press. 30. Taylor, I.A. (1060). Perception and Design. In J. Ball and F.C. Pyres (Eds.), Research Principles and Practices in Visual Communication, Association for Educational Communication and Technology, pp. 51-70. 31. Tufte, E.R. (1983). The Visual Display of Quantitative Information, Cheshire: Graphics Press. 32. Tullis, T.S. (1981). An Evaluation of Alphanumeric, Graphic and Color Information Displays. Human Factors, Vol. 23, pp. 541-550. 33. Tullis, T.S. (1983). The Formatting of Alphanumeric Displays: A Review and Analysis. Human Factors, Vol. 25, pp. 657-682. 34. Zahn, C.T. (1971). Graph-Theoretical Methods for Detecting and Describing Gestalt Clusters. IEEE Transactions on Computers, X-20, pp. 68-86.