NPTEL Course on

Human Computer Interaction

- An Introduction
Dr. Pradeep Yammiyavar Dr. Samit Bhattacharya
Professor, Assistant Professor,
Dept. of Design, Dept. of Computer Science
IIT Guwahati, and Engineering,
Assam, India IIT Guwahati, Assam, India

Indian Institute of Technology Guwahati

 Module 7:
Dialog Design

Lecture 1:
Introduction

Dr. Samit Bhattacharya

 Objective

• One important aspect of HCI is the dialog, which is

the interaction that takes place between a human
user and the computer
• In this lecture, we shall learn about representation,
modelling and analysis of dialogs
 Dialog

• A dialog refers to the structure of the interaction

• Dialog in HCI can be analyzed at three levels
– Lexical: at this level, details such as the shape of icons,
actual keys pressed etc. are dealt with

– Syntactic: the order of inputs and outputs in an

interaction are described at this level

– Semantic: the effect a dialog has on the internal

application/data is the subject matter at this level
 Dialog Representation

• We need (formal) techniques to represent dialogs,

which serves two purposes
– It helps to understand the proposed design better

– Formal representation makes it possible to analyze

dialogs to identify usability problems (e.g., we can
answer questions such as “does the design actually
support undo”?)
 Dialog Representation

• There are several formalism that we can use to

represent dialogs
• We shall discuss three of these formalisms in this
module
– The state transition networks (STN)
– The state charts
– The (classical) Petri nets
State Transition Network (STN)

• STNs are the most intuitive among all formalisms

• It assumes that a dialog essentially refers to a

progression from one state of the system to the next
in the system state space (in fact this assumption
holds for all formalisms that we shall discuss)
State Transition Network (STN)

• The syntax of an STN is simple and consists of the

following two entities
– Circles: a circle in a STN refers to a state of the system,
which is labeled (by giving a name to the state)
– Arcs: the circles are connected with arcs, each of which
refers to the action/event (represented by arc labels) that
results in the system making a transition from the state
where the arc originates to the state where it terminates
State Transition Network (STN)

Let’s illustrate the idea with an example. Suppose,

we are using a drawing interface that allows us to
draw lines and circles, by choosing appropriate
menu item. To draw a circle, we need to select a
center and circumference. A line can be drawn by
selecting points on the line. How can we model this
dialog using an STN?
State Transition Network (STN)

• So, what are states and transitions here?

– We shall have a “start” state

– From this “start” state, we shall go to a “menu” state,

where we are shown the menu options. If we select the
circle option, we go to a “circle” state. Otherwise, we
select the “line” option and go to the “line” state
State Transition Network (STN)

• So, what are states and transitions here?

– While at the “circle” state, we select a point as the circle

center (through mouse click, say), which takes us to the
“center” state

– In the “center” state, we select the circle periphery

(through mouse movement, say) and double click to
indicate the end of input (the “finish” state). At this stage,
the circle is displayed
State Transition Network (STN)

• So, what are states and transitions here?

– While at the “line” state, we select a point as the

beginning of the line (through mouse click, say)

– Then, we select another point to denote the last point on

the line and transit to “point 2”. At this stage, a line is
displayed between the two points
State Transition Network (STN)

• So, what are states and transitions here?

– We can select another point, while at “point 2” to draw

another line segment between this point and the point last
selected. We can actually repeat this as many times as we
want, to draw line of arbitrary shape and size

– When we perform a double click, it indicates the end of

input and the dialog comes to the “finish” stage
State Transition Network (STN)
select
select center circumference
point and double click

circle center finish

select menu select circle'
option
select end
start menu point

select line'
Double click
select end
point
line Point 2 finish
 STN – Pros and Cons

• Pros
– Intuitive
– Easy to understand

• Cons
– Good for simple systems
– Quickly becomes messy as the number of states/arcs
grow
How to Model Complex Dialogs

• Hierarchical STNs provide a way to manage

complex dialogs
• Here, we divide the dialog into sub-dialogs
• Each sub-dialog is modeled with STNs
• Upper level STNs are designed to connect sub-
dialogs
Hierarchical STN - Example

Suppose we want to model the dialog for a menu-

based system. There are two menu items, one for a
text system and the other for a paint-like system.
Each of these systems has its own dialog. For
example, the paint system may have the dialog
shown in the previous example. We can model the
overall dialog as a hierarchical STN, as shown in the
next slide
Hierarchical STN - Example

Text system sub-dialog

Select text
option

Main Exit
menu

Paint system sub-dialog

Select paint
option
How to Model Complex Dialogs

• However, even hierarchical STNs are inadequate to

model many “common” dialogs
For example, consider a text editor that supports
three operations: underline, bold and italic. Let us
try to model this dialog with an STN, assuming first
that we can perform (only) one operation on a piece
of text
Modelling Complex Dialogs

click on ‘bold’
NO bold
bold

click on ‘italic’
NO italic
italic

click on ‘underline’
NO underline
underline
How to Model Complex Dialogs

Now suppose we relax the condition “we can

perform (only) one operation on a piece of text”.
Now we can perform two operations together on the
same piece of text (e.g., bold followed by italic).
How the STN for this new system looks?
(let us construct the STN for only the dialog
involving bold and italic. STN for other pairs will
be similar)
Modelling Complex Dialogs

NO click on ‘bold’ bold

style only

click click
on on
‘italic’ ‘italic’

italic click on ‘bold’ bold

only italic
How to Model Complex Dialogs

Now suppose we relax the condition further. Now

we can perform all the three operations together on
the same piece of text. This is a fairly common
scenario and supported by all text editors. Let us see
how the STN for this new system looks.
Modelling Complex Dialogs

NO ‘bold’ bold
style only

‘underline’ ‘underline’
‘italic’ ‘italic’
underline ‘bold’ bold
only underline

‘italic’ ‘italic’
italic ‘bold’ bold
only italic
‘underline’ ‘underline’

bold
italic ‘bold’ italic
u’line underline
How to Model Complex Dialogs

• As you can see, the STN has become very

complex with too many states and arcs
• This is because we are trying to model activities
that occur on the same object or at the same time.
Such behaviors are known as “concurrent
behaviors”
• STNs are not very good at modeling concurrent
behaviors, which are fairly common in dialogs that
we encounter in HCI
 Note

• To better model “concurrent” dialogs, other

formalisms are used
• We shall discuss two of those formalisms, namely
the state charts and the Petri nets, in the following
lectures