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

Dialog is linked semantics presentation

Benefits of formal descriptions

Hi

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

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

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

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

Menu

C1

L1

Click on center

rubberband

Select ‘line’

highlight ‘line’

Select ‘circle’

highlight ‘circle’

Click on 1st point

rubberband

C2

L2

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

rubberbandL2 Double click

draw last lineFinish

Click on point

drawline and rubberband from new point

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

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

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

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

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

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

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

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

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

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