CSE 3345User 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.

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.

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.

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.

Fig 6.1 Virtual windows plan (very rough draft) for booking a guest

Book

bednights, priceservings, price

Checkout

Record breakfast& services

Breakfast listdateroom numbersserving type, servings

Roomsprices, typesstatus, dates

Tasks: Virtual windows:

Stayname, addressperiodbooked rooms

Price change Service pricestypes, prices

Roomsprices, typesstatus, dates

Design rules1. Few window

templatesCheckinChange room

Stayname, addressperiodbooked roomsbednights, priceservings, price

2. Few window instances per task

3. Data in one instance only

4. Rooted in one thing5. Close to physical

window size6. Necessary overview7. Things - not actions8. All data accessible

Give overview of available rooms

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.

Virtual Windows, Graphical Version (not so rough draft)

Fig 6.2 Virtual windows, graphical version

Sourcesa. Reuse old

presentationsb. Standard pre-

sentation formsc. Know platformd. Gestalt lawse. Realistic and

extreme dataf. Study other designs

- their good points- your bad points

Record breakfast

Book, checkin . . .Price change

Breakfast 23/9

In InRoom rest room

11 212 113 1 1

Service prices

Breakf. rest. 4Breakf. room 6. . .

Stay Stay#: 714

Guest: John SimpsonAddress: 456 Orange Grove

Victoria 3745Payment: Visa

Item persons22/9 Room 12, sgl 1 60$23/9 Breakf. rest 1 4$23/9 Room 11, dbl 2 80$24/9 Breakf. room 2 12$

24/9 Room 11, dbl 2 80$

Rooms Prices 22/9 23/9 24/9 25/911 Double Bath 80 60 O B12 Single Toil 60 O O B B13 Double Toil 60 50 B B B

Price change

Book, checkin . . .

Breakf. rest. 4Breakf. room 6Sauna 3

Breakf. roomNotice the use of gestalt laws

In each window

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.

Breakfast 23/9

In InRoom rest room

11 212 113 1 1

Service prices

Breakf. rest. 4Breakf. room 6. . .

Stay Stay#: 714

Guest: John SimpsonAddress: 456 Orange Grove

Victoria 3745Payment: Visa

Item persons22/9 Room 12, sgl 1 60$23/9 Breakf. rest 1 4$23/9 Room 11, dbl 2 80$24/9 Breakf. room 2 12$

24/9 Room 11, dbl 2 80$

Rooms Prices 22/9 23/9 24/9 25/911 Double Bath 80 60 O B12 Single Toil 60 O O B B13 Double Toil 60 50 B B B

Task: 1.1 BookingPurpose: Reserve room for a guest.

Task: 1.2 CheckinPurpose: Give guest a room. Mark it as

occupied. Start account.Trigger: A guest arrivesFrequency: Average, total 0.5 checkins/room/dayCritical: Peak hours, now 20/hour/receptionist

Group tour with 50 guests.

Sub-tasks:1. Find room

Problem: Guest wants two neiggbor rooms2. Record guest as checked in3. Deliver key

Variants:1a. No suitable room 1b. Guest has booked in advance2a. Guest recorded at booking2b. Regular guestTask: 1.3 Checkout

Purpose: Release room, invoice guest.. . .

Fig 6.3 Work products to maintain

Stay

RoomState

Room

ServiceService

Type

date, personCount,state (booked | occupied | repair)

name, address1, address2, address3, passport

roomID,bedCount, typeprice1, price2

name, price

date, count

Guest

stayID,paymethod,state (book | in | out)

Design defectsD100. 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

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.

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.

Fig 6.4 Tasks with data (extended task description)

T1.2: CheckinStart: A guest arrives . . .

Sub-tasks: Visible data: Virtual windows:1. Find room. Free rooms of Rooms.

type x, price. Crit: type, period.Problem: neighbor rooms. Map. Map?

1a. Guest booked in advance. Guest and stay FindGuest, Stay.Problem: Fuzzy guest ID details. 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. Regular customer. Guest detail. FindGuest, ...

3. Record that guest is Guest and stay Stay.checked in. details.

4. Deliver key. Room numbers. Stay.

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.

Fig 6.5A Data model vs. Virtual windows

Stay

RoomState

Room

ServiceReceived

ServiceType

Guest

Stay window

Rooms window

Entity Class

Fig 6.5B CREDO check

Create, Read, Edit, Delete, Overview

Stay CRE CRED r re O CREDO R

Rooms

Breakfast

Service charges

Data model versus virtual windows:

Gue

st

Stay

Roo

m

Roo

mSt

ate

Serv

iceR

ec.

Serv

iceT

ype

Mis

sing

win

dow

dat

a

Entity

Virt.window

roomID

Notes: RoomState: personCount editable through Stay, all states through Rooms.Breakfast: roomId . . .

CREDO re O

r CReDO R

CREDO

Missing fncts DO O (C) D

Data model versus tasks:

Book CRE O C O Re O

CheckinBooked RE E O O Re

CheckinNonbkd CRE O C O Re O

Checkout RE E O R e R

ChangeRoom R O Re O

RecordService O C O R

PriceChange C EDO CREDO

Missing tasks D D (C) e D ED

Entity

Task Gue

st

Stay

Roo

m

Roo

mSt

ate

Serv

iceR

ec.

Serv

iceT

ype

Mis

sing

task

dat

a

neighbor

neighbor

statistics

(Fig 6.5B Cont.)

UserDesignerRecords problems

This shows ... Userbelieves ...

Fig 6.6 Review and understandability test

Review: Discuss virtual windows with expert userShow and outline alternatives

Understandability test: Show virtual windows one by one to ordinary users Ask what they believe they showYou may explain and discuss after hearing their belief

Fig 6.7A Search techniques

1. Exact keysEnter stay number. Click Search.Enter room no. + date. Click Search.

2. Choice lista. Listbox of recordsb. Comboboxc. Hierarchical menus

3. FlickingShow first Stay window, Next, Next . . .

4. Approximate keya. 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 criteriaEnter arrival date + zip. Click Search. Room form

Room no. 017 Prices high med low

Beds 2 Normal 88 80 58

Bath full As single 68 60 49

Balcony no

Seaview no Last renovated 20-08-03

Occupied 21-08-03, 22-08-03, 31-08-03, 01-09-

011 013

012 014

015 017 019

016 018 020 022 024

6. Overview and zoomShow floor map. Click to see details.

Fig 6.7B Virtual windows for searching

Find guest Stay# (any)

Name (any) Room# (any)

Phone (any)

Date 23-09-2001

Guest Arrival Room# Stay#John Simpson, 456 Orange Grove 22-09-2001 12, 11 714Lise Hansen, Dyssegaardsvej 57 23-09-2001 12 753Yun Chen, Kirchgasse 6 23-09-2001 13, 14 749

Search F3

Room Prices 22/9 23/9 24/9 25/911 Double Bath 80 60 O B12 Single Toil 60 O O B B13 Double Toil 60 50 B B B

RoomsFree from 23/9 Type (any)Departure 25/9 Room#Nights 2

Search F3

Room Prices 22/9 23/9 24/9 25/911 Double Bath 80 60 O B12 Single Toil 60 O O B B13 Double Toil 60 50 B B B

RoomsFree from 23/9 Type (any)Departure 25/9 Room#Nights 2

Search F3

Fig 6.8A Virtual windows, complete version

Service prices

Breakf. rest. 4Breakf. room 6. . .

Stay Stay#: 714

Guest: John SimpsonAddress: 456 Orange Grove

Victoria 3745Payment: Visa

Item persons22/9 Room 12, sgl 1 60$23/9 Breakf. rest 1 4$23/9 Room 11, dbl 2 80$24/9 Breakf. room 2 12$

24/9 Room 11, dbl 2 80$

Breakf. rest. 4Breakf. room 6Sauna 3

Breakf. room

Floor map From 23-09-03 to 25-09-03

011 013

012 014

015 017 019

016 018 020 022 024

New

Search criteriaadded

Breakfast 23/9

In InRoom rest room

11 212 113 1 1

Find guest Stay# (any)

Name (any) Room# (any)

Phone (any)

Date 23-09-2001

Guest Arrival Room# Stay#John Simpson, 456 Orange Grove 22-09-2001 12, 11 714Lise Hansen, Dyssegaardsvej 57 23-09-2001 12 753Yun Chen, Kirchgasse 6 23-09-2001 13, 14 749

Search F3

New

Roo

ms

Flo

or m

ap

Fin

d gu

est

Sta

y

Ser

vice

pric

es

(Com

bobo

x)

Bre

akfa

st

ReceptionT1.1 Book guestT1.2 Check-inT1.3 Check-outT1.4 Change stayT1.5 Record/change servicesT1.6 Breakfast listT1.7 Room repairManagementT2.1 Price changesT2.2 Add/change rooms

X x X Xx x X X

X X xx x X X

X X XX

X x x

X XX x

Complete version:Virtual windows used

Legend: X = Window always used during this task. x = Window sometimes used.

(Fig 6.8A Cont.)

Fig 6.8B Database-driven design

GuestsCriteria:

johnGuestID Name Address Phone745 John Simpson 55 Westbank Tce 3700752 John Brondum Dyssegaardsvej 1244810 John Ewes Kirschgasse 9450

Search

Guest details GuestID 745

Name John SimpsonAddress1 55 Westbank TceAddress2 Richmond, Victoria 3121Phone (03) 9421 3700Passport

See stays

Stay details StayID 1274 GuestID 745

State checked inPayform Visa

See rooms See services

StaysCriteria:Room 12 Date 22/9

745StayID GuestID Payform1274 745 Visa1283 745 Master1390 745

Search

Room availabilityFrom 24/9 to 26/9 Type (any)

Room Type Prices Status11 double, bath 80 60 occ12 single, toil 60 free13 double, toil 60 50 booked14 de luxe 99 79 repair

Rooms StayID 1274 GuestID 745

Date Room Persons Price22/9 12, single 1 60$23/9 11, double 2 80$24/9 11, double 2 80$

Services StayID 1274 GuestID 745

Date Item Qty. Price23/9 Breakfast, rest 1 4$24/9 Breakfast, room 2 12$24/9 Telephone 12 2$

Service list Date 24/9

Room Item Qty.11 Breakfast, room 212 Breakfast, rest 115 Breakfast, rest 1

Service prices

Breakf. rest. 4Breakf. room 6. . .

(Fig 6.8B Cont.)

Roo

m a

vaila

bilit

y

Gue

sts

Sta

ys

Gue

st d

etai

ls

Sta

y de

tails

Roo

ms

Ser

vice

s

Ser

vice

list

Ser

vice

pric

es

ReceptionT1.1 Book guestT1.2 Check-inT1.3 Check-outT1.4 Change stayT1.5 Record/change servicesT1.6 Breakfast listT1.7 Room repairManagementT2.1 Price changesT2.2 Add/change rooms

X X x X Xx x X X X X

X X x XX X x X X

X X X xX

X x x x

X XX

Database-driven design:Windows used

Fig 6.8C Database-driven task support

Fig 6.8D Task-driven design

Main menuWhat 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/9 to: 26/9

Room type: any free

NextMain

Select among these rooms:Room Prices

12, single, toil 60 v 16, double, bath 80

24, double, bath 90

NextMain Back

Is this a regular guest?Yes No

Main BackEnter some data about the guest,for instance name or phone:

john

Main Back Search

Guest details GuestID 745

Please review the details with the guest.

Name John SimpsonAddress1 55 Westbank TceAddress2 Richmond, Victoria 3121Phone (03) 9421 3700Passport

Main Back Book rooms

(Fig 6.8D Cont.)

Booking StayID 1274 GuestID 745

John Simpson has booked these rooms. You may edit the number of persons.

Main Confirm More rooms

Date Room Persons Price22/9 12, single 1 60$23/9 11, double 2 80$24/9 11, double 2 80$

?

. . . and about 20 more screens

Your search found these guests:

Name Address PhoneJohn Simpson 55 Westbank Tce 3700John Brondum Dyssegaardsvej 1244John Ewes Kirschgasse 9450

Main Back See details

Stayname, addressperiodbooked roomsbednights, priceservings, price

Roomsprices, typesstatus, dates

Stayname, addressperiodbooked roomsbednights, priceservings, price

Roomsprices, typesstatus, dates

Each guest hashis own set offree rooms?

(Fig 6.1) Why or why not?

Design rules1. Few window

templates2. Few window

instances per task3. Data in one

instance only4. Rooted in one thing5. Close to physical

window size6. Necessary overview7. Things - not actions8. All data accessible

Stayname, addressperiodbooked rooms

Stayname, addressperiodbooked roomsbednights, priceservings, price

Roomsprices, typesstatus, dates

Each stay hasits own name?

Regular guests?

Usability test !