User interface design is probably the most overlooked subject among application developers. Most technical books that discuss development tools rarely include a chapter on this topic. But user interface design is even more important now that Windows 95
has changed the way we look at Windows.
Windows 95 has made a transformational change and has become more intuitive and easier to use. Visual Basic 4.0 has also made substantial changes to support the look and feel of this new and intriguing interface. This chapter focuses on user interface
design for Windows 95 and how you can use Visual Basic 4.0 as a development tool for supporting this interface.
Although the Windows 95 user interface has changed dramatically, the guiding principles of user interface design remain constant.
Using these design principles as a starting point, this chapter moves on to discuss the new and improved Windows 95 interface.
The basic premise behind the Windows 95 interface is to provide an environment that is easy to learn for novices. The Windows 95 interface also allows experts to easily customize their desktop environment. In usability studies, Microsoft found that
approximately 20 percent of all users choose the Alt+Tab method to switch between applications and that fewer than 50 percent use more than one application at a time. Based on these findings, a design goal for Windows 95 involved improving the interface of
Windows 3.1 to be more usable. The productivity of the new interface would truly allow people to perform unpredictable tasks in any sequence. The redesigned interface offers a simple, straightforward environment that allows the user to employ multiple
applications and easily switch between them. Another design goal is a neat, clean, and intuitive desktop that makes users comfortable.
Some of the new features of Windows 95 include the following:
The Windows 95 interface is document-centric as opposed to application-centric. Document-centric means that the interface more clearly addresses the user's purpose for interacting with the computer—creating and using documents. The terms documents
and document-centric can also be translated as data. The user interacts with the computer to manipulate files and data, not to work with applications. By adopting this data-centered focus, applications do not get in the way of the user's productivity but
assist with accomplishing tasks.
Windows 95 contains many improvements in the interface as it pertains to designing and building user applications. The following sections summarize some of the key improvements.
The desktop represents the user's main workspace on which all objects are placed. The desktop is object oriented and has a 3-D look and feel. Two main features of the desktop are the taskbar and the Start menu. These two key features allow the user to
easily accomplish tasks.
The Start menu button provides an easy starting place for the novice user to interact with the computer. Through usability testing, Microsoft discovered that users had trouble starting applications and navigating through the Program Manager hierarchy.
Using Windows 95 and the Start button to start an application, participants realized speed improvements of three to nine times. This productivity improvement was the design goal behind the Start button. A novice user can quickly choose an application and
begin working.
Tip
The Start button includes the following options:
The taskbar provides a home for all applications to dock. Each time a window is opened, a representative button is placed on the taskbar. The user can easily switch between applications by using the buttons on the taskbar. The user can resize or hide
the taskbar as well as move it to another edge of the screen.
Figure 6.1 shows the new desktop environment for Windows 95 emphasizing the taskbar and the choices for the Start button.
Figure 6.1. The Windows 95 desktop. environment.
Note
Several buttons have been changed for the Windows 95 interface. These buttons include the system menu, and the minimize, maximize, and close buttons, which are all displayed at the top of most primary windows. The system menu has been changed to an icon
that depicts the application type. For utility applications such as the Windows calculator, a small icon representing the application should be displayed in the upper left corner of the title bar. If the user can open and save files or documents using the
application, an icon depicting the document or data file type should be placed in the title bar. Figure 6.2 shows these changes to the title bar.
Figure 6.2. This figure depicts an example of a window title bar.
Pop-up menus are another new feature in Windows 95. The user activates a pop-up menu by right-clicking the mouse button. The menu options include some of the most common actions for that object. Although several Windows 3.1 applications initially
introduced this functionality, Windows 95 extended the feature to include it in the operating environment.
The tabbed property sheet is something you may have used in some Windows 3.1 applications. This feature allows you to group related items in one dialog window so that the user can set a group of related properties for an object. The user moves between
each group by clicking the various tabs on the window. Again, this feature has been included in the operating environment.
The online help for Windows 95 is more intuitive and easier to use. The online help user interface uses a book metaphor and includes tabbed dialog boxes and shortcuts to other applications. In addition, the What's This feature allows you to get
context-sensitive help for individual objects on a window.
Now that you are familiar with the design principles of an effective user interface and some of the new features of the Windows 95 interface, you may be asking how this affects you as a Visual Basic developer. The rest of this chapter uses the concepts
discussed so far as building blocks for designing and developing effective user interfaces in Visual Basic 4.0.
Visual Basic 4.0 provides many tools for you to use to build an effective interface. This section discusses some of the basic controls that you should consider when designing your application. Along the way, I will provide guidelines to apply when using
these tools.
Windows are the foundation of a graphical user interface (GUI) and the principal source for user interaction. There are basically two types of windows: primary and secondary. Primary windows include the main functionality of the application. Secondary
windows are dialog windows that allow the user to specify options or details about objects in the primary window.
A typical primary window includes a title bar, a menu bar, and toolbar. The text section in the middle of the title bar describes the displayed object. The title bar serves as the anchor point with which the user moves the window. For Windows 95, a
graphic icon replaces the system menu in the title bar. Design this icon based on the type of application you are developing. If your application allows the user to create and manipulate data or documents, design an icon that graphically represents the
nature of the document or data type. If your application is a tool or utility similar to the Windows calculator, your icon should depict the application function. This design guideline is consistent with the document-centric nature of the Windows 95
interface. The title bar can also include the minimize, maximize, and close buttons.
Note
A status bar is often included at the bottom of a primary window. You can use the status bar to display informational messages to the user about the object or document being viewed. Scroll bars are usually included automatically if the content of the
window is greater than what the user is viewing, often referred to as the client area. The client area extends from the menu and toolbar area at the top of the window to the bottom of the window. The client area stops at the status bar, if one is included
in the window.
Note
Consider whether your windows should be sizable. Users should be able to resize most primary windows. Secondary windows are usually not resizable. By providing the ability to size the windows within your application, the user can more easily view the
whole desktop area.
The window is the palette on which you design a usable interface. Controls provide the tools to make your application windows come alive. (The next section describes the various controls available.) Visual layout is the most important design
consideration for your windows. You will discover that you have a plethora of controls and tools at your disposal. You must demonstrate restraint, however, concerning the number of controls you paint on your window.
Alignment is crucial to an effective interface. Think about a painting hanging crooked on a wall. Everyone has the urge to walk over to the wall and straighten the picture to bring alignment and order to the room. The same is true for your interface:
the controls should be properly aligned to provide a comfortable and pleasing feeling for the user.
The layout must also contain proper spacing for clarity. The fifty-percent rule can help in your decision of whether to include the control on a window. This rule states that a control should be placed on a window if it is used fifty percent of the
time; otherwise, the item should be placed on another window. You then provide a navigational path to that item. This path may include a push button, menu item, or toolbar icon.
Controls are the primary building blocks with which you construct your interface. Visual Basic includes a large set of controls that allow the application developer to develop interaction with the user. For purpose of discussion, these controls are
broken into two categories:
Menus provide lists of actions from which the user can choose. The three types of menus are pull-down, pop-up, and cascading. The pull-down menu is located on the menu bar. The menu bar is displayed directly below the title bar and includes a list of
menu titles. Each menu title includes a drop-down list of menu items that pertain to that menu title. For example, the File menu title may include the New, Open, and Save menu items. A new feature in Windows 95 allows the user to easily navigate through
the menu items: Once a menu is activated, the menu items remain in view and the mouse pointer is sensitive to each item in the list. This sensitivity allows the user to more easily select a menu item as well as navigate through various submenu items.
The pop-up menu is a powerful feature that allows the user to invoke a choice of menu items without having to navigate to the menu bar. The pop-up menu is invoked by clicking the right mouse button over an object. The menu items vary based on where the
cursor is located. For this reason, pop-up menus are often referred to as contextual menus. As a visual application designer, you can use pop-up menus to offer choices to a user without cluttering the screen workspace. Unlike pull-down menus, pop-up menus
do not have titles. Pop-up menus should only include the most frequently used commands for that object.
A cascading menu allows you to include submenus underneath a particular menu item. An arrowhead to the right of a menu item indicates that a submenu exists. Visual Basic 4.0 allows you to create up to five levels of submenus. You should use cascading
menus sparingly; requiring the user to navigate across several levels of submenus increases the complexity of your interface and can cause confusion. A good guideline is to include only one level of submenus. To avoid multiple levels of cascading menus,
you can use a dialog box to prompt the user for action.
Here are some general guidelines for menus:
Toolbars provide the user with easy access to frequently used commands and options. Toolbars are usually placed at the top of the window directly under the menu bar. Some applications require floating toolbars, which are also supported in Visual Basic
4.0. Each command on a toolbar is a graphical icon that represents the action performed when the user clicks the button. You should use ToolTips for each toolbar option that does not have a text label. ToolTips displays the name of the command in a yellow
rectangular box that appears when the user rests the mouse over the button for a specified period of time. By including this feature, you can provide a straightforward text description of your visual icon.
Window controls are those controls you design for your window based on the needs of the user. Window controls in Visual Basic can be divided into standard controls and custom controls. Standard controls are those controls included in the Visual Basic
executable and included by default on the Visual Basic toolbox. Custom controls are separate files, either in VBX or OCX format, that can be added to or removed from the toolbox to help you design specialized functionality. The OCX custom controls include
Object Linking and Embedding (OLE) technology. The VBX custom controls are Dynamic Link Libraries (DLLs) compiled especially for Visual Basic; they represent functionality from previous versions of Visual Basic.
Note
Figure 6.3 shows the controls included in the Visual Basic toolbox.
Figure 6.3. The Visual Basic 4.0 toolbox.
The following sections discuss some of the common Visual Basic controls in the context of designing an interface. I will try to show some common design principles while walking through several examples packaged with Visual Basic.
The command button, often referred to as a push button, is one of the most common controls in a user interface. The user clicks the button to perform some action; the button gives the appearance that it has been pressed and released. This visual
feedback is informative to the user.
The push button usually contains a label describing the action to be performed (for example, the OK button). You should provide an access key so that the user can perform the action using the keyboard. To create an access key for the push button, place
an ampersand (&) before the designated letter in the button caption. The designated letter is then underlined so that the user can easily determine the access key. The user can then use the Alt+letter combination to execute the command.
If you want to use an ellipsis on a push button, refer to the guidelines for menu items in "Menus and Toolbars," earlier in this chapter. Remember that the ellipsis should be used only when the user has to supply more information, not because
pressing the button leads to another window. In other words, an ellipsis is not used in a case in which clicking the command button displays a message box.
The user can also navigate to the command by pressing the Tab key; he or she can activate the button by pressing the spacebar or Enter when the button has focus. If a button is the default button for a window, the user can press Enter to execute that
command. You can designate a command button as the default button by setting that button's Default property to TRUE.
People usually read top to bottom and left to right. For this reason, you should usually place command buttons at the bottom right corner of the window. The default command should be the first button, or the one furthest to the left, in the set. Place
the Help button, if applicable, last in the set. Place a Cancel button last in the set but before the Help button. You can optionally place command buttons on the right side of the window from top to bottom. The same guidelines apply top to bottom as they
do left to right. If a command button is exclusively associated with a single control, place that command with the control.
Labels and text boxes are also familiar controls. You can use labels to display read-only text as well as to describe controls that do not have a caption. When providing a label for a text box, place the label to the left side of the text box. Related
labels should be vertically aligned with the frame or group box caption, if applicable. Also, the caption for related sets of text box labels should be left aligned, and a caption should immediately follow the text.
Tip
Text boxes allow the user to enter and edit text. To create an access key, place an ampersand before the designated letter in the caption for the text box. The text box should receive the focus when the access key (Alt+designated letter) is used. You
can set the Locked property to TRUE to keep a user from directly manipulating the text while still allowing the user to select the text. The user, therefore, can select text for copying but not for cutting or pasting. The Locked property does not restrict
you from manipulating the contents of the text box within your code. The text-box control defaults to a single-line text box.
You can set the MultiLine property to TRUE to support entry and display of multiple lines of text. A mulitline text box also supports word-wrapping of text. This feature functions like a word processor in that the text wraps around to the next line when
the end of a line is reached. Horizontal and vertical scrolling are supported.
Figure 6.4 shows how a text box can be used in an application that requires the user to enter a password. For security reasons, each character should be masked as it is entered into the text box. The PasswordChar property for the text box in Figure 6.4
has been set to *. For every character the user types, a * is displayed instead.
Figure 6.4. This window displays a * when the user enters a character in the Password text box.
You can restrict the values a user enters into a text box as well as the number of characters. For example, you may want to limit the user to entering only numbers or only eight characters. The following code restricts the input to numbers by using the
KeyPress event of the Age text box:
Private Sub txtAge_KeyPress (KeyAscii As Integer)
If KeyAscii < Asc ("0") or KeyAscii > ("9") Then
KeyAscii = 0
Beep
End If
End Sub
When the user types anything other than a number, the character is canceled and a beep sounds.
To restrict the number of characters a user can enter, set the MaxChar property to the desired number. For example, if the user can enter only eight characters for a password, set the MaxChar property to 8. When the user attempts to enter the ninth
character, the text box does not allow it and a beep sounds.
A rich text box is now available in Visual Basic to support the Windows 95 interface. You can use this control only with 32-bit platforms. This control allows the user a richer set of features, such as changing the font size and making the font bold and
italicized. For multiline text, paragraphs can be indented and text can be displayed as a bulleted or numbered list. OLE objects can be embedded into this control. The user can also print the contents of the text box. The rich text box is a powerful
control that adds additional word processing capabilities beyond those of the standard text box.
The masked edit control provides a text box you can use to restrict the format of user input and to format the output that is displayed. This control behaves similar to a standard text box. You can define a mask or layout for the user to follow when
entering information. For example, you can define a format for entering a telephone number: (###)###-####. This control can save you a lot of coding time when you are designing fields that have a predefined format.
You can use radio buttons, also referred to as option buttons, to allow the user one selection from a list of mutually exclusive items. A radio button is a circle with a caption located to the right. When the user chooses an option, a dot fills the
middle of the circle. If the user selects another option within the same group, the previously selected choice becomes empty (deselected) and the newly selected option is filled with a dot.
Place a frame around a related set of option buttons. The caption for the frame should represent the type of choice; the captions for each option should represent the specific choices.
NOTE
Figure 6.5 shows the use of radio buttons to provide a choice to the user.
Figure 6.5. Radio buttons that provide a choice to the user.
In this example, the user must choose only one method of payment, hence the mutually exclusive relationship.
Here are some other general guidelines for radio buttons:
You can use checkboxes to allow the user to choose one or more options from a list of independent items. A checkbox is a square box with a caption located to the right. When the user makes a selection, the checkbox is turned on and the square is filled
in with a checkmark. When the user clicks the selection again, the choice is turned off and the square becomes empty. You may also use a gray checkmark to reflect a mixed value state. A mixed value state is defined as a selection that has the properties of
both states of the check box value (partially true and partially false). A common example for a mixed value state is found in word processing applications. A selection may be partially underlined; therefore, the checkbox reflecting this state would be
grayed indicating the mixed state of the selection.
Place a frame around a related set of checkboxes. The caption for the frame should represent the type of choice; the captions for each option should represent the specific choices. Checkboxes are placed on a frame in the same manner as radio buttons
(refer to the Note box in the preceding section).
Figure 6.6 shows an example of checkboxes that provide choices for the user.
Figure 6.6. The three states of a checkbox: Off, On (checkmark), and Mixed Value (checkerboard).
Here are some other general guidelines for checkboxes:
A list box can be used for displaying a list of choices. A typical list box displays a single list of choices vertically, although multiple columns are supported. Horizontal and vertical scroll bars are displayed automatically when the content exceeds
the viewing area of the list box. For practical reasons, design the width of the list box to be equal to the list entry with the maximum possible number of characters. By using this guideline, the user can view all the text associated with an item without
scrolling horizontally. If this is not possible because of limited window space, design the width of the list box to be as wide as the average width of all the items in the list box. The user can then use the horizontal scroll bar or you can place an
ellipsis in the middle of an entry to support the display of the relevant information. The only scenario where you might want to use the ellipsis technique is when you need to display a file with a long directory name (five or six directory levels) which
exceeds the width of the list box. The relevant information would include the root drive and maybe one or two directory levels along with the file name.
You should place a label above and to the left of the list box to describe its contents. Assign an access key to the label. When the user presses the access key, focus should be placed on the list box. A command button is sometimes associated with the
list box so that the user can make a choice or choices and execute a command. Double-clicking an item should represent selecting an item and pressing the command button. The following code demonstrates how to achieve this feature:
Private Sub lstSelection_List_DblClick ()
cmdSelect_Click
End Sub
This code example executes the click event for the Select command button when the user double-clicks the Selection list box. An alternative to this method is to set the cmdSelect.Value equal to TRUE.
A common use of the list box is to support multiple item selection. You should provide the user with the ability to contiguously and noncontiguously select items. Contiguous items are those items adjacent or next to each other in the list. You can use
the MultiSelect property to support this feature. The default setting for the MultiSelect property is 0 (which does not permit multiple selection). Set this value to 2 for extended multiple selection. A value of 2 allows the user to employ the Shift+click
combination to select all the (contiguous) items between the current item and the previous selection. For noncontiguous items, the user can employ the Ctrl+click combination to select and deselect items in the list.
The combo box is a combination of the text and list box controls. The user can type text into the combo box or select an item from the list. The three types of combo boxes are as follows:
The drop-down combo box is the default setting (Style = 0). The user can enter text directly in the combo box or select an item from the list. To open the list, the user can click the detached arrow at the right side of the control. When the control has
the focus, the user can also use the Alt+down-arrow key combination to display the list. The user can press the up-arrow or down-arrow key on the keyboard to navigate the choices or can select an item by clicking the desired choice. This value is then
displayed in the text portion of the text box.
NOTE
The drop-down combo box automatically supports the editing functions consistent across most applications that handle text. When the user selects an item from the list, clicking the right mouse button displays a pop-up menu for the combo box with the Cut
and Copy selections enabled. The Paste option appears enabled when text has been copied and is available for pasting into the combo box. If the user types an entry into the combo box and clicks the right mouse button, the other editing functions such as
Undo, Delete, and Select All are also available. Figure 6.7 shows a drop-down combo box that supports the right mouse button functionality.
Figure 6.7. This window shows a drop-down combo box with the pop-up menu activated.
The simple combo box is a list displayed at all times. You can design a simple combo box by setting the Style property to 1. This box is usually drawn larger than the other two styles to display multiple entries in the list. Vertical scrolling is
supported for those items that are not displayed. The user can enter text directly or select from the list, just as with the drop-down combo box.
The drop-down list combo box differs from the other two styles in that the user can only choose an item from the list. No text can be entered into the text portion of the control. You can design this style by setting the Style property to 2. The same
navigation techniques used for the drop-down combo box apply to the drop-down list combo box.
Here are some general guidelines for combo boxes:
The grid control is useful for displaying information that consists of rows and columns in a table format. The intersection of a row and column is called a cell. You can use the grid control to display text in the cells. Editing text is not supported.
NOTE
The common dialog control includes several standard dialog boxes you can use to offer options such as opening, saving, and printing files. You can also design this control to select colors and fonts. The behavior and functionality of this control is
consistent with the standard dialog boxes found across all Windows 95 applications. Using this control can save valuable design and development time because the functionality is prepackaged.
The Open dialog box allows the user to choose a directory, drive, file extension, and file. The Save As dialog box behaves similar to the Open dialog box. The differences are the title of the dialog box and the fact that the filenames in
the list of the Save As dialog box appear grayed out. You can specify the default drive and directory and also the default file types. New features in Windows 95 allow you to create a new folder within the dialog box. In Windows 3.1, the user had to
create a new directory first in File Manager, then return to the application and save the file. Now the user can perform both operations from the same window. This feature should seem more intuitive and make the user more productive.
You can use the Color dialog box to provide a palette for the user to choose a color. The user can also create and select a custom color. You then can use the selected color in your application.
The Font dialog box allows the user to choose a font, font size, color, and style. You then can use these choices in your application.
The Visual Basic Professional Edition contains a rich set of custom controls to enhance the features and functionality of your application. The following sections discuss some of the advanced controls and how you can use them to build an effective
interface.
For the following custom controls, you must use the platform-specific (16-bit or 32-bit) control for the target platform for your application. The design guidelines pertain to Windows 95 (the 32-bit platform).
The Visual Basic Professional Edition provides several 3-D controls to support the Windows 95 interface. As a general rule, all these controls should be painted onto a form that has a BackColor property of light gray (&H00C0C0C0&) to take
advantage of the 3-D effect. Use 3-D controls to create a visual cue of depth for "actionable" objects. Command buttons are a prime example of this visual feedback. Other 3-D effects should be used sparingly, however, to enhance the overall
visual effectiveness of your interface. Here is a list of the available 3-D controls, which are detailed in the following sections:
The 3-D command button is used in the same manner and has the same properties as the standard command button. The 3-D command button can additionally display 3-D text as well as bitmaps and icons. This button appears to be raised up off the screen to
give it an enhanced visual effect.
The 3-D checkbox has all the same features as a standard checkbox and also supports the 3-D look and feel of Windows 95. You can also customize the text of the checkbox to have a three-dimensional effect. Another difference between this control and the
standard checkbox control involves the Value property. For the Click event, the value of this control is passed as an argument. The value for a selected checkbox is TRUE (—1); the value is FALSE (0) if the checkbox is not selected.
The 3-D checkbox can also be a data bound control. Refer to "Data Bound Controls," later in this chapter, for more information. The 3-D checkbox can be bound to a data control and display values for a Boolean data type field in your database.
This control can also save values to the database.
The 3-D radio button has the same features as the standard radio button with the enhanced feature of 3-D text located to the right of the control. Another difference between this control and the standard radio button involves the Value property. For
both the Click and DblClick events, the value of this control is passed as an argument. A selected radio button's value is TRUE; the value is FALSE if the option is not selected.
The 3-D frame is similar to the standard frame in that both controls provide a logical grouping of controls such as a group of radio buttons or checkboxes. The 3-D frame provides a three-dimensional look for both the frame and the text. The text can be
positioned in the upper left corner, upper right corner, or centered in the middle of the frame. You can also design the frame to appear raised or inset. Use the 3-D frame over the standard frame to group 3-D controls such as radio buttons and checkboxes.
The 3-D group push button acts as a push button but also toggles between on and off when clicked. You can use this control to simulate the functionality found in applications such as word processing applications that group editing buttons. The group of
push buttons acts like radio buttons in the sense that clicking on one command button deselects a previously pressed button. You can include a bitmap on the buttons for this control.
The 3-D panel can be used as an alternative to the 3-D frame to logically group controls. You also can use the 3-D panel control to provide a three-dimensional background for other controls such as a list box. The 3-D panel supports three-dimensional
text and can be sized to fit a window. You can manipulate the beveling and appearance of the panel to create some dynamic effects.
Data bound controls represent controls that are tied or "bound" to a database. These controls allow the user to directly create, edit, and display information from the database. Refer to Part V, "Unleashing Database Programming,"
later in this book, for a detailed explanation of how to use these controls. The purpose of this chapter is to make you aware of these controls.
You can use the following standard controls in conjunction with the data control to bind information in the database to the control:
The following controls are OLE custom controls that already include bound data functionality:
Remember to consider these bound data controls when designing your application, especially if the application relies heavily on a database. These controls can save you time in your design and development and can also provide useful tools to the user.
You can use the OLE container control to link or embed other OLE objects into your application. An example of OLE technology is inserting a spreadsheet object into a word processing document. Part III, "Unleashing Component-Based Programming,"
later in this book, covers OLE in much greater detail.
The reference to OLE in this chapter is to make you aware of an important design consideration. When you use OLE technology in your application, you can also support visual editing. Visual editing allows the user to manipulate an embedded object within
your application and not have to switch to the application that created the object—the OLE server. The design consideration for your application is to provide the menus and toolbars of the OLE server to the user within your application's window. You
can accomplish this feature by using the form's NegotiateMenu property and the menu control's NegotiatePosition property.
Set the NegotiateMenu property of the form to TRUE (the default setting) to place the defined menu bar of the OLE server application on your window when the object is activated. Setting this property to FALSE prevents the OLE server application's menu
bar from appearing when the object is activated. Another condition that prevents the menu from appearing is when the OLE server application does not have a defined menu bar.
Use the NegotiatePosition property of the menu control to control if and where your menu is displayed when a server object is activated. You can set this property for each menu title.
The following controls are standard Windows 95 controls available to you in Visual Basic 4.0:
The ImageList control allows you to manage a collection of images such as bitmaps or icons. You can use this control when implementing a list view or tree view window which are explained next. You use the ImageList control to create and manage your
images such as document icons or graphic pictures that represent your files or documents.
The TreeView control allows you to mimic the left side of the Windows 95 Explorer application. You can use the TreeView control to display drives, directories, and files in a tree hierarchy. You can use the TreeView control with the ImageList control to
display graphic images.
The ListView control simulates the right side of the Windows 95 Explorer application. You can display a list of objects such as applications, files, and folders in several different views. You can use the ListView control with the ImageList control to
display graphic images.
You can use the TabStrip control to displays tabs for sections of information on a window. The tabs act as dividers in a folder. By default, a single row of tabs is created when you place this control on your window. You can select multiple rows of tabs
if your application needs this functionality. The left and right arrows and the Ctrl+Tab key combination allow the user to move among the tabs.
The ToolBar control allows you to create a toolbar for the most frequently used commands. This control allows you to easily define ToolTips for each toolbar option. The ToolTip provides a textual description of the toolbar option (which is usually a
graphic icon). Refer to "Menus and Toolbars," earlier in this chapter, for toolbar design considerations.
The ProgressBar control allows you to display a visual cue to the user about the status or progress of a task. The ProgressBar is a rectangular object that fills from left to right. Use this control for tasks that take several moments to complete or for
tasks that process in the background. You can also use this control to show the percentage of completion during operations such as saving or copying files.
The StatusBar control provides a way to place a status bar at the bottom of a window. The status bar area is usually used to display informational messages to the user. This area can also be used to display help or information about certain controls.
The slider control allows the user to adjust continuous values (for example, a volume control). The slider is a bar containing notches that represent values. An indicator is located perpendicular to the bar. This indicator is used to display the current
setting and to change the value of the setting.
The following sections provide some helpful hints, lessons I have learned, and other GUI guideline considerations.
Everyone who has moved from a mainframe environment to a graphical environment has had to make a transition both visually and programmatically. The visual transition is the one I want to touch on.
There are obvious differences between the mainframe screen and a graphical user interface such as Windows. The following textbook case shows the learning stages of a programmer making this visual design transition. Figure 6.8 shows a window designed by
a programmer developing a first application in Visual Basic. This figure shows the use of controls—but in the wrong manner (notice the PF key notation on the push buttons).
Figure 6.8. This window design shows a programmer in the dark concerning visual design techniques for a GUI application.
Figure 6.9 shows the next iteration of the window design. Notice that the PF key notation has been changed to reflect meaningful text. The programmer, however, is still using too many push buttons at the bottom of the window, and the controls are not
properly aligned or grouped.
Figure 6.9. This window design shows improvement with descriptive captions on the push buttons.
Figure 6.10 shows the final iteration, in which knowledge of proper window design and programmer experience is evident. Notice the use of menus and combo boxes as well as proper alignment and grouping of controls.
Figure 6.10. This window shows how the interface is improved by alignment and proper use of controls.
This chapter has discussed the importance of providing feedback and assistance to the user. You can design this feedback in many ways, depending on the application. In some cases, auditory cues such as a beep will suffice. The status bar area is another
place to provide information to the user such as descriptive messages about the activity of the window or context-sensitive descriptions about a menu item or toolbar option. ToolTips are another common way of displaying the functions of toolbar options.
Figure 6.11 shows a practical application in which visual cues provide helpful information to the user. This window shows items in a list box; the functions of the application are Add, Change, and Delete (as indicated by the push buttons). When no items
are selected, the only function available is Add; when that button is selected, another dialog box displays so that information can be added. By enabling commands, you can indicate what functions are available; disabling (graying out) commands visually
depicts push buttons as unavailable. In the figure, the Add button is enabled while the Change and Delete push buttons are disabled.
Figure 6.11. The Change and Delete push buttons are disabled to visually inform the user that these controls are not available.
Figure 6.12 shows how all the push buttons become available when the user selects an item. This functionality supports the object-action paradigm in that the user must select an object before taking an action.
Figure 6.12. The Change and Delete push buttons are enabled when an item in the list box is selected to communicate to the user that these commands are now available.
You can also provide feedback and assistance to the user by changing the mouse pointer and cursor styles depending on where the mouse is located on the window. The pointer is a symbol or shape moved by using a pointing device such as a mouse. The
pointer is the primary tool that allows the user to interact with objects, controls, and the environment. The cursor conveys the current keyboard focus. Two types of cursors include the text cursor and the selection cursor. The text cursor allows the user
to type text into a field; the selection cursor displays highlighted objects that can be selected. Table 6.1 shows the different mouse pointers available.
Pointer |
Location |
Available Action |
|
Over most objects |
Pointing, selecting, moving, resizing | |
|
Over text |
Selecting, editing text | |
|
Over any object |
Processing an operation or location | |
|
Over any screen |
Processing in the background (application location loading), but the pointer is still interactive | |
|
Over most objects |
Contextual help mode | |
|
Inside a window |
Zooming a view | |
|
Along column |
Resizing a column gridlines | |
|
Along row gridlines |
Resizing a row | |
|
Over split box in |
Splitting a window (or adjusting a split) vertical scroll bar horizontally | |
|
Over split box in |
Splitting a window (or adjusting a split) horizontal scroll bar vertically | |
|
Over any object |
Not available |
Here are some general guidelines for pointers:
Windows provide the basic interaction technique between the user and the computer. The user interacts with objects and information within the context of the window. Window flows describe how windows interact with each other. A dialog is comprised of one
or more window flows. Webster's defines the word dialog as a "conversation between two or more people." Applying this definition to a GUI, a dialog is a conversation between two or more windows. When designing your application, you can associate
a dialog with a collection of windows that accomplish a single task or business function, such as creating and saving a document or making an airline reservation.
During the design phase of your development project, consider the functionality of your application and how that translates into windows and dialogs. You will save in development time if you first spend time planning and designing your windows and how
they will interact.
Another design consideration for your windows is whether to make them modal or modeless. Modality of a window usually becomes important when you design secondary windows. A modal window requires you to finish working with that window before you can
continue using the rest of the application. This type of window does not offer the user much flexibility or control. Use a modal window when the user must answer or respond to that window before continuing. A modeless window offers the user more control
and flexibility. A modeless window allows the user to navigate back and forth between windows in an application.
Table 6.2 shows the Window Control Matrix. This table shows some of the basic controls you can design on your windows and gives some guidelines for suggested use.
Control |
Suggested Use |
Comments |
|
Text box |
None |
No predefined list exists |
|
Checkbox |
N = 1 |
A static item; Used to indicate an active/inactive state |
|
Radio buttons |
1< N < 7 |
Static items; Must be mutually exclusive |
|
List box |
6< N < 200 0< N <200 |
Static items Dynamic items |
|
Push button |
1< N < 5 |
For single-action items |
|
Menu |
N < 10 |
For single-action items |
Choosing the metaphor for your application is the single most important decision in the design process. The metaphor defines how the user will interact with your application. If you do not provide an intuitive and user-friendly interface, no one will
want to use your application.
You can choose from several basic metaphors when designing your application. The following metaphors serve as suggestions to help you design an effective user interface:
Applications have become more data-centric and document-centric. The document-centric focus is a major design goal of Windows 95 applications. A single document interface supports this goal by concentrating on the data or the document rather than the
application. The application becomes an enabling tool to perform tasks and is not the primary focus of attention. A single document interface involves using a single primary window with secondary windows that support the primary window with tasks such as
setting properties for the primary object. Each primary window is displayed in its own application container; the window management is performed using the desktop and taskbar. The user can more easily navigate between the entries on the taskbar. Compound
documents using OLE technology also represent the single document interface. The user can edit compound documents within the context of the container application without having to switch between applications.
Multiple document interface involves a more application-centric approach. The application becomes the main focus as child windows are displayed within one primary window. All the windows share the same menus and toolbar. This interface is useful for
displaying related information through multiple views. Many Windows 3.1 word processing applications employ this interface.
Workbooks allow you to design an interface that uses the tab metaphor for navigating between documents. Some spreadsheet and calendar applications use this metaphor. The user can place different documents in individual sections within the workbook. The
user then navigates to each document by clicking the tabs that represent each section. This interface is similar to the multiple document interface in that the menus and toolbars are still shared among the sections.
The preceding examples demonstrate a variety of user interface metaphors available to you. In some cases, you will have to create an exclusive design for a particular interface based on the functionality of your application. In other situations, a
combination of these techniques can be employed to help your design.
The user interface is the most important part of your application. The underlying technology should be transparent to the person using your application. Some developers proudly say that their code is the most important aspect of the application.
Although your code is important to the speed and efficiency of the application, at the end of the day, the user interface can be the stumbling block that prevents users from effectively using your application.
This chapter has discussed proper interface design considerations for building intuitive and user-friendly applications. The techniques discussed pertain to the Windows 95 interface. The first part of the chapter focused on how the Windows interface has
changed. The focus then shifted to how you can use Visual Basic tools and controls to support these changes. Guidelines were given throughout the chapter and towards the end of the chapter to help you plan to use these tools.
Several stories show what the human computer interface will be in the future. I heard a quote the other day that talking to a computer was not a new concept. People have been doing this for years. The concept of the computer producing a response,
however, was something new. This story shows that the human metaphor of the future for applications may be based solely on voice recognition. Another story involves several people getting on an elevator to leave the office. As one man stepped in the
elevator, he reached to press the elevator button. Before he had the chance to actually push the button, the elevator doors closed. The man remarked, "You just have to point at it, and the doors close." Maybe, as this anecdote suggests, the human
metaphor of the future will also involve pointing with your fingers and looking with your eyes to execute tasks.
We do not know what the future holds, but we do know what is available today. My hope is that you can use the building blocks discussed in this chapter to build the ideal interface. Let me know when you do.
