Slides for
User interface design
A software engineering perspective
Soren Lauesen
7. Function design
August
200
6
© 200
5
, 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:
FindRooms
1
ChooseRoom
1
ResetSearch
1
The subtasks that
use the "button"
Room
Prices
22/9
23/9
24/9
25/9
11
Double
Bath
80
60
O
B
12
Single
Toil
60
O
O
B
B
13
Double
Toil
60
50
B
B
B
Rooms
Free from
23/9
Type
(any)
Departure
25/9
Room#
Nights
2
Search
F3
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
714
Lise Hansen, Dyssegaardsvej 57
23
-
09
-
2001
12
753
Yun Chen, Kirchgasse 6
23
-
09
-
2001
13, 14
749
Search
F3
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:
FindGuest
2, 2a
SelectLine
2a
NewStay
2a
NewGuest
2
ResetSearch
2
Minispec: NewStay
Create a new stay
record
. Fill in
guest
data from the selected line.
Other
sequences?
Stay
Stay#: 714
Guest:
John Simpson
Address:
456 Orange Grove
Victoria 3745
Payment:
Visa
Item
persons
22/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$
What the com
-
puter must do
vwRooms:
FindRooms
1, 3a
ChooseRoom
1, 3a
Book?
3a
ResetSearch
1
vwStay:
(EditData)
2
vwStay:
(EditData)
2
Book
3, 3a
vwStay:
(EditData)
2
Book
3, 3a
PrintConfirm
4
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
Room
Prices
22/9
23/9
24/9
25/9
11
Double
Bath
80
60
O
B
12
Single
Toil
60
O
O
B
B
13
Double
Toil
60
50
B
B
B
Rooms
Free from
23/9
Type
(any)
Departure
25/9
Room#
Nights
2
Search
F3
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
714
Lise Hansen, Dyssegaardsvej 57
23
-
09
-
2001
12
753
Yun Chen, Kirchgasse 6
23
-
09
-
2001
13, 14
749
Search
F3
Stay
Stay#: 714
Guest:
John Simpson
Address:
456 Orange Grove
Victoria 3745
Payment:
Visa
Item
persons
22/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$
Breakfast
23/9
In
In
Room
rest
room
11
2
12
1
13
1
1
Service prices
Breakf
. rest.
4
Breakf
. room
6
. . .
Fig 7.1C Minispecs, hotel system
vwRooms
FindRooms: Show a list of the rooms that are free in the period specified and of the type
specified. If a room number is specified, show this room for the specified period whether
it is free or not. Set
RoomsSelected to the first on the list, to
none
if the list is empty
(
RoomsSelected is a global variable).
ChooseRoom: Set
RoomsSelected and show the selection. Allow multiple sele
c
tions if
possible on the platform.
. . .
Data:
Default values: The search criteria are
(any)
, except the
FreeFrom and Departure dates,
which are today and tomorrow.
Nights: When edited,
Departure
is computed. When
Departure
is edited,
Nights
are
co
m
puted.
vwStay
Book: The function can be used in two situations:
1)
vwStay is a new stay (unrecorded) and one or more rooms are selected:
Create a Stay record and RoomStates for the selected rooms in the selected p
e
riod
with
RoomState=booked.
2)
vwStay is a booked stay: (Note: The user wants to add further bookings). Record
RoomStates for the selected rooms in the selected period with
Roo
m
State=booked.
In all cases the guest data must be filled out (see data description for required fields).
Create a Guest record in case this is a new guest, update the Guest record otherwise.
What the computer
must do. Particularly
E/R changes
Fig 7.2 Actions and feedback (use cases)
Task
User action
System action & Feedback
1.1
Booking
1.
Find rooms
Enters search criteria in vwRooms.
Clicks FindRooms.
Selects a room (ChooseRoom).
Shows free rooms.
Shows selection.
1a.
No suitable
room
Enters new search criteria.
Clicks FindRoms.
Selects a room.
Shows free rooms.
Shows selection.
2.
Record
guest
Clicks NewGuest.
Enters guest data in Stay window.
Shows new, empty Stay window.
2a.
Regular
guest
Enters search criteria in vwFindGuest.
Clicks FindGuest.
Looks down the list for the r
ight
person.
Selects the guest if one matches.
Clicks NewStay.
Edits guest data in Stay window.
Shows guests that match.
Shows more details for each guest
?
Shows new Stay window.
Fills it with data about selected guest
or data from the search criteria.
3.
Record
booking
Clicks Book.
Records guest data, stay data, room
states.
Updates vwRooms and vwStay.
Visible feedback to user in vwStay?
3a.
More rooms
Uses vwRooms as in subtask 1 or 1a.
Clicks Book.
Records additional room states.
Updates vwRooms.
4.
Confirm
(optional)
Clicks PrintConfirm.
Prints confirmation letter.
(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 712
Booked
Canceled
Booked
In?
Time
Book
Mistake
Undo
?
Chronological
undo
: Roll time backwards for entire system
Domain
-
specific undo
: Roll time backwards for a single entity
Stay 810
Booked
In
Out
Room 22, 23/9
Free
Booked
Free
Booked
In
Out
Room state:
Stay 905
Booked
In
Out
In
Out
Book
Check in
Print invoice
(m
istake
)
Undo:
Print
c
redit 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 serv
ices
Record
breakfast
vwBreakfast
pBreakfast
Tasks
Pages
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 ...
AddService
DelService ...
FindRooms
Book, Checkin
PrintConfirm, Checkout
AddServiceLine ...
Book
Checkin
FindRooms
. . .
vwServiceList
vwBreakfast
vwRooms
vwStay(new)
vwRooms
vwFindGuest
vwRooms
vwStay(rec)
pSearch
pStay(new)
pStay(rec)
pBreakfast
pServiceList
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)
vwStay(rec)
vwServiceList
Fig 7.6B State diagram, multi
-
page platform
FindGuest, FindStay
NewStay
,
OpenStay
...
NewStay
OpenStay
Book, Checkin
PrintConfirm
Checkout
AddService ...
Book
Checkin
Cancel
Stay
vwFindGuest
vwRooms
FindRooms, Repair
Book, Checkin
vwStay(new)
vwStay(rec)
vwBreakfast
AddService
DelService ...
OpenBreakfast
CloseS
CloseS
vwFindGuest
Fig 7.7A Modal dialog
-
call/return
Open
Calendar
(dialog box)
Close
vwFindGuest
vwRooms
vwRooms
Calendar
(dialog box)
Same page
-
two states
Call
Return
vwFindGuest
vwRooms
Calendar
(dialog box)
Short
-
hand notation
Fig 7.7B Domain entity: state diagram for a
Stay
Book
Booked
In
Out
Canceled
Clean up
Check in
Check out
Cancel
Undo?
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
Order
Customer
Name
Address
Get
Cust.
Find
Orders
Cancel
Order
Domain:
Real-world
tasks and
objects.
User data model:
What the computer
"remembers".
Functional model:
What the
commands do.
Syntactical level:
Details on screen.
Menu vs. F-keys.
Date formats . . .
Get
Find
Cancel
Order
John F. Smith
Print confirmation
F7
Change room
F8
Cancel stay
F9
Cancel booking
Del
Checkin
Checkin F5
Beginner
Experience
d ?
Mouse
Keyboard ?
Fig 7.8B Function presentation, hotel system
vwRooms
Syntax
Reason
FindRooms
Button+std.shortcut
Used also by novices. Gradual transition to
experienced.
Std.shortcut uses underlined letter.
ChooseRoom
FindRooms chooses
first+Cursor keys
Follow MS-Access standard for selecting a range of
rooms.
ResetSearch
Button+std.shortcut
Used also by novices. Transition to . . .
RepairRoom
Menu:
Rooms+std
Rarely used. Specialists.
UndoRepair
Menu:
Rooms+std
Rarely used. Specialists.
AddRoom
Menu:
Rooms+std
Rarely used. Specialists.
DeleteRoom
Menu:
Rooms+Del
Rarely used. Specialists.
Book
Button+std.shortcut
Used also by novices. Transition to . . .
Checkin
Button+std.shortcut
Used also by novices. Transition to . . .
OpenRooms
Menu:
Rooms+std
MS-Windows standard would say View menu.
Usability test!
CloseR
CloseIcon, Alt+F4
Follow MS-Windows standard.
Goto field
Shortcut on label
Standard shortcut uses underlined letter in label.
F6 switches between screen sections.
vwStay
(Alternative shortcut keys)
Book
Button+F3
Used also by novices. Transition to . . .
Checkin
Button+F4
(same)
PrintConfirm
Button+F5
(same)
PrintGuestAcct
Button+F7
(same)
Checkout
Button+F8
(same)
CancelStay
Menu: Stay
Desirable as button, but too many of them already.
. . .
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:
Enter the password to open this PDF file:
File name:
-
File size:
-
Title:
-
Author:
-
Subject:
-
Keywords:
-
Creation Date:
-
Modification Date:
-
Creator:
-
PDF Producer:
-
PDF Version:
-
Page Count:
-
Preparing document for printing…
0%
Σχόλια 0
Συνδεθείτε για να κοινοποιήσετε σχόλιο