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.