Dialogue Notations and Design

Slides:



Advertisements
Similar presentations
Interaction Design: Visio
Advertisements

Chapter 16 dialogue notations and design. Dialogue Notations and Design Dialogue Notations –Diagrammatic state transition networks, JSD diagrams, flow.
 Use the Left and Right arrow keys or the Page Up and Page Down keys to move between the pages. You can also click on the pages to move forward.  To.
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.
Heim, Chapters and Dix et al, Chapter 15 Lecture 3 Modeling and Documenting Requirements.
Office 2003 Post-Advanced Concepts and Techniques M i c r o s o f t Excel Project 7 Using Macros and Visual Basic for Applications (VBA) with Excel.
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.
PIC Programming with Logicator
Guide to Oracle10G1 Introduction To Forms Builder Chapter 5.
Michael Donovan, River Campus Libraries – 12/03 DocuShare Overview and Training.
A Guide to Oracle9i1 Introduction To Forms Builder Chapter 5.
Statecharts: A Visual Formalism for Complex Systems Jeff Peng Model-based Design Lab.
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.
Creating, Formatting, and Editing a Word Document with a Picture
How to Use Microsoft PowerPoint What is PowerPoint? Presentation software that allows you to create slides, handouts, notes, and outlines. Slide.
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)
Module 3 Productivity Programs Common Features and Commands Microsoft Office 2007.
MS-Access XP Lesson 5. Creating a Query with Expression Builder Eg. Consider the following table. Table Name: Overtime Fields & Data types: Emp No (Number),
COMPREHENSIVE Excel Tutorial 8 Developing an Excel Application.
Microsoft Visual Basic 2012 CHAPTER TWO Program and Graphical User Interface Design.
Automating Tasks with Visual Basic. Introduction  When can’t find a readymade macro action that does the job you want, you can use Visual Basic code.
PowerPoint. Basic Vocabulary Slide - Presentation - Slide layout – ► ► ► ► a single page in PowerPoint all the slides for a speech all the slides for.
Welcome to CIS 083 ! Events CIS 068.
Department of Mechanical Engineering, LSUSession VII MATLAB Tutorials Session VIII Graphical User Interface using MATLAB Rajeev Madazhy
Introduction to Visual Basic. Quick Links Windows Application Programming Event-Driven Application Becoming familiar with VB Control Objects Saving and.
Microsoft Access Lesson 1 Lexington Technology Center February 11, 2003 Bob Herring On the Web at
This tutorial teaches Microsoft Word basics. Although knowledge of how to navigate in a Windows environment is helpful, this tutorial was created for.
Database Applications – Microsoft Access Lesson 3 Creating and Modifying Forms and Reports Updated 09/13 35 slides in presentation.
University of Sunderland CIF 102/FIF102 Fundamentals of DatabasesUnit 15 Programming in Microsoft Access using VBA Using VBA to add functionality.
Chapter Two Creating a First Project in Visual Basic.
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.
1 Creating Windows GUIs with Visual Studio. 2 Creating the Project New Project Visual C++ Projects Windows Forms Application Give the Project a Name and.
PowerPoint Practice Exercise 1 1.Save this file in your AV-TECH Folder as PowerPoint Practice Exercise 1. 2.Open this file in PowerPoint. 3.Edit each slide.
Slide 1 Project 1 Task 2 T&N3311 PJ1 Information & Communications Technology HD in Telecommunications and Networking Task 2 Briefing The Design of a Computer.
Fall 2003Sylnovie Merchant, Ph.D. ACCESS Tutorial Note: The purpose of this tutorial is to provide an introduction to some of the functions of ACCESS in.
Dialogue Notations and Design zDialogue Notations yDiagrammatic xstate transition networks, JSD diagrams, flow charts yTextual xformal grammars, production.
Programming Logic and Design Seventh Edition Chapter 12 Event-Driven GUI Programming, Multithreading, and Animation.
Chapter 4: Do-It-Yourself Designing (Designing Interfaces)
Excel Tutorial 8 Developing an Excel Application
June 17, 2009 Office 2007 Tips & Tricks.
Microsoft Visual Basic 2005: Reloaded Second Edition
Working in the Forms Developer Environment
Chapter 2 Hix & Hartson Guidelines.
Exploring Microsoft Access 97
An Introduction to Computers and Visual Basic
System Design and Modeling
Program and Graphical User Interface Design
Guide To UNIX Using Linux Third Edition
Creating, Formatting, and Editing a Word Document with Pictures
An Introduction to Computers and Visual Basic
Design AH Computing.
Program and Graphical User Interface Design
Database Applications – Microsoft Access
Working with Headers and Footers
Database Applications – Microsoft Access
PowerPoint Lesson 2 Creating and Enhancing PowerPoint Presentations
Shelly Cashman: Microsoft Word 2016
Computer Basics.
An Introduction to Computers and Visual Basic
European Computer Driving Licence
dialogue notations and design
1 Word Processing Part I.
PowerPoint Practice Exercise
Wings 2.0 Business Flow Reference
Presentation transcript:

Dialogue Notations and Design Diagrammatic state transition networks, JSD diagrams, flow charts Textual formal grammars, production rules, CSP Issues Dialogue Analysis Semantics and dialogue Properties of dialogue Presentation and lexical issue Example - Digital watch

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

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)

for tree structured dialogues 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 *

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

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 NO style bold only ‘bold’ ‘underline’ ‘underline’ ‘italic’ ‘italic’ u’line only bold ‘bold’ italic ‘italic’ ‘italic’ italic only bold ‘bold’ ‘underline’ ‘underline’

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's 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

word processor: two modes and exit 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 to dialogue style command - verb noun mouse based - noun verb layout not just appearance ...

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

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