Dialog Design

1
Dialog Design

• CptS 443
• Human-Computer Interaction

2
Dialog Design

• What is dialog?
• Structure of a conversation
• Language of interaction
• Lexical
• characters, icons, keys
• Syntactic
• order of keystrokes, clicks
• Semantic
• meaning of keystrokes, clicks

Dialog
3
Goal of Dialog Design
4
Drawing a Polygon
5
Diagram Notations

• How do we describe dialogs?
• State transition networks
• Petri nets
• State charts
• Flow charts
• JSD diagrams

6
State Transition Networks
State
Other State
articulation
presentation
7
Example STN

• Drawing a polygon

close
start
click
double click
draw polygon
rubber band
vertex
click
rubber band
8
Hierarchical STN
Draw polygon
click polygon button
draw
indent polygon button
click circle button
Draw circle
indent circle button
click curve button
Draw curve
indent curve button
9
Concurrent Dialogs
no bold
click B
bold
toggle B
10
Escape/Undo
11
Help
help
F1
F1
help
12
Petri Nets

• Reasoning for concurrent activities
• State transition network - places
• Counters
• Indicate where user is in state diagram
• Transitions
• switches that allow state to change

13
State Charts

• Visually specify complex reactive systems
• State transition network
• Hierarchy of STNs
• organized as charts
• H designates states remembered

14
Flow Charts

• How can flow charts indicate dialog?
• Boxes indicate output language
• Diamonds indicate input choices
• Ellipses indicate states

15
Jackson Structured Design Diagrams

• Hierarchical Task Analysis meets dialog design
• Notation
• o - optional elements
• - iteration
• assumed order

16
Textual Notations

• Forming a dictionary of articulation and
  presentation
• BNF
• click click click-click
• Production rules, CFG
• CSP event algebras

17
Production Rules

• Context free grammar
• Rules/Productions A-gtB, if A then B
• Structure
• Event oriented
• State oriented

18
Event Oriented CFG

• Notation
• Articulation - first letter uppercase
• Core - first letter lowercase
• Presentation - ltbracketedgt
• Sample
• nobold Click-B-btn -gt bold ltindent B btngt
• Different than book!!!
• Ok to have two symbols on left

19
Event Oriented Example
1. C-poly-btn -gt start ltindent poly btngt 2.
start C-point -gt edge ltfix pointgt ltdash line to
ptrgt 3. edge C-point -gt edge ltdraw linegt ltdash
line to ptrgt 4. edge D-point -gt ltdraw linegt
ltclose polygongt ltunindent poly-btngt
C-poly-btn C-point C-point D-point start ltindent
poly btngt C-point C-point D-point (1) ltindent
poly btngt edge ltfix pointgt ltdash line to ptrgt
C-point D-point (2) ltindent poly buttongt ltfix
pointgt ltdash line to ptrgt edge ltdraw linegt
ltdash line to ptrgt D-point (3) ltindent poly
buttongt ltfix pointgt ltdash line to ptrgt ltdraw
linegt ltdash line to ptrgt ltdraw linegt ltclose
polygongt (4)
20
State Oriented CFG

• Propositional production system (PPS)
• Maintain states in memory
• similar to CCT
• System state organized into...
• attributes, each of which takes one of several
• values

21
State Oriented Example
Mouse reset, sel-poly, click,
click-click Poly-state nopoly, start,
edge Rubber-band snap, stretch Draw nodraw,
draw (resets to nodraw after each draw)
1. sel-poly -gt reset start stretch 2. click
start -gt reset edge 3. click edge -gt reset
draw 4. click-click edge -gt reset draw draw snap
nopoly
22
Context Sensitive Grammars

• Rules fire conditionally
• AB -gt C
• if A B then C
• Example
• select-bold BOLDoff -gt BOLDon
• select-bold BOLDon -gt BOLDoff

23
Event Algebras

• Manage concurrent processes
• Communicating Sequential Processes
• Symbols
• definition
• -gt event sequence
• process sequence
• choice
• ? user input
• concurrent processes

24
Example

• B-toggle
• sel-B? -gt b-on -gt sel-B? -gt b-off -gt B-toggle
• I-toggle
• sel-I? -gt i-on -gt sel-I? -gt i-off -gt I-toggle
• U-toggle
• sel-U? -gt u-on -gt sel-U? -gt u-off -gt U-toggle
• Style B-toggle I-toggle U-toggle