Slides for User interface design A software engineering perspective Soren Lauesen 7. Function design August 2006 © 2005, Pearson Education retains the copyright to the slides, but allows restricted copying for teaching purposes only. It is a condition that the source and copyright notice is preserved on all the material.

vwRooms: FindRooms1 ChooseRoom1 ResetSearch1 The subtasks that use the "button" Fig 7.1A Booking: semantic functions and search Task: Booking 1.Find rooms 2.Record guest 2a.Regular guest 3.Record booking 3a.More rooms 4.Print confirmation (optional) Minispec: Data entry Calculate Nights or Departure. vwFindGuest: FindGuest2, 2a SelectLine2a NewStay2a NewGuest2 ResetSearch2 Minispec: NewStay Create a new stay record. Fill in guest data from the selected line. Other sequences? What the com- puter must do vwRooms: FindRooms1, 3a ChooseRoom1, 3a Book?3a ResetSearch1 vwStay: (EditData)2 vwStay: (EditData)2 Book3, 3a vwStay: (EditData)2 Book3, 3a PrintConfirm4

Fig 7.1B All tasks: semantic functions and search vwRooms: FindRooms ChooseRoom ResetSearch RepairRoom UndoRepair AddRoom DeleteRoom  Book?  Checkin?  vwStay: (EditData)  Book  Checkin  DeleteRoomLine  PrintConfirmation PrintGuestAccount Checkout  CancelStay  AddServiceLine DeleteServiceLine  vwServiceList: (EditData) AddService DeleteService  PrintServiceList vwBreakfast: (RecordData) PrintBreakfastList vwFindGuest: FindGuest FindStay SelectLine ResetSearch OpenStay NewStay NewGuest Global: Undo Star: Undo needed

Fig 7.1C Minispecs, hotel system What the computer must do. Particularly E/R changes

Fig 7.2 Actions and feedback (use cases)

(Fig 7.3A) Undo Why undo? Slips: Oops - I hit the Delete button Explore system: Let me see how this button works Domain mistake: I checked the wrong guest out this morning Which functions to undo? Navigation and search: Close, Cancel, Back often enough. Data entry:Chronological undo: roll time backwards using saved data. Track changes: accept / delete single change. Semantic: Chrono.undo:Roll time backwards using saved data. Domain-undo:Roll time backwards for a single entity. Non-reversable: Hard to undo:Resources consumed, reallocate or impossible. Compensate:Print invoice - print credit note. Fire missile - pay compensation.

Fig 7.3 Undo Stay 712BookedCanceledBookedIn? Time BookMistakeUndo ? Chronological undo: Roll time backwards for entire system Domain-specific undo: Roll time backwards for a single entity Stay 810BookedInOut Room 22, 23/9FreeBookedFreeBookedInOut Room state: Stay 905BookedInOutInOut BookCheck inPrint invoice (mistake) Undo: Print credit note Print invoice Check out

Fig 7.4 Various platforms Single-page platforms Page with two frames Full-screen workspace A Other application vwRooms vwStay Break- fast D vwRooms vwStay Break- fast Multi-page platforms Page (window) C vwRooms vwStay Other application Work spaces Part-screen workspace B vwRooms vwStay

Fig 7.5A Page plan, single-page platform Book Checkin Change room Checkout Record services Record breakfast vwBreakfast pBreakfast TasksPages pStay vwRooms vwStay pSearch vwRooms vwFindGuest Price change vwServiceList pServiceList pSearch vwRooms (vwFindGuest) Same Same page

Fig 7.5B State diagram, single-page platform FindRooms, Repair, Add... FindGuest, FindStay... NewStay NewGuest OpenStay AddService DelService... FindRooms Book, Checkin PrintConfirm, Checkout AddServiceLine... Book Checkin Return RecBreakfast Return EditService FindRooms... vwServiceList vwBreakfast vwRooms vwStay(new) vwRooms vwFindGuest vwRooms vwStay(rec) pSearch pStay(new) pStay(rec) pBreakfast pServiceList CancelStay

vwBreakfast Several tasks: Record breakfast Booking Query about guest Check-in Fig 7.6A Multi-page dialog Simple situation: Booking vwRooms vwFindGuest vwStay(new) vwFindGuest vwStay(new) vwRooms vwStay(rec)

vwServiceList Fig 7.6B State diagram, multi-page platform FindGuest, FindStay NewStay, OpenStay... NewStay OpenStay Book, Checkin PrintConfirm Checkout AddService... Book Checkin DeleteStay vwFindGuest vwRooms FindRooms, Repair Book, Checkin vwStay(new) vwStay(rec) vwBreakfast AddService DelService... CloseB OpenBreakfast CloseS CloseR OpenRooms

vwFindGuest Fig 7.7A Modal dialog - call/return Open Calendar (dialog box) Close vwFindGuest vwRooms Calendar (dialog box) Same page - two states CallReturn vwFindGuestvwRooms Calendar (dialog box) Short-hand notation

Fig 7.7B Domain entity: state diagram for a Stay Book BookedIn OutCanceled Clean up Check in Check outCancel Undo? Check in

Syntax choices: Push-buttons (with command name and short-cut) Icons (short-cut?) Menu items (with text and short-cut) Fill in a field (and change focus?) Function keys (F2, Esc, Enter, Alt+B) Clicks and double clicks on data objects Drag and drop Dialog box Voice, eye... Fig 7.8A Function presentation Print confirmationF7 Change roomF8 Cancel stayF9 Cancel bookingDel Checkin Checkin F5 BeginnerExperienced ? MouseKeyboard ?

Fig 7.8B Function presentation, hotel system

Fig 7.9 Good and bad error messages Good error messages are 1.Friendly (don’t blame the user) 2.Precise (what is wrong?) 3.Constructive (what to do?) 4.Prevented (cannot occur) Example: User clicks Check In on the Stay window Be precise: Be con- structive: