Design Small Dialog Boxes

Try to keep dialog boxes as small as possible. It's better to have multiple small dialog boxes than one huge dialog box that does everything.

Remember that monitors come in various sizes and resolutions. If a dialog box is too large it may not fit on the smaller screens. Monochrome screens are typically 720 pixels wide and only 348 pixels tall. The most common color screens that will be used for MicroStation are 640 pixels wide by 480 pixels tall. The size of dialog boxes is directly related to the size of each screen's default dialog font. MicroStation allows the user to specify the font height to use for each screen, making it difficult to set exact limits on dialog box size. As a general rule, however, do not design dialog boxes that are more than 25 characters tall and 80 characters wide. Try to make them much smaller than this maximum size.

Large dialog boxes obscure more of the windows underneath them, thus making it difficult for the user to interact with their design file views - which are generally underneath all dialog boxes. Non-modal dialog boxes should be sinkable, allowing users, if they desire, to sink them behind view windows.

If an application will be translated to a different language, remember that the width of some dialog boxes may have to be increased to make room for longer item labels. If the dialog boxes are wide initially, after language translation they may become so large they no longer meet the guidelines stated above.

Other alphabets may be wider than the Roman alphabet. For example, Japanese Kanji characters are typically twice as wide as Roman characters. If a dialog box is designed with the Roman alphabet and then converted to use Kanji, it may double the width.

For these reasons, try to keep dialog boxes small.

Emphasize modeless rather than modal dialog boxes

A major characteristic of a well-designed graphical user interface application is that it is very user-driven. The user has a wide number of operations available which can be performed in any order desired. All of the application's possible operations are activated by visible graphical entities. The user has several options on the screen and does not have to remember the command names. Operations that are invalid at a particular time are displayed in a visually distinct manner, usually the graphical entities are drawn grayed out or dim. The user knows immediately that an option is unavailable and does not have to attempt it to find that it does not work. All of this gives users the feeling that they control the application, not the other way around.

Modal dialog boxes tend to disrupt this image, forcing the user to pause and react to the dialog box before performing any other operations.

Modeless dialog boxes, on the other hand, can remain on the screen while the user interacts with other parts of an application. Modeless dialog boxes can display application status information and also let the user modify application variables when desired - even in the middle of another sequence of operations.

For these reasons, dialog boxes should be modeless by default. A dialog box should be modal only if the situation requires it. Imagine how much less useful the "Element Attributes" or the "Toggles" dialog boxes would be if they were modal. Every time the user needed to change an item in these dialog boxes it would be necessary to bring the dialog box up, make the changes, and then dismiss it. These dialog boxes could not remain on the screen, where they show the current state of MicroStation's locks or the active element attributes.

Try to indicate when a modal dialog box will be opened as a result of choosing an item. Pull-down text menu item labels and push button item labels should end with an ellipsis if picking them opens a modal dialog box.

Limit the number of fonts

Placing too many text fonts in a dialog box can make it look busy or cluttered. By default the dialog box manager creates dialog boxes with only two fonts. The normal dialog font is used most of the time, and the bold font is only used for push button item labels and within menu bar items.

Limit the number of colors

Too many colors in a dialog box make it distracting. The dialog box manager only uses white, black, light gray and medium gray when drawing all of the dialog items. Any other colors should be used sparingly. Remember that not all users have color screens.

Use the standard order for push buttons

It is recommended that the standard push buttons OK, Apply, Reset, Cancel and Help be laid out horizontally along the bottom of dialog boxes and in the order just listed. It is obviously not necessary to use all of the push buttons in every dialog box - just be sure that for the push buttons that are used, the above order holds.

Match the dialog item type to the intended operation

Toggle button items are used to indicate an on/off choice.

Option button items are used to select a single choice from a small group of options.

List box items are used to select one or more choices from a large list of options.

Push buttons are used to invoke an action.

Tool palettes are used to change the operational state of an application in a relatively major way. For example, MicroStation uses tool palettes to set the current element drawing or viewing operation.

Use MicroStation as an example

Become familiar with MicroStation's dialog boxes before starting the design of a new application. MicroStation has many good examples of dialog box design and the kinds of user interactions that are possible.

Copyright © 2017 Bentley Systems, Incorporated. All rights reserved.