Desain dan Notasi Dialog Desain dan Notasi Dialog

  • Slides: 51
Download presentation
Desain dan Notasi Dialog

Desain dan Notasi Dialog

Desain dan Notasi Dialog ¨ Diagrammatik n ¨ Tekstual n n formal tata bahasa,

Desain dan Notasi Dialog ¨ Diagrammatik n ¨ Tekstual n n formal tata bahasa, aturan produksi, CSP Dialog terkait dengan ¨ ¨ n keadaan transisi jaringan, diagram JSD, diagram alir (flowchart) 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

Apa itu Dialog? n percakapan antara dua pihak atau lebih ¨ biasanya n kooperatif

Apa itu Dialog? n percakapan antara dua pihak atau lebih ¨ biasanya n kooperatif dalam antarmuka pengguna ¨ mengacu pada struktur interaksi ¨ tingkat sintaksis manusia-komputer n ('percakapan‘) Tingkat ¨ leksikal - bentuk ikon, tombol ditekan aktual ¨ sintaksis - order input dan output ¨ efek semantik - pada aplikasi internal / data

dialog manusia yang terstruktur n n manusia-komputer dialog yang sangat terbatas beberapa dialog manusia-manusia

dialog manusia yang terstruktur n n 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

lessons about dialogue n wedding service (jasa pernikahan) ¨ acara untuk tiga pihak yang

lessons about dialogue n 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 …” n jika Anda mengucapkan kata-kata itu, apakah Anda menikah? ¨ hanya jika di tempat yang tepat, dengan lisensi pernikahan ¨ sintaks tidak semantik

… and more n n what if woman says “I don’t”? real dialogues often

… and more n n 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 n n 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!

notasi dialog Desain n n dialog akan dibuat dalam program dalam sistem besar yang

notasi dialog Desain n n dialog akan dibuat dalam program dalam sistem besar yang bisa kita: ¨ menganalisis dialog: n pengguna dapat selalu bisa melihat keranjang belanja saat ini ¨ perubahan platform (misalnya Windows / Mac) ¨ notasi dialog membantu kita untuk n menganalisis sistem n terpisah leksikal dari semantic n . . . Dan sebelum sistem dibangun ¨ notasi membantu kita memahami desain yang diusulkan

graphical notations state-transition nets (STN) Petri nets, state charts flow charts, JSD diagrams

graphical notations state-transition nets (STN) Petri nets, state charts flow charts, JSD diagrams

State transition networks (STN) n lingkaran – states/bagian n tanda panah - actions/events

State transition networks (STN) n lingkaran – states/bagian n tanda panah - actions/events

State transition networks events n label busur sedikit sempit karena: ¨ notation is `state

State transition networks events n label busur sedikit sempit karena: ¨ notation is `state heavy‘ ¨ peristiwa yang paling membutuhkan detail State heavy : kondisi yang berat/menjemukan/melelahkan, dsb

State transition networks states n label di lingkaran sedikit tidak informatif ¨ bagian yang

State transition networks states n label di lingkaran sedikit tidak informatif ¨ bagian yang susah diberi nama ¨ lebih mudah memvisualisasikan :

Hierarchical STNs n mengelola dialog yang complex n nama sub-dialogues select ‘graphics’ Main Menu

Hierarchical STNs n mengelola dialog yang complex n nama sub-dialogues select ‘graphics’ Main Menu select ‘text’ Graphics Submenu Text Submenu Paint Submenu select ‘paint’

Concurrent dialogues - I simple dialogue box Text Style bold example italic underline

Concurrent dialogues - I simple dialogue box Text Style bold example italic underline

Concurrent dialogues - II three toggles - individual STNs NO click on ‘bold’ bold

Concurrent dialogues - II three toggles - individual STNs NO click on ‘bold’ bold NO click on ‘italic’ italic NO u’line toggles: beralih click on ‘underline’ bold italic u’line underline

Concurrent dialogues - III bold and italic combined Text Style NO click on ‘bold’

Concurrent dialogues - III bold and italic combined Text Style NO click on ‘bold’ style only click on ‘italic’ italic only bold click on ‘bold’ bold italic example bold italic underline

Concurrent dialogues - IV all together - combinatorial explosion NO ‘bold’ bold style only

Concurrent dialogues - IV all together - combinatorial explosion NO ‘bold’ bold style only example ‘underline’ ‘italic’ u’line ‘bold’ only bold u’line ‘italic’ italic Text Style ‘bold’ only bold italic ‘underline’ italic u’line ‘italic’ ‘bold’ bold italic u’line bold italic underline

escapes n ‘back’ in web, escape/cancel keys ¨ perilaku yang serupa di mana-mana ¨

escapes n ‘back’ in web, escape/cancel keys ¨ perilaku yang serupa di mana-mana ¨ berakhir dengan pekerjaan yang ruwet n dihindari select ‘graphics’ Graphics Submenu ESC normal finish e. g. on high level diagram ‘normal’ untuk keluar dari masing-masing sub menu plus separate escape arc active ‘everywhere’ in submenu Main Menu select ‘text’ Text Submenu ESC normal finish Paint Submenu select ‘paint’ ESC normal finish

help menus n masalah serupa hampir sama di mana-mana ¨ tapi kembali ke titik

help menus n 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 ¨ from Menu Circle 1 click on centre rubber band press HELP button Help Subsystem Circle 2 click on circumference draw circle press HELP button Help Subsystem Finish

Petri nets n n one of the oldest notations in computing! flow graph: ¨

Petri nets n n one of the oldest notations in computing! flow graph: ¨ places ¨ transitions ¨ counters n several counters allowed ¨ concurrent n – a bit like STN states – a bit like STN arcs – sit on places (current state) dialogue states used for UI specification ¨ tool support – Petshop Concurrent=berbarengan (ICO at Toulouse)

Petri net example Bold On user presses ‘Bold’ T 1 T 2 Bold Off

Petri net example Bold On user presses ‘Bold’ T 1 T 2 Bold Off user actions represented as a new counter transition ‘fires’ when all input places have counters Italic On T 3 user presses ‘Italic’ T 4 Italic Off

State charts used in UML n extension to STN n ¨ hierarchy ¨ concurrent

State charts used in UML n extension to STN n ¨ hierarchy ¨ concurrent sub-nets ¨ escapes n OFF always active ¨ history n link marked H goes back to last state on re-entering subdialogue Standby ON OFF RESET Channel Sound 1 SEL On 2 MUTE SEL Off 3 SEL 4 H

Flowcharts n n n familiar to programmers boxes - process/event - not state use

Flowcharts n n n familiar to programmers boxes - process/event - not state use for dialogue (not internal algorithm) Delete D 1 Please enter employee no. : ____ C 1 read record Delete D 2 Delete Name: Alan Dix Dept: Computing delete? (Y/N): _ Please enter Y or N C 2 answer? Y N C 3 delete record Finish D 3 other Finish

it works! n n formal notations – too much work? COBOL transaction processing ¨

it works! n n formal notations – too much work? COBOL transaction processing ¨ event-driven – like web interfaces ¨ programs structure ≠ dialogue structure n used dialogue flow charts with clients ¨ transform to code ¨ systematic testing ¨ 1000% productivity gain Delete D 1 Please enter employee no. : ____ C 1 read record Delete D 2 Delete Name: Alan Dix Dept: Computing delete? (Y/N): _ D 3 delete? (Y/N): _ Please enter Y or N ¨ discuss n formalism saves time!! C 2 answer? Y other N Finish C 3 delete record Finish

JSD diagrams n for tree structured dialogues ¨ kurang ¨ terlalu expressive Personnel Record

JSD diagrams n for tree structured dialogues ¨ kurang ¨ terlalu expressive Personnel Record System luas login add employee record transaction change employee record * logout display employee record delete employee record

textual notations grammars production rules CSP and event algebras

textual notations grammars production rules CSP and event algebras

Textual - Grammars n Regular expressions sel-line click* dble-click n compare with JSD n

Textual - Grammars n Regular expressions sel-line click* dble-click n compare with JSD n n n same computational model different notation BNF expr : : = empty | atom expr | '(' expr ')' expr n n more powerful than regular exp. or STNs Still NO concurrent dialogue

Production rules n Unordered list of rules: if condition then action ¨ condition based

Production rules n Unordered list of rules: if condition then action ¨ condition based on state or pending events ¨ every rule always potentially active n n Good for concurrency Bad for sequence

Event based production rules Sel-line first C-point first rest C-point rest D-point rest <

Event based production rules Sel-line first C-point first rest C-point rest D-point rest < draw line > n Note: ¨ events added to list of pending events ¨ ‘first’ and ‘rest’ are internally generated events n Bad at state!

Prepositional Production System n State based n Attributes: Mouse: { mouse-off, select-line, click-point, double-click

Prepositional Production System n State based n Attributes: Mouse: { mouse-off, select-line, click-point, double-click } Line-state: { menu, first, rest } n 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 n Bad at events!

CSP and process algebras n used in Alexander's SPI, and Agent notation n good

CSP and process algebras n used in Alexander's SPI, and Agent notation n good for sequential dialogues Bold-tog = select-bold? bold-on select-bold? bold-off Bold-tog Italic-tog =. . . Under-tog =. . . n and concurrent dialogue Dialogue-box = Bold-tog || Italic-tog || Under-tog n but causality unclear

Dialogue Notations Summary n Diagrammatic n n Textual n n STN, JSD, Flow charts

Dialogue Notations Summary n Diagrammatic n n Textual n n STN, JSD, Flow charts grammars, production rules, CSP Issues n n event base vs. state based power vs. clarity model vs. notation sequential vs. concurrent

Semantics Alexander SPI (i) n Two part specication: n Event. CSP - pure dialogue

Semantics Alexander SPI (i) n Two part specication: n Event. CSP - pure dialogue order n Event. ISL - target dependent semantics n dialogue description - centralised n syntactic/semantic trade-off - tollerable

Semantics Alexander SPI (ii) n Event. CSP Login = login-mess -> get-name -> Passwd

Semantics Alexander SPI (ii) n Event. CSP Login = login-mess -> get-name -> Passwd = passwd-mess -> (invalid -> Login [] valid -> Session) n Event. ISL 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)

Semantics - raw code n event loop for word processor n dialogue description -

Semantics - raw code n event loop for word processor n dialogue description - very distributed switch ( ev. type ) { case button_down: if ( in_text ( ev. pos ) ) { mode = selecting; mark_selection_start(ev. pos); }. . . n syntactic/semantic trade-off - terrible! 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 */

Action properties n completeness n n n determinism n n n missed arcs unforeseen

Action properties n completeness n n n determinism n n n missed arcs unforeseen circumstances several arcs for one action deliberate: application decision accident: production rules nested escapes consistency n n same action, same effect? modes and visibility

Checking properties (i) n completeness ¨ double-click in circle states? double click ?

Checking properties (i) n completeness ¨ double-click in circle states? double click ?

Checking properties (ii) n Reversibility: ¨ to reverse select `line'

Checking properties (ii) n Reversibility: ¨ to reverse select `line'

Checking properties (ii) n Reversibility: ¨ to reverse select `line' ¨ click

Checking properties (ii) n Reversibility: ¨ to reverse select `line' ¨ click

Checking properties (ii) n Reversibility: ¨ to reverse select `line' ¨ click - double

Checking properties (ii) n Reversibility: ¨ to reverse select `line' ¨ click - double click

Checking properties (ii) n Reversibility: ¨ to reverse select `line' ¨ click ¨ (3

Checking properties (ii) n Reversibility: ¨ to reverse select `line' ¨ click ¨ (3 n - double click - select `graphics' actions) N. B. not undo

State properties n n n reachability n can you get anywhere from anywhere? n

State properties n n n reachability n can you get anywhere from anywhere? n and how easily reversibility n can you get to the previous state? n but NOT undo dangerous states n some states you don't want to get to

Dangerous States n word processor: two modes and exit F 1 F 2 Esc

Dangerous States n word processor: two modes and exit F 1 F 2 Esc - changes mode - exit (and save) - no mode change Esc edit F 1 menu F 2 but. . . Esc resets autosave exit

Dangerous States (ii) n n exit with/without save dangerous states duplicate states - semantic

Dangerous States (ii) n n exit with/without save dangerous states duplicate states - semantic distinction edit F 1 any update edit F 1 -F 2 - exit with save F 1 -Esc-F 2 - exit with no save menu F 2 exit Esc F 1 menu Esc F 2 exit

Lexical Issues n visibility differentiate modes and states n annotations (penjelasan) to dialogue n

Lexical Issues n visibility differentiate modes and states n annotations (penjelasan) to dialogue n n style command - verb noun n mouse based - noun verb n n layout n tidak sekedar penampilan

layout matters n word processor - dangerous states edit F 1 any update n

layout matters n word processor - dangerous states edit F 1 any update n old keyboard - OK Esc tab F 1 F 2 F 3 F 4 . . edit menu . . . exit Esc F 1 menu Esc 1 F 2 exit

layout matters n new keyboard layout Esc F 1 intend F 1 -F 2

layout matters n new keyboard layout Esc F 1 intend F 1 -F 2 (save) finger catches Esc F 2 F 3 . . . edit F 1 any update edit menu F 2 exit Esc F 1 menu Esc F 2 exit

layout matters n new keyboard layout Esc F 1 F 2 F 3 .

layout matters n new keyboard layout Esc F 1 F 2 F 3 . . . intend F 1 -F 2 (save) edit F 1 menu F 2 exit finger catches Esc F 1 -Esc-F 2 - disaster! any update edit Esc F 1 menu Esc F 2 exit

Dialogue Analysis - Summary n Semantics and dialogue n n Properties of dialogue n

Dialogue Analysis - Summary n Semantics and dialogue n n Properties of dialogue n n n attaching semantics distributed/centralised dialogue description maximising syntactic description action properties: completeness, determinism, consistency state properties: reachability, reversibility, dangerous states Presentation and lexical issues n n visibility, style, layout N. B. not independent of dialogue

Digital watch – User Instructions n two main modes n limited interface - 3

Digital watch – User Instructions n two main modes n limited interface - 3 buttons n button A changes mode

Digital watch – User Instructions n dangerous states • n guarded … by two

Digital watch – User Instructions n dangerous states • n guarded … by two second hold completeness distinguish depress A and release A • what do they do in all modes? •

Digital watch – Designers instructions and. . . that’s just one button

Digital watch – Designers instructions and. . . that’s just one button