Course Outline
01 Introduction to HCI
02 Guidelines in HCI
Human-Computer 03 Interactive System Design
Interaction
Lecture 1 Use relational database operators
Prepared by:
Ms. Roda Flor Andrea B. Teodocio
Human Computer Interface Introduction Human Computer Interface
Some of the areas where HCI can be implemented with distinctive importance are mentioned below:
Human Computer Interface (HCI) was previously known as the man-machine studies
or man-machine interaction. Computer Science
01 For application design and engineering.
It deals with the design, execution and assessment of computer systems and related
phenomenon that are for human use. Psychology
-40 02
For application of theories and analytical purpose.
HCI can be used in all disciplines wherever there is a possibility of computer
installation. Sociology
03
For interaction between technology and organization.
The leading organization in HCI is ACM SIGCHI, which stands
for Association for Computer Machinery Special Interest Group on Computer
Human Interaction. Industrial Design
04 For interactive products like mobile phones,
microwave oven, etc.
SIGCHI defines Computer Science to be the core discipline of HCI
Objective Historical Evolution
The intention of this subject is to learn the ways of designing user-friendly interfaces or interactions.
Considering
Early computer (e.g.
Ways to design and assess ENIAC, 1946) Improvement in the H/W technology brought massive increase in
computing power. People started thinking on innovative ideas.
interactive systems. Visual Display Unit
(1950s) SAGE (semi-automatic ground environment), an air defense system
of the USA used the earliest version of VDU.
Ways to reduce design time through Development of the
cognitive system and task models. Sketchpad (1962) Ivan Sutherland developed Sketchpad and proved that computer can
be used for more than data processing.
Douglas Engelbart
Procedures and heuristics for introduced the idea
of programming
interactive system design. toolkits (1963) Smaller systems created larger systems and components.
Introduction of Word
Processor, Mouse
(1968)
Design of NLS (oNLine System).
Historical Evolution
Introduction of Multimodality refers to the use of more than one mode
personal computer Multimodality (late (such as linguistic, textual, spatial, and visual modes,
Dynabook (1970s) 1980s). etc.) in communication practices to create a particular
Developed smalltalk at Xerox PARC.
message or set of messages.
Windows and WIMP
interfaces Simultaneous jobs at one desktop, switching between work and Computer
screens, sequential interaction. Supported
Cooperative
Computer mediated communication.
The idea of metaphor
Xerox star and alto were the first systems to use the concept of
metaphors, which led to spontaneity of the interface.
WWW (1989)
Direct Manipulation
introduced by Ben The first graphical browser (Mosaic) came in 1993.
First used in Apple Mac PC (1984) that reduced the chances for
Shneiderman (1982)
syntactic errors.
Vannevar Bush Ubiquitous Currently the most active research area in HCI. Sensor
introduced Hypertext Computing based/context aware computing also known as
(1945) pervasive computing.
To denote the non-linear structure of text.
Ben Shneiderman, an American computer scientist consolidated some implicit facts about To assess the interaction between human and computers, Donald Norman in 1988 proposed seven
designing and came up with the following eight general guidelines principles. He proposed the seven stages that can be used to transform difficult tasks.
Following are the seven principles of Norman
Use both knowledge in world & knowledge in the head.
Permit Support Reduce
Prevent easy internal short term Simplify task structures.
Errors. reversal of locus of memory
actions. control. load. Make things visible.
Get the mapping right (User mental model = Conceptual model = Designed model).
Cater to Offer Design Convert constrains into advantages (Physical constraints, Cultural constraints, Technological constraints).
Strive for
Universal Informative Dialogs to
Consistency.
Usability. feedback. yield closure.
Design for Error.
Heuristic Evaluation
Heuristics evaluation is a methodical procedure to check user interface for usability Heuristics evaluation is a methodical procedure to check user interface for usability
problems. Heuristic evaluation method includes some usability principles such as problems. Heuristic evaluation method includes some usability principles such as
ten Usability principles. ten Usability principles.
Visibility of system status. Recognition rather than Recall.
Match between system and real world. Flexibility and efficiency of use.
User control and freedom. Aesthetic and minimalist design.
Consistency and standards. Help, diagnosis and recovery from errors.
Error prevention. Documentation and Help
Interface Design Guidelines Interface Design Guidelines
General Interaction General
Lessen the
Ask for amount of Classify
Authorize Use simple
authenticati information Seek activities by
Offer easy Deliver help action verbs
Be on of any that must be competence function and
significant reversal of Excuse services that or short verb
consistent. non-trivial remembere in dialogue, establish
feedback. most mistakes. are context phrases to
critical d in motion and screen
actions. sensitive. name
action. between thought. geography
commands.
actions. accordingly.
Interface Design Guidelines Interface Design Guidelines
Information Display Information
Exhibit only that information that is applicable to the present Use upper and lower case, indentation and text grouping to
context. aid in understanding.
Don't burden the user with data, use a presentation layout
that allows rapid integration of information. Use windows (if available) to classify different types of
Use standard labels, standard abbreviations and probable information.
colors.
Use analog displays to characterize information that is more
Permit the user to maintain visual context. easily integrated with this form of representation.
Generate meaningful error messages. Consider the available geography of the display screen and
use it efficiently.
Interface Design Guidelines Interface Design Guidelines
Data Entry
Disable commands that are unsuitable in the context of current
Reduce the number of input actions required of the user. actions.
Uphold steadiness between information display and data input. Allow the user to control the interactive flow.
Let the user customize the input. Offer help to assist with all input actions.
Interaction should be flexible but also tuned to the user's favored
mode of input. Remove "mickey mouse" input.
References:
Websites https://www.tutorialspoint.com/human_computer_interface/int
eractive_system_design.htm
http://library.usc.edu.ph/ACM/CHI%202017/2exab/ea1202.pd
f
https://www.interaction-design.org/literature/topics/human-co
mputer-interaction
Books Human-Computer Interaction (3rd Edition) 3rd Edition
by Alan Dix (Author), Janet E. Finlay (Author), Gregory D.
Abowd (Author), Russell Beale (Author)
Human Computer Interaction: Fundamentals and Practice
1st Edition, Kindle Edition
by Gerard Jounghyun Kim (Author)
