Chapter 4. Graphical User Interface Design

Table of Contents

Visual Complexity and White Space
Internal and External White Space
Text and Icons
Colours, Gradients and Pattern
Group Boxes
Focus Frame
Experimental Layout using Pack
Pack at a Glance
A Simple Gridwin using Pack
Summary Pack Layout
Abridged Chapter

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

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.

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.

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.

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: