1. CSE 3345 User interface design A software engineering perspective Chapter 6: Virtual Windows Design © 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.

2. Virtual Windows Design A virtual window is a user-oriented presentation of persistent data. Design approach… Create as few virtual windows as possible Ensure all data is visible somewhere Ensure all functionality is supported (only with later versions of virtual windows) The process of design is an art, not a science. There is not a single step-by-step approach to design for all type projects and all type teams. The development process presented in our text is just one way of developing a UI. However, it is a fairly typical process.

3. Plan the Virtual Windows Design procedure to determine which windows are needed and what data each window should show. a.Tackle a frequently used task (task 1) first. What does the user need to see to carry out the task. b.Put the data in as few windows as possible. c.Look at the next task (task 2) and imagine the data necessary to carry out the task. d.Does the data from task 1 and task 2 overlap? If so consider reusing the task 1 windows. e.If task 2 requires additional data consider expanding task 1 windows. If not, define new windows. f.Repeat step d with next task until all tasks have been supported.

4. Plan the Virtual Windows Design rules: 1.Minimize the number of window templates across tasks. 2.Minimize the number of windows per task. 3.Avoid showing the same data is different windows. 4.Root a virtual window in one object (one type of data). 5.Virtual windows should be no larger than necessary. -Try to avoid virtual windows that are larger than the physical screen. 6.Provide an overview of data. Not just a customers name, but all contact information. 7.Think of windows as things (nouns), not actions (verbs). A windows title bar should only contain non phrases, not commands to the user. 8.All data should be visible through at least one virtual window.

5. Fig 6.1 Virtual windows plan (very rough draft) for booking a guest Book bednights, price servings, price Checkout Record breakfast & services Breakfast list date room numbers serving type, servings Rooms prices, types status, dates Tasks:Virtual windows: Stay name, address period booked rooms Price change Service prices types, prices Rooms prices, types status, dates Design rules 1.Few window templates Checkin Change room Stay name, address period booked rooms bednights, price servings, price 2.Few window instances per task 3.Data in one instance only 4.Rooted in one thing 5.Close to physical window size 6.Necessary overview 7.Things - not actions 8.All data accessible Give overview of available rooms

6. Virtual Windows, Graphical Version (not so rough draft) Design procedure… a.For each virtual window, make a detailed graphical design (VB is a great tool for doing this). b.Fill in the windows with realistic data. Data often requires more space than you expect. Choose an easy-to-read font size. Don’t worry about putting controls on the windows at this time. c.Fill in the windows with extreme data. Atypical data. d.Evaluate your work and be open to re-designing the windows. Consider inserting a few obvious controls. Unless you have a very good reason, stick to conventional controls and data representations. Be aware of the look and feel of other applications the user will be using on the same platform and within reason try to blend in.

7. Virtual Windows, Graphical Version (not so rough draft) Study other people’s interface designs, and don’t be ashamed to steal borrow their ideas! The creative process involves combining the ideas of others with our own unique ideas to come up with something new or useful. Don’t assume you have all of the answers.

8. Fig 6.2 Virtual windows, graphical version Sources a.Reuse old presentations b.Standard pre- sentation forms c.Know platform d.Gestalt laws e.Realistic and extreme data f.Study other designs - their good points - your bad points Record breakfast Book, checkin... Price change Breakfast 23/9In Roomrestroom 112 121 1311 Service prices Breakf. rest.4 Breakf. room6... Stay Stay#: 714 Guest:John Simpson Address:456 Orange Grove Victoria 3745 Payment:Visa Itempersons 22/9Room 12, sgl160$ 23/9Breakf. rest14$ 23/9Room 11, dbl280$ 24/9Breakf. room212$ 24/9Room 11, dbl280$ Rooms Prices22/923/924/925/9 11DoubleBath8060OB 12SingleToil60OOBB 13DoubleToil6050BBB Price change Book, checkin... Breakf. rest.4 Breakf. room6 Sauna3 Breakf. room Notice the use of gestalt laws In each window

9. Virtual Windows In Development Work product is a term for an intermediate result (aka support artifact) that the developer uses to construct the final product (code). Here are a few… The data base description The task descriptions The virtual windows A to-do list of defects to fix or research that needs to be done. Concurrent development of the work products is probably best. It is critical that you document your ideas and plans.

10. Fig 6.3 Work products to maintain Design defects D100.Understanding Breakfast window vs. Stay window? D101.Check credit card or get deposit. D102.Understanding guest address across stays? D103.Long stays, or with many rooms. (evergrowing list of defects) User names Program names Discount field Tasks using it? Usability test? Data model Virtual windows Task descriptions

11. Virtual Windows In Development Typical development problems … Don’t over do the use of controls at an early stage. Focus on data and not functionality. Make sure the virtual windows can be implemented on the platform used. Keep your work products up to date and in agreement with each other. When developing large systems the work products (artifacts) are under formal configuration management. Forgetting to record a defect. Use application domain terminology in the windows and no programmer speak or abbreviations.

12. Checking Against Task Descriptions Using an extended task description list… 1.Go through the steps of a particular task 2.Compare what data the user needs to see with what is shown in the virtual windows 3.Record what is missing.

13. Fig 6.4 Tasks with data (extended task description) T1.2:Checkin Start:A guest arrives... Sub-tasks:Visible data:Virtual windows: 1.Find room.Free rooms ofRooms. type x, price.Crit: type, period. Problem: neighbor rooms.Map.Map? 1a.Guest booked in advance.Guest and stayFindGuest, Stay. Problem: Fuzzy guest IDdetails.Crit: soundex,... 1b. No suitable room.All free rooms,Rooms. price, discount.Crit: period. 2.Record guest data.Guest detail.Stay. 2a.Guest recorded at booking.Guest detail.FindGuest, Stay. Crit: soundex,... 2b.Regularcustomer.Guest detail.FindGuest,... 3.Record that guest isGuest and stayStay. checked in.details. 4.Deliver key.Room numbers.Stay.

14. CREDO Check CREDO check is used to verify that the information in the virtual windows is also in the data model C: Creation of the entity might be done through the virtual window R: Reading (seeing) all attributes of the entity is possible through the window. (use r for a subset of attributes) E: Editing all attributes of the entity through the window is possible. (use e for a subset of attributes) D: Deleting the entity through the window is possible. O: Overviewing several entities is possible.

15. Fig 6.5A Data model vs. Virtual windows Stay Room State Room Service Received Service Type Guest Stay window Rooms window Entity Class

16. Fig 6.5B CREDO check Create, Read, Edit, Delete, Overview StayCRE CRED r re OCREDO R Rooms Breakfast Service charges Data model versus virtual windows: Guest Stay Room RoomState ServiceRec. ServiceType Missing window data Entity Virt. window roomID Notes: RoomState: personCount editable through Stay, all states through Rooms. Breakfast: roomId... CREDO re O rCReDO R CREDO Missing fncts DO O (C) D

17. Data model versus tasks: BookCRE OC O Re O CheckinBooked RE E O O Re CheckinNonbkdCRE OC O Re O Checkout RE E O R e R ChangeRoom R O Re O RecordService OC O R PriceChangeC EDOCREDO Missing tasks D D(C) e D ED Entity Task Guest Stay Room RoomState ServiceRec. ServiceType Missing task data neighbor statistics (Fig 6.5B Cont.)

18. User Designer Records problems This shows... User believes... Fig 6.6 Review and understandability test Review: Discuss virtual windows with expert user Show and outline alternatives Understandability test: Show virtual windows one by one to ordinary users Ask what they believe they show You may explain and discuss after hearing their belief

19. Fig 6.7A Search techniques 1.Exact keys Enter stay number. Click Search. Enter room no. + date. Click Search. 2.Choice list a.Listbox of records b.Combobox c.Hierarchical menus 3.Flicking Show first Stay window, Next, Next... 4.Approximate key a.Enter part of name. Click Search. Then choice-list or flicking. b.Phonetic search: Cathy = Kathie. c.Live search: System updates choice-list as user types. 5.Composite criteria Enter arrival date + zip. Click Search. 6.Overview and zoom Show floor map. Click to see details.

20. Fig 6.7B Virtual windows for searching Find guest Stay#(any) Name(any)Room#(any) Phone(any) Date23-09-2001 GuestArrivalRoom#Stay# John Simpson, 456 Orange Grove22-09-200112, 11714 Lise Hansen, Dyssegaardsvej 5723-09-200112753 Yun Chen, Kirchgasse 623-09-200113, 14749 SearchF3 RoomPrices22/923/924/925/9 11DoubleBath8060OB 12SingleToil60OOBB 13DoubleToil6050BBB Rooms Free from23/9Type(any) Departure25/9Room# Nights2 SearchF3

21. Fig 6.8A Virtual windows, complete version New Search criteria added New

22. Rooms Floor map Find guest Stay Service prices (Combobox) Breakfast Reception T1.1Book guest T1.2Check-in T1.3Check-out T1.4Change stay T1.5Record/change services T1.6Breakfast list T1.7Room repair Management T2.1Price changes T2.2Add/change rooms XxXXxxXXXXxxxXXXXXXXxxXXXxXxXXxxXXXXxxxXXXXXXXxxXXXxX Complete version: Virtual windows used Legend: X = Window always used during this task. x = Window sometimes used. (Fig 6.8A Cont.)

23. Fig 6.8B Database-driven design Guests Criteria: john GuestIDNameAddressPhone 745John Simpson55 Westbank Tce3700 752John BrondumDyssegaardsvej1244 810John EwesKirschgasse9450 Search Guest details GuestID745 NameJohn Simpson Address155 Westbank Tce Address2Richmond, Victoria 3121 Phone(03) 9421 3700 Passport See stays Stay details StayID 1274GuestID 745 Statechecked in PayformVisa See roomsSee services Stays Criteria: Room 12 Date 22/9 745 StayIDGuestIDPayform 1274745Visa 1283745Master 1390745 Search

24. Room availability From24/9to26/9Type(any) RoomTypePricesStatus 11double, bath8060occ 12single, toil60free 13double, toil6050booked 14de luxe9979repair Rooms StayID1274GuestID745 DateRoomPersonsPrice 22/912, single160$ 23/911, double280$ 24/911, double280$ Services StayID1274GuestID745 DateItemQty.Price 23/9Breakfast, rest14$ 24/9Breakfast, room212$ 24/9Telephone122$ Service list Date24/9 RoomItemQty. 11Breakfast, room2 12Breakfast, rest1 15Breakfast, rest1  Service prices Breakf. rest.4 Breakf. room6... (Fig 6.8B Cont.)

25. Room availability Guests Stays Guest details Stay details Rooms Services Service list Service prices Reception T1.1Book guest T1.2Check-in T1.3Check-out T1.4Change stay T1.5Record/change services T1.6Breakfast list T1.7Room repair Management T2.1Price changes T2.2Add/change rooms XXxXXxxXXXXXXxXXXxXXXXXxXXxxxXXXXXxXXxxXXXXXXxXXXxXXXXXxXXxxxXXXX Database-driven design: Windows used Fig 6.8C Database-driven task support

26. Fig 6.8D Task-driven design Main menu What do you want to do? Book a guest Checkin a booked guest Immediate checkin Record breakfast list Record other services Check out Modify a booking Other Enter desired period and type: From: 24/9to: 26/9 Room type: any free NextMain Select among these rooms: RoomPrices 12, single, toil60 v16, double, bath80 24, double, bath90 NextMainBack Is this a regular guest? YesNo MainBack Enter some data about the guest, for instance name or phone: john MainBackSearch

27. Guest detailsGuestID745 Please review the details with the guest. NameJohn Simpson Address155 Westbank Tce Address2Richmond, Victoria 3121 Phone(03) 9421 3700 Passport MainBackBook rooms (Fig 6.8D Cont.) Booking StayID1274 GuestID745 John Simpson has booked these rooms. You may edit the number of persons. Main Confirm More rooms DateRoomPersonsPrice 22/912, single160$ 23/911, double280$ 24/911, double280$ ?... and about 20 more screens Your search found these guests: NameAddressPhone John Simpson55 Westbank Tce3700 John BrondumDyssegaardsvej1244 John EwesKirschgasse9450 MainBackSee details

28. Stay name, address period booked rooms bednights, price servings, price Rooms prices, types status, dates Stay name, address period booked rooms bednights, price servings, price Rooms prices, types status, dates Each guest has his own set of free rooms? (Fig 6.1) Why or why not? Design rules 1.Few window templates 2.Few window instances per task 3.Data in one instance only 4.Rooted in one thing 5.Close to physical window size 6.Necessary overview 7.Things - not actions 8.All data accessible Stay name, address period booked rooms Stay name, address period booked rooms bednights, price servings, price Rooms prices, types status, dates Each stay has its own name? Regular guests? Usability test !