1. 02 – Software Development Lifecycle, & User Interface Design

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

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

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)

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 Functionalrequirements Non-functionalrequirement

6. Example 1 v1: Design • User interface design: • Functional design:

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)

8. Example 1 v1: Code Implementation • Properties (setting at run-time) • use code, assignment operator (=) • can change while program is running Private Sub btnBlue_Click() lblResult.BackColor = vbBlue End Sub Private Sub btnRed_Click() lblResult.BackColor = vbRed End Sub Private Sub lblResult_DblClick() lblResult.BackColor = vbWhite End Sub VB

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 = vbBlue End Sub Private Sub btnRed_Click() lblResult.BackColor = vbGreen lblResult.BackColor = vbRed End Sub Private Sub lblResult_DblClick() lblResult.BackColor = vbWhite End Sub

10. Example 1 v2: Design User Interface Functionality

11. Example 1 v2: Implementation Option Explicit Private Sub Form_Load() lblResult.BackColor = vbGreen End 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 Sub VB

12. Example 2: disks & files

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’

14. HCI – why bother? • ‘The Day the Phones Stopped’ (Preece et al, 1994 p. 25)

15. Design Guidelines • Some issues: • Consistency • Fast feedback • Manage errors • Reduce cognitive load • User variety • User testing with actual users • … • …

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’

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

18. Example 4: Music Player • Compare the following User Interface Designs: V0 V1

19. Example 5: Music Player v2 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" pgbMain.Max = mmcMain.Length pgbMain.Value = 0 End Sub Private Sub mmcMain_StatusUpdate() pgbMain.Value = mmcMain.Position End Sub V2

20. Example 6: Address Book

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