>Industry comment
>Developments in design practice/education
>Visual layout within application dialogue boxes

- an article by triggercommunication

The primary concern in the layout of application dialogue boxes is the creation of discreet units of information/functionality to facilitate greater efficiency in user interaction.

There are 3 main techniques to be aware of, in each case, the key is consistency of application and (where possible) simplification.

>Use of horizontal and vertical alignment of elements
>Use of 'white' space between elements
>Text and Typography

Design grids are the basis of page layout. Gridlines are the invisible lines that 'connect' layout elements. For example, each line of text on this page is aligned to the left of this page, a gridline then exists from the top to the bottom of the page, passing through the first letter of each line of text.

For clarity, these gridlines should be kept to a minimum, and related elements should sit on the same gridline. In the case of the dialog boxes, a useful gridline would run down from the first letter of the dialogue box name, passing through the first letter of each line of text within the box. Text fields within a dialogue box would fall slightly outside this gridline, to maintain the text alignment. In the case of text/check-box/dropdown menu combinations, a useful setting would be; text first followed by checkbox, followed by DDM (which becomes active on checking the box). In this instance, three vertical gridlines (alignment lines) would be used: 1, text (left aligned), 2, check boxes, 3. DDM's (left aligned).

White space (allied with proper alignment) can be used to associate, and disassociate elements. Strongly related elements will have less space between, less related elements will have more space between. Button positioning can benefit greatly from proper use of white space. Add/Edit/Delete buttons would be positioned on a common gridline and have little space between (about 5 pixels). Okay/Cancel buttons would be separated by the same amount of space, however, the two button groups would be separated by at least 2 to 3 times that amount. This controlled use of space clearly groups related functionalities. Consistency in button placement is also important, e.g. Okay/Cancel buttons always in that order and always positioned bottom right of a dialogue box with white space to the left.

Typographic control is very limited within dialogue boxes, and we have already dealt with alignment and white space, themselves key aspects of typography. In this respect, typographic adjustments should be used sparingly, and above all, consistently. The variables are font size, style and colour. Serif fonts and italics are to be avoided at smaller sizes due to the limitations of rendering detail and off-square angles in pixels. Simplification of text will help also, combining text header elements where possible. Clearly, over simplification will have the opposite effect to that which is desired - balance is key, testing is crucial.