Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction
-
Upload
chad-melton -
Category
Documents
-
view
215 -
download
2
Transcript of Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction
![Page 1: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/1.jpg)
dialogue notation
focus on STNs
extract from chap 8 slides forHuman Computer Interaction
http://www.hcibook.com/
![Page 2: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/2.jpg)
think about dialogue
what does it mean in UI design?
Minister: do you name take this woman …Man: I doMinister: do you name take this man …Woman: I doMinister: I now pronounce you man and wife
![Page 3: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/3.jpg)
State transition networks (STN)
• circles - states
• arcs - actions/events
Start Menu
Circle 1 Circle 2 Finish
Line 1 Line 2 Finish
select 'circle'
select 'line'
click on centreclick on
circumference
draw circlerubber band
rubber band draw lastline
click onfirst point double click
click on point
draw a line
![Page 4: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/4.jpg)
State transition networks - events
• arc labels a bit cramped because:
– notation is `state heavy‘
– the events require most detail
Start Menu
Circle 1 Circle 2 Finish
Line 1 Line 2 Finish
select 'circle'
select 'line'
click on centreclick on
circumference
draw circlerubber band
rubber band draw lastline
click onfirst point double click
click on point
draw a line
![Page 5: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/5.jpg)
Start Menu
Circle 1 Circle 2 Finish
select 'circle'
select 'line'
click on centreclick on
circumference
draw circlerubber band
... ... ...
State transition networks - states
• labels in circles a bit uninformative:
– states are hard to name
– but easier to visualise
![Page 6: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/6.jpg)
Hierarchical STNs
• managing complex dialogues
• named sub-dialogues Graphics Sub-menu
Text Sub-menu
Paint Sub-menu
MainMenu
select 'graphics'
select 'text'
select 'paint'
![Page 7: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/7.jpg)
Flowcharts
• familiar toprogrammers
• boxes- process/event- not state
• use for dialogue(not internal algorithm)
Delete D1
Please enteremployee no.: ____
Delete D3
Name: Alan DixDept: Computingdelete? (Y/N): _Please enter Y or N
Delete D2
Name: Alan DixDept: Computingdelete? (Y/N): _
answer?
C2
Finish
Finish
read record
C1
delete record
C3
other
NY
![Page 8: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/8.jpg)
JSD diagrams
• for tree structured dialogues
– less expressive
– greater clarity
transactionlogin
addemployee
record
changeemployee
record
displayemployee
record
logout
PersonnelRecordSystem
deleteemployee
record
*
![Page 9: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/9.jpg)
Concurrent dialogues - Isimple dialogue box
Text Style
bold
italic
underline
example
![Page 10: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/10.jpg)
Concurrent dialogues - II three toggles - individual STNs
bold
italic
underline
NObold
boldclick on ‘bold’
NOitalic
italicclick on ‘italic’
NOu’line
u’lineclick on ‘underline’
![Page 11: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/11.jpg)
Concurrent dialogues - IIIbold and italic combined
Text Stylebold
italic
underline
exampleNOstyle
boldonly
click on ‘bold’
clickon
‘italic’
italiconly
bolditalic
click on ‘bold’
clickon
‘italic’
![Page 12: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/12.jpg)
Concurrent dialogues - IVall together - combinatorial explosion
‘italic’
NOstyle
boldonly
‘bold’
italiconly
bolditalic
‘bold’
‘italic’
u’lineonly
boldu’line
‘bold’
italicu’line
bolditalicu’line
‘bold’
‘italic’‘italic’
‘underline’ ‘underline’
‘underline’ ‘underline’
Text Stylebolditalicunderline
example
![Page 13: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/13.jpg)
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
![Page 14: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/14.jpg)
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 centreclick on
circumference
draw circlerubber band
rubber band draw lastline
click onfirst point double click
click on point
draw a line
doubleclick
?
![Page 15: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/15.jpg)
Checking properties (ii)
• Reversibility:
– to reverse select `line'
Start Menu
Line 1 Line 2 Finish
select 'circle'
select 'line'
rubber band draw lastline
click onfirst point double click
click on point
draw a line
... ... ...
select 'graphics'
select 'text'
select 'paint'
... ... ...MainMenu
Graphics Sub-menu
... ... ...
![Page 16: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/16.jpg)
Checking properties (ii)
• Reversibility:
– to reverse select `line'
– click
Start Menu
Line 1 Line 2 Finish
select 'circle'
select 'line'
rubber band draw lastline
click onfirst point double click
click on point
draw a line
... ... ...
select 'graphics'
select 'text'
select 'paint'
... ... ...MainMenu
Graphics Sub-menu
... ... ...
![Page 17: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/17.jpg)
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 lastline
click onfirst point double click
click on point
draw a line
... ... ...
select 'graphics'
select 'text'
select 'paint'
... ... ...MainMenu
Graphics Sub-menu
... ... ...
![Page 18: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/18.jpg)
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 lastline
click onfirst point double click
click on point
draw a line
... ... ...
select 'graphics'
select 'text'
select 'paint'
... ... ...MainMenu
Graphics Sub-menu
... ... ...
![Page 19: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/19.jpg)
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
![Page 20: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/20.jpg)
Dangerous States
• word processor: two modes and exit
F1 - changes modeF2 - exit (and save)Esc - no mode change
but ... Esc resets autosave
edit exitmenuF1 F2
Esc
![Page 21: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/21.jpg)
Dangerous States (ii)
• exit with/without save dangerous states• duplicate states - semantic distinction
F1-F2 - exit with saveF1-Esc-F2 - exit with no save
edit exitmenuF1 F2
Esc
edit exitmenuF1 F2
Esc
anyupdate
![Page 22: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/22.jpg)
Lexical Issues
• visibility• differentiate modes and states• annotations to dialogue
• style• command - verb noun• mouse based - noun verb
• layout• not just appearance ...
![Page 23: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/23.jpg)
layout matters
• word processor - dangerous states
• old keyboard - OK
Esc
F1 F2
F3
...F4
...
1
tab
......
edit exitmenuF1 F2
Esc
edit exitmenuF1 F2
Esc
anyupdate
![Page 24: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/24.jpg)
layout matters
• new keyboard layout
intend F1-F2 (save)
finger catches Esc
Esc F1 F2 F3 ...
edit exitmenuF1 F2
Esc
edit exitmenuF1 F2
Esc
anyupdate
![Page 25: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/25.jpg)
layout matters
• new keyboard layout
intend F1-F2 (save)
finger catches Esc
F1-Esc-F2 - disaster!
Esc F1 F2 F3 ...
edit exitmenuF1 F2
Esc
edit exitmenuF1 F2
Esc
anyupdate
![Page 26: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/26.jpg)
Dialogue Analysis - Summary
• 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
![Page 27: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/27.jpg)
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
AADepress button A for 2 seconds
S M T W T F S
ALM
AM
![Page 28: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/28.jpg)
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
AADepress button A for 2 seconds
S M T W T F S
ALM
AM
![Page 29: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/29.jpg)
Digital watch – Designers instructions
and ...
that’s justone 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
![Page 30: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/30.jpg)
example - nuclear control
• dangerous state?• missing arcs
+
–
REDAMBERGREEN
+
–
+
–
Alarm Control
![Page 31: Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f205503460f94c38587/html5/thumbnails/31.jpg)
revised STN
CONFIRM
Emergency Confirm
CANCEL
+
–
TEMPAMBERGREEN
+
RED
–
CONFIRM
CANCEL
+
–
Alarm Control