Visual techniques for traditional and multimedia layouts.
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.
INTRODUCTION
When the designer sketches the components of a user inter-
face, 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 that a multimedia user interface could virtually dis-
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

immediately countered by adding an IO if the same weight
to the right of the vertical axis.
Fig. 3. Symmetrically and asymmetrically balanced layouts.
DEFINITION OF VISUAL TECHNIQUES
A visual technique relies on a commonly accepted visual
principle to suggest the arrangement of the layout compo-
nents. 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 represen-
tativeness. 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 in-
cluded. Five sets of visual techniques which can be appeared
by similarity are identified :
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 side of the
axis.
. physical techniques : balance, symmetry, regularity,
alignment, proportion, and horizontality;
. composition techniques : simplicity, economy, under-
statement, neutrality, singularity, positivity, and transparency

. association and dissociation techniques : unity, reparti-
tion, grouping, and sparing;
. ordering techniques : consistency, predictability, se-
quentiality, and continuity;
Fig. 4. Horizontally and vertically symmetric layouts.
. photographic techniques : sharpness, roundness, stabi-
lity, levelling, activeness, subtlety, representation, real-
ism, and flatness.
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.
Fig. 6. Regular and irregular layouts.
Balanced layouts are not only easy to understand, but, also,
easy to design by a game of counterpoise. If an IO is placed
to the left of the vertical axis, instability is provoked and
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 un-
conforming layout grids [6].
Fig. 9. Horizontal and vertical layouts.
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).
COMPOSITION TECHNIQUES
Simplicity [6,13,24,32,33] is directness and singleness of
layout, free from secondary complications or sophistica-
tions (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 lay-out
grid (fig. 10b). Tiled IO are considered as a simple
varying overlapping IO are considered as a complex
layout.
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 la-
bels. Fonts with descenders and ascenders may affect alignment
of similar IO if badly used.
Fig. 7. Vertical, horizontal alignments and misalignments.
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
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).
Fig. 10. Simple and complex layouts.
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.
Fig. 11. Economic and uneconomic (or intricate) 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).
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.
ground (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.
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. 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, pref-
erably, 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 high-lighting
method on a particular IO against a sameness of
background (fig. 13b). Most graphical highlighting methods
are useful : reverse video, color, brightness, boldness,
boxes, borders, different sizes, overprinting, magnifying
[14].
Fig. 16. Transparent and opaque layouts.
Fig. 13. Neutral and accentuated 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,
colors, surrounding blank spaces, logical organisation exhibiting
interrelation of IO in terms of the whole.
Fig. 14. Singular and juxtaposed layouts.
Fig. 17. Unitary and fragmented layouts.
Negativity [6,14] displays IO in dark colors 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
negativity - displays IO in a bright color on a dark back-
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 con-
vex, are not aggregated nor related.
certain amount of IO that are placed in Indian file or where
there is some free space all over the layout.
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).
Fig. 20. Grouped and splitted layouts.
40%
15%
20% 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).
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.
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.
Fig. 21. Uncluttered and cluttered layouts.
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, colors,
themes vary significantly.
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
Fig. 22. Consistent land varied layouts.
snapshots, morphing pictures,. Continuity means the
cohesion of the parts to the whole layout. Episodicity - the
opposite 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.
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 lay-out
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 unselfconscious-
ness.
Fig. 25. Continuous and episodic layouts.
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.
Fig. 23. Predictable and spontaneous layouts.
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 char-
acter, but more fuzzy, wadded atmosphere, more feeling
and warmth (fig. 26b).
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 or-
der, 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 back-
ground. 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.
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
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
intrinsically irregular, the analysis and establishment of
balance is more involved and intricate. Stress needs a
stabilisation process.
Fig. 32. Subtle and bold layouts.
Fig. 28. Stable rectangle, unstable circle, lozenge, rectangle
and triangle.
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.
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.
Fig. 33. Representative and abstracted layouts.
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).
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, color,. (fig. 33b) This technique
covers zooming in and out, magnifying lens, fish-eye views
[12,19], pictures cut in moved rows, teared pictures,.
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 rep-
resentation, which presents an atmosphere of quiescence,
resting by equilibrating IO.
F
Fig. 31. Active and passive layouts.
Fig. 33. Real and distorted layouts.
Flatness [6] does not use any technique for providing per-
spective, 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).
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. Fig. 35. Flat and depth layouts.
Fig. 36. A simple multimedia layout. Fig. 37. A highly-interactive multimedia layout.
EXAMPLES OF VISUAL TECHNIQUES 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.
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 signifi-
cantly. 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.
Fig. 38. The underlying layout frame.
That background of this layout is black, showing white and
green informations, 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 informations 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 informa-
tions. Photographic visual techniques are relevant to the
picture : sharpness, angularity; stability, levelling, passive-
ness, 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.
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 symme-
try, 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 and reutilisability. 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-domi-
nant, image-dominant, and the nature of the content.
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;
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 color analysis where a weight
is allocated to each color. 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

. 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 asynchro-
nous, 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
. 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;
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
our knowledge about multimedia IO is insufficient.
Nevertheless, we are able to say some
. 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;
. multimedia IO could be qualified with attributes [28];
. reasonable proportions for displaying images and video
sequences are already known [9,10];
Automatic Layout Generation . visualisation techniques for special IO (e.g. 3D objects,
maps) are well studied [12];
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.
. the layout frame should be governed by these attributes
and informations [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

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 parametrized, 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.
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.
Our future work will focus on automatic layout according
to an existing layout frame. Each predefined and specific
layout is to be defined first as a template for future usage
The aim of the visual techniques is simply to keep the
designer's mind conscious to the visual choices made
with these users;
14. Horton, W.K. (1990). Designing & Writing Online
Documentation-Helpfiles to Hypertext. New York: John
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.
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 Inter-
CHI'93. New York: ACM Press, pp. 430-437.

ACKNOWLEDGMENTS

The authors would like to thank the AVI'94 anonymous
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.
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 Inter-
21. Marcus, A. (1992). Graphic Design for Electronic Documents
and User Interfaces. New York: ACM Press.



--R

Guide ergonomique de la pr-sentation des applications hautement in- teractives
Principles in Software User Interface Design.

Visual Layout Techniques in Multimedia Applications.
Applying Visual De- sign
Graphic Communication.
Communication homme-machine dans le monde informatis- de demain
Representation in Virtual Space: Visual Convention in the Graphical User Interface.
Coupling Application Design and User Interface Design.
Quantitative Measures of the Spatial Properties of Screen De- signs
A Primer of Visual Literacy.
Designing User Interfaces for Soft- ware

Direct Manipulation Design Studio

An Architecture for Knowledge-Based Graphical Interfaces
Coordinating Text and Graphics in Explanation Generation.
An Evaluation of Alphanumeric
Fundamentals of Interactive Computer Graphics.
The Formatting of Alphanumeric Displays: A Review and Analysis.
Generalized Fisheye Views.
Handbook of Screen Format De- sign
--TR
Generalized fisheye views
The visual display of quantitative information
Designing user interfaces for software
Designing and writing online documentation: help files to hypertext
A grid-based approach to automating display layout
Graphic design for electronic documents and user interfaces
Principles and guidelines in software user interface design
Automated generation of intent-based 3D Illustrations
An architecture for knowledge-based graphical interfaces
Visual Design with OSF/Motif
Coupling application design and user interface design
Representation in virtual space
Providing high-level control and expert assistance in the user interface presentation design
Designing presentation in multimedia interfaces
Visual layout techniques in multimedia applications
Applying VisualDesign

--CTR
Franois Bodart , Anne-Marie Hennebert , Jean-Marie Leheureux , Jean Vanderdonckt, Towards a dynamic strategy for computer-aided visual placement, Proceedings of the workshop on Advanced visual interfaces, p.78-87, June 01-04, 1994, Bari, Italy
Rohit Mahajan , Ben Shneiderman, Visual and Textual Consistency Checking Tools for Graphical User Interfaces, IEEE Transactions on Software Engineering, v.23 n.11, p.722-735, November 1997
Melody Y. Ivory , Marti A Hearst, The state of the art in automating usability evaluation of user interfaces, ACM Computing Surveys (CSUR), v.33 n.4, p.470-516, December 2001
layout;interactive objects;graphical applications;visual interaction;multimedia applications;visual techniques;visual placement;interaction objects;visual interface design and management