Recommended GUI Design Standards

Transcription

1 Recommended GUI Design Standards Page 1 Layout and Organization of Your User Interface Organize the user interface so that the information follows either vertically or horizontally, with the most important information always located in the upper left corner of the screen. Group related controls together using either white space or a frame control. Either center the command buttons along the bottom of the screen or stack them in the upper right or lower right corner. Use no more than 6 command buttons on a screen. Place the most commonly used command button first (either on the left or top). Use meaningful captions in command buttons. Place the caption on one line and use from one to three words. Use book title capitalization (all important words other than a, and, or, etc. are capitalized). for command button captions. Label each control in the user interface. The label should be from one to three words (maximum) entered on one line. Align each label on the left, and position each either to the left or above the control. This does not apply to command buttons. See previous 2 bullet items for command buttons standards. Align the labels and controls in the user interface to minimize the number of different margins. Placing and Sizing Design Elements Maintain a consistent margin of two or three dots from all edges of the form. The human eye is attracted to pictures before text, so include a graphic only if it is necessary to do so. If the graphic is used solely for aesthetics, use a small graphic and place it in a location that will not distract the user. Selecting Appropriate Font Style and Size Use 8, 10 or 12 point fonts for elements in the user interface. Limit the number of font sizes used to either one or two. Use a sans serif font for the text in the user interface. Use only one font type for all of the text in the user interface. Avoid using italics and underlining because both make text difficult to read.

2 Page 2 Selecting Appropriate Colors The human eye is attracted to color before black and white. Build the user interface using black, white, and gray first, then add color only if you have a good reason to do so. Use white, off-white or light gray for an application s background, and black for the text. Dark text on a light background is easier to read. Never use a dark color for the background or a light color for the text. A dark background is hard on the eyes, and light-colored text can appear blurry. Limit the number of colors to three, not including white, black or gray. The colors you choose should complement each other. Never use color as the only means of identification for an element within the user interface. People who suffer from color blindness would not be able to use your application if color is the only means of identification. Data entry elements that require user input such as text boxes, check boxes, and combo boxes should be black text on a white background. The cursor should be placed at the beginning of the data entry field that is in error. Any text within the field should be selected. Rules for Assigning Access Keys When assigning an access key to a control, use the first letter of the caption, unless another letter provides a more meaningful association. If you can t use the first letter and no other letter provides a more meaningful association, then use a distinctive consonant in the caption. Lastly, use a vowel or a number in the caption. Access keys must be unique. To give the user s keyboard access to text boxes, assign an access key to the text box control s identifying label. Set the TabIndex property of the label control so that its value is one number less than the value in the TabIndex property of the corresponding text box. In other words, the TabIndex value of the text box should be one greater than the TabIndex value of its corresponding label control. Rules for Assigning the Default Button The default button should be the command button that represents the user s most likely actions, except in cases where that action is both destructive and irreversible. The default button should usually be the leftmost or top button. Dialog Box Standards The standard Windows dialog box is centered on the screen, is not resizable, and contains only a Close button (X button in upper right hand corner) on its title bar. Using the Hourglass Icon It is a Windows standard that when a process will take a relatively long period of time (more than a few seconds), the interface should display the hourglass icon.

3 Page 3 Command Button Standards Every dialog shall have at least one command button that closes the form. A default button shall always be designated. Whenever possible, provide a Cancel button to take the user back to the state prior to invoking the current screen or dialog box. Command buttons that are not currently available should be disabled. Buttons should be separated by 200 pixels vertically and horizontally. Signify that a button will open a new window with an ellipsis ( ) at the end of the caption. Option Button Standards Use option buttons when you want to limit the user to one of two or more related and mutually exclusive choices. The minimum number of option buttons is two and the maximum recommended is seven. The label in the option button s caption property should be entered with only the first word capitalized. Assign a unique access key to each button. A default option button should be selected for each group of option buttons. Frame Control Standards You can use a frame control to visually separate controls from one another. You must use a frame control to create separate groups of option buttons. Use sentence capitalization for the optional label, which is entered in the frame control s caption property. Check Box Standards Use check boxes to allow the user to select any number of choices from a group of one or more independent and non-exclusive choices. Enter the check box control s caption with only the first word capitalized. Assign a unique access key to each check box.

4 MsgBox Function Standards Page 4 Enter the dialog box message with only the first word capitalized. Display the application s name in the dialog box s title bar. The title bar text should be entered using book title capitalization (all important words other than a, and, or, etc. are capitalized). Display the Critical Message icon when you want to alert the user of a serious problem that must be corrected before the application can continue Display the Warning Message icon in a dialog box when you want to alert the user that he or she must first make a decision and then enter a response before the application can continue. You can phrase the message as a question. Display the Information icon in a dialog box that displays an informational message along with the OK button only. The dialog box should not offer any choices to the user. The default button in the dialog should be the one that represents the user s most likely action, as long as that action is not destructive. List Box Standards List boxes should contain a minimum of three selections. Display a minimum of three to a maximum of eight selections at a time. Use a label control to provide keyboard access to the list box. Set the label control s TabIndex property to a value that is one less that the list box s TabIndex value. List box items are either arranged by use, with the most used entries appearing first in the list, or are sorted in ascending order alphabetically, numerically or chronologically. A default item should be selected in a list box when the interface first appears. The default item should be either the most used selection or the first selection in the list. An exception to this rule would be when you wish to force the user to make a conscious choice. In that case there would be no default choice. Combo Box and List Arrangement Use the Dropdown List style of combo box to display a list of choices when the user clicks the list arrow, and you don t want to allow the user to type an entry into the text box portion of the combo box Use a Dropdown Combo box if you need to allow the user to make an entry into the text box portion of the control, and you have many choices to display. By clicking the control s list arrow, the user can display the list of choices; however, once the user makes a selection from the list, the list closes. Use the Simple Combo box if you need to allow the user to make an entry in the text box portion of the control, and you have only a few choices to display. The Simple Combo box s list remains open at all times. Although the Simple Combo box is more convenient to use because the user doesn t have to click the list arrow to display the list, the Dropdown Combo box takes up less space on the form and is the preferred choice if many items must be displayed. Combo box items are either arranged by use, with the most used entries appearing first in the list, or the items are sorted in ascending order alphabetically, numerically or chronologically.

5 Page 5 Menu Design Standards Menu titles, which appear on the main menu bar, should be one word, with the first letter capitalized. Each menu title should have a unique access key. Menu items, which appear on a sub-menu, may be from one to three words. Use book title capitalization and assign a unique access key to each menu item. Assign a shortcut key to commonly used menu items. If a menu item requires additional information from the user, place an ellipsis ( ) after the menu item s caption. Follow the Windows standards for the placement of menu titles and items. For example the File menu is always the first menu and it typically contains the New, Open, Save, Save As, Print and Exit commands. The Edit menu is typically the second menu title, and it contains the Cut, Copy, and Paste commands. Disable menu items that are not applicable to the current state of the application program. Disabled menu items and other controls appear to be grayed-out when they are disabled. Use a separator bar to separate groups of related menu items. Open Dialog Box Guidelines The Files of type list box within the Open dialog should contain the descriptions and filters that control the display of the filenames within the File name list box within the Open dialog. The File name text box within the Open dialog should be empty when the Open dialog appears. Save As Dialog Box Guidelines The Save as type list box within the Save As dialog should contain the descriptions and filters that control the display of the filenames within the File name list box within the Save As dialog. If the current file is saved, its name should appear in the File Name text box when the Save As dialog appears. The Save As command must allow the user to either save a new file or save an existing file under a new name. When the current document has been saved, the document s name must appear in the application s title bar. If the current document has not been saved, then the type of document the application creates, along with the application s name, appears in the application title bar.

6 Page 6 Save Dialog Box Guidelines When the user chooses the Save option from the File menu, the application should automatically display the Save dialog box if the document has a name: otherwise the Save As dialog box should be displayed. User Prompting for Destructive Actions The user should be prompted when a destructive or irreversible action has been selected. The display of these messages should be at the user s option. In other words, this should display messages such as Are you sure you wish to delete this record? by default, but allow the user to turn the option off within the application. Some users get very annoyed by this type of message. Clipboard Usage Start the application that contains the data to be copied and start the Visual Basic application. Click on the application that contains the data you wish to be copied to make it the current application. Select the data from the application that contains the data to be copied. Copy (Ctrl-C or Shift-Ins in many applications) or cut (Ctrl-X or Shift-Del in many applications) the selected data to the clipboard. Click on the Visual Basic application to make it the current application again. Use the Paste command on the Visual Basic application s Edit menu (or Ctrl-V or Shift-Ins in many applications) to paste the data from the clipboard into your Visual Basic application. Highlighting Existing Text It is customary in Windows applications to highlight, or select, existing text in a text box when the text box receives the focus. Enabling and Disabling Controls It is customary in Windows applications to disable objects that don t apply to the current state of the application.