|Dialogue Specification and Guidelines - Visual Design||Christian Jansen|
Due to the new (Figure 1) definition of the standard tabbed dialogue there is a need to define some visual guidelines for successfully complete layout.
The units which are used in this guideline are Map AppFont (ma) and Pixel (px). Map AppFont units are device and resolution independent. One Map AppFont unit is equal to one-eighth of the average character (System font) height and a quart in width.
In the first draft, the dimension are only in pixels the will be replaced in the next version. The screen samples
were made on a system with a resolution of 1280 x 1024 at 96 dpi.
Figure 1 Shows the new size for a tabbed dialogue.
One of the most critical area in visual design is to create a visually consistence
in spacing, size, alignment etc. From the structural side (for western countries)
the information should be provided as follows:
The most important information should be located in the upper left area.
After this content follows from left to right and top to the bottom.
The following table lists the typical dimensions of common control which are used in StarOffice.
|Check Boxes||10||As wide as needed|
|Radio Buttons||10||As wide as needed|
|Drop down, combo and drop down list boxes||12||Size match other drop downs etc.|
|Text boxes||12||As wide as needed|
|Text labels||8||As wide as needed|
|Other text||8||As wide as needed|
Alignment is very important for a good dialogue design. Try to create a consistent and clear layout. Use the dialogue spaces shown in figure 2 and 3.
Figure 2 Map Appfont spaces between dialogue items.
Figure 3 Map Appfont spaces between dialogue items.
The following table list the recommended spacing between common dialogue items.
|Dialogue item||Space between (MA)|
|Dialogue Box Margins (Vertical)||6|
|Dialogue Box Margins (Horizontal)||3|
|Fixed line Margins Vertical||6|
|Between text paragraphs||7|
|Between text label and their control for (example text beneath a list box)||3|
|Between related controls||4|
|Between unrelated controls||7|
|First control in a group box or under a fixed line||3|
|Between controls in a group box||4
If a group box is used align vertical to the group box title
|From the left edge to a group box / fixed line||6|
|From the left edge to a preview||6|
|Content: From the right edge of a group box / fixed line||6|
|Content: From the top edge of a group box / fixed line||3/6|
|Content: Above the bottom edge of a group box||6|
Translations from English to other languages can affect the size of the dialogue for example:
Increase the length of the text in the user interface.
- It can affect the layout of the controls.
Figure 4 A dialogue with enough space for translation.
To handle the text expansion it makes sense to allow approximately 30 percent or more space than for the English version (figure 5)
Figure 5 The first two examples allow not enough space for translation.
If text is or must placed in front of controls like list boxes or text boxes leave enough space between the text and control item. In my opinion it looks better if the the text beneath the control is placed over the related control, because it cold not effect to large spaces in between (figure6).
If a longer explanation above controls is needed, the text should be split into an information part and a header for the related control.
Figure 6 For longer explanations split into two parts.
To control the current text expansion space it is possible to enable in a NON Product Version, by pressing CTRL SHIFT D. The VCL Debug dialogue will appear and several settings can be set. To enable the highlighting of the text expansion space check the Dialogue entry in the Test options Group box. After enabling this feature Dialogues will be shown like in the screen shot below.