Chapter 16 dialogue notations and design. Dialogue Notations and Design Dialogue Notations –Diagrammatic state transition networks, JSD diagrams, flow.

Slides:



Advertisements
Similar presentations
Interaction Design: Visio
Advertisements

Introduction to Macromedia Director 8.5 – Lingo
Chapter 11 Designing the User Interface
CS0004: Introduction to Programming Visual Studio 2010 and Controls.
Chapter 16 (continued) dialogue notations and design.
Dialogue Notations and Design zDialogue Notations yDiagrammatic xstate transition networks, JSD diagrams, flow charts yTextual xformal grammars, production.
1 textual notations grammars production rules CSP and event algebras.
local structure – single screen global structure – whole site
User Training. Step 1 Press Ctrl-I or choose File > Login, this will open the Login window. Figure 1-1 shows the Login window. Figure 1-1 Login Window.
Heim, Chapters and Dix et al, Chapter 15 Lecture 3 Modeling and Documenting Requirements.
Intro to Microsoft PowerPoint 2010 Public Computer Center, Moore Memorial Library, Greene, NY.
Chapter 16 dialogue notations and design. Dialogue Notations and Design Dialogue Notations –Diagrammatic state transition networks, JSD diagrams, flow.
GUI Testing. High level System Testing Test only those scenarios and outputs that are observable by the user Event-driven Interactive Two parts to test.
Microsoft Word 2010 Lesson 1: Introduction to Word.
Discrete Interaction Design Specification Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University of Eindhoven
Visual Basic 2010 How to Program. © by Pearson Education, Inc. All Rights Reserved.2.
Visual Basic 2010 How to Program Reference: Instructor: Maysoon Bin Duwais slides Visual Basic 2010 how to program by Deitel © by Pearson Education,
Guide to Oracle10G1 Introduction To Forms Builder Chapter 5.
A Guide to Oracle9i1 Introduction To Forms Builder Chapter 5.
CMPUT 301: Lecture 25 Graphic Design Lecturer: Martin Jagersand Department of Computing Science University of Alberta Notes based on previous courses by.
Macros Tutorial Week 20. Objectives By the end of this tutorial you should understand how to: Create macros Assign macros to events Associate macros with.
Chapter 13: Designing the User Interface
Key Applications Module Lesson 12 — Word Essentials
Office 2003 Post-Advanced Concepts and Techniques M i c r o s o f t Word Project 8 Working with Macros and Visual Basic for Applications (VBA)
DEMONSTRATION FOR SIGMA DATA ACQUISITION MODULES Tempatron Ltd Data Measurements Division Darwin Close Reading RG2 0TB UK T : +44 (0) F :
Chapter Seven Advanced Shell Programming. 2 Lesson A Developing a Fully Featured Program.
Visual Basic Chapter 1 Mr. Wangler.
14 Chapter 11: Designing the User Interface. 14 Systems Analysis and Design in a Changing World, 3rd Edition 2 Identifying and Classifying Inputs and.
User Interface Elements of User Interface Group View.
Department of Mechanical Engineering, LSUSession VII MATLAB Tutorials Session VIII Graphical User Interface using MATLAB Rajeev Madazhy
Objectives Understand what MATLAB is and why it is widely used in engineering and science Start the MATLAB program and solve simple problems in the command.
Introduction to Visual Basic. Quick Links Windows Application Programming Event-Driven Application Becoming familiar with VB Control Objects Saving and.
Copyright © 2007, Oracle. All rights reserved. Managing Concurrent Requests.
Microsoft Access Lesson 1 Lexington Technology Center February 11, 2003 Bob Herring On the Web at
Automating Database Processing Chapter 6. Chapter Introduction Design and implement user-friendly menu – Called navigation form Macros – Automate repetitive.
Chapter Three The UNIX Editors. 2 Lesson A The vi Editor.
Database Applications – Microsoft Access Lesson 6A Designing Custom Forms Updated F13 24 slides in presentation 1.
CSS/417 Introduction to Database Management Systems Workshop 2.
Microsoft Visual Basic 2005: Reloaded Second Edition Chapter 2 Creating a User Interface.
Interaction Design Interaction Design - Joan Cahill - Visio Interaction Design: Visio.
This tutorial teaches Microsoft Word basics. Although knowledge of how to navigate in a Windows environment is helpful, this tutorial was created for.
© 2010 Delmar, Cengage Learning Chapter 3: Working with Symbols and Interactivity.
In the next step you will enter some data records into the table. This can be done easily using the ‘Data Browser’. The data browser can be accessed via.
 Application – another name for a program.  Interface – is what appears on the screen when the application is running.  Program Code – is instructions.
Chapter Two Creating a First Project in Visual Basic.
GUI Design Spreadsheet-Based Decision Support Systems Chapter 23: Aslı Sencer MIS 463.
Creating Graphical User Interfaces (GUI’s) with MATLAB By Jeffrey A. Webb OSU Gateway Coalition Member.
FIX Eye FIX Eye Getting started: The guide EPAM Systems B2BITS.
1 chapter 16 dialogue notations and design (pt 1).
Dialogue notation focus on STNs extract from chap 8 slides for Human Computer Interaction
Sequence Diagrams And Collaboration Diagrams HungNM.
Chapter Three The UNIX Editors.
JavaScript, Fourth Edition
McGraw-Hill/Irwin The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. Microsoft Excel 2002 Working with Data Lists.
 Given live by a presenter  Played without a presenter on a computer screen or on the Web  Slides provide a way to use text and graphics to introduce.
Dialogue Notations and Design zDialogue Notations yDiagrammatic xstate transition networks, JSD diagrams, flow charts yTextual xformal grammars, production.
When the program is first started a wizard will start to setup your Lemming App. Enter your company name and owner in the fields designated “Company Name”
Folio3 IPhone Training Session 2 Testing App on device Presenter: Imam Raza.
Key Applications Module Lesson 12 — Word Essentials Computer Literacy BASICS.
Word processing is the software package that enables you to create,edit, print and save documents for future retrieval reference. creating a document.
Dive Into® Visual Basic 2010 Express
Marlon Dumas Institute of Computer Science
Guide To UNIX Using Linux Third Edition
Marlon Dumas Institute of Computer Science
European Computer Driving Licence
dialogue notations and design
Dialogue Notations and Design
Wings 2.0 Business Flow Reference
Presentation transcript:

chapter 16 dialogue notations and design

Dialogue Notations and Design Dialogue Notations –Diagrammatic state transition networks, JSD diagrams, flow charts –Textual formal grammars, production rules, CSP 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

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

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

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

… 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

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

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

State transition networks (STN) circles - states arcs - actions/events

State transition networks - events arc labels a bit cramped because: –notation is `state heavy‘ –the events require most detail

State transition networks - states labels in circles a bit uninformative: –states are hard to name –but easier to visualise

Hierarchical STNs managing complex dialogues named 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 bolditalicunderline NO bold click on ‘bold’ NO italic click on ‘italic’ NO u’line click on ‘underline’

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’

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’ ‘underline’ Text Style bold italic underline example

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

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 circlerubber band click on centre Help Subsystem press HELP button

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

Petri net example Bold On Italic On Bold Off Italic Off user presses ‘Italic’ user presses ‘Bold’ T1T2 T3 T4 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 Sound Channel H SEL MUTE Standby OFFON RESET

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 read record C1 delete record C3 other NY

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 read record C1 other NY delete record C3

JSD diagrams for tree structured dialogues –less expressive –greater clarity transactionlogin add employee record change employee record display employee record logout Personnel Record System delete employee record *

textual notations grammars production rules CSP and event algebras

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

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  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 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 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 F1F2 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 F1F2 Esc edit exit menu F1F2 Esc any update

Lexical Issues visibility differentiate modes and states annotations to dialogue style command - verb noun mouse based - noun verb layout not just appearance...

layout matters word processor - dangerous states old keyboard - OK Esc F1F2 F3... F tab... edit exit menu F1F2 Esc edit exit menu F1F2 Esc any update

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

layout matters new keyboard layout intend F1-F2 (save) finger catches Esc F1-Esc-F2 - disaster! EscF1F2F3... edit exit menu F1F2 Esc edit exit menu F1F2 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

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