03 – User Interface Design, and
Sound and Graphics
Mark Dixon, SoCCE
SOFT 131
Page 1
Session Aims & Objectives
• Aims
– introduce you to the fundamentals of:
• good user-interface design,
• sound, and
• graphics
• Objectives, by end of this week’s sessions, you should
be able to:
– put bitmap (raster) graphics into your applications
– draw simple vector graphics in your applications
– play MP3 and WAV files in your applications
Mark Dixon, SoCCE
SOFT 131
Page 2
Example: disks & files
Mark Dixon, SoCCE
SOFT 131
Page 3
Human-Computer Interaction
‘Human-Computer Interaction (HCI) is about designing computer systems
that support people so that they can carry out their activities productively
and safely.’
Preece et al, 1994 (p. 1)
• three main concerns:
– usefulness: is software functionality of use to user
– usability: is software easy to use
– learnability: is software easy to learn
• software may be:
– ‘simple to use, but of no value to me’
– ‘really helpful, but awkward to use’
– ‘really helpful, if only I could figure out how’
Mark Dixon, SoCCE
SOFT 131
Page 4
HCI – why bother?
• ‘The Day the Phones Stopped’
(Preece et al, 1994 p. 25)
Mark Dixon, SoCCE
SOFT 131
Page 5
HCI - Design Guidelines
• Some issues:
– Consistency
– Fast feedback
– Manage errors
– Reduce cognitive load
– User variety
– User testing with actual users
–…
–…
Mark Dixon, SoCCE
SOFT 131
Page 6
Question: Address Book
Which is best?
Mark Dixon, SoCCE
SOFT 131
Page 7
HCI - Direct Manipulation
• Direct Manipulation Interfaces (Shneiderman 1998, p. 205)
– ‘Continuous representation of the objects and
actions [information] of interest with meaningful
visual metaphors’
– ‘Physical actions or presses of labelled buttons,
instead of complex syntax’
– ‘Rapid incremental reversible operations whose
effect on the object of interest is visible
immediately’
Mark Dixon, SoCCE
SOFT 131
Page 8
Example: Ball v2 - Design
• User interface design:
BallChar
• Functional design:
Trigger (when)
Actions (what)
click event of Right button
click event of Left button
click event of Up button
click event of Down button
move ball character right
move ball character left
move ball character up
move ball character down
click event of Centre button move ball character to centre of form
Mark Dixon, SoCCE
SOFT 131
Page 9
Example: Ball v2 - Code
• Properties (setting at run-time)
BallChar
– use code, assignment operator (=)
– can change while program is running
Option Explicit
Private Sub btnCentre_Click()
picBallChar.Left = Me.ScaleWidth / 2
End Sub
Private Sub btnRight_Click()
picBallChar.Left = picBallChar.Left - 200
End Sub
Mark Dixon, SoCCE
SOFT 131
Page 10
Example: Holiday
• User Requirement
– ‘I want a cheap holiday, so I need to know times
and prices of ferries and flights’
• Can solve this by
– visit company offices
– phone
– www, compare the following:
• Brittany Ferries
• EasyJet
Mark Dixon, SoCCE
http://www.brittany-ferries.co.uk
http://www.easyjet.co.uk
SOFT 131
Page 11
Types of Graphics: Raster
• Raster graphics – made of dots (pixels – picture
elements)
– stored in .jpg, .bmp, and .gif files
– suitable for complex, static pictures (e.g. photos)
– difficult to change programmatically
– loses quality when enlarged:
Mark Dixon, SoCCE
SOFT 131
Page 12
Types of Graphics: Vector
• Vector graphics – made of objects (lines,
circles, etc.)
– suitable for simple, dynamic pictures (diagrams)
– No loss of quality when enlarged
Mark Dixon, SoCCE
SOFT 131
Page 13
Example: PicView - Analysis
SPECIFICATION
• User Requirements
– display photos quickly and easily one after another
• Software Requirements
– Functional:
–change current folder and drive
–display list of picture files in current folder
–display picture (*.jpg, *.bmp, and *.gif) from files
in current folder
– Non-functional
should be quick and easy to use
PicView
Mark Dixon, SoCCE
SOFT 131
Page 14
Controls
• Picture Box: display pictures
• Drive List Box: allow user to select disk
drive
• Directory List Box: allow user to select
folder
• File List Box: allow user to select file
Mark Dixon, SoCCE
SOFT 131
Page 15
Controls' Properties
• Picture Box (pic)
– Picture: allows display of bitmap (raster graphic) as
background
• Drive List Box (drv)
– Drive: the currently selected disk drive
• Directory List Box (dir)
– Path: the currently selected directory (folder)
• File List Box (fil)
– Path: the currently selected folder/directory
– Pattern: only display this type of file (e.g. .jpg)
– FileName: the currently selected file
Mark Dixon, SoCCE
SOFT 131
Page 16
Example: PicView - Design
• User interface design:
• Functional design:
Trigger (when)
Actions (what)
click event of Drive Box
make drive current (directory box
points to this drive)
click event of Directory Box make folder current (file box points to
this folder)
click event of File Box
display selected picture in picture box
Mark Dixon, SoCCE
SOFT 131
Page 17
Example: PicView - Code
drvMain
dirMain
Option Explicit
filMain
Private Sub drvMain_Change()
dirMain.Path = drvMain.Drive
End Sub
picMain
Private Sub dirMain_Change()
filMain.Path = dirMain.Path
End Sub
Private Sub filMain_Click()
picMain.Picture = LoadPicture(filMain.Path & "\" & filMain.FileName)
End Sub
Mark Dixon, SoCCE
SOFT 131
Page 18
Vector Graphics: Grid System
• the origin (position 0,0) is at top left
– in mathematics it is always bottom left
0
1000
2000
0
1000
Mark Dixon, SoCCE
SOFT 131
Page 19
Picture Box: Drawing Methods
• Methods (vector graphics)
– Line: draws a straight line between 2 points
– Circle: draws a circle
– PSet: draws a dot (point)
– Cls: clears (screen) drawing area
Mark Dixon, SoCCE
SOFT 131
Page 20
Example: Shapes
• Form and Picture Box control support graphics
methods: picDisplayArea.Line (500, 200)-(1900, 800)
picDisplayArea.Line -(2600, 600)
picDisplayArea.Line -Step(-600, -400)
picDisplayArea.Circle (700, 900), 300
picDisplayArea.PSet (1500, 1000)
0
1000
2000
0
1000
Shapes
Mark Dixon, SoCCE
SOFT 131
Page 21
Example: StickMan
• Enabled property (true or false)
StickMan
0
1000
2000
0
1000
Mark Dixon, SoCCE
SOFT 131
Page 22
Example: Face
Face
Mark Dixon, SoCCE
SOFT 131
Page 23
Example: Door
Private Sub btnDoor_Click()
picDoor.Cls
picDoor.Line (200, 200)-(1300, 1800), vbRed, BF
picDoor.Line (200, 200)-(1300, 1800), vbBlack, B
picDoor.Line (300, 300)-Step(300, 600), vbGreen, BF
picDoor.Line
picDoor.Line
picDoor.Line
picDoor.FillColor = vbYellow
picDoor.FillStyle = vbSolid
picDoor.Circle (1150, 900), 100, vbBlue
End Sub
you need to fill
these lines in
Mark Dixon, SoCCE
SOFT 131
Page 24
Additional Controls
• VB has hundreds of controls
• To include additional controls in your project:
– Project menu
– Components item
• Multimedia Control
– plays
MP3 & WAV files
Mark Dixon, SoCCE
SOFT 131
Page 25
Multimedia Controls' Properties
• Multi-media Control
– FileName: name of file to play
– Command: controls playback
Mark Dixon, SoCCE
SOFT 131
Page 26
Example: Ball v3 - Code
• Properties (setting at run-time)
– use code, assignment operator (=)
– can change while program is running
BallChar
mmcNoise
Private Sub picBallChar_Click()
mmcNoise.Command = "Close"
mmcNoise.FileName = "Fart.wav"
mmcNoise.Command = "Open"
mmcNoise.Command = "Play"
End Sub
Mark Dixon, SoCCE
SOFT 131
Page 27
Example: Music Player - Analysis
• User Requirement:
– to play different music for long time without
interruption, at same location (while working or at
party)
• Software Requirements Specification
software should:
– allow user to:
• select track (MP3 file) from folder on disk
• play selected track
– automatically
• move to next track in folder
• go back to first after last has played
Mark Dixon, SoCCE
SOFT 131
later lecture
Page 28
Example: Music Player - Design
• Compare the following User Interface Designs:
V0
Mark Dixon, SoCCE
V1
SOFT 131
Page 29
Example: Music Player - Code
drvMain
dirMain
Option Explicit
Private Sub drvMain_Change()
dirMain.Path = drvMain.Drive
End Sub
Private Sub dirMain_Change()
filMain.Path = dirMain.Path
End Sub
Private Sub filMain_Click()
mmcMain.Command = "Close"
mmcMain.FileName = filMain.Path & "\" & filMain.FileName
mmcMain.Command = "Open"
End Sub
mmcMain
Mark Dixon, SoCCE
filMain
SOFT 131
Page 30
VB6 IDE: Debugger
• Run your program (F5), or
• Step through line by line (F8)
• Immediate
Window:
Run
Pause
Stop
code
executed
immediately
Mark Dixon, SoCCE
SOFT 131
Page 31
VB6 IDE: Help System
• F1 key
– when control selected
– when code selected
• Gives help
about what
was selected
• Not tutorial
• A reference
Mark Dixon, SoCCE
SOFT 131
Page 32
Tutorial Exercise: PicView
•
•
•
•
•
Task 1: Get the BallChar v2 example (from the lecture) working.
Task 2: Get the PicView example (from the lecture) working.
Task 3: Get the StickMan example (from the lecture) working.
Task 4: Get the BallChar v3 example (from the lecture) working.
Task 3: Get the Music Player example (from the lecture)
working.
• Task 5: Modify your program to automatically start playing a
track once it is clicked.
• Task 6: Modify your program to automatically go the next track
after the current one ends.
• Task 7: Modify your program to include a progress bar that
shows the current position in a playing track
(You will need to use the help system)
Mark Dixon, SoCCE
SOFT 131
Page 33