Designing a GUI

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Since Visual Basic allows for rapid development of programs and
applications, many developers overlook many key aspects of user interface design. The
truth of the matter is a good well designed interface should by a major feature of the
application.  The application’s interface should operate smoothly and predictable,
anticipating what the user will do next. In the same context, a poorly designed interface
will be noticed and will be unappreciated by the user.

This month, we will be looking at the basic concepts of designing a good
user interface.

One of key enhancements made to the Windows 95 interface was the ability
to assign almost any colour to any object.  As a developer, it is important to
realize that not everyone uses the same colour scheme you do. For this reason, you should
never hard code hexadecimal colour values into your forms. They should change according to
the system theme.  Not only does this make your application look more professional,
it is one of the requirements of the Windows 95 Logo Program. Since Microsoft did not
mention this process in the Visual Basic documentation, it may be difficult to figure out
on your own, but it is really quite simple.

In Visual Basic 5 and 6, you have the option to assign one of the system
colours to any control.  In this way, your application will automatically have the
same colour scheme as the users desktop.

One way to see if your forms’ colours are changing properly is simply to
change your colour scheme.  Since Halloween is approaching, change your colour scheme
to Pumpkin.  If the form, and other 3-D controls, change to an orange hue, and
highlighted items become purple, you passed the test (and you did not have to study)!
  If none, or only a few, of the controls change colour, you may have to go back and
assign one of the system colour constants to that control.  We have included a handy
chart for your reference, but you can also look them up in the on-line help, under ‘System
Color Constants.’  Setting a colour property to one of these causes VB to look up the
colour that has been set in the appearance section in the display dialog box.

Another aspect of user interface design, that is often overlooked, is the
tab order. Believe it or not, many people still move around a form with the tab key.
  Many of these users, including myself, become annoyed when the focus between
controls shifts around erratically.  For example, if you had a standard font dialog,
wouldn’t it be annoying if the focus shifted from the font name list, to an underline
check box, to the OK button, to the size selector, to the bold check box?  This would
be very frustrating for the user, and would not persuade them to come back and buy your
next product.

If developers would take a few minutes to insure that the tab order is
properly laid out, it would make navigation easier.  In fact, no one would notice,
but that’s a good thing, remember!  To do so is also quite easy. After you lock your
form, don’t click on the first control, as you would expect, but on the last control that
you want in the tab order. This should be located in the bottom right-hand side of the form.
Now work you way back across the form, from right to left, and then up, setting the taborder
of each control that you come to to 0. Although this sounds stupid, by the time that you
come to the first control, all the others will be in order. It is important to note that
while labels are frames have a TabIndex property, they are actually skipped in the tab order.

Some of the things that you should remember are:

• Accelerator keys on menus
• Shortcut keys on menus and labels, using the & sign in the caption property. When used in labels, the next control in the taborder is selected.
• Cancel and Default properties

The guidelines suggested in the Microsoft document are followed in the VB Application Wizard, so have a look at the layout of the generated forms.

The most important thing about your UI is that it is intuitive: if you were a completely new computer user, would you be able to use your application with little or no help? If the answer is no, then maybe you should review the form and toolbar layouts.