Dialog Notations and Design

1. Dialog Notations and Design Material from Authors of Human Computer Interaction Alan Dix, et al

2. Overview Dialog is the syntactic level of human-computer interaction (like a script, except users and computer have more choices). • Notations for dialog description • diagrammatic • textual • Dialog is linked • semantics • presentation • Benefits of formal descriptions Hi

3. What is dialog? • Much human dialog unstructured - grammar rules stop at sentence level (and sometimes before). • Examples of structured form of human conversation: script for play and marriage service. • Dialog with a computer is relatively structured and constrained (unlike in Star Trek).

4. What is dialog? • Structure of the conversation between the user and computer system. • Languages have 3 levels • lexical • syntactic <-- most user interfaces • semantic • Describe language at syntactic level, but…must be linked to semantics for implementation.

5. Dialog Design Notations • Notations for human-computer dialogs have roots in other branches of computing. • We do NOT use a programming language • Separation of dialog makes analysis easier • If separate from convoluted logic and calculations • Can change interface style • Design dialog prior to programming

6. Diagrammatic Notations • Heavily used • At a glance we can see structure of dialog • Problems with extensive or complex dialog structures • Many variants • State transition networks <-- only one I’ll discuss • Petri nets • Harel’s state charts • flow diagrams • JSD diagrams

7. State Transition Networks • States - where system is waiting for next input (unless we are at finish) • Arrows - transitions between states, labeled with the user action that triggers the transition and response the system will make C1 C2 Select ‘circle’ highlight ‘circle’ Click on center rubberband Menu L2 L1 Click on 1st point rubberband Select ‘line’ highlight ‘line’

8. State Transition Networks • Multiple choices by user can be illustrated, as seen with menu choice • …and with polyline. • Also illustrates iteration - which may involve one or more states. L2 Finish Click on 1st point rubberband Double click draw last line Click on point drawline and rubberband from new point

9. State Transition Networks • Disadvantages • many choices --> combinatorial explosion of states • escapes and help • escapes require arrows from every state back to main menu • help requires return back to state user was in before requesting help - subdialog hanging off every state • don’t represent concurrent parts of dialog

10. Textual Dialog Notations • Grammars • Production rules • CSP and event algebras (good for concurrent dialogs) • parameterized and dynamic interleaved dialog structure • extend other textual dialog notations • My CS1 dialog notation

11. Textual Design Notations • More on Grammars • BNF • sequence, choice, iteration-through recursion • focus on user’s actions rather than states • regular expressions • Example: consider polyline select-line click click* double-click

12. Textual Design Notations • More on my CS1 notation Interface: Input: All input from keyboard: 1. Prompt: “Please enter hours: “ input: <hours>, int 2. Prompt: “Please enter rate of pay: “ input: <rate>, double Output:All output to screen: 1. “Hours must be between 0 and 40.” 2. “Pay amount is $” <amount>, double

13. Dialog Semantics • Purpose of dialog description • communicate with other designers • tool for thought early in design • For semantics we • leave reader to infer • annotate dialog notations with intended meaning of actions • formalize • for a contract or prototype

14. Notation-specific semantics • Augmented transition networks (ATNs) • Form of STNs • Assumes set of registers which can be set and tested before transition • if condition is true and event occurs, follow arc • They can be used to communicate with application and to hold values • number times a wrong pin is entered • hold values of mouse clicks to draw line

15. Notation-specific semantics • Links to programming languages • dialog notation ‘attached’ to conventional programming language • Example: Input Tools • uses regular expressions attached to C • intermingle with code • uses global variables

16. Notation-specific semantics • Links to formal specification • SPI (Specifying and Prototyping Interaction) • executable specification/prototyping language • Two parts • eventCSP - dialog notation based on CSP • eventISL - describes the dialog semantics • for each event there is a corresponding event definition in event ISL • uses global variables

17. Centralized and distributed dialog description • Centralized • separates semantic and syntax parts • allows dialog designer to examine dialog in isolation • SPI is example • Distributed • parts of syntax and semantics together • parts of interaction can be examined in detail (syntactically and semantically) • Input Tools is example

18. Dialog Analysis and Design • Used to uncover potential usability problems according to Ch 7’s principles • Can analyze three ways • Action properties - focuses on user actions and whether they are adequately specified and consistent • Dialog state properties - can you get to the states or not • Presentation and Lexical properties - what do things look like and what keys do what

19. Dialog Analysis and Design : Action Properties • Types of common user actions • select from main menu, pop-up menu, click, double-click • Most states in STN have only a few actions • “Odd user actions” • What if we click on drawing surface while at the main menu? • Designer wants to detect these (not implementer or user)

20. Action properties • Completeness • Take care of unforeseen events • unspecified behavior will be ignored (simple) • treat new selection as confirmation of completion of previous action (a double-click for polyline) • Non-determinism • find several arcs labeled with same action coming out of a state • Consistency • same action in different circumstances • tab key when entering text or navigating a dialog box

21. Dialog Analysis and Design : State Properties • Reachability • Can we get to desired state easily from current state • Basic check - Fully connected STN • More - “infinite loops” • Reversibility (undo) • Go back to a previous state • Dangerous states • Example: reformatting hard drive • Make them difficult, ask for confirmation, required user action to be inconsistent

22. Dialog Analysis and Design: Presentation and Lexical properties • Abstraction • enter point vs. click on drawing surface • Label modes • minimize modes • make them visually distinct • improves visibility, observability and predictability • Use appropriate dialog style for type of interface • command-based interface: use verb-object • WIMP based: object-verb

23. Summary • Dialog can be difficult to analyze if we do not have separate description • Two categories: diagrammatic and textual • STN and BNF • Some notations essentially equivalent, some more expressive • BNF - recursively nested dialogs • concurrency • Connection between syntax and semantics • Properties of dialogs • action properties, state properties, presentation