SUMAIT UNVERSITY

Lectures Notes No. 8

Human Computer Interaction

BSc. (IT, ICT)
Year: III, Semester: II
Couse Code: CS246

Dr. Antar S.H. Abdul-Qawy

Department of Mathematics
and Computer Science

SUMAIT University, Zanzibar, Tanzania

 Human Computer
Interaction
CS246, IT/ICT, 3rd Year

Dr. Antar Abdul-Qawy Lectures Notes No. 8

Department of Math & Computer Science
[email protected]

Human Computer Interaction, IT, ICT, 2nd Semester , Dr. Antar Abdul-Qawy.

Human Computer Interaction

Main Reference Book:
The main source of this slides is ALEN DEX
book "Human Computer Interaction", third
edition. The original slides have been
improved/modified and enhanced for the
purpose of education by Dr. Antar S.H.
Abdul-Qawy, SUMAIT University, Zanzibar,
Tanzania.

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

1
 Human Computer
Interaction
UNIT I
Human, computer,
& interaction

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

UNIT I: Human,
computer, & interaction

Interaction
Style

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

2
 Common interaction styles
❖ Interaction can be seen as a dialogue between the computer
and the user. The choice of interface style can have a main
effect on the nature of this dialog.

❖ Common interface styles

➢Command line interface (CLI)
➢Menus
➢Natural language
➢Question/answer and query dialogue
➢Form-fills and spreadsheets
➢WIMP

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

Command line interface

❖ Direct interaction using function keys, single characters,
short abbreviations, whole words, or a combination.
(e.g., copy cd.., cls, etc.)

❖ Better for expert users than beginners, where all

names/abbreviations should be meaningful!

❖ Typical example: the Unix and Linux-based systems

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

3
 Menus
❖ Set of options displayed on the screen selected using the
mouse, numbers, letters, arrow keys,
➢Sensible grouping and meaningful names
➢Will considered as part of WIMP

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

Natural language
❖ Familiar to user and easy to interact
➢Speech recognition
➢Text language
❖ Problems:
➢Ambiguity, even if a sentence’s structure is clear, we
may find ambiguity in the meaning of the words used
(e.g., "the boy hit the child with the stick")
❖ Today:
➢Natural language processing (NLP) is a form of AI that
extracts meaning from human language to make
decisions based on the information.

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

4
 Query interfaces
❖ Question/answer interfaces
➢Interaction via series of questions, often used in
collecting opinions, information systems, and
retrieving information from database (e.g. SQL).

➢Example: web questionnaires.

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

Form-fills
❖ Have logical grouping and sequencing of fields, where data
is put in relevant place.
❖ Screen like paper form aappropriate when many fields of
data must be entered.
❖ Form is completely filled, then the data within the form is
submitted to the application for necessary actions.

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

5
 Spreadsheets
❖ Sophisticated variation of form-filling: User can enter and
alter data
➢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)

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

WIMP or GUI Interface

❖ A graphical user interface (GUI) is the most common
type of user interface.

❖ It is the default interface style for the majority of

interactive computer systems in use today, especially in
the PC and desktop workstation.

❖ WIMP elements: WIMP stands for Windows, Icons,

Menus, and Pointers

❖ WIMP sometimes stands for Windows, Icons, Mice and

Pull-down menus)

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

6
 Windows
❖ A rectangular area on the screen where the commonly
used application run, and behave as if they were
independent terminals:

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

Windows
❖ Windows:
➢Can be moved or resized
➢Can overlap and obscure each other.
➢Can be laid out next to one another (tiled)
❖ Title bars
➢Describe the name of the window
❖ Scrollbars
➢Allow the user to move the contents of the
window up and down or from side to side
❖ Three-dimensional based interfaces toady
are widely used

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

7
 Icons
❖ An icon is a small picture or image used to represent a
closed window, a software application, hardware device
or action

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

Menus
❖Menu Bar is at top of screen (normally):
➢Drop-down menu: mouse click reveals menu
➢Pull-down menu: mouse hold and drag down menu
➢Fall-down menus: mouse just moves over bar!

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

8
 Menus
❖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!

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

Menus
❖ Menus design issues developed with time :
➢ Which kind to use
➢ What to include in menus at all
➢ Words to use (action
or description)
➢ How to group items
➢ Choice of keyboard
accelerators

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

9
 Pointers
❖ A symbol such as an arrow which moves around the
screen as you move your mouse. Helps you to select
objects.

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

Buttons
❖ Individual and isolated regions within a display that
can be selected by the user to invoke specific
operations
❖ Special kinds
➢Radio buttons:
✓ Set of mutually
exclusive choices
➢Check boxes
✓ Set of non-exclusive
choices

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

10
 Toolbars
❖ Toolbars: have similar function to the menu bar
❖ The icons are smaller than the equivalent text in menus.
So more functions can be simultaneously displayed.
❖ Fast access to common actions
❖ Often customizable: choose which toolbars to see and
what options are on it

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

Dialogue boxes
❖ Information windows that pop up to inform of an
important event or request information such as when to
save or open file

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

11
 Human Computer
Interaction
UNIT II
Usability paradigm
and principles

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

UNIT I: Human,
computer, & interaction

Usability
paradigm

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

12
 What are Paradigms?
❖ Paradigms are typical example of successful strategies for
building interactive systems.

❖ These paradigms range from the introduction of time-

sharing computers, through the WIMP and web, to
ubiquitous and context-aware computing.

❖ The evolution of these usability paradigms provides a

good perspective on the history of interactive computing.

❖ As recent computing technologies arrive, it create a new

perception of the human—computer relationship.

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

Why study paradigms

❖ Two main concerns:
➢How can an interactive system be developed to ensure
its usability?
➢How can the usability of an interactive system be
demonstrated or measured?

❖ History of interactive system design provides paradigms

for usable designs.

❖ So, one can follow major improvements in interaction

systems and explore designs that have been seen to create
a new base point for future design

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

13
 Examples paradigm shifts
❖ Batch processing: the initial paradigm
➢No interaction, the operator sorts the programs
with similar requirements into batches, then run
as a group.

Impersonal computing

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

Examples paradigm shifts

❖ Batch processing:
❖ Time-sharing

➢ CPU scheduling is used to

give each user with a
small portion of time

➢ Each user feels he/she

only uses the computer
(so frequently switching).
Interactive
computing

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

14
 Examples paradigm shifts
❖ Batch processing
❖ Time-sharing
❖ Networking

➢ Multiple processors are

used to serve multiple
applications/users.

➢ Data processing jobs are

distributed among the
processors. Community
computing

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

Examples paradigm shifts

❖ Batch processing
❖ Time-sharing C…P… filename
dot star… or was Move this file
here, and copy
❖ Networking it R…M?
this to there.

❖ Graphical displays
% foo.bar
➢ Presenting and manipulating ABORT
dumby!!!

information from a computer

in the form of images on a
video display
➢ More suitable than a paper Direct
printout manipulation

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

15
 Examples paradigm shifts
❖ Batch processing
❖ Time-sharing
❖ Networking
❖ Graphical displays
❖ Microprocessor

➢ Small, powerful machines

which were dedicated to
single users Personal
➢ Providing Programming computing
toolkits

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

Examples paradigm shifts

❖ Batch processing
❖ Time-sharing
❖ Networking
❖ Graphical displays
❖ Microprocessor
❖ World Wide Web
(WWW) Global information

➢ Connecting billions of Web pages, stored on

millions of servers around the world.

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

16
 Examples paradigm shifts
❖ Batch processing
❖ Time-sharing
❖ Networking
❖ Graphical displays
❖ Microprocessor
❖ World Wide Web
(WWW) Anything, any where
❖ Ubiquitous Computing any-time computing
and IoT
➢Linking the physical and digital worlds in service of
everyday activities.

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

Direct manipulation
❖ Rapid feedback
➢It is one feature of the interaction technique based on
windows and WIMP.
❖ How it works
➢Users use visual representation of the data objects.
➢Can be verbal (words) or iconic (pictures).
➢Command line (ex: dir in DOS).
➢ Examples:
➢Desktop icons for files & folders.
➢Graphical icons in a drawing editors.

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

17
 Direct manipulation
❖ Involves (Physical actions).
➢ Using the tools provided in the UI
✓ Drawing a rectangle, ball, car, etc in drawing
programs.
✓ Changing its size by selection handle.
✓ Movements; drag and drop.
✓ Changes its visual appearance
✓ Save, copy, cut, and paste

➢ Effects of actions are rapid. Depends less on linguistic

skills than on command and menu interfaces.

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

Metaphor
❖ A metaphor is an imaginative way of describing
something by referring to something else.
❖ Metaphors relate computer actions to other real-world
activity
❖ Examples:
➢Window, file, folder, Recycle Bin, etc.
➢A computer screen contains many windows, and
each window hosts an application.
➢User can open a window and close, copy folder/file
and paste.
➢Recycle Bin, for deleting file and folder

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

18
 Metaphor
❖ Importance points:
➢Steve Jobs pointed out design is not "what it looks
like,” but “how it works."
➢User interface elements mimic not only the
appearance but also the behaviors of their physical
counterparts.
➢New ways: most of interactive systems use metaphor
concepts.
➢Examples: touch screen includes: dragging, flicking,
or swiping objects in a game tapping switches,
sliding, etc.

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

WWW and hypertext

❖ The world wide web (www) connects billions of
documents, called Web pages, stored on millions of
servers around the world.
❖ Research Engine search the www for documents you
might find interesting.

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

19
 WWW and hypertext
❖ Web pages are connected to each other by hyperlinks,
specially denoted highlighted text or graphics that, when
clicked, open a new page containing related content.
❖ Users can jump between web pages stored on various
devices using hyperlinks

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

Multimodality
❖ A mode is a human communication channel.
❖ Multi-modal interactive system is a system that relies on
the use of multiple human communication channels.

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

20
 Ubiquitous computing/IoT
❖ Ubiquitous computing is a paradigm in which the
processing of information is linked with each activity or
object as encountered.
❖ Ubiquitous computing can occur using any device, in any
location, and in any format.

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

Ubiquitous Computing/IoT
❖ Internet of Things (IoT) is a new paradigm in which
various computers, mechanical, digital machines, etc. are
connected to internet.
❖ Able to interact without human intervention.

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

21
Sensor-based & context-aware interaction
❖ Humans are good at recognizing the “context”/situation
and reacting appropriately
❖ Automatically sensing physical phenomena (e.g., light,
temp, location, identity) becoming easier

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

References
References for text in slides of this lecture:

➢Human–Computer Interaction, Alan Dix and others, Pearson

Education.
➢Internet resources.
➢Human–Computer Interaction: Fundamentals and Practice: Gerard
Jounghyun Kim,

Human Computer Interaction, IT, ICT, 2nd Semester Lect. Dr. Antar Abdul-Qawy.

22