GUI Standards

Following are graphics user interface standards for an application

Alignment: -

• When you use a column heading with a sorting function, center the heading

       Left justify text fields

•  Right justify whole numbers in columns
• Set the tab order for all controls left-right, top-bottom
• When some column headings require multiple lines and

             Some do not; align the columns with one line across the bottom

Borders:-

• Add 3D lowered borders to entry fields. Do not use borders with protected fields (i.e., flat and transparent).
• Make storable column headings 3D raised.

Check Boxes: -

• If a check box is unavailable, disable the checkbox by

            Making it 2D

• Check boxes on list windows should be centered
• Do not put a group box around a single checkbox.
• The maximum number of check boxes you can put in a group box is three arranged horizontally, or six arranged vertically.
• Left justify vertical check boxes
• Do not put more than six check boxes in a group  Instead, use a multiple selection list or drag and drop
• A check box label can be between two and thirty characters

Color:-

• If the user has inquiry rights only make the background of the entry fields transparent Else make it white.
• When using colors, especially red and green, provide color blind users

            Another method of distinguish between colors

      

Standard window colors are

Window and Data Window Background

      Silver

Entry Field Background - Display Only

      Silver

Entry Field Background - Enterable

      White

Entry Field Text

      Black

Title Bar

      The color set by the client in Windows

Labels

      Black Bold

Command Buttons: -

• Place command buttons on the right or bottom of a window, but not both
• On summary windows (windows with lists), align push buttons horizontally along the bottom portion of the window
• On detail windows, align push buttons vertically along the right side of the window.
• Arrange push buttons by frequency of use, from positive actions to negative actions
• Always assign a default push button in response windows
• Always make the OK button, if available, the left-most or first push button on the dialog window
• Always make the Help button the right most, or last push button on a

      Dialog window graphic or Label or both. Capitalize the first letter of a word.

• Ensure that the Use of an accelerator key is unique within that setting.
• A window can have up to six push buttons
• The control menu on a primary window must include Move, Size, and Close.
• Add right mouse click menu for word wrap, and home/end

      If the grid contains a description column 

Control Bar & Menu

• Include the Control Bar in primary windows, dialog windows, and message boxes.
• The control menu on a primary window must include Move, Size, and Close.
• The control menu on a dialog window must include Move, Close.
• Provide what’s this help wherever possible.

 Data Window:-

• Add a 3D lowered box around the borders of select Data windows.
• Do not make the border of a header Data Window 3D lowered, but you

      Can add a box around it if necessary

• Add a group box around multi-line header data windows

Dialog Window: -

• Make the default size of the dialog window large enough to view all of

      The components on the screen without grouping

• Display all dialog windows in the center of the screen, by default
• Let the user move the dialog windows to view other parts of the screen.

Drop Down Data Window and Selection List: -

• A drop down list must contain at least three items
• A drop down list can contain up to fifty items. If you need more than

      50 items, use a response window

• Order the data in a list box in a manner the user recognizes, for

       Example, alphabetically

• A list can display between three and six items, but provide it with a

      Vertical scroll bar to view the remaining options if there are more than six.

• If the entire field does not appear in the space on the window, make it scrollable

Date:-

• Date fields should always contain an edit mask of mm/dd/yyyy regardless of whether they are updatable or not
• Fields that are not available for update should be disabled rather than hidden

Fonts, Capitalization & Punctuation: -

• The font for all “text” is MS Sans Serif 8 point
• OK is always all caps
• If the message or title is a full sentence, punctuate them normally
• Capitalize the first letter of each word, except for articles and prepositions

Group Boxes & frames: -

• The group box typically groups radio buttons or check boxes
• Do not use a group box to group push buttons or list boxes
• Use the smart pointer  wherever a right click pop up menu is available
• Design all frames/Windows  for 640 X 800 screen resolution

 Icons:-

• Make icons 3D so that they look like buttons
• Label all toolbar icons the name of the application or window that they represent
• Provide functions such as New, Open, Save, and Close with an icon on
• The tool bar and an option in the menu
• Make icons (such as the calendar icon) work on a single click

Key board Access: -

• Make the tabbing sequence in the window logical, and in either left to

      Right and/or top to bottom sequence

• Give every menu item and push button a mnemonic and/or shortcut key
• Make the mnemonic for an item the first consonant of the first word

Message Boxes: -

• Make the title of the message box the same as the title on the parent

      Window. Do not use punctuation in the titles

• A message box must contain the Title Bar and adequate push buttons
• Include the Stop graphic before the message in the error message box.
• Valid push buttons for an error message box are: OK and Help.
• Include the "I" graphic before the message in the information message box
• Do not make the message box resizable

Menu bar /Options and Pull Down menus: -

• Provide between two and fifteen items in the pull down menu
• Use a separator to separate destructive actions such as Exit from the

      Other menu items

• Make menu items fit on one line
• Provide mnemonic keys for menu items wherever possible
• Begin option names with a verb (Example: "Review Sample Details").
• The Window pull down menu displays a list of windows currently

     Open in the application. The list is sorted by use with the current

     Window listed first, the previous window used listed second and so on.

Radio Buttons: -

• Assign one radio button as the default. The default radio button is pre-

      Selected whenever the window is displayed

• Arrange radio buttons in rows or columns or both. Left justify vertical

      Radio buttons

• A group of radio buttons must contain at least two
• If a radio button is not available, disable it by displaying the label in gray.

Reports: -

• Create columnar reports wherever possible
• Left justify report labels
• Display page numbers
• Use common report headers

                     

Status Line:-

• Display help on the status line

Tab Folders: -

• Use a maximum of one tab folder per window
• Do not nest tab folders within tab folders
• Place tab page labels at the top of the tab folder