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