|
|
Copyright © 2009–2010 Arndt Roger Schneider |
Table of Contents
Clay is shapen to make vessels; but the contained space is what is useful. Matter is therefore of use only to mark the limits of the space which is the thing of real value. | ||
| --Dao Deking; Lao Dsu, translated by Alaister Crowley | ||
There are two types of white space in a Graphical User Interface.
Types of White Space:
Inside of a control.
Empty space, surrounding the controls.
The area of maximum sharpness (fovea) , inside the human eye, is very small. The eye must move fast over the regions of a to large object to bring their images onto the fovea. Hence the amount, or rather the need to limit internal white space is an important factor in Graphical User Interface design. Ideally, the contents and borders of a control would fall in this area with only a single glance of the eye. Allowing for the at-once recognition of the control.
When to much white space is part of a control, it will disintegrate into distinct visual objects, making recognition increasingly difficult.
Best practice: Use the text font for guidance. The distance between characters and words is similar to the general white space problem in Graphical User Interfaces.
The -compound property is used in Tcl/Tk to combine text and icon on a single control such as on buttons. The -padx or -pady properties define the distance between text and icon. Which is reasonable, because -padx and -pady are also the distance to the border.
Text and Icon should have the same height, preventing the incorporation of additional white space surrounding the shorter one. Hence zoomable icons are highly desirable.
Example 4.1. Indicator in Gstripes
The indicators, created by Gstripes for stand alone check- and radiobuttons, derive their dimensions from the text font. The indicator is separated by the distance of a space character from the text. The indicator itself is identical in size to a lower character of the text font.
A different colour can be used to lessen the negative impact of additional white space, when there is already to much of it inside the control.
Example 4.2. Gstripes using Gradients
Gstripes creates and uses raised gradients to represent button, menubutton, checkbutton, radiobutton and groups thereof.
The used gradient repeats the dialog background colour mixed with either white or black–or any other colour. This difference in colour is sufficient to keep the control intact.
Another approach is using a pattern in the background of the dialog. This way the white space inside the controls is easily distinguished from the patterned white space of the dialog.
Example 4.3. Pattern
Gstripes may use any sort of patterns. The default pattern, bundled within Gstripes, are stripes known from AQUA®.
Jeszra’s own SafariX11 design features a a stripped background, likewise does AQUA® till Apple® OSX version 10.4.
Gradients are increasingly introduced into the dialog background. Using gradients with Gstripes is identical to pattern.
Lots of background gradients may lead to fragmentation. This fragmentation may or may not be desirable. Fragmentation is an increase in visual complexity. One solution would be to use a single uniform gradient running through the entire dialog. Not many toolkits provide the technical means for using uniform gradients.
Example 4.4. Uniform Gradients in Jeszra
The Jeszra designs SeaX11, WhiteX11, GrayX11 and BlackX11 deploy uniform gradients. Radial gradients run through the entire dialogs. The same gradient goes through the toolbar on-top, too.
The exception is the Rtl_tabset control, which features a different gradient. The gradients inside the Rtl_tabset and its tabs are being used to augment it.
Example 4.5. Multi-Colour Uniform Gradients
The SeaX11 design uses the same radial gradient in the entire dialog, but features a different colour for the navigation area on-top.
Group Boxes Have a long history in Graphical User Interfaces. The original design was a simple line around an area with other controls in it. The principal problem with group boxes is that the outer line is always outside the visual center of sharpness, the fovea.
The obvious solution to prevent the group box from visual disintegration, is to use a different colour in its interior. This approach is being widely used in Apple® OSX.
Another approach is to shun the group boxes altogether. Most often group boxes were used for related check- or radiobuttons. This is no longer necessary; every windowing system supports grouped controls, today.
Groups, such as implemented in Gstripes, are common under every major windowing system, including Microsoft® Windows®. Here however a radiobutton group will be rendered like normal buttons with a permanent sunken shape for a selected radiobutton. The sunken shape is being shared across: radiobutton, checkbutton, button and menubutton. The group creates a single composite control and thus avoids visual desintegration.
Gstripes provides the ability to use a tinted white space. The Gstripes mechanism is called a »background frame«, or for non-rectangular shapes a »contour«. Gstripes thus provides a fine-grained control over contrast and colour.
The focus frame is meant to emphasis the control’s boundaries. The focus frame indicates to which control any keyboard event, such as a key stroke, will be sent. The focus frame is mostly a simple enclosing, unfilled box, featuring a signal colour for its border.
The focus frame occupies what is ordinarily white space, either in or outside of a control.
Internal versus external Focus Frames
An internal focus frame increases the size of the control and also its internal white space. Naturally the width of the internal focus frame must be limited to a few pixels, because the extra white space would otherwise cause the visually disintegration of the control.
This internal approach is being deployed by Microsoft® Windows® and Tile.
An external focus frame does not alter the visual size of a control. The white space occupied by the focus frame belongs to the surrounding container. External focus frames increase the distance between controls, the natural habitat of white space.
The external design is used in AQUA®, Motif® and Tk.
The dialog size is neither affected by an internal or external focus frame. In the external case however the focus frame can become integrated in the layout itself, because the focus frame ocupies dialog white space. Hence the focus frame may become large enough to accommodate visual disabilities or to overcome limitations of the display without destroying the layout.
The focus frame provides a function similar to what human beings carry out to emphasis something on paper. A section on paper is usually emphasized by drawing a circle around it. The focus frame is not only an indicator where the next key stroke will be sent to, but also an important visual guide.
The action indicated by the focus frame is performed by the entire, encircled control. An internal focus frame neglects that the control does not only consists of its contents, but is also established by its boundaries.
This chapter is abridged. The full text is available in printed form or as a PDF from: www.lulu.com.
|
|
Copyright © 2009–2010 Arndt Roger Schneider |