Academia.eduAcademia.edu

Outline

Title
Abstract
Figures
Introduction
Conclusion
References

Visual Techniques for Traditional and Multimedia Layouts

Profile image of Xavier GilloXavier GilloProfile image of Jean VanderdoncktJean Vanderdonckt

1994, … of the workshop on Advanced visual …

https://doi.org/10.1145/192309.192334
visibility

…

description

10 pages

link

1 file

Abstract
sparkles

AI

This paper explores visual techniques derived from traditional design to enhance the layout of user interface objects in both traditional and multimedia environments. It discusses the limitations of basic layout grids in modern user interfaces and introduces the concept of layout frames, which encompass a broader range of shapes and visual components. Guidelines for effectively implementing these techniques are provided, alongside a comparative analysis of transparency and opacity in design, illustrating their practical applications.

Figures (31)
Fig. 1. The layout of a dialog box and its underlying grid. play : 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, dis- played, explained or zoomed. Some images might be ex- tracted 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. Up to now, determining the basic layout consisted of calcu- lating and drawing any geographical composition of func- tional areas of the user interface into a comprehensive for mat 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 horizon- tal 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 spa- ced 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 docu- ment 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].
Fig. 1. The layout of a dialog box and its underlying grid. play : 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, dis- played, explained or zoomed. Some images might be ex- tracted 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. Up to now, determining the basic layout consisted of calcu- lating and drawing any geographical composition of func- tional areas of the user interface into a comprehensive for mat 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 horizon- tal 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 spa- ced 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 docu- ment 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].
Symmetry [6,13,17] consists of duplicating the visual im- age 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 oppo- site of symmetry is asymmetry (fig. 5b) where at least one IO does not possess a replication on the other side of the axis. Regularity [6,13] is a visual technique establishing uni- formity 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 col- umns and rows is qualified of regular (fig. 6a).
Symmetry [6,13,17] consists of duplicating the visual im- age 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 oppo- site of symmetry is asymmetry (fig. 5b) where at least one IO does not possess a replication on the other side of the axis. Regularity [6,13] is a visual technique establishing uni- formity 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 col- umns and rows is qualified of regular (fig. 6a).
Fig. 3. Symmetrically and asymmetrically balanced layouts.
Fig. 3. Symmetrically and asymmetrically balanced layouts.
Fig. 11. Economic and uneconomic (or intricate) 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 econ- omy 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 neces- sity 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 ornamenta- tion or overcrowding IO (fig. 11b). This situation particu- larly 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. 11. Economic and uneconomic (or intricate) 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 econ- omy 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 neces- sity 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 ornamenta- tion or overcrowding IO (fig. 11b). This situation particu- larly 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.
Misalignment - the opposite of the alignment - occurs when the number of alignment points is significantly high (fig. 7). Misalignment is accentuated when all IO contain- ing task's data are placed just after their identification la- bels. Fonts with descenders and ascenders may affect align- ment of similar IO if badly used.
Misalignment - the opposite of the alignment - occurs when the number of alignment points is significantly high (fig. 7). Misalignment is accentuated when all IO contain- ing task's data are placed just after their identification la- bels. Fonts with descenders and ascenders may affect align- ment of similar IO if badly used.
and conventionally preferred (e.g. 1:V2, 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 im- plied at the time no special ratio is used or a large differ- ence appears between the two dimensions (fig. 8b).
and conventionally preferred (e.g. 1:V2, 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 im- plied at the time no special ratio is used or a large differ- ence appears between the two dimensions (fig. 8b).
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 guar- anteed by placing IO according to a logical and natural ar- rangement (e.g. by frequency, by physical property) driven by the task's semantics. Complexity - the opposite of sim- plicity - 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 layout ; varying overlapping IO are considered as a com- plex layout.
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 guar- anteed by placing IO according to a logical and natural ar- rangement (e.g. by frequency, by physical property) driven by the task's semantics. Complexity - the opposite of sim- plicity - 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 layout ; varying overlapping IO are considered as a com- plex layout.
of information from a minimum of IO to be presented (fig. 12a). The verbal counterparts of understatement is euphe- mism 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. 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 meth- ods are useful : reverse video, color, brightness, boldness, boxes, borders, different sizes, overprinting, magnifying [14].
of information from a minimum of IO to be presented (fig. 12a). The verbal counterparts of understatement is euphe- mism 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. 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 meth- ods are useful : reverse video, color, brightness, boldness, boxes, borders, different sizes, overprinting, magnifying [14].
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 ex- hibiting interrelation of IO in terms of the whole. 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
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 ex- hibiting interrelation of IO in terms of the whole. 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
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).
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).
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 trans- parent 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-trans- parent text container so that columns of text can be incor- porated into an image without obscuring the artwork. Opacity - the opposite of transparency - means the com- plete 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. Opac- ity can also be used to give the impression of a relative distance or depth (see depth) legislated by overlapping (fig. 16c). ASSOCIATION AND DISSOCIATION TECHNIQUES
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 trans- parent 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-trans- parent text container so that columns of text can be incor- porated into an image without obscuring the artwork. Opacity - the opposite of transparency - means the com- plete 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. Opac- ity can also be used to give the impression of a relative distance or depth (see depth) legislated by overlapping (fig. 16c). ASSOCIATION AND DISSOCIATION TECHNIQUES
ground (fig. 15b). If negativity has been experimentally tested to reduce errors and reading time, to increase subjec- tive satisfaction and legibility, positivity may still be used to convey special atmospheres, often with light IO (e.g. grey pictures).
ground (fig. 15b). If negativity has been experimentally tested to reduce errors and reading time, to increase subjec- tive satisfaction and legibility, positivity may still be used to convey special atmospheres, often with light IO (e.g. grey pictures).
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-
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-
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 distrib- uted 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 10? In all cases, Cobbaert [4] recommends that the repartition should be compatible with the task structure, rather than with the file or database structure. Grouping [6,12,14,22,32,34] is a visual technique that creates a circumstance of give and take of relative interac- tion (fig. 20a). Grouping is mainly based on the law of attraction : two grouped IO fight for attention in their in- teraction 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 be- tween 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 remember- ing and by accelerating a layout search.
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 distrib- uted 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 10? In all cases, Cobbaert [4] recommends that the repartition should be compatible with the task structure, rather than with the file or database structure. Grouping [6,12,14,22,32,34] is a visual technique that creates a circumstance of give and take of relative interac- tion (fig. 20a). Grouping is mainly based on the law of attraction : two grouped IO fight for attention in their in- teraction 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 be- tween 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 remember- ing and by accelerating a layout search.
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).
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).
Sparing [6,13,14] looks for avoiding cluttered or over crowded 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).
Sparing [6,13,14] looks for avoiding cluttered or over crowded 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%.
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%.
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 - pro- motes 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).
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 - pro- motes 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).
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).
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).
Predictability [6,13,20] is a visual technique where IO are placed according to some order or plan that is highly con- ventional and recognisable (fig. 23a). Knowing the infor- mation structure of the task, viewing one layout or remem- bering 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 predictabil- ity - 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.
Predictability [6,13,20] is a visual technique where IO are placed according to some order or plan that is highly con- ventional and recognisable (fig. 23a). Knowing the infor- mation structure of the task, viewing one layout or remem- bering 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 predictabil- ity - 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.
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). 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
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). 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
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,... 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).
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,... 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).
Activeness [6] reflects motion through explicit representa- tion 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 active- ness - 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. Through our automatic perception, balance can be empha- sised (or de-emphasised, respectively) when we recognise easily (with difficulty, respectively) the abstract visual con- dition 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 plac- ing IO on unexpected, unbalanced locations (fig. 30).
Activeness [6] reflects motion through explicit representa- tion 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 active- ness - 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. Through our automatic perception, balance can be empha- sised (or de-emphasised, respectively) when we recognise easily (with difficulty, respectively) the abstract visual con- dition 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 plac- ing IO on unexpected, unbalanced locations (fig. 30).
Subtlety [6] is a visual technique in order to make a fine distinction, shunning any obviousness and energy of pur- pose (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 opti- mum visibility of all IO in the layout.
Subtlety [6] is a visual technique in order to make a fine distinction, shunning any obviousness and energy of pur- pose (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 opti- mum visibility of all IO in the layout.
Fig. 33. Representative and abstracted 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 represen- tative if they simply translate a physical object or can be abstract if they mimic some action or just represents meta- phors or major characteristics of the physical objects. For instance, concrete icons are believed to be better than ab- stract icons.
Fig. 33. Representative and abstracted 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 represen- tative if they simply translate a physical object or can be abstract if they mimic some action or just represents meta- phors or major characteristics of the physical objects. For instance, concrete icons are believed to be better than ab- stract icons.
intrinsically irregular, the analysis and establishment of balance is more involved and intricate. Stress needs a stabilisation process. Levelling [6] is a visual technique for automatically estab- lishing balance through artefacts. IO are laid out so that balance axis will stand out (fig. 29).
intrinsically irregular, the analysis and establishment of balance is more involved and intricate. Stress needs a stabilisation process. Levelling [6] is a visual technique for automatically estab- lishing balance through artefacts. IO are laid out so that balance axis will stand out (fig. 29).
Fig. 37. A highly-interactive multimedia layout.
Fig. 37. A highly-interactive multimedia layout.
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. Clicking on the spheres or the cylinders on the right trig- gers the application functions. All physical visual tech- niques are no longer preserved, e.g. no balance, no symme- try, no regularity, no alignment. If one judges the appro- priateness of such interactive objects to input a bounded value, this layout is more intricate than economic and more exaggerated than understated. If traditional interaction ob- jects were employed, spin buttons or scales should have been selected instead.
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. Clicking on the spheres or the cylinders on the right trig- gers the application functions. All physical visual tech- niques are no longer preserved, e.g. no balance, no symme- try, no regularity, no alignment. If one judges the appro- priateness of such interactive objects to input a bounded value, this layout is more intricate than economic and more exaggerated than understated. If traditional interaction ob- jects were employed, spin buttons or scales should have been selected instead.

Related papers

A Scheme for Interactive Graphics
Brian Beckman

CONTENTS SUMMARY .................................................................................................. 1 INTRODUCTION ........................................................................................ 2 Graphics Today ....................................................................................... 2 Tools for Graphics Software ................................................................... 2 Outline of the Paper ................................................................................ 3 Cooperation Needed ................................................................................ 3 Interpreters needed .................................................................................. 4 The Shell as the Central Tool .................................................................. 4 The Meta-Shell Concept ......................................................................... 5 Engineering a Shell ......................................

View PDFchevron_right
Towards an Object-Oriented Interaction Model for Graphics User Interfaces
Manuel Lancastre

Computer Graphics Forum, 1989

The increasing importance of the User Interface Management System THESEUS stimulated the development of a formalized graphics input model that is based on the THESEUS input concepts. This paper presents cooperative work by the Zenfiir Graphische Datenverarbeitung (ZGDV), West Germany and IST/INESC, Portugal which aims to formalize, generalize and enhance the THESEUS input model and transfer it to a clean object-oriented approach. The main goal was to establish concepts for specifying and managing user interfaces tailored to the requirements of graphics dialogues; among these concepts are the diversity of input devices, many Merent kinds of interaction techniques, higher complexity in dialogue stmctures, dynamic control over dialogue spedication, a strong coupling of input and output instead of pingp n g sequencing, powerful output capabilities, support of continuous input operations and a close interlocking between user interface component and application.

View PDFchevron_right
Introductory Chapter: Multimedia and Interaction
Dragan Cvetkovic

Interactive Multimedia - Multimedia Production and Digital Storytelling, 2019

View PDFchevron_right
Visual construction of highly interactive applications
Philippe Palanque

Visual Database Systems 3, 1995

This paper presents Whizz'Ed, an experimental tool for construction of highly interactive or animated applications. Whizz'Ed makes it possible to visually describe by direct manipulation the behaviour of graphical objects and their interrelations. It provides elementary bricks that encapsulate basic interactive behaviours. Whizz'Ed aims at allowing designers to build visual programs in which the control structure is described using data-flows. The flow graph can be structured in order to reuse complex behaviours, thus allowing the designer to create new reusable bricks at design time. Whizz'Ed provide designers with a visual environment that can be used for building user interfaces as well as for database visualization.

View PDFchevron_right
Construction of Interface for Interactive Multimedia
RAVI POOVAIAH

IETE Technical Review, 1996

This paper looks at construction of interactive multimedia applications from the perspective of the communications designer, and tries to focus on issues that are of significance for a media-based communicator. There are many characteristics that are unique to this new media and these seem to offer creative opportunities to communicate with the media in radically different ways. To identify these, the construction of the interactive multimedia is conceived in discreet levels and the characteristics of each level explored for the potential choices it offers. It becomes obvious, therefore, that in order to gain proficiency in using this media, the design process in the construction of an interface for interactive multimedia needs to be conceived as a physical activity in terms of an interaction using our sensory capabilities; as a relational process that offers choices in terms of selection of information; and as an organisation of its various elements in terms of an arrangement across virtual space. This c...

View PDFchevron_right
The next generation of interactive technologies
Karen A. Frenkel

Communications of The ACM, 1989

View PDFchevron_right
CREATIVE 3-D DISPLAY AND INTERACTION INTERFACES
mg mg kyaw
View PDFchevron_right
A Top Down Method for Interactive Drawing
Mel Slater

Computer Graphics Forum, 1988

Traditional interactive drawing programs adopt a bottom-up approach, allowing the user to construct a picture by the use of discrete tools, for example, lines, circles, rectangles, and so on. This paper presents a Merent approach, which allows users to construct graphical objects by stretching and cutting existing objects. The representation is simply implemented, based on a ring of cubic Bezier curves, and use of the de Casteljau algorithm.

View PDFchevron_right
USER INTERFACE DESIGN WITH VISUALIZATION TECHNIQUES
Research Papers

Proper arrangement of the elements on the user screen have Andhra Pradesh helped the designers to make the screen look good and. Several techniques for visualization emphasize the arrangement and ordering of the screen elements based on particular criteria for best appearance of the screen. This paper investigates few significant visualization techniques in various web user interfaces and showcases the results for better understanding and their presence.

View PDFchevron_right
Approaches to interactive art systems
Ernest Edmonds

Proceedings of the 2nd international conference on Computer graphics and interactive techniques in Austalasia and Southe East Asia - GRAPHITE '04, 2004

Artists work with computers and visual interaction in order to create artworks in complex and varied ways. Collaboration between technologists and artists frequently creates new forms of interaction and visualization: it also promotes thinking about new ways of programming such systems. This paper discusses the role of interaction in art systems and some of the new ways in which they are being built. Categories of interactive art systems defined as static, dynamic-passive, dynamic-interactive and dynamic-interactive (varying) are extended and illustrated by examples of work from the first author.

View PDFchevron_right

References (26)

  1. Bodart, F., and Vanderdonckt, J. (1994). Guide ergono- mique de la présentation des applications hautement in- teractives. Namur: Presses Universitaires de Namur.
  2. Mayhew, D.J. (1990). Principles in Software User Inter- face Design. Englewood Cliffs: Prentice-Hall.
  3. Müller-Brockman, J. (1981). Grid Systems in Graphic Design. Niederteufen: Arthur Niggli Verlag.
  4. Bodart, F., and Vanderdonckt, J. (1994). Visual Layout Techniques in Multimedia Applications. In CHI'94 Companion, New York: ACM Press, pp. 121-122.
  5. Mullet, K. and Sano, D. (1993). Applying Visual De- sign; Trade Secrets for Elegant Interfaces, InterCHI'93 Tutorial #9 Notes, New York: ACM Press.
  6. Bowman, W.J. (1968). Graphic Communication. New York: John Wiley & Sons.
  7. 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.
  8. Cobbaert, J.L. (1985). La Communication homme-ma- chine 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.
  9. 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.
  10. de Baar, D., Foley, J.D., and Mullet, K.E. (1992). Cou- pling Application Design and User Interface Design. In Proceedings of CHI'92. New York: ACM Press, pp. 259-266.
  11. Streveler, D.J. and Wasserman, A.I. (1984). Quantita- tive Measures of the Spatial Properties of Screen De- signs. In Proceedings of INTERACT'84. Amsterdam: Elsevier Science Publishers, pp. 1125-1133.
  12. Dondis, D.A. (1973). A Primer of Visual Literacy. Cambridge: The MIT Press.
  13. Sutcliffe, A. and Faraday, P. (1994). Designing Multi- media Interfaces. In Proceedings of CHI'94. New York: ACM Press, pp. 92-98.
  14. Dumas, J.S. (1988). Designing User Interfaces for Soft- ware. Englewood Cliffs: Prentice Hall.
  15. Feiner, S. (1988). A Grid-Based Approach to Automa- ting Display Layout. In Proceedings of Graphics Inter- face'88), pp. 192-197.
  16. Tarlin, E. (1990). Direct Manipulation Design Studio, CHI'90 Tutorial #6 Notes, New York: ACM Press.
  17. Taylor, I.A. (1060). Perception and Design. In J. Ball and F.C. Pyres (Eds.), Research Principles and Practi- ces in Visual Communication, Association for Educa- tional Communication and Technology, pp. 51-70.
  18. Feiner, S. (1991). An Architecture for Knowledge-Ba- sed Graphical Interfaces. In J.W. Sullivan and S.W. Ty- ler (Eds.), Intelligent User Interfaces. Reading: ACM Press, pp. 259-279.
  19. Tufte, E.R. (1983). The Visual Display of Quantitative Information, Cheshire: Graphics Press.
  20. Feiner, S., McKeown, K. (1990). Coordinating Text and Graphics in Explanation Generation. In Proceed- ings of AAIA-90, pp. 442-449.
  21. Tullis, T.S. (1981). An Evaluation of Alphanumeric, Graphic and Color Information Displays. Human Fac- tors, Vol. 23, pp. 541-550.
  22. Foley, J., van Dam, A., Feiner, S., Hughes, J. (1990). Fundamentals of Interactive Computer Graphics. Read- ing: Addison-Wesley.
  23. Tullis, T.S. (1983). The Formatting of Alphanumeric Displays: A Review and Analysis. Human Factors, Vol. 25, pp. 657-682.
  24. Furnas, G.W. (1986). Generalized Fisheye Views. In Proc. of CHI'86. New York: ACM Press, pp. 16-23.
  25. Zahn, C.T. (1971). Graph-Theoretical Methods for De- tecting and Describing Gestalt Clusters. IEEE Transac- tions on Computers, X-20, pp. 68-86.
  26. Galitz, W.O. (1989). Handbook of Screen Format De- sign. Wellesley: Q.E.D. Information Sciences.

Related papers

Visual Design Methods in Interactive Applications, Contents & Complexity
Jean Vanderdonckt
View PDFchevron_right
Visual Design Methods in Interactive Applications
Jean Vanderdonckt

2003

Visual design in general is the arrangement of information items (eg, text, images, diagrams, pictures, tables) in such a way that the resulting product is visually attractive, perceptive, and easily understandable. Visual design issues are raised in many domains of human activity such as user interface design, documentation development, presentation design, and graphic layout. This chapter describes techniques coming from traditional visual design and discusses them in the context of user interface design.

View PDFchevron_right
Graphic design of interactive interfaces
Krasimira Drumeva

THE 9TH INTERNATIONAL CONFERENCE OF THE INDONESIAN CHEMICAL SOCIETY ICICS 2021: Toward a Meaningful Society

In the epoch of digital media, graphic design has become an important part in the process of creating interactive platforms for work and entertainment. To a great extent, design defines the way in which the user will communicate in the virtual environment. If the visual hierarchy in the texts, shapes and colours is not implemented, then dealing even with the most up-to-date software may become challenging. The modern human is overwhelmed with information and he instinctively seeks for the most direct way to reach his goal. Each graphic element that is not in its designated place is a reason to disrupt the fluent dealing with the interface and results accordingly in bad usability. It is noticed that many developers of such type of platforms perceive interactive and print design as overlapping areas. Although their origin, principles and components are common, the differences between them in terms of technical and user elements are considerable, which influences also the creative process. The purpose of the current article is to define the areas of differences between print and interactive design. Systematizing them will be useful for optimizing the graphic design for interactive interfaces, achieving intuitive navigation, user comfort and accessibility for the content.

View PDFchevron_right
A Novel System for Processing User Interfaces
Frank Ekpar

European Journal of Engineering Research and Science

In this paper we introduce novel automatic and manual processing systems for a versatile graphical user interface comprising one or more N-dimensional background elements each of which is divided into one or more arbitrarily-shaped N-dimensional partitions, wherein each partition may contain one or more user interface elements and is associated with one or more sets of rules that define rendering, positioning, element placement and other relevant attributes and behaviors, wherein said rules can be specified in such a way as to enable said N-dimensional background to assume any desired arbitrary shape and to facilitate expansion to any desired arbitrary size without distortion or loss in quality. Our systems permit the efficient generation of intuitive graphical user interfaces in a wide variety of application domains.

View PDFchevron_right
Real-World Graphical User Interfaces
Itiro Siio

2000

Although the age of information appliances is getting close, current remote control devices are too awkward, and we cannot control sophisticated equipments without using graphical computer terminals. We propose a new interaction technique called the Real-world GUI, where users can control real-world appliances just like performing GUI operati- ons on graphical computer terminals, using a new input device called the FieldMouse. FieldMouse is a device which consists of an ID recognizer and a motion sensing device. Using a FieldMouse, various GUI tools like buttons, menus, sliders, and others can be used on any surface and ob- jects, just like using a mouse on a desktop computer. Users can control or program various information appliances as easily as performing GUI operations on graphical computer terminals.

View PDFchevron_right

Cited by

User Interface Representation Using Simple Components
Javier Rodeiro Iglesias

Lecture Notes in Computer Science, 2011

There are several user interface specification models, each other covering several design steps considered on a user interface representation. Two of those steps are the composition and the presentation. This paper shows a study about the steps that are covered by the most known techniques to represent Graphical User Interfaces, focusing mainly in composition and presentation steps. After this, an example of a game is made using DGAUI representation. This game representation is useful to show the real problems when an application is made from abstraction level to a prototype level. This example is useful too as a possible reference system for testing between different representation systems. The conclusion of this paper is that is possible to make a real application with an abstract representation of user interface, using visual simple components and make a prototype from user interface representation.

View PDFchevron_right
User's Web Page Aesthetics Opinion
Silvia Uribe

ACM Transactions on the Web, 2017

Analyzing a user's first impression of a Web site is essential for interface designers, as it is tightly related to their overall opinion of a site. In fact, this early evaluation affects user navigation behavior. Perceived usability and user interest (e.g., revisiting and recommending the site) are parameters influenced by first opinions. Thus, predicting the latter when creating a Web site is vital to ensure users’ acceptance. In this regard, Web aesthetics is one of the most influential factors in this early perception. We propose the use of low-level image parameters for modeling Web aesthetics in an objective manner, which is an innovative research field. Our model, obtained by applying a stepwise multiple regression algorithm, infers a user's first impression by analyzing three different visual characteristics of Web site screenshots—texture, luminance, and color—which are directly derived from MPEG-7 descriptors. The results obtained over three wide Web site datasets ...

View PDFchevron_right
580 California St., Suite 400
San Francisco, CA, 94104
© 2025 Academia. All rights reserved