HUMAN COMPUTER INTERACTION

B.V. Raju Institute of Technology

(Autonomous)
Vishnupur, Narsapur, Medak (District) – 502313
Department of Computer Science and
Engineering

SYLLABUS

Unit I: (12 Periods)

Interactive system design: Concept of usability, HCI and software engineering, GUI Design
and aesthetics. Prototyping techniques.
Model-based design and Evaluation: Basic idea, introduction to different types of models,
GOMS family of models (KLM and CMN-GOMS), Fitt’s law and and Hick-hyman’s
law,Model-based design.
Unit II: (10 Periods)
Guidelines in HCI: Shneiderman’s eight golden rules, Norman’s seven principles, Norman’s
model of interaction, Nielsen’s ten heuristics with example of its use , Heuristic evaluation,
contextual inquiry, Cognitive walkthrough.
Unit III: (10 Periods)
Empirical research methods in HCI: Introduction (motivation, issues, research question
formulation techniques), experiment design and data analysis.
Task modeling and analysis: Hierarchical task analysis (HTA), Engineering task models
and Concur Task Tree (CTT).
Unit IV: (6 Periods)
Dialog Design: Introduction to formalism in dialog design design using FSM (Finite State
Machines), State charts and (Classical) Petri Nets in dialog design.
Unit V: (8 Periods)
Cognitive Architecture: Introduction to CA, CA types, relevance of CA in IS design, Model
Human Processor (MHP).

Textbooks:
1. Dix A., Finlay J.,Abowd G. D. and Beale R. Human Computer Interaction, 3 rd edition,
Pearson Education, 2005
References:
1. Yvonne Rogers, Helen Sharp, Jennifer Preece; Interaction Design 3 rd Edition Wiley 2011.
2. Preece J., Rogers Y.,Sharp H.,Baniyon D., Holland S. and Carey T. Human Computer
Interaction,Addison-Wesley, 1994.
3. B.Shneiderman; Designing the User Interface,Addison Wesley 2000 (Indian Reprint).
NPTEL Course https://nptel.ac.in/content/syllabus_pdf/106103115.pdf

1 | Page S.Dinesh Krishnan, AP/CSE

 HUMAN COMPUTER INTERACTION
Unit IV

Dialog Design
A dialog is the construction of interaction between two or more beings or systems. In HCI, a
dialog is studied at three levels –

 Lexical − Shape of icons, actual keys pressed, etc., are dealt at this level.
 Syntactic − The order of inputs and outputs in an interaction are described at this level.
 Semantic − At this level, the effect of dialog on the internal application/data is taken care of.

Dialog Representation
To represent dialogs, we need formal techniques that serves two purposes –

 It helps in understanding the proposed design in a better way.

 It helps in analyzing dialogs to identify usability issues. E.g., Questions such as “does the
design actually support undo?” can be answered.

Introduction to Formalism
There are many formalism techniques that we can use to signify dialogs. In this chapter, we
will discuss on three of these formalism techniques, which are –

 The state transition networks (STN)

 The state charts
 The classical Petri nets

State Transition Network (STN)

STNs are the most spontaneous, which knows that a dialog fundamentally denotes to a
progression from one state of the system to the next.
The syntax of an STN consists of the following two entities –

 Circles − A circle refers to a state of the system, which is branded by giving a name to the
state.

 Arcs − The circles are connected with arcs that refers to the action/event resulting in the
transition from the state where the arc initiates, to the state where it ends.

2 | Page S.Dinesh Krishnan, AP/CSE

 HUMAN COMPUTER INTERACTION
STN Diagram

State Charts
StateCharts represent complex reactive systems that extends Finite State Machines (FSM),
handle concurrency, and adds memory to FSM. It also simplifies complex system
representations. StateCharts has the following states –

 Active state − The present state of the underlying FSM.

 Basic states − These are individual states and are not composed of other states.
 Super states − These states are composed of other states.

Illustration
For each basic state b, the super state containing b is called the ancestor state. A super state
is called OR super state if exactly one of its sub states is active, whenever it is active.

3 | Page S.Dinesh Krishnan, AP/CSE

 HUMAN COMPUTER INTERACTION

Let us see the StateChart Construction of a machine that dispense bottles on inserting coins.

The above diagram explains the entire procedure of a bottle dispensing machine. On pressing
the button after inserting coin, the machine will toggle between bottle filling and dispensing
modes. When a required request bottle is available, it dispense the bottle. In the background,
another procedure runs where any stuck bottle will be cleared. The ‘H’ symbol in Step 4,
indicates that a procedure is added to History for future access.

Petri Nets
Petri Net is a simple model of active behavior, which has four behavior elements such as −
places, transitions, arcs and tokens. Petri Nets provide a graphical explanation for easy
understanding.

 Place − This element is used to symbolize passive elements of the reactive system. A
place is represented by a circle.
 Transition − This element is used to symbolize active elements of the reactive
system. Transitions are represented by squares/rectangles.
 Arc − This element is used to represent causal relations. Arc is represented by
arrows.
 Token − This element is subject to change. Tokens are represented by small filled
circles.

4 | Page S.Dinesh Krishnan, AP/CSE

 HUMAN COMPUTER INTERACTION
Visual Thinking
Visual materials has assisted in the communication process since ages in form of paintings,
sketches, maps, diagrams, photographs, etc. In today’s world, with the invention of technology
and its further growth, new potentials are offered for visual information such as thinking and
reasoning. As per studies, the command of visual thinking in human-computer interaction (HCI)
design is still not discovered completely. So, let us learn the theories that support visual thinking
in sense-making activities in HCI design.
An initial terminology for talking about visual thinking was discovered that included
concepts such as visual immediacy, visual impetus, visual impedance, and visual metaphors,
analogies and associations, in the context of information design for the web.
As such, this design process became well suited as a logical and collaborative method during
the design process. Let us discuss in brief the concepts individually.

Visual Immediacy
It is a reasoning process that helps in understanding of information in the visual
representation. The term is chosen to highlight its time related quality, which also serves as an
indicator of how well the reasoning has been facilitated by the design.

Visual Impetus
Visual impetus is defined as a stimulus that aims at the increase in engagement in the
contextual aspects of the representation.

Visual Impedance
It is perceived as the opposite of visual immediacy as it is a hindrance in the design of the
representation. In relation to reasoning, impedance can be expressed as a slower cognition.

*********************************************************************

5 | Page S.Dinesh Krishnan, AP/CSE