Chapter 4. Graphical User Interface Design
←   →

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

Visual Complexity and White Space

Internal and External White Space
Text and Icons
Colours, Gradients and Pattern
Group Boxes
Focus Frame
 

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:

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.

AQUA® and Group Boxes

The initial stripes in Apple® OSX 10.0 (Cheetah and Jaguar) were very prominent. A classical group box rendered on top of these stripes did look exceptional ugly. The group box top and bottom lines interfered with the underlying stripes. With each new Apple® OSX versions did the AQUA®-stripes fade more into the background, until they were gone in 10.5 (Leopard). In the same time group boxes resurfaced in AQUA®, but featuring a different background colour to their enclosing dialog or group box. The white space inside the AQUA® group box is 3 percent darker than the surrounding container.

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

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.

Internal Focus Frames in Microsoft® Windows®

The most prominent example for internal focus frames is Microsoft® Windows® 95.

In Microsoft® Windows® 95 a 1 pixel dotted black line was used as the focus frame. This focus frame was invisible on dark controls –as is required for hyper-sensitive eyesight.

On high-resolution displays such as HD-displays in laptops the single pixel line can easily become to small for recognition. Often the default brightness and contrast settings of modern displays are so high, that such dotted lines disappear completely.

The situation has changed alot for the better. With Microsoft® Windows Vista® the focus frame is much wider (2 pixels), and features a bright signal colour. In addition, the focus frame is directly rendered at the border –still on the inside– of the control.

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.

abridged.xml

Abridged Chapter

This chapter is abridged. The full text is available in printed form or as a PDF from: www.lulu.com.

←   →
Grid Manager and Grid Lines ↑ Experimental Layout using Pack
SourceForge Logo

Copyright © 2009–2010 Arndt Roger Schneider