INSTRUCTIONAL MODULE AND ITS COMPONENTS

(GUIDE)

COURSE Human Computer Interaction

DEVELOPER Rovell F. Asidera 
AND THEIR Mel Johnson Aquino 
BACKGROUND Patima Pingol 
Christian Jose Santos 
Regina Arceo 
Gloria Prellejera 
Jay Pabustan 
James Bryan Roman 
Anna Cazandra Delos Reyes 
Joshue Manaloto 
COURSE Human Computer Interaction (HCI)) - This course intends to teach students
DESCRIPTION to design user interfaces based on the capabilities of computer technology
and the limitations of human factors. The student design the user interfaces
of a system and implement a prototype from a list of informal requirements.
The project is developed over four tutor-marked exercises by a design
process based on current Human-Computer Interaction principles. 
COURSE Course Content/Subject Matter
OUTLINE A. The Human and The
Week 1 - 2
Computer
Week 3 -5 B. The Interaction
Week 6 – 8
C. Paradigms
Week 9 D. Midterm Exam

Week 10 – 11 E. Interaction Design

Week 12 – 13 F. HCI in the software process
Week 14 – 15 G. Design Rules
Week 16 – 17 H. Implementation Support
Week 18 I. Final Exam
One week (or an J. Allotted for the Midterm and
equivalent of three the Final Exams
hours)

CHAPTER # 3
TITLE The Interaction
I. RATIONAL Human Computer Interaction focuses on supplying the students with
E the basic concepts of humans’ association with computers.
INSTRUCTION Read and understand the contents of the topics to be discussed in this module.
TO THE USERS You may start using this module upon instruction from your instructor or
align it with the schedule of the course outline. Closure activities and
assignments are provided in this module to test your knowledge and

1
Chapter 1 Database System, Functions and Components of a Database Management Systems
 understanding of the topics. For synchronous learners, your closure activities
are to be answered during the online discussion, and assignments are to be
submitted online when your instructor tells you to do so. For asynchronous
learners, you are to submit your outputs to the closure
activities, and assignments (answer all), For the evaluation assessment test,
wait for further instructions from your instructor. 
PRE-TEST Direction: Read the questions carefully. Write your answers on a separate
paper.

1. Individually or in a group find as many different examples as you can

of physical controls and displays.
(a) List them
(b) Try to group them, or classify them.
(c) Discuss whether you believe the control or display is suitable for
its purpose.

II. LEARNING At the end of the chapter, students are expected to: 
OBJECTIV a. The dialog between user and system is influenced by the style
ES of the interface.
III. CONTENT
Interaction Styles

dialogue … computer and user

distinct styles of interaction

Common interaction styles

• command line interface

• menus
• natural language
• question/answer and query dialogue
• form-fills and spreadsheets
• WIMP
• point and click
• three–dimensional interfaces

Command line interface

• Way of expressing instructions to the computer directly
– function keys, single characters, short abbreviations, whole words, or a combination
• suitable for repetitive tasks
• better for expert users than novices
• offers direct access to system functionality
• command names/abbreviations should be meaningful!
Typical example: the Unix system

2
Chapter 1 Database System, Functions and Components of a Database Management Systems
 Menus

• Set of options displayed on the screen

• Options visible
– less recall - easier to use
– rely on recognition so names should be meaningful
• Selection by:
– numbers, letters, arrow keys, mouse
– combination (e.g. mouse plus accelerators)
• Often options hierarchically grouped
– sensible grouping is needed
• Restricted form of full WIMP system

Natural language
• Familiar to user
• speech recognition or typed natural language
• Problems
– vague
– ambiguous
– hard to do well!
• Solutions
– try to understand a subset
– pick on key words

Query interfaces

• Question/answer interfaces
– user led through interaction via series of questions
– suitable for novice users but restricted functionality
– often used in information systems
• Query languages (e.g. SQL)
– used to retrieve information from database
– requires understanding of database structure and language syntax, hence requires
some expertise

Form-fills
• Primarily for data entry or data retrieval
• Screen like paper form.
• Data put in relevant place
• Requires

3
Chapter 1 Database System, Functions and Components of a Database Management Systems
 – good design
– obvious correction
facilities

Spreadsheets
• first spreadsheet VISICALC, followed by Lotus 1-2-3
MS Excel most common today
• sophisticated variation of form-filling.
– grid of cells contain a value or a formula
– formula can involve values of other cells
e.g. sum of all cells in this column
– user can enter and alter data spreadsheet maintains consistency

WIMP Interface
Windows
Icons
Menus
Pointers
… or windows, icons, mice, and pull-down menus!
• default style for majority of interactive computer systems, especially PCs and desktop
machines

4
Chapter 1 Database System, Functions and Components of a Database Management Systems
 Point and click interfaces
• used in ..
– multimedia
– web browsers
– hypertext
• just click something!
– icons, text links or location on map
• minimal typing

Three dimensional interfaces

• virtual reality
• ‘ordinary’ window systems
– highlighting
– visual affordance
– indiscriminate use
just confusing!
• 3D workspaces
– use for extra virtual space
– light and occlusion give depth
– distance effects

Elements of The Wimp Interface

 windows, icons, menus, pointers

 +++
 buttons, toolbars,
palettes, dialog boxes

Windows

5
Chapter 1 Database System, Functions and Components of a Database Management Systems
 • Areas of the screen that behave as if they were independent
– can contain text or graphics
– can be moved or resized
– can overlap and obscure each other, or can be laid out next to one another (tiled)
– scrollbars
– allow the user to move the contents of the window up and down or from side to side
• title bars
– describe the name of the window

Icons
• small picture or image
• represents some object in the interface
– often a window or action
• windows can be closed down (iconised)
– small representation fi many accessible windows
• icons can be many and various
– highly stylized
– realistic representations.

Pointers

• important component
– WIMP style relies on pointing and selecting things
• uses mouse, trackpad, joystick, trackball, cursor keys or keyboard shortcuts
• wide variety of graphical images

Menus

• Choice of operations or services offered on the screen

6
Chapter 1 Database System, Functions and Components of a Database Management Systems
 • Required option selected with pointer
problem – take a lot of screen space
solution – pop-up: menu appears when needed

Fi l e Edi t Opt i o ns Fo nt
Ty p e wr i t e r
Sc re e n
Times

Kinds of Menus
• Menu Bar at top of screen (normally), menu drags down
– pull-down menu - mouse hold and drag down menu
– drop-down menu - mouse click reveals menu
– fall-down menus - mouse just moves over bar!
• Contextual menu appears where you are
– pop-up menus - actions for selected object
– pie menus - arranged in a circle
• easier to select item (larger target area)
• quicker (same distance to any option)
… but not widely used!
Menus extras
• Cascading menus
– hierarchical menu structure
– menu selection opens new menu
– and so in ad infinitum
• Keyboard accelerators
– key combinations - same effect as menu item
– two kinds
• active when menu open – usually first letter
• active when menu closed – usually Ctrl + letter
– usually different !!!

Menus design issues

• which kind to use
• what to include in menus at all
• words to use (action or description)

7
Chapter 1 Database System, Functions and Components of a Database Management Systems
 • how to group items
• choice of keyboard accelerators

Buttons
• individual and isolated regions within a display that can be selected to invoke an action
• Special kinds
– radio buttons
– set of mutually exclusive choices
– check boxes
– set of non-exclusive choices

Toolbars

• long lines of icons …

… but what do they do?
• fast access to common actions
• often customizable:
– choose which toolbars to see
– choose what options are on it

Palettes and tear-off menus

• Problem
menu not there when you want it
• Solution
palettes – little windows of actions
– shown/hidden via menu option
e.g. available shapes in drawing package
tear-off and pin-up menus
– menu ‘tears off’ to become palette

Dialogue boxes
• information windows that pop up to inform of an important event or request information.
e.g: when saving a file, a dialogue box is displayed to allow the user to specify the

8
Chapter 1 Database System, Functions and Components of a Database Management Systems
 filename and location. Once the file is saved, the box disappears.

INTERACTIVITY - easy to focus on look what about feel?

Speech–driven interfaces
• rapidly improving …
… but still inaccurate
• how to have robust dialogue?
… interaction of course!
e.g. airline reservation:
reliable “yes” and “no”
+ system reflects back its understanding
“you want a ticket from New York to Boston?”
Look and feel
• WIMP systems have the same elements:
windows, icons., menus, pointers, buttons, etc.
• but different window systems
… behave differently
e.g. MacOS vs Windows menus
appearance + behaviour = look and feel
Initiative
• who has the initiative?
old question–answer – computer
WIMP interface – user
• WIMP exceptions …
pre-emptive parts of the interface
• modal dialog boxes
– come and won’t go away!
– good for errors, essential steps
– but use with care
Error and repair
can’t always avoid errors …
… but we can put them right

9
Chapter 1 Database System, Functions and Components of a Database Management Systems
 hello, this is the Go Faster booking system
what would you like?
(user) I want to fly from New York to London
you want a ticket from New York to Boston
(user) no
sorry, please confirm one at a time
do you want to fly from New York
m
(user) yes
ake it easy to detect errors
… then the user can repair them

Context
Interaction affected by social and organizational context
• other people
– desire to impress, competition, fear of failure
• motivation
– fear, allegiance, ambition, self-satisfaction
• inadequate systems
– cause frustration and lack of motivation
IV. SYNTHESI In this chapter, we have looked at the interaction between human and
S/ computer, and, in particular, how we can ensure that the interaction is
GENERALI effective to allow the user to get the required job done. We have seen
ZATION how we can use Norman’s execution– evaluation model, and the
interaction framework that extends it, to analyze the interaction in
terms of how easy or difficult it is for the user to express what he wants
and determine whether it has been done. We have also looked at the
role of ergonomics in interface design, in analyzing the physical
characteristics of the interaction, and we have discussed a number of
interface styles. We have considered how each of these factors can
influence the effectiveness of the interaction. Interactivity is at the
heart of all modern interfaces and is important at many levels.
Interaction between user and computer does not take place in a
vacuum, but is affected by numerous social and organizational factors.
These may be beyond the designer’s control, but awareness of them
can help to limit any negative effects on the interaction.
V. EVALUATI Students are encouraged to conduct a self-check test by doing any of
ON the following:

10
Chapter 1 Database System, Functions and Components of a Database Management Systems
 1. Find out all you can about natural language interfaces. Are
there any successful systems? For what applications are these
most appropriate?

VI. ASSIGNME Direction: Read the questions carefully. Answer it on a separate paper.
NT /
AGREEME 1. What influence does the social environment in which you work
NT have on your interaction with the computer? What effect does
the organization (commercial or academic) to which you belong
have on the interaction?

REFERENCES Human-Computer Interaction: Fundamentals and Practice, Gerard

Jounghyun Kim,2015,CRC Press Taylor & Francis Group,2015
Human Computer Interaction, I. Scott MacKenzie, Elsevier 2013
Human Computer Interaction, 3rd Edition, Dix, Finlay,Abowd, et.al . Pearson
Education,2004

11
Chapter 1 Database System, Functions and Components of a Database Management Systems