GUI design guidelines
These guidelines apply to the Lazarus IDE but may be used for other projects as well.
Dialogs are special forms that need the user to make / change some setting before lazarus can continue.
Settings that should be applied in general are:
- BorderStyle :
- bsSizeable - if the dialog is complex and resizing is really needed.
- bsDialog - if dialog is simple and resizing is not needed (NOTE: all dialogs should remain resizable internally because of localization issues).
- Position : poScreenCenter.
- FormStyle : Do not use fsStayOnTop, as this can be pretty annoying under some window managers.
- [biSystemMenu] - for modal shown dialogs
- [biSystemMenu,biMinimize,biMaximize] - for non-modal shown dialogs
- On the bottom of the form Button panel should be placed.
- The dialog should work on a screen of 800x600. 640x480 is not needed to support.
- Close on Escape (if key not used otherwise).
- Define default button and Return activates it (if key not used).
- Avoid using long captions on buttons. Use Hint property to explain button action in details.
- The size of resizable dialogs whould be saved and restored next time the dialog will be opened.
- All hints and captions used on a form should be as resourcestring, so localization can be applied.
Spacings and sizes
- Dialogs must be designed to work independently of resolution and font height.
- Spacing between elements: 6 pixels.
- Do not set maximum constraints.
- Do not set minimum height of regular buttons.
- You can set a minimum width of 90 for buttons.
- AutoSize property need to be set for buttons, labels, ... to properly display localized text if it is longer than expected.
- All buttons in a group (including buttons that contain glyphs) must have the same width and height. Use a TPanel and set the Align and BorderSpacing properties.
The button panel should consist at least of the following elements:
- OK button.
- Cancel button.
- Next button (optional).
- Previous button (optional).
- Help button.
To make sure that a dialog after resizing will keep on showing the components in a good way, anchoring is being used. Each components has a property called Anchors. With this property you can determine the way a component is anchored to it's parent.
Hint: Use the anchor editor of the IDE.
Another way to organise components is using alignment. Each component has a property Align. By selecting the appropriate align position several components can be positioned properly.
Especially useful in combination with Align is the BorderSpacing property. (Also found on the Anchors dialog). A typical borderspacing of 6 pixels around a component is used.