Gui Design Guidelines
Gui Design Guidelines
1 Preface............................................................................................................................ 1
2 Introduction.................................................................................................................... 2
3 Objectives....................................................................................................................... 3
3.1 Minimal Coding Conventions............................................................................................3
4 Design Guidelines........................................................................................................... 4
5 User Interface Standards................................................................................................. 6
5.1 Menus................................................................................................................................6
5.2 Controls.............................................................................................................................6
5.2.1 CommandButton.........................................................................................................6
5.2.2 TextBox......................................................................................................................7
5.2.3 Checkbox control........................................................................................................7
5.2.4 Frame control..............................................................................................................8
5.2.5 OptionButton control..................................................................................................8
5.2.6 ComboBox control......................................................................................................8
5.2.7 ListBox control...........................................................................................................9
5.2.8 ListView control.........................................................................................................9
5.2.9 TreeView control........................................................................................................9
5.2.10 Label...........................................................................................................................9
5.2.11 Tab control:...............................................................................................................10
5.2.12 TabStrip Control.......................................................................................................10
5.2.13 Form.........................................................................................................................10
5.3 Menu Help - About Box...................................................................................................10
5.4 Message Box....................................................................................................................11
6 Naming Conventions..................................................................................................... 12
6.1 Control Naming Convention............................................................................................12
6.2 Constant and Variable Naming Conventions.....................................................................13
6.2.1 Variable/Constant Scope Prefixes..............................................................................14
6.2.2 Constants..................................................................................................................14
6.2.3 Variables...................................................................................................................15
6.2.4 Constant/Variable Data Types...................................................................................15
6.2.5 Use the following prefixes to indicate a variable's data type.......................................15
6.2.6 Descriptive Variable and Procedure Names................................................................15
6.2.7 User-Defined Types..................................................................................................15
6.3 Qualifiers.........................................................................................................................16
6.4 Function and Subroutine..................................................................................................16
6.5 Menus..............................................................................................................................17
7 Programming Standards................................................................................................ 18
8 General Standards and Guidelines................................................................................. 20
1 Preface
This document contains the GUI Standards that should be used while programming in
Visual Basic environment. It has been divided into several topics. The glossary at the end
explains the special terminology used in the document.
Intended Reader
In the sections that follow, each of these areas is discussed, along with some examples of good
usage.
The main reason for using a consistent set of coding conventions is to standardize the structure and
coding style of an application so that writer of code and others can easily read and understand the
code.
Good coding conventions result in precise, readable, and unambiguous source code that is
consistent with other language conventions and as intuitive as possible.
A general-purpose set of coding conventions should define the minimal requirements necessary to
accomplish the purposes discussed above, leaving the programmer free to create the program’s
logic and functional flow.
The object is to make the program easy to read and understand without cramping the
programmer’s natural creativity with excessive constraints and arbitrary restrictions.
To this end, the conventions suggested in this document are brief and suggestive. They do not list
every possible object or control, nor do they specify every type of informational comment that
could be valuable. Depending on the project and the organization’s specific needs this document
can be enhanced to cater to future needs.
4 Design Guidelines
The use of controls should be standardised depending upon the input/output scenarios.
Following is a table, which lists the commonly encountered input/output scenarios and the
respective control to be used.
5.2.1 CommandButton
Default Buttons: These are command buttons that would virtually appear on every form/dialog
box/message box. These are typically the Ok, Cancel and Help buttons. Following are the
standards for such buttons:
1. The default buttons, OK, Cancel, and Help should not have access keys. These three
buttons should be bottom right aligned, with the Help button following the Cancel button
and Cancel button following the OK button.
2. If the dialog box requires only Close button instead of OK and Cancel buttons, then
Close and Help button should be placed in bottom right corner with Help button
following Close.
3. For the OK button caption, both ‘O’ and ‘K’ should be upper case.
4. For the OK button, the DEFAULT property should be set to TRUE.
5. For the Cancel button, the CANCEL property should be set to TRUE.
6. <F1> key should be the shortcut key for Help.
7. Size of the buttons: 1095 x 375 Twips.
8. The caption of the button should be centre aligned.
User Defined Buttons: These are customised buttons to serve the application’s needs. Following
are the standards to be followed for such buttons:
1. Buttons in all the forms, having the same caption, should have the same access keys. E.g.
If “Add” button has access key “A” in one dialog box, then all dialog boxes that have an
'Add' button should have the same access for it.
2. Two buttons placed horizontally or vertically adjacent to each other should have a
distance of 165 twips between them.
3. Two different horizontal or vertical groups of buttons can be placed at a distance
convenient as per application. This distance should not be less than 495 twips.
4. All vertically adjacent buttons should be left/right aligned, all horizontally adjacent
buttons should be top/bottom aligned.
5. Use default Foreground and Background colours.
6. If the button caption length exceeds the width of the button, then the button width should
be such that there is a distance of 270 twips between the left of the caption and the left
border of the button. Similarly there should be a distance of 270 twips between the right
of the caption and the right border of the button.
7. The Visible property should be set.
8. The Tabstop property should be set.
9. The TabIndex property should be set.
10. The Tool tip property should be set.
5.2.2 TextBox
5.2.10 Label
1. The Labels associated with single line text box control and combo box control should be placed
at the left of the edit control.
2. For Tree control, Listbox control, Listview control and for multi-line Textbox control, it should
also be placed beside the associated control.
3. If the label is associated with some control, then the access key for that control should be defined
as part of the static text, and that control should follow the label in the tab order.
4. If a label is not associated with any control, then it should not have any access key.
5. The label should be in the form of a statement and not in the form of a command.
Example: the label for name edit box should be “User Name“ and not “Enter User Name“.
6. The text in the Label should be self-explanatory and not misleading.
7. Redundancy should be avoided in the case of Form caption, Frame caption and the Label.
8. The mandatory properties that should be set for the Label are as follows:
8.1. A meaningful Name.
8.2. A meaningful Caption with the access key.
8.3. The Autosize should be set to “True”. When Autosize is set to True, the label should not be
resized.
8.4. The Visible property should be set.
8.5. The Tabstop property should not be set.
8.6. The Alignment property should be set to “Left”.
5.2.13 Form
1. Every form should have balanced distribution of controls.
2. Validation of inputs should be performed only on OK button press event, or in the case of tab
change event (If tab control is used.)
3. Dynamic show-hide of controls on some event should be avoided. Such controls should be
enabled or disabled instead.
4. The default focus should be set to a required control.
5. Every Form must have a Name
6. Every form must have a Caption. The Caption should be as follows
<Application Name>: <Description of the Form>
7. The default Font should be used.
8. The default Font Size should be used.
9. While designing forms, ensure the desktop screen size is set to a resolution of 800x600.
10. The “HelpContextId” property should be set.
11. Position of the form should be screen centred.
12. The form should be suitably sized when the number of fields on it is too few.
13. In the case of multiple text boxes placed one below the other on the form
13.1 All the labels should be left aligned with respect to each other.
13.2 All the text boxes should be left aligned with respect to each other.
13.3 The alignments done in 15.1 and 15.2 should be done independent of each other.
14. If border style of a form is set to resizable, code should be written so that the controls in it are
rearranged every time the form is resized at runtime.
15. The tab sequence should be left to right and top to bottom.
Note: RDO and DAO must not be used. Only ADO usage is permissible.
Variables should always be defined with the smallest scope possible. Global (Public)
variables can create enormously complex state machines and make the logic of an application
extremely difficult to understand. Global variables also make the reuse and maintenance of
the code much more difficult.
Variables in Visual Basic can have the following scope:
In a Visual Basic application, global variables should be used only when there is no other
convenient way to share data between forms. When global variables must be used, it is good
practice to declare them all in a single module, grouped by function. Give the module a
meaningful name that indicates its purpose, such as Globals.bas.
With the exception of global variables (which should not be passed), procedures and functions should operate
only on objects passed to them. Global variables that are used in procedures should be identified in the
declaration section at the beginning of the procedure.
As project size grows, so does the value of recognizing variable scope quickly. A one-letter
scope prefix preceding the type prefix provides this, without greatly increasing the size of
variable names.
A variable has global scope if it is declared Public in a standard module or a form module. A variable
has module-level scope if declared Private in a standard module or form module, respectively.
Note: Consistency is crucial to productive use of this technique; the syntax checker in Visual Basic
will not catch module-level variables that begin with "p."
6.2.2 Constants
The body of constant names should be in upper case with underscore separating each word.
Although standard Visual Basic constants do not include data type and scope information,
prefixes like i, s, g, and m should be used as they are very useful in understanding the value and
scope of a constant. The constant names should be a Noun. For constant names, follow the same
rules as variables.
Example:
mintUSER_LIST_MAX 'Max entry limit for User list
'(integer value,local to module)
gstrNEW_LINE 'New Line character
'(string, global to application)
6.2.3 Variables
Declaring all variables saves programming time by reducing the number of bugs caused by typos (for
example, aUserNameTmp vs. sUserNameTmp vs. sUserNameTemp). On the Editor tab of the
Options dialog, check the Require Variable Declaration option. The Option Explicit statement
requires that all the variables in the Visual Basic program is declared explicitly.
Variables should be prefixed to indicate their data type. Optionally, especially for large programs, the
prefix can be extended to indicate the scope of the variable.
Do not define multiple variables (of same type) on the same line of variable definition, instead one must use
different lines for each variable declaration.
If two variables declared on same line as follows
Dim intCount, intNumber as integer
Then only intNumber becomes integer type and intCount becomes Default type (Variant). This may cause
problems like type mismatch while passing by reference, etc. Instead use the following method:
Dim intCount as integer;
Dim intNumber as integer.
<Prefix>
Routine Type Prefix Example
Function fn fnGetWorkOrderNumber
Sub Routine sb sbSetWorkOrderNumber
<Body>
The body of function / subroutine names should use mixed case and should be as long as needed to describe
their purpose, e.g. fnGetWorkOrderNumber, sbSetWorkOrderNumber.
In addition, function names should begin with a verb, such as fnInitNameArray or fnCloseDialog.
<Qualifier>
Apply all the rules of the Qualifier of variable naming conventions.
In addition, one should pass arguments to subs and functions using ByVal, unless it is explicitly needed to
change the value of the passed argument.
6.5 Menus
Because menu handlers can be so numerous, menu names require a little more attention.
Menu prefixes therefore continue beyond the initial menu label by adding main menu name
prefix for each level of nesting, with the final menu item caption being spelled out at the end
of the name string.
5. Menu names have the following structure: mnu<Main menu><Menu item><Sub Menu
item>...