Dialog notations and design
1 / 23

Dialog Notations and Design - PowerPoint PPT Presentation

  • Uploaded on

Dialog Notations and Design. Material from Authors of Human Computer Interaction Alan Dix, et al. 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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about ' Dialog Notations and Design' - ahmed-lott

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Dialog notations and design

Dialog Notations and Design

Material from

Authors of Human Computer Interaction

Alan Dix, et al


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


What is dialog
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).

What is dialog1
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.

Dialog design notations
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

Diagrammatic notations
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

State transition networks
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



Select ‘circle’

highlight ‘circle’

Click on center





Click on 1st point


Select ‘line’

highlight ‘line’

State transition networks1
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.



Click on 1st point


Double click

draw last line

Click on point

drawline and rubberband from new point

State transition networks2
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

Textual dialog notations
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

Textual design notations
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

Textual design notations1
Textual Design Notations

  • More on my CS1 notation


    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

Dialog semantics
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

Notation specific semantics
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

Notation specific semantics1
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

Notation specific semantics2
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

Centralized and distributed dialog description
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

Dialog analysis and design
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

Dialog analysis and design action properties
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)

Action properties
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

Dialog analysis and design state properties
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

Dialog analysis and design presentation and lexical properties
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

Summary properties

  • 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