*************************************
* *
* DB/C Newsletter *
* November 1995 *
* *
*************************************
Editor's Notes
When DB/C programmers start to write their first GUI DB/C program,
they quickly recognize they are in foreign territory. Gone are the familiar
KEYIN and DISPLAY verbs. Without guidance many quickly get lost in a morass
of buttons and boxes. This month's article may help to give guidance to
those who are starting down the GUI path. For more information in designing
GUI programs, I can suggest these two books:
"The Windows Interface Guidelines for Software Design" from Microsoft Press
"Macintosh Human Interface Guidelines" from Addison Wesley
DB/C 9 beta testing continues. We have had substantive feedback from
a few beta testers. Based on their input, we are adding several new features
to DB/C 9. We will provide more details about these new features in next
month's DB/C Newsletter.
don.wills@swc.com
GUI Style Guidelines
The move to a graphical user interface (GUI) can be hard for programmers
who are skilled in building character-based programs. This is especially
true of DB/C programmers. A character-based user interface (or CUI) built
with DB/C can be very feature rich - and many of the more advanced features
of a CUI program do not translate easily or well to a GUI environment. In
this article, we will provide some guidelines for how to build GUI programs
that conform with the generally accepted GUI style, while still retaining as
much of the DB/C CUI functionality as possible.
The fundamental difference between CUI and GUI programs is that in CUI
programs the programmer controls the flow of actions, whereas in GUI programs
the user controls the flow of actions. GUI programs must be structured
differently to deal with this. More importantly though, there are several
new principles to consider during the design of GUI-based programs.
The user of a GUI program must feel like he is in control. The concept
of "mode" is an aspect of the feeling of control that is important. Many
CUI programs employ successive modes while leading the user through a series
of decisions. A mode is a situation where only a limited number of actions
are allowed. A well designed GUI program is modeless except for a minimal
number of modal dialogs.
An example of a CUI program that contains modes is a report program
that prompts the user through a series of questions leading to this final
question - "OK to run report (Y/N)?". If the user decides not to run the
report after having answered only the first of the questions, many CUI
programs force the user through all of the questions just to let them answer
"N" to the final "OK to run" question.
Another example is a data entry screen that forces the user to press
the Enter key to drop through each of the fields until the Enter key has been
pressed on the bottom field. Then and only then is the question "OK to add
record (Y/N)?" displayed. In a modeless version of the program, the user
would be able to press the "Add record" button at any time.
Another important aspect of GUI design is consistency. In modal CUI
programs, consistency isn't that important. With limited options in a mode,
somewhat inconsistent terminology doesn't cause any harm. But when the user
can choose any function at any time, it is important for the user to know
exactly what operation he is activating. Inconsistent terminology and
identification can cause errors in a modeless environment. An example
of this is the use of the term "Close" in a push button in a GUI dialog box.
It is unclear whether this means "OK do it and make the dialog go away" or
"make the dialog go away without doing it". The term "Close" should not be
used in a dialog box - use "OK" and "Cancel".
Consistency within one program is important. But consistency with other
programs is just as important. You should use the same terminology and visual
cues that other GUI programs use. Consistency reinforces one of the important
advantages of a GUI - when all programs look and feel the same, training cost
and time is minimized and users are more confident about running all programs.
This is important for all users, but is very important for casual users.
Feedback is another important consideration. Your programs should always
feel responsive to the user. When an action is initiated, a response should
occur within a few seconds. In addition, a progress bar or other indicator
that changes frequently enhances the user's feeling of being in control.
As the programmer, you should build the user interface to accommodate
novices as well as experienced users. It is important to have function keys
(or keystroke combinations) to allow an experienced user to quickly initiate
actions. But it is even more important to make sure that the casual user can
easily initiate all of the functions of a program. This latter requirement
may translate into a large number of menu items, but it is the correct way
to design the program.
For DB/C programmers, one of the biggest changes is the action of the
Enter key. In most DB/C programs, the Enter key means to finish entering
a field (and implicitly move to the next field) or to do the action chosen
with the previous keystroke. For example, pressing the "Y" key followed by
pressing the Enter key is a typical CUI way to provide a positive response.
In most GUI programs, the Enter key is reserved for activating the default
push button. The default push button is usually the positive action, so
the positive action is accomplished with one keystroke. In GUI programs,
the Tab key is used to finish entering a field and move to the next field.
DB/C 8 adheres the GUI Enter key conventions. We have had considerable
negative feedback about this convention, so we are planning to add a feature
to DB/C 9 that causes the Enter key to function like the Tab key if there is
no default push button defined for a panel or dialog. We recommend that you
design your programs with default push buttons, but if you want the Enter
key to work like in DB/C CUI programs, you can.
The use of coded fields is another area where CUI DB/C programs don't
convert well to GUI programs. Coded fields are not a problem if they only
represent two possible values. For example, the field "Taxable (Y/N)" in
a CUI program converts directly to a check box. For fields with only two
values, always use a check box - don't use a two button radio button group.
Coded fields with three or more values present more of a problem. The
correct GUI design is to use a radio button group or a drop box. The radio
button is more obvious and easier for the user to understand and change,
but the drop box takes up less room on the screen.
Do not use radio buttons, drop boxes, list boxes or check boxes for
display-only fields. When the user sees one of these controls, it is
implicit that the value in it can be changed. If your program violates
this assumption by using these controls for display-only fields, users may
feel uncomfortable with your program. They may think "If it violates this
rule, what other things might it be doing that I don't know about". You
do not want users of your program thinking this thought.
To deal with the display-only field situation, we are adding a new
control in DB/C 9. It is a display-only text field. It looks like an edit
box with a gray background.
Here are some more GUI design tips:
1. OK and Cancel are the preferred names for the push buttons that cause an
action to occur or cause the action not to occur. The OK button should
be the default push button (that is, the Enter key causes its action to
happen). The Cancel button should be the escape push button (the Esc
key causes this button's action to happen). There may be a need for
additional push buttons, but always try to use at least OK and Cancel.
2. The correct spelling of OK is with both letters capitalized, not Ok.
3. The Close function causes a window to disappear. It does not cause an
application to terminate. In Windows, Exit causes the application to
terminate. In Mac OS, Quit causes the application to terminate. The
Exit/Quit difference is on the few differences that a DB/C programmer
needs to deal with if you want to make your program have both the
Windows and Mac OS look and feel.
4. The ... (three periods) should only be used in a menu entry when a
dialog box prompting for additional information will be displayed before
the action is initiated. For example, File Open and File Save As should
have the three periods, but File Save should not. Do not use three
periods in a dialog box with a phrase like "Processing...".
5. Be sure to gray menu items and controls that are not valid for the
current state. In certain situations, this may mean that almost all
of the menu items or controls are gray. A well-designed program is
consistent with its use of the gray state.
6. Don't use two radio button groups immediately above and below each
other. The user can't tell where on group starts and another ends.
7. Warn the user if an action will cause a loss of data or an interruption
that has other considerations. If possible, the dialog message warning
of this situation should use the OK and Cancel buttons.
8. Use consistent and unambiguous words and phrases. For example, the
phrase "This action will cause data to be lost. OK to continue?" works
well with the OK and Cancel names for push buttons. An example of a
poorly worded message is "Do you want to terminate processing?". Does
Cancel mean continue processing or terminate processing?
Properly designed GUI programs provide many benefits to the user. As
the programmer, you are responsible for the making sure that your DB/C GUI
programs look and feel like other GUI programs. There is a lot more to doing
good GUI design than is covered in this article, but hopefully it will get
you started down the GUI programming path.
DB/C Class Schedule
The next DB/C class is not yet scheduled.