User Interface SpecificationThese slides are taken from the Dix textbookDialogue Notations - 1Slide 4What is dialogue?Dialogues and ScriptsDialogue Design Notationsgraphical notationsState transition networks (STN)Hierarchical STNsConcurrent dialogues - I simple dialogue boxConcurrent dialogues - II three toggles - individual STNsConcurrent dialogues - III bold and italic combinedConcurrent dialogues - IV all together - combinatorial explosionPetri netsPetri net exampleState chartsFlowchartsJackson Structured Design DiagramsTextual - GrammarsProduction rulesEvent-Based Production RulesState-Oriented Production SystemState PropertiesDangerous States - 1Dangerous States - 2Lexical IssuesLayout Matters - 1Layout Matters - 2Layout Matters - 3State Definition ProblemsToo Little StateToo Much StateAction Definition ProblemsSystem ModelsSystem Model TypesRelationship with dialogueIronyFormal MethidsUses of SE Formal NotationModel-based MethodsModel-Based MethodsMathematics and programsDrawing Program Exampledefine your own types… yet another type definitionuse them to define stateinvariants and initial stateDefining operations… another operationdisplay/presentationInterface Issues for StatesAlgebraic notationsSlide 54Issues for algebraic notationsExtended Logics - 1Extended Logics - 2Temporal logicsExplicit timeDeontic logicsIssues for Extended Logics - 1Issues for Extended Logics - 2Interaction ModelsPIE ModelPIE Model – User InputPIE Model – System ResponsePIE Model – ConnectionFormallyExpressing PropertiesObservability & Predictabilitywhat you get at the printerstronger – what is in the stateRelaxing the propertyReachability and UndoProving things – UndoLessonIssues for PIE properties - 1Slide 78Dealing with the MouseEvents and StatusInterstitial Behaviourformalized …status–change eventsmaking everything continuous01/13/19 1User Interface SpecificationCIS 577Bruce R. MaximUM-Dearborn01/13/19 2These slides are takenfrom the Dix textbook01/13/19 3Dialogue Notations - 1•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 looks01/13/19 4Dialogue Notations - 1•Formal descriptions can be analyzed–for inconsistent actions–for difficult to reverse actions–for missing actions–for potential miskeying errors01/13/19 5What 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/data01/13/19 6Dialogues and Scripts•Scripts describe the standard way that agents interact with one another (e.g. restaurant script)•Only apply when preconditions are satisfied and then results are predictable•Allows agents to focus on atypical events•Allows agents to infer facts during normal interactions01/13/19 7Dialogue Design Notations•dialogue gets buried in the program•in a big system can we:–analyze the dialogue:•can the user always get to see current shopping basket?–change platforms (e.g. Windows/Mac)–dialogue notations helps us to•analyze systems•separate lexical from semantoc •… and before the system is built–notations help us understand proposed designs01/13/19 8graphical notationsstate-transition nets (STN)Petri nets, state chartsflow charts, JSD diagrams01/13/19 9State transition networks (STN)•circles - states•arcs - actions/eventsStart MenuCircle 1 Circle 2 FinishLine 1 Line 2 Finishselect 'circle'select 'line'click on centreclick on circumferencedraw circlerubber bandrubber band draw last lineclick on first pointdouble clickclick on pointdraw a line01/13/19 10Hierarchical STNs•managing complex dialogues•named sub-dialoguesGraphics SubmenuText SubmenuPaint SubmenuMainMenuselect ‘graphics’select ‘paint’select ‘text’01/13/19 11Concurrent dialogues - Isimple dialogue boxText Stylebolditalicunderlineexamp le01/13/19 12Concurrent dialogues - II three toggles - individual STNsbolditalicunderlineNOboldboldclick on ‘bold’NOitalicitalicclick on ‘italic’NOu’lineu’lineclick on ‘underline’01/13/19 13Concurrent dialogues - IIIbold and italic combinedText StylebolditalicunderlineexampleNOstyleboldonlyclick on ‘bold’clickon‘italic’italiconlybolditalicclick on ‘bold’clickon‘italic’01/13/19 14Concurrent dialogues - IVall together - combinatorial explosion‘italic’NOstyleboldonly‘bold’italiconlybolditalic‘bold’‘italic’u’lineonlyboldu’line‘bold’italicu’linebolditalicu’line‘bold’‘italic’‘italic’‘underline’ ‘underline’‘underline’‘underline’Text Stylebolditalicunderlineexample01/13/19 15Petri 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–tool support – Petshop01/13/19 16Petri net exampleBold OnItalic OnBold OffItalic Offuser presses‘Italic’user presses‘Bold’T1 T2T3T4user actionsrepresentedas a new countertransition ‘fires’when all inputplaces have counters01/13/19 17State charts•used in UML•extension to STN–hierarchy–concurrent sub-nets–escapes•OFF always active–history•link marked Hgoes back to laststate on re-enteringsubdialogueOnOff1234SoundChannelHSELSELSELSELMUTEStandbyOFFONRESET01/13/19 18Flowcharts•familiar toprogrammers•boxes- process/event- not state•use for dialogue(not internal algorithm)Delete D1Please enteremployee no.: ____Delete D3Name: Alan DixDept: Computingdelete? (Y/N): _Please enter Y or NDelete D2Name: Alan DixDept: Computingdelete? (Y/N): _answer?C2FinishFinishread recordC1delete recordC3otherNY01/13/19 19Jackson Structured Design Diagrams•for tree structured dialogues–less expressive–greater claritytransactionloginaddemployeerecordchangeemployeerecorddisplayemployeerecordlogoutPersonnelRecordSystemdeleteemployeerecord*01/13/19 20Textual - Grammars•Regular expressionssel-line click click* dble-click•BNFexpr ::= empty |