Transcript HCI Lecture 24 a dialogue.ppt

Lecture 24
dialogue notations and
design
Today’s Lecture

Today we will discuss about
A
dialogue
 Dialog notations
Single-threaded dialog
 Multiple-threaded dialog
 Concurrent dialog

2
The term “dialogue”

From Merriam and Webster
a
: a conversation between two or more
persons; also : a similar exchange between a
person and something else (as a computer)

The term “conversation”: a (1) : oral exchange
of sentiments, observations, opinions, or ideas
b
: an exchange of ideas and opinions
 c : a discussion between representatives of
parties to a conflict that is aimed at resolution
3
A Dialogue could be……


Two parties or more (Let’s call them John and
Mary)
John and Mary talk about politics


John and Mary talk about how to solve a
problem.


Goal: an exchange of ideas about something
Goal: try to solve a problem
John and Mary talk about nothing. “A random
chitchat”
(Actually very common in human dialogue)
 Goal? : an exchange of sentiment?, make themselves
feel better by talking? or even …… there is no goal?

4
Three Levels of Computer Language

Lexical
 The
lowest level: the shape of icons on the
screen and the actual keys pressed.
 In human language, the sounds and spellings
of words.

Syntactic
 The
order and structure of inputs and outputs.
In human language, the grammar of sentence
construction.
5
Three Levels of Computer Language

Semantic
 The
meaning of the conversation in terms of
its effect on the computer’s internal data
structures and/or the external world.
 In human language, the meaning ascribed by
the different participants to the conversation.
6
Dialogue Notations and Design

Dialogue Notations



Dialogue linked to



Diagrammatic
 state transition networks, JSD diagrams, flow charts
Textual
 formal grammars, production rules, CSP
the semantics of the system – what it does
the presentation of the system – how it looks
Formal descriptions can be analyzed




for inconsistent actions
for difficult to reverse actions
for missing actions
for potential miskeying errors
7
Structured Human Dialogue


Human-computer dialogue very constrained
Some human-human dialogue formal too …
Minister: do you man’s name take this woman …
Man: I do
Minister: do you woman’s name take this man …
Woman: I do
Man: With this ring I thee wed
(places ring on womans finger)
Woman: With this ring I thee wed (places ring ..)
Minister: I now pronounce you man and wife
8
Lessons About Dialogue

Wedding service






Sort of script for three parties
Specifies order
Some contributions fixed – “I do”
Others variable – “do you man’s name …”
Instructions for ring
concurrent with saying words “with this ring …”
If you say these words are you married?


Only if in the right place, with marriage licence
Syntax not semantics
9
… and more


what if woman says “I don’t”?
real dialogues often have alternatives:
Judge: How do you plead guilty or not guilty?
Defendant: either Guilty or Not guilty


the process of the trial depends on the defendants response
focus on normative responses


doesn’t cope with judge saying “off with her head”
or in computer dialogue user standing on keyboard!
10
dialogue design notations


dialogue gets buried in the program
in a big system can we:

analyse the dialogue:



change platforms (e.g. Windows/Mac)
dialogue notations helps us to



can the user always get to see current shopping basket
analyse systems
separate lexical from semantic
… and before the system is built

notations help us understand proposed designs
11
Graphical Notations
state-transition nets (STN)
 Petri nets,
 state charts
 flow charts,
 JSD diagrams

12
State transition networks (STN)

used for dialog description

We have seen that STNs can be very good at representing the
sequential, choice and iterative parts of a dialog

circles – states


Each circle denotes a ‘state’ the system can be in.

Menu is the state where the system is waiting for the user to
select either ‘circle’ or ‘line’ from the menu
arcs - actions/events

Between the states are arrows, the transitions. These are
labeled with the user actions that triggered the particular
transition and the response the system makes
13
State transition networks (STN)

circles - states

arcs - actions/events
click on
circumference
click on centre
Circle 1
select 'circle'
Start
rubber band
Circle 2
draw circle
Finish
Menu
select 'line'
Line 1
click on
first point
rubber band
double click
Line 2
draw last
line
Finish
click on point
draw a line
14
Mouse - based drawing tool





Consider a simple mouse-based drawing tool.
It has a menu with two options, ‘circle’ and ‘line’, and a drawing surface.
If you select circle you are allowed to click on two further points on the
drawing surface.
The first of these is the circle’s centerand the second any point on the
circumference. After the first point is selected,the system draws a
‘rubber band’ line between the center and the current mouse position.
After the second point is chosen, the circle is drawn.
The ‘line’ option in the menu is to draw a polyline. That is, the user can
select any number of points on the drawing surface which the system
connects with straight lines. The last point is denoted by a double click
on the mouse. Again the system ‘rubber bands’ between successive
mouse positions
15
click on
circumference
click on centre
Circle 1
select 'circle'
Start
rubber band
Circle 2
draw circle
Finish
Menu
select 'line'
Line 1
click on
first point
rubber band
double click
Line 2
draw last
line
Finish
click on point
draw a line
16
State transition networks - events

arc labels a bit cramped because:

notation is `state heavy‘

the events require most detail
click on
circumference
click on centre
Circle 1
select 'circle'
Start
rubber band
Circle 2
draw circle
Finish
Menu
select 'line'
Line 1
click on
first point
rubber band
double click
Line 2
draw last
line
Finish
click on point
draw a line
17
State transition networks - states

Labels in circles a bit uninformative:

States are hard to name

But easier to visualise
click on
circumference
click on centre
Circle 1
select 'circle'
Star t
rubber band
Circle 2
draw circle
Finish
Men u
select 'line'
... ... ...
18
Hierarchical STNs

managing complex dialogues

named sub-dialogues

the drawing tool may have a main menu, from which we
can select one of three submenus:

a graphics menu (as described for circles and lines), a
text menu (for adding labels) and a paint menu (for
freehand drawing).

We could describe this complete system using the
hierarchical STN
19
Hierarchical STNs

Managing complex dialogues

Named sub-dialogues
select ‘graphics’
Main
Menu
select ‘text’
Graphics Submenu
Text Submenu
Paint Submenu
select ‘paint’
20
Hierarchical STNs




This is like the previous STNs, but has additional composite states
represented as rectangles with a picture of a little STN in them
Each of these rectangles denotes the whole STN for the relevant
submenu.
To read this diagram, we start in state Main menu and follow the
relevant transition from it as before.
Imagine the user has selected ‘graphics’ from the main menu. The
system responds by ‘popping’ the graphics submenu and then going
into state Graphics submenu
21
Concurrent dialogues - I
simple dialogue box
describing a dialog consisting of several
concurrent parts
 simple dialog box for describing text style
as one might find in a word processor

22
Concurrent dialogues - I
simple dialogue box
Text Style
bold
example
italic
underline
23
How it works?
The box contains three toggles, one each
for bold, italic and underline styles.
 A piece of text can be emboldened,
italicized, underlined or any combination of
these three.
 To select, say, emboldening, the user
clicks over the bold toggle. To deselect it,
the user simply clicks again.

24
Concurrent dialogues - II
three toggles - individual STNs
NO
click on ‘bold’
bold
NO
u’line
bold
italic
italic
u’line
underline
click on ‘italic’
italic
NO
bold
click on ‘underline’
25
Concurrent dialogues - III
bold and italic combined
Text Style
NO
click on ‘bold’
style
only
only
example
click
on
‘italic’
click
on
‘italic’
italic
bold
bold
italic
underline
click on ‘bold’
bold
italic
26
Concurrent dialogues - IV
all together - combinatorial explosion
Text Style
NO
‘bold’
bold
style
only
example
‘underline’
‘underline’
‘italic’
‘italic’
u’line
‘bold’
only
bold
u’line
‘italic’
italic
bold
italic
underline
‘bold’
only
‘italic’
bold
italic
‘underline’
‘underline’
italic
u’line
‘bold’
bold
italic
u’line
27
escapes



we want to add an escape key, which, wherever you are,
cancels what you are doing and returns you to the main
menu
However, to add it to the STN describing the system
would require an arc from every state back to the main
menu.
this would make a complete mess of the hierarchical
structure of the dialog description
28
escapes

‘back’ in web, escape/cancel keys



similar behaviour everywhere
end up with spaghetti of identical behaviours
try to avoid this
e.g. on high level diagram
select ‘graphics’
Graphics Submenu
normal
‘normal’ exit for
each submenu
plus separate
escape arc active
‘everywhere’ in submenu
ESC
finish
Main
Menu
select ‘text’
Text Submenu
ESC
normal
finish
Paint Submenu
select ‘paint’
ESC
normal
finish
29
help


Help systems are similar to escapes in some ways, in
that they may be invoked at any stage during the dialog.
However, unlike escapes, when you have finished using
the help system, you expect to return to the same point
in the dialog that you left
30
Help menus

similar problems




nearly the same everywhere
but return to same point in dialogue
could specify on STN … but very messy
usually best added at a ‘meta’ level
from
Menu
click on centre
Circle 1
rubber band
press HELP
button
Help Subsystem
click on circumference
Circle 2
draw circle
Finish
press HELP
button
Help Subsystem
31
Petri nets
First introduced by Carl Adam Petri in
1962.
 A diagrammatic tool to model concurrency
and
synchronization
in
distributed
systems.
 Very similar to State Transition Diagrams.
 Used as a visual communication aid to
model the system behavior.
 Based on strong mathematical foundation.

32
Petri Net
:Abstract formal model of information flow
Major use:
Modeling of systems of events in which it is
possible for some events to occur
concurrently, but there are constraints on the
occurrences, precedence, or frequency of
these occurrences.
33
Petri Net as a Graph
:Models static properties of a system
 Graph contains 2 types of nodes
 Circles (Places)
 Bars (Transitions)
 Petri net has dynamic properties that result
from its execution
 Markers (Tokens)
 Tokens are moved by the firing of
transitions of the net.
34
Petri net example
Bold On
Italic On
user presses
‘Italic’
user presses
‘Bold’
T1
T2
Bold Off
user actions
represented
as a new counter
T3
T4
Italic Off
transition ‘fires’
when all input
places have counters
35
State charts
Used in UML
 Extension to STN

 Hierarchy
 Concurrent
Standby
sub-nets
ON
 Escapes

OFF always active
OFF
RESET
Channel
Sound
 History

Link marked H
goes back to last
state on re-entering
subdialogue
1
SEL
On
2
MUTE
SEL
SEL
Off
H
3
SEL
4
36
Flowcharts



familiar to
programmers
boxes
- process/event
- not state
Delete
D1
Please enter
employee no.: ____
C1
read record
Delete
D2
Delete
Name: Alan Dix
Dept: Computing
delete? (Y/N): _
D3
Name: Alan Dix
Dept: Computing
delete? (Y/N): _
Please enter Y or N
use for dialogue
(not internal algorithm)
C2
other
answer?
Y
N
Finish
C3
delete record
Finish
37
it works!


formal notations – too much work?
COBOL transaction processing



event-driven – like web interfaces
programs structure
≠ dialogue structure
Delete
D1
Please enter
employee no.: ____
used dialogue flow charts
C1
read record





discuss with clients
transform to code
systematic testing
1000% productivity gain
formalism saves time!!
Delete
D2
Delete
Name: Alan Dix
Dept: Computing
delete? (Y/N): _
D3
delete? (Y/N): _
Please enter Y or N
C2
answer?
Y
other
N
Finish
C3
delete record
Finish
38
Jackson Structured Diagrams
This is a useful way of representing the
structure of a program, when a program is
large and complex, it is important to plan
out the solution before attempting to write
any program code.
 By using a Jackson structured diagram
your system can be documented and
given to a programmer to aid the
development of the program.

39
JSD diagrams

for tree structured dialogues

less expressive

greater clarity
Personnel
Record
System
login
add
employee
record
transaction
change
employee
record
*
logout
display
employee
record
delete
employee
record
40
Jackson Structured Diagrams
 Example - Loop





a =0
b = 10
Do While (a<b)
a=a+1
Loop
To represent a Loop using JSD:
Calculate result*
Initialise
InputAndProcess
Do While
(a<b)
Output
41
TEXTUAL NOTATIONS
Grammars production rules
 CSP and event algebras

42
Textual - Grammars

Regular expressions
sel-line click click* dble-click

compare with JSD



same computational model
different notation
BNF
expr ::= empty
| atom expr
| '(' expr ')' expr


more powerful than regular exp. or STNs
Still NO concurrent dialogue
43
Production rules

Unordered list of rules:
if condition then action




condition based on state or pending events
every rule always potentially active
Good for concurrency
Bad for sequence
44
Event based production rules
Sel-line  first
C-point first  rest
C-point rest  rest
D-point rest  < draw line >

Note:



events added to list of pending events
‘first’ and ‘rest’ are internally generated events
Bad at state!
45
Prepositional Production System

State based

Attributes:
Mouse: { mouse-off, select-line, click-point, double-click }
Line-state: { menu, first, rest }

Rules (feedback not shown):
select-line  mouse-off first
click-point first  mouse-off rest
click-point rest  mouse-off
double-click rest  mouse-off menu

Bad at events!
46
CSP and process algebras

used in Alexander's SPI, and Agent notation

good for sequential dialogues
Bold-tog = select-bold?  bold-on  select-bold? 
bold-off  Bold-tog
Italic-tog = . . .
Under-tog = . . .

and concurrent dialogue
Dialogue-box = Bold-tog || Italic-tog || Under-tog

but causality unclear
47
Dialogue Notations - Summary

Diagrammatic


Textual


STN, JSD, Flow charts
grammars, production rules, CSP
Issues




event base vs. state based
power vs. clarity
model vs. notation
sequential vs. concurrent
48
Semantics Alexander SPI (i)

Two part specication:

EventCSP - pure dialogue order

EventISL - target dependent semantics

dialogue description - centralised

syntactic/semantic trade-off - tollerable
49
Semantics Alexander SPI (ii)

EventCSP
Login = login-mess -> get-name -> Passwd
Passwd = passwd-mess -> (invalid -> Login [] valid -> Session)

EventISL
event: login-mess
prompt: true
out: “Login:”
event: get-name
uses: input
set: user-id = input
event: valid
uses: input, user-id, passwd-db
wgen: passwd-id = passwd-db(user-id)
50
Semantics - raw code

event loop for word processor

dialogue description
- very distributed

syntactic/semantic trade-off
- terrible!
switch ( ev.type ) {
case button_down:
if ( in_text ( ev.pos ) ) {
mode = selecting;
mark_selection_start(ev.pos);
}
...
case button_up:
if ( in_text ( ev.pos )
&& mode == selecting ) {
mode = normal;
mark_selection_end(ev.pos);
}
...
case mouse_move:
if (mode == selecting ) {
extend_selection(ev.pos);
}
...
} /* end of switch */
51
Action properties

completeness



determinism





missed arcs
unforeseen circumstances
several arcs for one action
deliberate: application decision
accident: production rules
nested escapes
consistency


same action, same effect?
modes and visibility
52
Checking properties (i)

completeness

double-click in circle states?
double
click
click on
circumference
click on centre
Circle 1
select 'circle'
Start
rubber band
?
Circle 2
draw circle
Finish
Menu
select 'line'
Line 1
click on
first point
rubber band
double click
Line 2
draw last
line
Finish
click on point
draw a line
53
Checking properties (ii)
select 'circle'
Start

Reversibility:

... ... ...
Menu
select 'line'
Line 1
to reverse select `line'
click on
first point
rubber band
double click
Line 2
draw last
line
Finish
click on point
draw a line
Graphics Sub-menu
select 'graphics'
Main
Menu
select 'text'
select 'paint'
... ... ...
... ... ...
54
Checking properties (ii)
select 'circle'
Start

Reversibility:

to reverse select `line'

click
... ... ...
Menu
select 'line'
Line 1
click on
first point
rubber band
double click
Line 2
draw last
line
Finish
click on point
draw a line
Graphics Sub-menu
select 'graphics'
Main
Menu
select 'text'
select 'paint'
... ... ...
... ... ...
55
Checking properties (ii)
select 'circle'
Start

Reversibility:

to reverse select `line'

click - double click
... ... ...
Menu
select 'line'
Line 1
click on
first point
rubber band
double click
Line 2
draw last
line
Finish
click on point
draw a line
Graphics Sub-menu
select 'graphics'
Main
Menu
select 'text'
select 'paint'
... ... ...
... ... ...
56
Checking properties (ii)
select 'circle'
Start

Reversibility:

Menu
select 'line'
Line 1

to reverse select `line'

click - double click - select `graphics'

... ... ...
click on
first point
rubber band
double click
Line 2
draw last
line
Finish
click on point
draw a line
(3 actions)
N.B. not undo
Graphics Sub-menu
select 'graphics'
Main
Menu
select 'text'
select 'paint'
... ... ...
... ... ...
57
State properties



reachability

can you get anywhere from anywhere?

and how easily
reversibility

can you get to the previous state?

but NOT undo
dangerous states

some states you don't want to get to
58
Dangerous States

word processor: two modes and exit
F1 - changes mode
F2 - exit (and save)
Esc - no mode change
Esc
edit
F1
menu
F2
exit
but ... Esc resets autosave
59
Dangerous States (ii)


exit with/without save  dangerous states
duplicate states - semantic distinction
edit
F1
any
update
F1-F2 - exit with save
edit
F1-Esc-F2 - exit with no save
menu
F2
exit
Esc
F1
menu
F2
exit
Esc
60
Lexical Issues

visibility
differentiate modes and states
 annotations to dialogue


style
command - verb noun
 mouse based - noun verb


layout

not just appearance ...
61
layout matters

word processor - dangerous states
F1
edit

any
update
old keyboard - OK
F2
menu
Esc
F1
edit
Esc
tab
F1
F2
F3
F4
...
...
exit
F2
menu
exit
Esc
1
...
...
62
layout matters

new keyboard layout
Esc
F1
F2
F3
...
intend F1-F2 (save)
finger catches Esc
F1
edit
F2
menu
any
update
Esc
F1
edit
exit
F2
menu
exit
Esc
63
layout matters

new keyboard layout
Esc
F1
F2
F3
...
intend F1-F2 (save)
finger catches Esc
F1-Esc-F2 - disaster!
F1
edit
F2
menu
any
update
Esc
F1
edit
exit
F2
menu
exit
Esc
64
Dialogue Analysis - Summary

Semantics and dialogue




Properties of dialogue



attaching semantics
distributed/centralised dialogue description
maximising syntactic description
action properties: completeness, determinism, consistency
state properties: reachability, reversibility, dangerous states
Presentation and lexical issues


visibility, style, layout
N.B. not independent of dialogue
65
Dialogue Analysis - Summary

Semantics and dialogue




Properties of dialogue



attaching semantics
distributed/centralised dialogue description
maximising syntactic description
action properties: completeness, determinism, consistency
state properties: reachability, reversibility, dangerous states
Presentation and lexical issues


visibility, style, layout
N.B. not independent of dialogue
66
Digital watch – User
Instructions
Time display

Stop watch
two main modes
SMTWTFS
SMTWTFS
A


STP
limited interface
- 3 buttons
A
button A
changes mode
A
SMTWTFS
Depress
button A
for 2 seconds
SMTWTFS
SET
A
ALM
AM
Time setting
Alarm setting
67
Digital watch – User
Instructions
Time display

dangerous states
•

Stop watch
SMTWTFS
SMTWTFS
A
guarded
… by two second hold
STP
completeness
A
•
distinguish depress A
and release A
• what do they do
in all modes?
A
SMTWTFS
Depress
button A
for 2 seconds
SMTWTFS
SET
A
ALM
AM
Time setting
Alarm setting
68
Digital watch – Designers
instructions
Time display
Stop watch
SMTWTFS
SMTWTFS
STP
and ...
Depress A
Release A
that’s just
one button
Release A
SMTWTFS
SMTWTFS
STP
Depress A
Release A
2 seconds
SMTWTFS
2 seconds
SMTWTFS
SET
Depress A
Release A
ALM
AM
Time setting
Alarm setting
69
Summary

We have learnt today
 What
is a Dialogue?
 Notations to represent dialogue!
Diagrammatic
 Textual

70