CS 407 Human Computer Interface

1
CS 407 Human Computer Interface

• Class 29
• Monday, November 01, 1999

2
Thought for the Day

• A child, like your stomach, does not need all you
  can afford to give it.
• Frank A. Clark

3
A Businessmans Dream

• The cartoon that was on this page in class was
  found at Todays Cartoon by Randy Bergen.

4
Todays Topics

• Chapter 8
• 8.1, 8.2, 8.3
• Skip almost all of chapter 9 10
• Wednesday Chapter 11

5
Chapter 8 Dialog Notations

• Dialog is the syntactic level of human-computer
  interaction.
• It is like the script of a play, but the user has
  more choices.
• (Sometimes, the computer has more choices, too!)

6
Dialog Notations (2)

• Notations used for dialog description can be
• Diagrammatic easy to read at a glance.
• Textual easier for format analysis.

7
Dialog Notations (3)

• The dialog is linked to
• The semantics of the system, what it does.
• The presentation of the system, how it looks.

8
Dialog Notations (4)

• Formal descriptions can be analyzed
• For inconsistent actions
• For difficult to reverse actions
• For missing items
• For potential miskeying errors

9
What is Dialog?

• Conversation between two parties
• Usually implies cooperation!

10
Levels of Dialog

• Lexical
• Shape of icons, keys pressed
• Syntactic
• Order structure of inputs, grammar
• Semantic
• Meaning of the conversation

11
Human Dialogs

• Structured
• Contracts, Weddings, Court,
• even ordering dinner in a restaurant
• Unstructured
• Humans do not always behave as expected!

12
Dialog Notations

• How do you represent a dialog?
• Script (as in a play)
• But how do you allow for choices?
• Flow charts
• Note Average people are turned off by flow
  charts.

13
Charts

• State transition diagrams
• JSD diagrams
• Flow charts (in the formal sense)

14
State Transition Networks

• Circles ? States
• Lines ? Transitions between states

15
Drawing Tool

• Graphics tools Draw a circle, a line or a set of
  lines.
• Menu to begin Line or Circle
• Circle Click on center, then rubber band out
  to desired radius. Click to accept.
• Line Click on beginning point. Rubber band to
  end point. Click to end.
• Polyline Draw line (above). But start next line
  from end of last line. Double click to end.

16
Drawing Tool

• Graphics tools Draw a circle, a line or a set of
  lines.
• Menu to begin Line or Circle
• Circle Click on center, then rubber band out
  to desired radius. Click to accept.
• Line Click on beginning point. Rubber band to
  end point. Double-Click to end.
• Polyline Draw line (above). But start next line
  from end of last line. Double click to end.

17
Drawing Tool STN
18
Drawing Tool STN (2)
19
Drawing Tool STN (3)
20
Hierarchical STNs
21
Formal Flow Charts
22
Formal Flow Charts (2)

• Familiar to programmers
• Not so much as before!
• Boxes are processes, not states!

23
JSD Diagrams
24
Concurrent Dialogs
25
Concurrent Dialogs

• Might need different STN for each selection!

26
Concurrent Dialogs

• Text Bold and Italic combined

27
Concurrent Dialogs

• Combinatorial explosion!
• N toggles
• 2n states!

28
Other Dialog Notations

• Escapes Help Good, but complicate the diagram
  even more!
• Petri nets State charts (8.3.6)
• Omit!

29
Note It Works!

• Sidebar, page 309
• Use of formal diagrams increased productivity by
  1000.
• Note that designers were familiar with the tools!
• This would be particularly good in the context of
  iterative design!