Lecture 5(b), Slide 1CP2030 Copyright © University of Wolverhampton

CP2030 Visual Basic for C++ Programmers

Component 5(b)

HCI aspects of VB programming

Choice of control

Careful design of interfaces

Giving a “Windows” feel to applications

Lecture 5(b), Slide 2CP2030 Copyright © University of Wolverhampton

Aims & Objectives

Be able to select appropriate controls

Understand basic form design guidelines

Appreciate need to design interface with user in mind

Lecture 5(b), Slide 3CP2030 Copyright © University of Wolverhampton

Appropriate controlsLabel v Text box

Label– displays information that user cannot

change– use for headings, text box labels etc– use for displaying information

Text box– display text entered at design time– display text assigned at run time– data entry area– N.B. Can “disable” Text box - read only

Lecture 5(b), Slide 4CP2030 Copyright © University of Wolverhampton

List box v Combo box

List box– List of “optional” values– Select one (or more) from list

Combo Box– combination of Text & List

boxes– Can select (as List box)– Can enter new value (as Text

box)

Lecture 5(b), Slide 5CP2030 Copyright © University of Wolverhampton

List/Combo Box v Scroll Bar & Text box

Scroll bars – horizontal or vertical– analogue representation of value in a

range– used for input and output– can be used with Text box to

select/display data from an array– program needs to maintain link between

scroll bar & data List/Combo boxes

– have built-in scroll bars if needed– automatic link to data elements

Lecture 5(b), Slide 6CP2030 Copyright © University of Wolverhampton

Option (Radio) button v Check box

Normally grouped within “Frames”

Option button– Only one option selected from group– Other options in group are “deselected”

Check Box– Each option is separate from others– May select as many as wish

Lecture 5(b), Slide 7CP2030 Copyright © University of Wolverhampton

Command buttons v Menus

Command buttons – Obvious, clear features on form– Cover the normal operations

Menus– Less clear - often group

functionality– Cover less common operations– May duplicate Command

buttons

Lecture 5(b), Slide 8CP2030 Copyright © University of Wolverhampton

Design considerations

Schneiderman– Consistency

sequence of operations layout

– Shortcuts through familiar areas– Informative feedback– Arrange into logical groups– Simple error handling– Possible to “undo” operations– Reduce short-term memory load– Let user feel that they are in control

Lecture 5(b), Slide 9CP2030 Copyright © University of Wolverhampton

Use of colour

Use sparingly!!– design Form in black and White– use colour to make things stand out– use 4 colours maximum

Don’t use colour to carry information– colours mean different things to different

people

Lecture 5(b), Slide 10CP2030 Copyright © University of Wolverhampton

Use of Colour

Ensure good contrast between foreground and background

Colour blindness– affects 10% of adults

Lecture 5(b), Slide 11CP2030 Copyright © University of Wolverhampton

Layout of the Form

Not too much on a Form– Split, logically, over several Forms– hide/reveal controls

Information in centre of visual field is most likely to be seen.– Put important info in obvious positions

Lecture 5(b), Slide 12CP2030 Copyright © University of Wolverhampton

Layout of the Form

Arrange controls in a logical sequence– especially for data entry– work from left - right, top-bottom– consistency of layout over Forms

e.g. “exit” button in same position on all Forms

Arrange order using “Tab-key” Set Focus after major operation

– e.g. after pressing a Command button when loading/returning to a Form

– clear text boxes on data entry forms?

Lecture 5(b), Slide 13CP2030 Copyright © University of Wolverhampton

Summary of Component 5(b)

Choose appropriate controls for VB applications

Understand design considerations