2. Desain dan Notasi Dialog
Notasi Dialog
Diagrammatik
keadaan transisi jaringan, diagram JSD, diagram alir (flowchart)
Tekstual
formal tata bahasa, aturan produksi, CSP
Dialog terkait dengan
semantik sistem - apa yang dilakukannya
presentasi sistem – tampilannya
deskripsi formal dapat dianalisis
untuk tindakan yang tidak konsisten
untuk sulit untuk membalikkan tindakan
untuk tindakan yang hilang
miskeying kesalahan potensial
3. Apa itu Dialog?
percakapan antara dua pihak atau lebih
biasanya kooperatif
dalam antarmuka pengguna
mengacu pada struktur interaksi
tingkat sintaksis manusia-komputer ('percakapan‘)
Tingkat
leksikal - bentuk ikon, tombol ditekan aktual
sintaksis - order input dan output
efek semantik - pada aplikasi internal / data
4. dialog manusia yang terstruktur
manusia-komputer dialog yang sangat terbatas
beberapa dialog manusia-manusia terlalu formal …
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
5. lessons about dialogue
wedding service (jasa pernikahan)
acara untuk tiga pihak yang terkait
menentukan urutan acara
some contributions fixed – “I do”
others variable – “do you man’s name …”
instruksi untuk bersamaan memasukkan cincin dan
mengatakan dengan kata “with this ring …”
jika Anda mengucapkan kata-kata itu, apakah Anda
menikah?
hanya jika di tempat yang tepat, dengan lisensi
pernikahan
sintaks tidak semantik
6. … and more
what if woman says “I don’t”?
real dialogues often have alternatives:
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!
Judge: How do you plead guilty or not guilty?
Defendant: either Guilty or Not guilty
7. notasi dialog Desain
dialog akan dibuat dalam program
dalam sistem besar yang bisa kita:
menganalisis dialog:
pengguna dapat selalu bisa melihat keranjang belanja saat
ini
perubahan platform (misalnya Windows / Mac)
notasi dialog membantu kita untuk
menganalisis sistem
terpisah leksikal dari semantic
... Dan sebelum sistem dibangun
notasi membantu kita memahami desain yang
diusulkan
9. State transition networks
(STN)
lingkaran – states/bagian
tanda panah - actions/events
Start Menu
Circle 1 Circle 2 Finish
Line 1 Line 2 Finish
select 'circle'
select 'line'
click on centre
click on
circumference
draw circle
rubber band
rubber band draw last
line
click on
first point double click
click on point
draw a line
10. State transition networks -
events
label busur sedikit sempit karena:
notation is `state heavy‘
peristiwa yang paling membutuhkan detail
Start Menu
Circle 1 Circle 2 Finish
Line 1 Line 2 Finish
select 'circle'
select 'line'
click on centre
click on
circumference
draw circle
rubber band
rubber band draw last
line
click on
first point double click
click on point
draw a line
State heavy : kondisi yang
berat/menjemukan/melelahkan
,dsb
11. Start Menu
Circle 1 Circle 2 Finish
select 'circle'
select 'line'
click on centre
click on
circumference
draw circle
rubber band
... ... ...
State transition networks -
states
label di lingkaran sedikit tidak informatif :
bagian yang susah diberi nama
lebih mudah memvisualisasikan
12. Hierarchical STNs
mengelola dialog yang complex
nama sub-dialogues Graphics Submenu
Text Submenu
Paint Submenu
Main
Menu
select ‘graphics’
select ‘paint’
select ‘text’
14. Concurrent dialogues - II
three toggles - individual STNs
bold
italic
underline
NO
bold
bold
click on ‘bold’
NO
italic
italic
click on ‘italic’
NO
u’line
u’line
click on ‘underline’
toggles:beralih
15. Concurrent dialogues - III
bold and italic combined
Text Style
bold
italic
underline
example
NO
style
bold
only
click on ‘bold’
click
on
‘italic’
italic
only
bold
italic
click on ‘bold’
click
on
‘italic’
16. Concurrent dialogues - IV
all together - combinatorial
explosion
‘italic’
NO
style
bold
only
‘bold’
italic
only
bold
italic
‘bold’
‘italic’
u’line
only
bold
u’line
‘bold’
italic
u’line
bold
italic
u’line
‘bold’
‘italic’
‘italic’
‘underline’ ‘underline’
‘underline’ ‘underline’
Text Style
bold
italic
underline
example
17. escapes
‘back’ in web, escape/cancel keys
perilaku yang serupa di mana-mana
berakhir dengan pekerjaan yang ruwet
dihindari dari
e.g. on high level diagram
‘normal’ untuk keluar
dari masing-masing sub menu
plus separate
escape arc active
‘everywhere’ in submenu
Graphics Submenu
Text Submenu
Paint Submenu
Main
Menu
select ‘graphics’
select ‘paint’
select ‘text’
normal
finish
ESC
normal
finish
ESC
normal
finish
ESC
18. help menus
masalah serupa
hampir sama di mana-mana
tapi kembali ke titik yang sama pada dialog
bisa menentukan di STN ... tapi sangat kacau
biasanya terbaik ditambahkan pada meta 'tingkat
Finish
Help Subsystem
Circle 1
click on circumference
Circle 2
from
Menu
press HELP
button
draw circle
rubber band
click on centre
Help Subsystem
press HELP
button
19. Petri nets
one of the oldest notations in computing!
flow graph:
places– a bit like STN states
transitions – a bit like STN arcs
counters – sit on places (current state)
several counters allowed
concurrent dialogue states
used for UI specification (ICO at Toulouse)
tool support – Petshop
Concurrent=berbarengan
20. Petri net example
Bold On Italic On
Bold Off Italic Off
user presses
‘Italic’
user presses
‘Bold’
T1 T2 T3 T4
user actions
represented
as a new counter
transition ‘fires’
when all input
places have counters
21. State charts
used in UML
extension to STN
hierarchy
concurrent sub-nets
escapes
OFF always active
history
link marked H
goes back to last
state on re-entering
subdialogue
On
Off
1
2
3
4
Sound Channel
H
SEL
SEL
SEL
SEL
MUTE
Standby
OFF
ON
RESET
22. Flowcharts
familiar to
programmers
boxes
- process/event
- not state
use for dialogue
(not internal algorithm)
Delete D1
Please enter
employee no.: ____
Delete D3
Name: Alan Dix
Dept: Computing
delete? (Y/N): _
Please enter Y or N
Delete D2
Name: Alan Dix
Dept: Computing
delete? (Y/N): _
answer?
C2
Finish
Finish
read record
C1
delete record
C3
other
N
Y
23. it works!
formal notations – too much work?
COBOL transaction processing
event-driven – like web interfaces
programs structure
≠ dialogue structure
used dialogue flow charts
discuss with clients
transform to code
systematic testing
1000% productivity gain
formalism saves time!!
Delete D1
Please enter
employee no.: ____
Delete D3
delete? (Y/N): _
Please enter Y or N
Delete D2
Name: Alan Dix
Dept: Computing
delete? (Y/N): _
answer?
C2
Finish
Finish
read record
C1
other
N
Y
delete record
C3
24. JSD diagrams
for tree structured dialogues
kurang expressive
terlalu luas
transaction
login
add
employee
record
change
employee
record
display
employee
record
logout
Personnel
Record
System
delete
employee
record
*
26. 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
27. 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
28. 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!
29. 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!
30. 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
31. Dialogue Notations -
Summary
Diagrammatic
STN, JSD, Flow charts
Textual
grammars, production rules, CSP
Issues
event base vs. state based
power vs. clarity
model vs. notation
sequential vs. concurrent
32. Semantics Alexander SPI
(i)
Two part specication:
EventCSP - pure dialogue order
EventISL - target dependent semantics
dialogue description - centralised
syntactic/semantic trade-off - tollerable
34. 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 */
35. Action properties
completeness
missed arcs
unforeseen circumstances
determinism
several arcs for one action
deliberate: application decision
accident: production rules
nested escapes
consistency
same action, same effect?
modes and visibility
36. Checking properties (i)
completeness
double-click in circle states?
Start Menu
Circle 1 Circle 2 Finish
Line 1 Line 2 Finish
select 'circle'
select 'line'
click on centre
click on
circumference
draw circle
rubber band
rubber band draw last
line
click on
first point double click
click on point
draw a line
double
click
?
37. Checking properties (ii)
Reversibility:
to reverse select `line'
Start Menu
Line 1 Line 2 Finish
select 'circle'
select 'line'
rubber band draw last
line
click on
first point double click
click on point
draw a line
... ... ...
select 'graphics'
select 'text'
select 'paint'
... ... ...
Main
Menu
Graphics Sub-menu
... ... ...
38. Checking properties (ii)
Reversibility:
to reverse select `line'
click
Start Menu
Line 1 Line 2 Finish
select 'circle'
select 'line'
rubber band draw last
line
click on
first point double click
click on point
draw a line
... ... ...
select 'graphics'
select 'text'
select 'paint'
... ... ...
Main
Menu
Graphics Sub-menu
... ... ...
39. Checking properties (ii)
Reversibility:
to reverse select `line'
click - double click
Start Menu
Line 1 Line 2 Finish
select 'circle'
select 'line'
rubber band draw last
line
click on
first point double click
click on point
draw a line
... ... ...
select 'graphics'
select 'text'
select 'paint'
... ... ...
Main
Menu
Graphics Sub-menu
... ... ...
40. Checking properties (ii)
Reversibility:
to reverse select `line'
click - double click - select `graphics'
(3 actions)
N.B. not undo
Start Menu
Line 1 Line 2 Finish
select 'circle'
select 'line'
rubber band draw last
line
click on
first point double click
click on point
draw a line
... ... ...
select 'graphics'
select 'text'
select 'paint'
... ... ...
Main
Menu
Graphics Sub-menu
... ... ...
41. 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
42. Dangerous States
word processor: two modes and exit
F1 - changes mode
F2 - exit (and save)
Esc - no mode change
but ... Esc resets autosave
edit exit
menu
F1 F2
Esc
43. Dangerous States (ii)
exit with/without save dangerous states
duplicate states - semantic distinction
F1-F2 - exit with save
F1-Esc-F2 - exit with no save
edit exit
menu
F1 F2
Esc
edit exit
menu
F1 F2
Esc
any
update
44. Lexical Issues
visibility
differentiate modes and states
annotations (penjelasan) to dialogue
style
command - verb noun
mouse based - noun verb
layout
tidak sekedar penampilan
45. layout matters
word processor - dangerous states
old keyboard - OK
Esc
F1 F2
F3
...
F4
...
1
tab
...
...
edit exit
menu
F1 F2
Esc
edit exit
menu
F1 F2
Esc
any
update
46. layout matters
new keyboard layout
intend F1-F2 (save)
finger catches Esc
Esc F1 F2 F3 ...
edit exit
menu
F1 F2
Esc
edit exit
menu
F1 F2
Esc
any
update
47. layout matters
new keyboard layout
intend F1-F2 (save)
finger catches Esc
F1-Esc-F2 - disaster!
Esc F1 F2 F3 ...
edit exit
menu
F1 F2
Esc
edit exit
menu
F1 F2
Esc
any
update
48. Dialogue Analysis - Summary
Semantics and dialogue
attaching semantics
distributed/centralised dialogue description
maximising syntactic description
Properties of dialogue
action properties: completeness, determinism, consistency
state properties: reachability, reversibility, dangerous states
Presentation and lexical issues
visibility, style, layout
N.B. not independent of dialogue
49. Digital watch – User
Instructions
two main modes
limited interface
- 3 buttons
button A
changes mode
S M T W T F S S M T W T F S
STP
S M T W T F S
SET
A
Time display Stop watch
Time setting Alarm setting
A
A
A
Depress
button A
for 2 seconds
S M T W T F S
ALM
AM
50. Digital watch – User
Instructions
dangerous states
• guarded
… by two second hold
completeness
• distinguish depress A
and release A
• what do they do
in all modes?
S M T W T F S S M T W T F S
STP
S M T W T F S
SET
A
Time display Stop watch
Time setting Alarm setting
A
A
A
Depress
button A
for 2 seconds
S M T W T F S
ALM
AM
51. Digital watch – Designers
instructions
and ...
that’s just
one button
S M T W T F S S M T W T F S
STP
S M T W T F S
SET
Time display Stop watch
Time setting Alarm setting
Depress A
2 seconds
S M T W T F S
ALM
AM
S M T W T F S S M T W T F S
STP
Release A Release A
Depress A
Depress A
2 seconds
Release A Release A
![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)](https://image.slidesharecdn.com/imk9-notasidialog-250307100549-ab8f1b6d/85/IMK9-NOTASI_DIALOG-IMK9-NOTASI_DIALOG-AA-33-320.jpg)
