Desain dan Notasi Dialog

Slides:



Advertisements
Presentasi serupa
Pseudocode & Flowchart
Advertisements

DESAIN DAN NOTASI DIALOG
2. Introduction to Algorithm and Programming
Pengenalan Powerpoint
Interaksi Manusia dan Komputer
Penjelasan Umum Ms. Powerpoint
Teori, prinsip dan pedoman IMK
1 DATA STRUCTURE “ STACK” SHINTA P STMIK MDP APRIL 2011.
Dialogue Notations and design
Interesting Interfaces Where We Are At Where We Are Going Contextual Inquiry – Ethnographic Techniques to collect raw data Prototype – Application.
Testing Implementasi Sistem Oleh :Rifiana Arief, SKom, MMSI
Arsitektur Data Warehouse
The steps to work with Power Point click Start> All Programs> Microsoft Office> Microsoft Office PowerPoint2007 klik Start>All Programs>Microsoft.
Dialogue Notation and Design
Pokok bahasan: State Diagram State Substate Events dan transition State Diagram Developing Software Woth UML Booch Jacobson Rumbaugh Addison-Wesley.
Interaksi Manusia Komputer
1 Pertemuan 21 Function Matakuliah: M0086/Analisis dan Perancangan Sistem Informasi Tahun: 2005 Versi: 5.
PERTEMUAN KE-6 UNIFIED MODELLING LANGUAGE (UML) (Part 2)
1 Pertemuan 11 Function dari System Matakuliah: M0446/Analisa dan Perancangan Sistem Informasi Tahun: 2005 Versi: 0/0.
HTML Universitas Muhammadiyah Surakarta Yogiek Indra K.
F ORM Bayu Priyambadha, S.Kom. F ORM Form is the interface (user interface) for users to communicate with the application system. Each posted data from.
-Do you have a close friend? Does she/he have a problem? -What do you say when she/he tells her/his problem? - Did you ever come to your friend house?
Cursor MI2163 Dasar Pemrograman Basis Data. Introduction Cursor merupakan suatu variabel yang digunakan untuk menampung hasil query yang terdiri atas.
3 Ways to Record PowerPoint From within PowerPoint From within Camtasia Studio.
Jartel, Sukiswo Sukiswo
Microsoft Word.
Desain dan Notasi Dialog
SEKOLAH TINGGI MANAJEMEN INFORMATIKA & KOMPUTER
Program Studi Teknologi Game Politeknik Elektronika Negeri Surabaya
Pemrograman User Interface
MENAMBAH ANIMASI, SOUND, MOVIE
OOAD – TI S1 Defri Kurniawan UDINUS
ANALISIS DAN PERANCANGAN BERORIENTASI OBJEK
DAN PERANCANGAN DIALOG
Interaksi Manusia dan Komputer (Desain dan Notasi Dialog)
ANALISIS & DESAIN SISTEM
Pertemuan Keduabelas Desain dan Notasi Dialog
Teknik Pengujian Software
Interaksi Manusia dan Komputer
ANALISIS & DESAIN BERORIENTASI OBJEK AGUS WAHYUDDIN, ST, M.KOM
How to Set Up AT&T on MS Outlook ATT is a multinational company headquartered in Texas. ATT services are used by many people widely across.
Why It Is Necessary to Have More Sells Through the Social Media
How Can I Be A Driver of The Month as I Am Working for Uber?
How to Pitch an Event
Suhandi Wiratama. Before I begin this presentation, I want to thank Mr. Abe first. He taught me many things about CorelDRAW. He also guided me when I.
Desain dan Notasi Dialog
Mobile Courier User Training Kramat Raya 43, Xprins Meeting Room May 8th, 2014.
Interface Design.
THE INFORMATION ABOUT HEALTH INSURANCE IN AUSTRALIA.
Algoritma & Pemrograman 1 Achmad Fitro The Power of PowerPoint – thepopp.com Chapter 3.
V ERIZON SETTINGS FOR I P HONE, A NDROID, O UTLOOK, AND W INDOWS P HONE.
HughesNet was founded in 1971 and it is headquartered in Germantown, Maryland. It is a provider of satellite-based communications services. Hughesnet.
Interface Design.
Here you'll find the complete solution about how to set up Roadrunner settings for iPhone, Android, Windows Phone and Outlook. Unable to set up Roadrunner.
 Zoho Mail offers easy options to migrate data from G Suite or Gmail accounts. All s, contacts, and calendar or other important data can be imported.
Fix problems opening Norton  Fix problems opening Norton This problem can happen after you update Norton. To fix the matter, restart the computer. Fix.
If you are an user, then you know how spam affects your account. In this article, we tell you how you can control spam’s in your ZOHO.
Right, indonesia is a wonderful country who rich in power energy not only in term of number but also diversity. Energy needs in indonesia are increasingly.
3dpptoke99r
Rank Your Ideas The next step is to rank and compare your three high- potential ideas. Rank each one on the three qualities of feasibility, persuasion,
Model Kognitif.
"More Than Words" Saying I love you, Is not the words, I want to hear from you, It's not that I want you, Not to say but if you only knew, How easy, it.
Desain dan Notasi Dialog
Dialogue Notation & Design Part-2
IMK Notasi & Desain Dialog.
Draw a picture that shows where the knife, fork, spoon, and napkin are placed in a table setting.
Politeknik Negeri Malang
2. Discussion TASK 1. WORK IN PAIRS Ask your partner. Then, in turn your friend asks you A. what kinds of product are there? B. why do people want to.
HOW TO IMPROVE YOUR PUBLIC SPEAKING SKILLS. 2 3 INIKAH YANG SERING ANDA ALAMI SAAT PRESENTASI?
3 Ways to Record PowerPoint From within PowerPoint From within Camtasia Studio.
Transcript presentasi:

Desain dan Notasi Dialog

Desain dan 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

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

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

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

… 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

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

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

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

State transition networks - events 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 label di lingkaran sedikit tidak informatif : bagian yang susah diberi nama lebih mudah memvisualisasikan

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

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

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

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

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

escapes ‘back’ in web, escape/cancel keys dihindari dari 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

click on circumference 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

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

Petri net example Bold On Italic On T1 T2 T3 T4 Bold Off Italic Off user presses ‘Bold’ user presses ‘Italic’ T1 T2 T3 T4 Bold Off Italic Off user actions represented as a new counter transition ‘fires’ when all input places have counters

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 MUTE Standby OFF ON RESET

Flowcharts familiar to programmers boxes - process/event - not state Delete D1 Please enter employee no.: ____ Delete D3 Name: Alan Dix Dept: Computing delete? (Y/N): _ Please enter Y or N Delete D2 answer? C2 Finish read record C1 delete record C3 other N Y familiar to programmers boxes - process/event - not state use for dialogue (not internal algorithm)

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 answer? C2 Finish read record C1 other N Y delete record C3

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 *

grammars production rules CSP and event algebras textual notations grammars production rules CSP and event algebras

Textual - Grammars Regular expressions compare with JSD BNF 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

if condition then action 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

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!

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!

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

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

Semantics Alexander SPI (i) Two part specication: EventCSP - pure dialogue order EventISL - target dependent semantics dialogue description - centralised syntactic/semantic trade-off - tollerable

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)

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 */

Action properties completeness determinism nested escapes consistency 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

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

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

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

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

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

State properties reachability reversibility dangerous states 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

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

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 any update

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

layout matters word processor - dangerous states old keyboard - OK ... edit exit menu F1 F2 Esc any update Esc F1 F2 F3 ... F4 1 tab

... layout matters new keyboard layout intend F1-F2 (save) finger catches Esc Esc F1 F2 F3 ... edit exit menu F1 F2 Esc any update

... 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 any update

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

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

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?

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