User Tools

Site Tools


window_elements.htm
Navigation:  User's Guide and Tutorials > Windows Design Issues >====== Window Elements ====== Previous pageReturn to chapter overviewNext page

This section describes common window elements. Choosing the right element for the job at hand helps your users get the most out of your program.

Buttons

A button initiates an action. When the user presses a button, the button appears to be depressed. When a button action is unavailable, the button label should be dimmed.

Clarion lets you use text, graphical labels (picture buttons), or both. If you are using picture buttons you should include tool tips to allow the user to see, in words, what action the button will initiate. Stick to standard bitmaps (such as the icons many bestselling applications use for File Open, File Save, etc). Too many picture buttons in a window can be confusing to the user. Some reviewers have accused programs of “iconitis”'having so many graphical buttons on the screen at once that it's impossible for users to remember which button executes which action.

Buttons can perform several types of actions.

·A button may initiate an action.

·A button may close the active dialog box, then open another, related dialog.

·A button may open another dialog on top of the current one, without closing the current one.

·A button may “unfold” or resize the dialog window to include more options.

·A button can turn the “page” on a wizard dialog.

Always designate one button as the default. When the user presses ENTER, it will initiate the default button action. Microsoft also suggests that you not assign a mnemonic'for example, “&OK,” which appears as OK'to a default button.

Check Boxes

Check boxes control true/false, yes/no, on/off or logical variables. The user toggles the state by CLICKING on the box, or pressing the SPACEBAR. If a check box option is unavailable, the label should be dimmed.

Radio Buttons

Radio buttons, also referred to as option buttons, present the user with a single choice in a mutually exclusive set of choices. The user may select only one at a time. If space is at a premium, and the number of choices is greater than four, consider a drop-down list box, which takes up less space.

List Boxes

List boxes display choices for the user. If a choice is unavailable, in general you should drop it from the list. If the choice is important enough that the user should know it is unavailable, Microsoft recommends it appear in the list box as a dimmed selection.

Always allow your list boxes enough room. Try to allow vertical space for three to eight choices; horizontal space for the average length of selection text plus several extra spaces.

Remember that a list box can present a user with a great deal of information'keep it simple!

Combo Boxes

A combo box is a combination of text box and list box. They are appropriate where the data lends itself to possible responses, but allows the user to type in a response not in the list.

The design guidelines for list boxes apply to combo boxes.

Drop-Down List Boxes

Drop-down single-selection lists perform the same function as list boxes, but take up less space. When closed, the drop-down is only tall enough to show one selection. Opened, the list will show more items, like a standard list box.

Novice users often have much more difficulty selecting an item from a drop-down than from a normal list box. Whenever space permits, use radio buttons (for four choices or less) or normal list boxes.

Text Boxes

Text boxes allow the user to type in information. They may be single line or multi-line. Multi-line edit boxes should usually provide a vertical scroll bar.

The standard Windows accelerator keys for copy, paste, etc., are active by default. This is useful, because it enables the user to copy, for example, a paragraph from another application, then paste it directly into a multi-line text box in your application. For this reason, we recommend you do not reassign the default windows editing shortcut keys'such as CTRL+C for copying or CTRL+V for pasting'to alternate commands in your Clarion application.

Fixed-length, auto-exit text boxes may speed up data entry. As soon as the user fills the text box (by typing the maximum allowable characters), the focus moves to the next control. Microsoft recommends applications use this type of text box sparingly, as the shift of focus may be disconcerting if it catches a user by surprise. We recommend using this type of text box when there are many fields to enter in a dialog. For dialogs with only a few fields, the programmer should try to anticipate what the end user will expect, and choose accordingly.

Clarion lets you select the font for text boxes. We suggest using the default system font. Microsoft specifically chose this font for menus and other system items because it is especially easy to read on a monitor.

Spin Boxes

Spin boxes are specialized text boxes with a pair of arrows (spin buttons) attached to the right of the text box. Spin boxes accept a limited set of values, which the user may type in, or by using the arrows, increase or decrease the value by a specified unit. Spin boxes can provide an alternative to drop-down lists when the set of values is limited in quantity and fits into a natural progression; for example, 'Spring, Summer, Fall, Winter.'

Besides increase or decrease controls for simple numbers or choices, you may use spin boxes to manipulate values that consist of several components. You may display time in hours, minutes and seconds, for example. Be sure to visually separate each component with a relevant separator character, such as a colon.

Static Text

Static text should present read-only information, such as directions for entering data in the other controls in the dialog box. You should also use static text to label controls not automatically labeled by the Window Designer, such as a text box.

Clarion lets you select the font for static text. We suggest using the default system font. Microsoft specifically chose this font for menus and other system items because it is especially easy to read on a monitor. You should certainly feel free to make the text bigger, as in creating a 'title' for a dialog box 'form.'

We also advise you to resist the temptation to use odd or too many different colors for static text. You never can tell what the default window background will be.

Group Boxes

Group boxes provide a visual grouping for related controls. They consist of a rectangular frame with a label at the upper left.

A group box can guide the user directly to the controls that are most important to the task at hand. If your application requires a dialog with more than ten controls or fields, we highly recommend taking a moment to consider whether some of the controls fit into logical groups.

Sheets and Tabs

The Property Sheets with tabs provide another method of grouping related controls, by allowing you to place controls with similar or related functions on separate “pages.”

Tabbed dialogs can “flatten” your application, by reducing the number of visible controls and displaying only those that are most important to the task at hand. If your application requires a dialog with more than ten controls, you should consider a “ multi-page” approach.

Keep in mind that Required Entry fields should be on the first visible tab.

Wizards

The WIZARD attribute on a Property Sheet control lets you control the user's movement through the tab “pages.” This lets you present a series of dialogs in a linear fashion. Optionally, you can control the next “page” based on the answers the user provides in previous pages.

Wizards have become increasingly popular because they let users answer only one question at a time, decreasing the chances of confusion or error.

Control Labels

The Window Designer automatically supplies labels for many, but not all controls. You may supply labels for the other controls using static text. Not only will this identify the control for the user, but it also will allow keyboard users to quickly direct the focus to the control.

When the user keys in the mnemonic (such as the “S” in 'Daily Sales'), Windows automatically directs the focus to the next control after the static text label. Thus, you may place 'Daily &Sales' to the left of a drop-down box. When the user presses ALT+S, the combo box will receive the focus. The keyboard user will merely have to press the DOWN ARROW key to view the choices in the list.

Microsoft suggests the following guidelines for control label text:

·Capitalize the first letter of each word, except for articles (e.g., a, an, the), coordinate conjunctions (e.g., and, or, for), prepositions (e.g., by, with) or the word “to” in infinitives.

·Try to use the first letter of the first word for the mnemonic. Since the mnemonics need to be unique, however, this isn't always possible. Alternately, use another letter if it allows a stronger mnemonic link: such as the “x” in “Exit”. If the first word in the control label is less important than another, use the other (e.g., “by Ascending Order”).

·Choose consonants over vowels: they are more distinctive and more easily remembered.

Microsoft also suggests the following positioning for control labels for the following controls:

·Command buttons: inside the button.

·Check boxes, radio buttons: to the right of the control.

·Text boxes, spin boxes, lists, combo boxes: above or to the left of the control. Place a colon after the last word of the label. Left align the label with the section of the dialog box in which it appears.

Cursors

In a graphical environment such as Windows, the mouse cursor, or screen pointer, is the means by which the user shows the application what to do next. For example, the I-bar, or insertion point, may tell a word processing application where the next characters typed by the user should appear. This is a key part of the 'event driven programming' referred to earlier in this chapter.

Though Microsoft has not set specific guidelines for the use of each system cursor, the following uses have evolved into standards across GUI platforms:

Arrow: selects controls and menu commands.

I-beam: selects and inserts text.

Crosshairs: draws and manipulates graphics.

Plus sign: selects fields in an array.

Hourglass: shows that a lengthy operation is in progress.

Next: Menus

window_elements.htm.txt · Last modified: 2021/04/15 15:57 by 127.0.0.1