User interface design

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: