Using Visual Basic to Prototype User Interfaces
Visual Basic is an integrated development environment (IDE) that allows developers to
create complex computer programs with graphic interfaces. It can also be used to quickly
and easily develop simple user interface prototypes. This handout introduces the facilities
and techniques which enable you to create interfaces using typical Windows user interface
features - buttons, icons, scroll-bars, list boxes etc.
To create a visual interface, we will create a VB project into which we can place several
forms, each with various controls or objects (text boxes, buttons, scroll bars etc.) positioned
on them; each form and its controls will have various properties whose settings determine
aspects of their appearance and behaviour (font size, background colour, enabled/disabled
etc.); and where necessary, we can add a small amount of code which determines how it
reacts when certain events occur (the form being displayed, a button being clicked, an option
being selected from a list etc.).
A
Paper design of the interface
First of all, you should have your design drawn up on paper. Most applications consist of a
number of screens (or forms in VB) which are connected. Users often move from one form to
another by clicking on a button. The overall way that users can navigate through the
application can be shown by a structural chart or hierarchical map of the system. An example
is shown in Figure 1.
Main menu
A
C
B
A
D
B
C
F
E
Back
Back
Back
D
Back
Figure 1
Page 1
Once the overall plan of the interface has been made, the details of each screen can be
fleshed out. Labels, text boxes, frames, combo boxes etc. can all be added along with the
navigation elements for moving from one screen to another. Screen and text colours, font
sizes and types can also be planned. Once the design is complete, you can then move on to
transferring your design to an on-line prototype.
B
Transfer design to VB
Step 1: Create the forms and add the controls
Open the VB development environment (selecting Standard Exe as the project type). Your
screen will be similar to the one in Figure 2. If not you will need to move the windows around
slightly, or open some windows if they are not currently displayed.
Form
window
Properties
Window
Toolbox
Project
Explorer
Figure 2
The Form (which is itself an object with a set of properties) acts as a canvas onto which the
required controls are drawn. A form together with a set of controls acts as a window or dialog
box when the program is running. The grid area in the middle of the screen is the default
form for the project (called Form1). You can add extra forms as needed, one for each of the
screen in your interface. The small window to the bottom right of the illustration in Figure 2 is
the Project Explorer window. It shows you which forms are currently in the project and their
names. To add extra forms, go to the menu at the top of the screen and choose:
Project
Add Form and then Open New from the dialogue window.
You can move from one form to another by double clicking on the form name in Project
Explorer.
Page 2
Now note the window on the left of the screen (Toolbox) which contains the controls that can
be drawn onto a form. The types of control available are shown in Figure 3.
Figure 3
Practice selecting and drawing different controls onto the current form and resizing them. By
clicking on a control it become the active object (notes the handles round the control).
Also note that the window on the right of the screen (Properties Window) changes each
time a different control is selected. It always display the Properties for the selected object. By
changing some of the properties we can alter the appearance of the control. To remove a
control from the form, simply select it and press the Delete button.
Use your interface design plans to create each of the forms in your design. For each form.
add and position the controls you want on the form.
Step 2(a): Name the form and controls
When creating a VB program it is standard practice to give a specific name to each control
object on every form, to aid in the coding of these objects. For interface prototyping
purposes, this is not necessary though it can be helpful if you have a form with a lot of similar
controls, or wish to do any significant coding.
To name a form or control, click on the object to select it, then click on Name in the
Properties window and type a suitable name (e.g. frmStartup for a startup form or cmdNext
for a command button whose job is to move to the next screen ).
Step 2(b): Set other properties
Use the same procedure as you did to set the (Name) properties in 2(a) to set other
properties. The most useful controls and properties for the purposes of interface prototyping
are as follows:
Page 3
Control
Command button
Label
Purpose
Enables an ‘action’ such as open a new form
Gives information such as purpose of the form,
prompts user to do something
Most useful to allow user to input text
Provide lists of possible choices (as a way of
getting input from user)
Useful as container object, holding data together
(e.g. a set of option buttons)
To show set of exclusive choices to user who must
select one only
To show set of choices to user who may select
zero, one or many from the list
TextBox
Combo box, list box
Frame
Option buttons
Check boxes
The most useful properties to set to change the appearances of these controls are:
Control
Most controls
Property
BackColor
ForeColor
Caption
Font
Picture
TextBox
Text
Combo and ListBox
List
Form
Sorted
WindowState
Effect
Change the background colour
Change the text colour
Change the text shown on the
control (except for TextBox)
Change the font style, size and
appearance (Bold, Italics ect)
Load in a graphic image as the
background appearance of the
control. Most useful for forms
Change the text shown in the text
box. Often set to <blank> so users
can input data.
Populate the combo or list box
with a list of choices
Sort the list into alphabetical order
Set to Maximised so the form
occupies the whole screen
There are, of course, other controls and many other settings that can be altered to change
the appearance of screen objects. The list above is just to get you started and you can find
other effects by experimenting or checking in any textbook on VB.
Step 3: Write any code needed
Hopefully we will not want to write much code to make the program operate as an interface
prototype. We want to be able to quickly get something working so we can test it out its
usability. We want users’ feedback about the effectiveness of the design, the extent to which
it helps their efficiency in completing their tasks and their satisfaction with the layout of the
forms, the screen instructions etc. However we do need to add some code if the prototype is
to demonstrate navigation between forms, and have a way of ending the program properly.
Page 4
For example, we may have a project with two forms, the first being one in which the user
enters some input and then clicks a button ‘Get results’ to see the output of the program
calculation. After that, the user can click the ‘Exit’ button to end the program or the ‘Start
again’ button to return to the Input Screen to enter new input.
We need to add code to each of the three buttons so that they respond when clicked by the
user to do what we want. What we need to type depends on what names you have used for
the forms and the controls and the order in which they have been created. Let’s assume here
that you have altered the default name properties for the forms and controls to those below.
Input screen
Results screen
Get
results
Form
Command button
frmInput
cmdGetResults
Start
again
Form
Command buttons
Exit
frmResults
cmdStartAgain
cmdExit
To add code to a command button, double-click on it to open its code window. In between
the two lines of code already placed there by the IDE, type your code as shown in the
examples below. You only type the text shown in bold, the rest is given by the IDE for you.
To hide the Input screen and show the
Results screen:
Private Sub cmdGetResults_Click()
Me.Hide
frmResults.Show
End Sub
To hide the Results screen and go back to
show the Input screen:
Private Sub cmdStartAgain_Click()
Me.Hide
frmInput.Show
End Sub
To end the program:
Private Sub cmdExit_Click()
End
End Sub
Step 4 Save the prototype
By clicking on
File
Save Project As
you will be prompted to save all the forms one by one as well as the project itself. Gibe
meaningful names to each file. The form files will be given the suffix .frm and the project file
the suffix .vbp. VB may also create extra files as part of the project. It is best to create a
separate directory for each VB project and store all files associated with a project together in
that folder.
Page 5