02 – software development lifecycle, & user interface design
DESCRIPTION
02 – Software Development Lifecycle, & User Interface Design. Admin. Lecture Room change (next week onwards) Portland Square Stonehouse lecture theatre Teaching Evaluation Student Perception Questionnaire Continuous Informal Feedback Formative Assessment Exercises in practical sessions. - PowerPoint PPT PresentationTRANSCRIPT
Mark Dixon, SoCCE SOFT 131 Page 1
02 – Software Development Lifecycle, &
User Interface Design
Mark Dixon, SoCCE SOFT 131 Page 2
Admin
• Lecture Room change (next week onwards)– Portland Square Stonehouse lecture theatre
• Teaching Evaluation– Student Perception Questionnaire
– Continuous Informal Feedback
• Formative Assessment– Exercises in practical sessions
Mark Dixon, SoCCE SOFT 131 Page 3
Session Aims & Objectives• Aims
– tidy up from last session, and– introduce you to fundamental user interface design
concepts
• Objectives, by end of this week’s sessions, you should be able to:
– Run through the software development cycle.– Implement simple software design
• Create (draw) user interface• Put instructions in:
– correct event handler procedure for desired result
– correct sequence for desired result
– Identify & correct simple user interface (usability) problems
Mark Dixon, SoCCE SOFT 131 Page 4
Software Development Cycle
• Software development follows this pattern:– analyse problem– design solution– implement (code) solution– test & debug solution (code)
• However, it is:– cyclic/iterative (not linear)
Mark Dixon, SoCCE SOFT 131 Page 5
Example 1 v1: Analysis
• User Requirement: – to teach students about
• fundamentals of software development process
• Software Requirements Specificationsoftware should include:– setting property at design time– setting property at run time– …– code has to fit on single slide
Non-functionalrequirement
Functionalrequirements
Mark Dixon, SoCCE SOFT 131 Page 6
Example 1 v1: Design
• User interface design:
• Functional design:Trigger (when) Actions (what)
click event of Red button Change Result label background to blue.
click event of Blue button Change Result label background to red.
double click event of Result label
Change Result label background to white.
Mark Dixon, SoCCE SOFT 131 Page 7
Example 1 v1: UI Implementation• Properties (setting at design-time):
– initial value only– change using properties window
name: used internally to identify object (programmer)
caption: displayed on button (user)
Mark Dixon, SoCCE SOFT 131 Page 8
Example 1 v1: Code Implementation
Private Sub btnBlue_Click() lblResult.BackColor = vbBlueEnd Sub
Private Sub btnRed_Click() lblResult.BackColor = vbRedEnd Sub
Private Sub lblResult_DblClick() lblResult.BackColor = vbWhiteEnd Sub
• Properties (setting at run-time)– use code, assignment operator (=)– can change while program is running
VB
Mark Dixon, SoCCE SOFT 131 Page 9
Sequence
• Execution sequence controlled in two ways:– procedures controlled by order of events– instructions (lines) controlled by order in code
Private Sub btnBlue_Click() lblResult.BackColor = vbBlueEnd Sub
Private Sub btnRed_Click() lblResult.BackColor = vbGreen lblResult.BackColor = vbRedEnd Sub
Private Sub lblResult_DblClick() lblResult.BackColor = vbWhiteEnd Sub
Mark Dixon, SoCCE SOFT 131 Page 10
Example 1 v2: DesignUser Interface Functionality
Trigger (when) Actions (what)click event of Red button
Change Result label background to blue.
click event of Blue button
Change Result label background to red.
double click event of Result label
Change Result label background to white.
click event of Hello button
Change Result label caption to "Hello!"
click event of Bye button
Change Result label caption to "Good bye!"
click event of Move button
Move Result label background colour and caption to Result2 label
Mark Dixon, SoCCE SOFT 131 Page 11
Example 1 v2: ImplementationOption Explicit
Private Sub Form_Load() lblResult.BackColor = vbGreenEnd Sub
Private Sub btnHello_Click() lblResult = "Hello!"End Sub
Private Sub btnBye_Click() lblResult = "Good bye!"End Sub
... (code from v1)
Private Sub btnMove_Click() lblResult2.BackColor = lblResult.BackColor lblResult2.Caption = lblResult.Caption lblResult.BackColor = vbButtonFace lblResult.Caption = ""End SubVB
Mark Dixon, SoCCE SOFT 131 Page 12
Example 2: disks & files
Mark Dixon, SoCCE SOFT 131 Page 13
Human-Computer Interaction‘Human-Computer Interaction (HCI) is about designing computer systems that support people so that 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 14
HCI – why bother?
• ‘The Day the Phones Stopped’
(Preece et al, 1994 p. 25)
Mark Dixon, SoCCE SOFT 131 Page 15
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 16
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 17
Example 3: 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
http://www.brittany-ferries.co.uk
http://www.easyjet.co.uk
Mark Dixon, SoCCE SOFT 131 Page 18
Example 4: Music Player
• Compare the following User Interface Designs:
V0 V1
Mark Dixon, SoCCE SOFT 131 Page 19
Example 5: Music Player v2
V2
Option Explicit
Private Sub drvMain_Change() dirMain.Path = drvMain.DriveEnd Sub
Private Sub dirMain_Change() filMain.Path = dirMain.PathEnd Sub
Private Sub filMain_Click() mmcMain.Command = "Close" mmcMain.FileName = filMain.Path & "\" & filMain.FileName mmcMain.Command = "Open" pgbMain.Max = mmcMain.Length pgbMain.Value = 0End Sub
Private Sub mmcMain_StatusUpdate() pgbMain.Value = mmcMain.PositionEnd Sub
Mark Dixon, SoCCE SOFT 131 Page 20
Example 6: Address Book
Mark Dixon, SoCCE SOFT 131 Page 21
Project Files & Version Control
• Create new folder for each project
• Save all project files into that folder– project file (.vbp)– form files (.frm)
• At regular intervals copy whole folder to create new version.– this is a very simple approach– there are software packages that do this for you