Visual Basic Concepts

The Basics of Interface Design

You don't need to be an artist to create a great user interface — most of the principles of user interface design are the same as the basic design principles taught in any elementary art class. The elementary design principles of composition, color, and so forth apply equally well to a computer screen as they do to a sheet of paper or a canvas.

Although Visual Basic makes it easy to create a user interface by simply dragging controls onto a form, a little planning up front can make a big difference in the usability of your application. You might consider drawing your form designs on paper first, determining which controls are needed, the relative importance of the different elements, and the relationships between controls.

Composition: The Look and Feel of an Application

The composition or layout of your form not only influences its aesthetic appeal, it also has a tremendous impact on the usability of your application. Composition includes such factors as positioning of controls, consistency of elements, affordances, use of white space, and simplicity of design.

Positioning of Controls

In most interface designs, not all elements are of equal importance. Careful design is necessary to ensure that the more important elements are readily apparent to the user. Important or frequently accessed elements should be given a position of prominence; less important elements should be relegated to less prominent locations.

In most languages, we are taught to read from left to right, top to bottom of a page. The same holds true for a computer screen — most user's eyes will be drawn to the upper left portion of the screen first, so the most important element should go there. For example, if the information on a form is related to a customer, the name field should be displayed where it will be seen first. Buttons, such as OK or Next, should be placed in the lower right portion of the screen; the user normally won't access these until they have finished working with the form.

Grouping of elements and controls is also important. Try to group information logically according to function or relationship. Because their functions are related, buttons for navigating a database should be grouped together visually rather than scattered throughout a form. The same applies to information; fields for name and address are generally grouped together, as they are closely related. In many cases, you can use frame controls to help reinforce the relationships between controls.

Consistency of Interface Elements

Consistency is a virtue in user interface design. A consistent look and feel creates harmony in an application — everything seems to fit together. A lack of consistency in your interface can be confusing, and can make an application seem chaotic, disorganized, and cheap, possibly even causing the user to doubt the reliability of an application.

For visual consistency, establish a design strategy and style conventions before you begin development. Design elements such as the types of controls, standards for size and grouping of controls, and font choices should be established in advance. You can create prototypes of possible designs to help you make design decisions.

The wide variety of controls available for use in Visual Basic make it tempting to use them all. Avoid this temptation; choose a subset of controls that best fit your particular application. While list box, combo box, grid, and tree controls can all be used to present lists of information, it's best to stick with a single style where possible.

Also, try to use controls appropriately; while a text box control can be set to read-only and used to display text, a label control is usually more appropriate for that purpose. Remain consistent in the setting of properties for your controls — if you use a white back color for editable text in one place, don't use grey in another unless there's a good reason.

Consistency between different forms in your application is important to usability. If you use a grey background and three-dimensional effects on one form and a white background on another, the forms will appear to be unrelated. Pick a style and stick with it throughout your application, even if it means redesigning some features.

Affordances: Form Follows Function

Affordances are visual clues to the function of an object. Although the term may be unfamiliar, examples of affordances are all around you. A handgrip on a bicycle has depressions where you place your fingers, an affordance that makes it obvious that it is meant to be gripped. Push buttons, knobs, and light switches are all affordances — just by looking at them you can discern their purpose.

A user interface also makes use of affordances. For instances, the three-dimensional effects used on command buttons make them look like they are meant to be pushed. If you were to design a command button with a flat border, you would lose this affordance and it wouldn't be clear to the user that it is a command button. There are cases where flat buttons might be appropriate, such as games or multimedia applications; this is okay as long as you remain consistent throughout your application.

Text boxes also provide a sort of affordance — users expect that a box with a border and a white background will contain editable text. While it's possible to display a text box with no border (BorderStyle = 0), this will make it look like a label and it won't be obvious to the user that it is editable.

Use of White Space

The use of white space in your user interface can help to emphasize elements and improve usability. White space doesn't necessarily have to be white — it refers to the use of blank space between and around controls a form. Too many controls on a form can lead to a cluttered interface, making it difficult to find an individual field or control. You need to incorporate white space in your design in order to emphasize your design elements.

Consistent spacing between controls and alignment of vertical and horizontal elements can make your design more usable as well. Just as text in a magazine is arranged in orderly columns with even spacing between lines, an orderly interface makes your interface easy to read.

Visual Basic provides several tools that make it easy to adjust the spacing, alignment, and size of controls. Align, Make Same Size, Horizontal Spacing, Vertical Spacing, and Center in Form commands can all be found under the Format menu.

Keep It Simple

Perhaps the most important principle of interface design is one of simplicity. When it comes to applications, if the interface looks difficult, it probably is. A little forethought can help you to create an interface that looks (and is) simple to use. Also, from an aesthetic standpoint, a clean, simple design is always preferable.

A common pitfall in interface design is to try and model your interface after real-world objects. Imagine, for instance, that you were asked to create an application for completing insurance forms. A natural reaction would be to design an interface that exactly duplicates the paper form on screen. This creates several problems: the shape and dimensions of a paper form are different than those of the screen, duplicating a form pretty much limits you to text boxes and check boxes, and there's no real benefit to the user.

It's far better to design your own interface, perhaps providing a printed duplicate (with print preview) of the original paper form. By creating logical groupings of fields from the original form and using a tabbed interface or several linked forms, you can present all of the information without requiring the user to scroll. You can also use additional controls, such as a list box preloaded with choices, which reduce the amount of typing required of the user.

You can also simplify many applications by taking infrequently used functions and moving them to their own forms. Providing defaults can sometimes simplify an application; if nine out of ten users select bold text, make the text bold by default rather than forcing the user to make a choice each time (don't forget to provide an option to override the default). Wizards can also help to simplify complex or infrequent tasks.

The best test of simplicity is to observe your application in use. If a typical user can't immediately accomplish a desired task without assistance, a redesign may be in order.

Using Color and Images

The use of color in your interface can add visual appeal, but it's easy to overuse it. With many displays capable of displaying millions of colors, it's tempting to use them all. Color, like the other basic design principles, can be problematic if not carefully considered in your initial design.

Preference for colors varies widely; the user's taste may not be the same as your own. Color can evoke strong emotions, and if you're designing for international audiences, certain colors may have cultural significance. It's usually best to stay conservative, using softer, more neutral colors.

Of course, your choice of colors may also be influenced by the intended audience and the tone or mood you are trying to convey. Bright reds, greens, and yellows may be appropriate for a children's application, but would hardly evoke an impression of fiscal responsibility in a banking application.

Small amounts of bright color can be used effectively to emphasize or draw attention to an important area. As a rule of thumb, you should try and limit the number of colors in an application, and your color scheme should remain consistent. It's best to stick to a standard 16-color palette if possible; dithering can cause some other colors to disappear when viewed on a 16-color display.

Another consideration in the use of color is that of colorblindness. Many people are unable to tell the difference between different combinations of primary colors such as red and green. To someone with this condition, red text on a green background would be invisible.

Images and Icons

The use of pictures and icons can also add visual interest to your application, but again, careful design is essential. Images can convey information compactly without the need for text, but images are often perceived differently by different people.

Toolbars with icons to represent various functions are a useful interface device, but if the user can't readily identify the function represented by the icon, they can be counterproductive. In designing toolbar icons, look at other applications to see what standards are already established. For example, many applications use a sheet of paper with a folded corner to represent a New File icon. There may be a better metaphor for this function, but representing it differently could confuse the user.

It's also important to consider the cultural significance of images. Many programs use a picture of a rural-style mailbox with a flag (Figure 6.21) to represent mail functions. This is primarily an American icon; users in other countries or cultures probably won't recognize it as a mailbox.

Figure 6.21   An icon representing a mailbox

In designing your own icons and images, try to keep them simple. Complex pictures with a lot of colors don't degrade well when displayed as a 16-by-16 pixel toolbar icon, or when displayed at high screen resolutions.

Choosing Fonts

Fonts are also an important part of your user interface, because they often communicate important information to the user. You need to select fonts that will be easily readable at different resolutions and on different types of displays. It's best to stick with simple sans serif or serif fonts where possible. Script and other decorative fonts generally look better in print than on screen, and can be difficult to read at smaller point sizes.

Unless you plan on distributing fonts along with your application, you should stick to standard Windows fonts such as Arial, New Times Roman, or System. If the user's system doesn't include a specified font, the system will make a substitution, resulting in a completely different appearance than what you intended. If you're designing for an international audience, you'll need to investigate what fonts are available in the intended languages. Also, you'll need to consider text expansion when designing for other languages — text strings can take up to 50% more space in some languages.

Again, design consistency is important in choosing fonts. In most cases, you shouldn't use more than two fonts at two or three different point sizes in a single application. Too many fonts can leave your application looking like a ransom note.