chapter 16 dialogue notations and design
2. Dialogue Notations and Design
Dialogue Notations
Diagrammatic
state transition networks, JSD diagrams, flow charts
Textual
formal grammars, production rules, CS P
Dialogue linked to
the semantics of the system – what it does
the presentation of the system – how it looks
Formal descriptions can be analysed
for inconsistent actions
for difficult to reverse actions
for missing actions
for potential miskeying errors
3. what is dialogue?
conversation between two or more parties
usually cooperative
in user interfaces
refers to the structure of the interaction
syntactic level of human–computer ‘conversation’
levels
lexical – shape of icons, actual keys pressed
syntactic – order of inputs and outputs
semantic – effect on internal application/data
4. 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
5. 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
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. dialogue design notations
dialogue gets buried in the program
in a big system can we:
analyse the dialogue:
can the user always get to see current shopping basket
change platforms (e.g. Windows/Mac)
dialogue notations helps us to
analyse systems
separate lexical from semantoc
… and before the system is built
notations help us understand proposed designs
8. graphical notations state-transition nets (STN) Petri nets, state charts flow charts, JSD diagrams
9. State transition networks (STN)
circles - states
arcs - actions/events
10. State transition networks - events
arc labels a bit cramped because:
notation is `state heavy‘
the events require most detail
11. State transition networks - states
labels in circles a bit uninformative:
states are hard to name
but easier to visualise
12. Hierarchical STNs
managing complex dialogues
named sub-dialogues
Graphics Submenu Text Submenu Paint Submenu Main Menu select ‘graphics’ select ‘paint’ select ‘text’
13. Concurrent dialogues - I simple dialogue box Text Style bold italic underline example
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’
15. Concurrent dialogues - III bold and italic combined NO style bold only click on ‘bold’ click on ‘ italic’ click on ‘ italic’ Text Style bold italic underline example italic only bold italic click on ‘bold’
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
similar behaviour everywhere
end up with spaghetti of identical behaviours
try to avoid this
e.g. on high level diagram
‘ normal’ exit for each submenu
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
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
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
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
less expressive
greater clarity
transaction login add employee record change employee record display employee record logout Personnel Record System delete employee record *
25. textual notations grammars production rules CSP and event algebras
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
33. 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)
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?
double click ?
37. Checking properties (ii)
Reversibility:
to reverse select `line'
38. Checking properties (ii)
Reversibility:
to reverse select `line'
click
39. Checking properties (ii)
Reversibility:
to reverse select `line'
click - double click
40. Checking properties (ii)
Reversibility:
to reverse select `line'
click - double click - select `graphics'
(3 actions)
N.B. not undo
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
บทที่ 16 สนทนาฯลฯ และการออกแบบ2. บทสนทนาฯลฯ และการออกแบบพูดคุยฯลฯDiagrammaticเครือข่ายการเปลี่ยนสถานะ JSD ไดอะแกรม แผนภูมิการไหลเป็นข้อความทาง grammars กฎการผลิต ซีเอสพีบทสนทนาที่เชื่อมโยงกับความหมายของระบบ – อะไรได้บ้างนำเสนอระบบ – มีลักษณะอย่างไรสามารถ analysed คำอธิบายอย่างเป็นทางการสำหรับการดำเนินการไม่สอดคล้องกันการยากที่จะย้อนกลับการดำเนินการสำหรับการดำเนินการที่ขาดหายไปสำหรับศักยภาพ miskeying ข้อผิดพลาด3. บทสนทนาคืออะไรบทสนทนาระหว่างบุคคลสองคน หรือมากกว่าโดยปกติสหกรณ์ในอินเทอร์เฟซผู้ใช้หมายถึงโครงสร้างของการโต้ตอบทางไวยากรณ์ระดับบุคคล – คอมพิวเตอร์ 'สนทนา'ระดับเกี่ยวกับคำศัพท์ – รูปไอคอน ของจริงแป้นทางไวยากรณ์สั่งของอินพุตและเอาท์พุตความหมาย – ผลข้อมูลภายในแอพลิเคชัน4. สนทนาโครงสร้างมนุษย์คอมพิวเตอร์บุคคลบทสนทนามากจำกัดมนุษย์มนุษย์บางบทสนทนาอย่างเป็นทางการเกินไป...รัฐมนตรี: คุณผู้หญิงคนนี้ใช้ชื่อผู้ชาย... ชาย: ฉันรัฐมนตรีว่ากระทรวง: คุณผู้หญิงคนนี้ใช้ชื่อ... ผู้หญิง: ฉันคน: นี้แหวนผมท่านกล่าวพุธ (สถานแหวนบนนิ้ว womans) ผู้หญิง: นี้แหวนผมท่านกล่าวพุธ (แหวนสถาน...) รัฐมนตรี: ผมตอนนี้เสียงคุณและภรรยา5. บทเรียนเกี่ยวกับบทสนทนาบริการจัดงานแต่งงานเรียงลำดับของสคริปต์สำหรับบุคคลที่สามระบุใบสั่งผลงานบางคง – "ฉัน"บางตัวแปร – "คุณชายชื่อ..."คำแนะนำสำหรับแหวนพร้อมกับพูดคำ "กับแหวนนี้..."ถ้าคุณพูดคำเหล่านี้ คุณแต่งงานหรือไม่ถ้าเฉพาะในเหมาะสม มีใบอนุญาตแต่งงานไวยากรณ์ไม่ความหมาย6.... และอื่น ๆถ้าผู้หญิงกล่าวว่า "ฉันไม่"ประเด็นที่แท้จริงมักจะมีทางเลือก:กระบวนการของการทดลองขึ้นอยู่กับการตอบสนองของจำเลยเน้นตอบ normativeไม่รับมือกับผู้พิพากษาว่า "ปิด ด้วยหัวของเธอ"หรือในคอมพิวเตอร์พูดคุย ผู้ใช้ยืนอยู่บนแป้นพิมพ์ผู้พิพากษา: วิธีทำคุณยอมรับผิด หรือไม่มีความผิดหรือไม่ จำเลย: Guilty อย่างใดอย่างหนึ่ง หรือไม่มีความผิด7. บทสนทนาฯลฯ ออกแบบบทสนทนาจะฝังอยู่ในโปรแกรมในระบบขนาดใหญ่เราสามารถ:วิเคราะห์กล่องโต้ตอบ:ผู้ใช้จะได้เห็นตะกร้าปัจจุบันเปลี่ยนแพลตฟอร์ม (เช่น Windows/Mac)ฯลฯ พูดคุยช่วยให้เราวิเคราะห์ระบบเกี่ยวกับคำศัพท์จาก semantoc แยก...และ ก่อนที่ระบบจะถูกสร้างขึ้นฯลฯ ช่วยให้เราเข้าใจการออกแบบนำเสนอ8. กราฟิกฯลฯ เปลี่ยนสถานะสุทธิมุ้ง Petri (STN) แผนภูมิการไหลภูมิรัฐ ไดอะแกรม JSD9. รัฐเปลี่ยนเครือข่าย (STN)วงกลม - อเมริกาเส้นโค้ง - การกระทำ/เหตุการณ์10. รัฐเปลี่ยนเครือข่าย - เหตุการณ์ป้ายโค้งเล็ก cramped เนื่องจาก:เครื่องหมายเป็น 'รัฐหนัก'เหตุการณ์ต้องการรายละเอียดมากที่สุด11. รัฐเปลี่ยนเครือข่าย - อเมริกาป้ายชื่อในวงการบิต uninformative:อเมริกายากชื่อแต่ง่ายต่อการ visualise12. STNs ลำดับการจัดการประเด็นซับซ้อนประเด็นย่อยที่ชื่อกราฟิกเลือกเมนูข้อความเมนูสีเมนูหลักเมนู 'กราฟิก' เลือก 'ระบายสี' เลือก 'ข้อความ'13. พร้อมกันนอบ - ฉันง่ายโต้กล่องข้อความแบบตัวหนาตัวเอียงขีดเส้นใต้ตัวอย่าง14. กันนอบ - II 3 สลับ - STNs แต่ละตัวหนาเอียงขีดเส้นใต้ไม่หนาหนากที่ 'ตัวหนา' ตัวเอียงตัวเอียงไม่คลิกที่ 'เอียง' ไม่ u'line u'line คลิกที่ 'เซลล์'15. กันนอบ - III เป็นตัวหนา และตัวเอียงรวมไม่ลักษณะหนาเพียงคลิกที่ 'ตัวหนา' คลิก 'ตัวเอียง' 'เอียง' ลักษณะข้อความตัวหนาตัวเอียงขีดเส้นใต้ตัวเอียงตัวหนาเท่านั้นที่เอียงอย่างบนบน 'ตัวหนา'16. กันนอบ - IV พร้อมกันทั้งหมด - u'line เอียง 'เอียง' ไม่ลักษณะหนาเท่า 'ตัวหนา' ตัวเอียงตัวหนาเฉพาะเอียง 'ตัวหนา' 'เอียง' u'line u'line เฉพาะตัวหนา 'ตัวหนา' ปัญหาขยายตัวหนาเอียง u'line 'ตัวหนา' 'เอียง' 'เอียง' 'เซลล์' 'เซลล์' 'เซลล์' 'เซลล์' ลักษณะข้อความตัวหนาตัวเอียงขีดเส้นใต้ตัวอย่าง17. escapes'กลับ' ในเว็บ หนี/ยกเลิกคีย์ทุกพฤติกรรมที่คล้ายกันมีสปาเก็ตตี้ของวิญญาณเหมือนกันพยายามหลีกเลี่ยงปัญหานี้เช่นบนไดอะแกรมระดับสูงออกจาก 'ปกติ' ในแต่ละเมนูย่อยนอกจากแยกหนีงานอาร์ค 'ทุก' ในเมนูย่อยรูปภาพเมนูข้อความเมนูสีเมนูเมนูหลักเลือก 'กราฟิก' เลือก 'ระบายสี' เลือก 'ข้อความ' ปกติเสร็จสิ้น ESC เสร็จปกติ ESC ปกติเสร็จสิ้น ESC18. เมนูช่วยเหลือปัญหาที่คล้ายกันเกือบเหมือนกันทุกแต่กลับไปที่จุดเดียวกันในต่างแดนcould specify on STN … but very messyusually best added at a ‘meta’ levelFinish 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 button19. Petri netsone of the oldest notations in computing!flow graph:places – a bit like STN statestransitions – a bit like STN arcscounters – sit on places (current state)several counters allowedconcurrent dialogue statesused for UI specification (ICO at Toulouse)tool support – Petshop20. 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 counters21. State chartsused in UMLextension to STNhierarchyconcurrent sub-netsescapesOFF always activehistorylink marked H goes back to last state on re-entering subdialogueOn Off 1 2 3 4 Sound Channel H SEL SEL SEL SEL MUTE Standby OFF ON RESET22. Flowchartsfamiliar to programmersboxes - process/event - not stateuse 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 Y23. it works!formal notations – too much work?COBOL transaction processingevent-driven – like web interfacesprograms structure ≠ dialogue structureused dialogue flow chartsdiscuss with clientstransform to codesystematic testing1000% productivity gainformalism 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 C324. JSD diagramsfor tree structured dialoguesless expressivegreater claritytransaction login add employee record change employee record display employee record logout Personnel Record System delete employee record *25. textual notations grammars production rules CSP and event algebras26. Textual - GrammarsRegular expressionssel-line click click* dble-clickcompare with JSDsame computational modeldifferent notationBNFexpr ::= empty| atom expr| '(' expr ')' exprmore powerful than regular exp. or STNsStill NO concurrent dialogue27. Production rulesUnordered list of rules:if condition then actioncondition based on state or pending eventsevery rule always potentially activeGood for concurrencyBad for sequence28. Event based production rulesSel-line firstC-point first restC-point rest restD-point rest < draw line >Note:events added to list of pending events‘ first ’ and ‘ rest ’ are internally generated eventsBad at state!29. Prepositional Production SystemState 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
33. 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)
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?
double click ?
37. Checking properties (ii)
Reversibility:
to reverse select `line'
38. Checking properties (ii)
Reversibility:
to reverse select `line'
click
39. Checking properties (ii)
Reversibility:
to reverse select `line'
click - double click
40. Checking properties (ii)
Reversibility:
to reverse select `line'
click - double click - select `graphics'
(3 actions)
N.B. not undo
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
การแปล กรุณารอสักครู่..