Mark Dixon, SoCCE SOFT 131Page 1 02 – Software Development Lifecycle, & User Interface Design

Mark Dixon, SoCCE SOFT 131Page 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 131Page 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 131Page 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 131Page 5 Example 1 v1: Analysis User Requirement: –to teach students about fundamentals of software development process Software Requirements Specification software should include: –setting property at design time –setting property at run time –… –code has to fit on single slide Non-functional requirement Functional requirements

Mark Dixon, SoCCE SOFT 131Page 6 Example 1 v1: Design User interface design: Functional design: Trigger (when)Actions (what) click event of Red buttonChange Result label background to blue. click event of Blue buttonChange Result label background to red. double click event of Result label Change Result label background to white.

Mark Dixon, SoCCE SOFT 131Page 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 131Page 8 Example 1 v1: Code Implementation 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 Properties (setting at run-time) –use code, assignment operator (=) –can change while program is running VB

Mark Dixon, SoCCE SOFT 131Page 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

Mark Dixon, SoCCE SOFT 131Page 10 Example 1 v2: Design User 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 131Page 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

Mark Dixon, SoCCE SOFT 131Page 12 Example 2: disks & files

Mark Dixon, SoCCE SOFT 131Page 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 131Page 14 HCI – why bother? ‘The Day the Phones Stopped’ ( Preece et al, 1994 p. 25)

Mark Dixon, SoCCE SOFT 131Page 15 Design Guidelines Some issues: –Consistency –Fast feedback –Manage errors –Reduce cognitive load –User variety –User testing with actual users –…

Mark Dixon, SoCCE SOFT 131Page 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 131Page 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

Mark Dixon, SoCCE SOFT 131Page 18 Example 4: Music Player Compare the following User Interface Designs: V0 V1

Mark Dixon, SoCCE SOFT 131Page 19 Example 5: Music Player v2 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

Mark Dixon, SoCCE SOFT 131Page 20 Example 6: Address Book

Mark Dixon, SoCCE SOFT 131Page 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