Designing a GUI

Tuesday Nov 19th 2002 by John Percival
Share:

Designing a GUI

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.

System Colour Name

Hex Value

VB Constant

Menu Text

&H80000007&

vbMenuText

Scroll Bars

&H80000000&

vbScrollBars

Window Background

&H80000005&

vbWindowBackground

Window Frame

&H80000006&

vbWindowFrame

Window Text

&H80000008&

vbWindowText

Active Border

&H8000000A&

vbActiveBorder

Active Title Bar

&H80000002&

vbActiveTitleBar

Active Title Bar Text

&H80000009&

vbTitleBarText

Application Workspace

&H8000000C&

vbApplicationWorkspace

Button Face

&H8000000F&

vbButtonFace

Button Highlight

&H80000014&

vb3DHighlight

Button Shadow

&H80000010&

vb3DDKShadow

Button Text

&H80000012&

vbButtonText

Desktop

&H80000001&

vbDesktop

Disabled Text

&H80000011&

vbGrayText

Highlight

&H8000000D&

vbHighlight

Highlighted Text

&H8000000E&

vbHighlightText

Inactive Border

&H8000000B&

vbInactiveBorder

Inactive Title Bar

&H80000003&

vbInactiveTitleBar

Inactive Title Bar Text

&H80000013&

vbInactiveCaptionText

Menu Bar

&H80000004&

vbMenuBar

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.

Share:
Home
Mobile Site | Full Site
Copyright 2017 © QuinStreet Inc. All Rights Reserved