Introduction to Human-Computer Interaction

Course Description

This course covers the overall principles of Interaction Design, designing

concepts and evaluates product with user in mind. The main objective is to train
student to differentiate things between good and poor design and explain the
relationship between the user experience and usability.

Course Learning Outcomes

By the end of this course, students are expected to:

1. Analyze different user populations with regard to their abilities and

characteristics for using both software and hardware products; and
2. Evaluate the design of existing user interfaces based on the cognitive
models of target user.

Module 1| Chapter 1: Introduction to Human-Computer Interaction 1

Course Outline  Lesson 3: Understanding the
Basics of HTML
Module Assessment  Lesson 4: Understanding the
Contents Time Frame Role of other Web PL
Number Period
Chapter 1: Introduction to Human-  Lesson 5: Web Authoring Tools
Computer Interaction Chapter 6: Webpage Template with
 Lesson 1: What HCI Is and Why HTML5
It Is Important  Lesson 1: Designing a Website
 Lesson 2: Principles of HCI  Lesson 2: HTML5 Semantic
 Lesson 3: HCI Goals Elements Mar. 28-
 Lesson 4: Usability of Module 2  Lesson 3: Symbol Entities Midterm Apr. 18,
Interactive System Chapter 7: Enhancing a Website with 2022
 Lesson 5: Universal Usability Links and Images
Chapter 2: Interaction Design  Lesson 1: Adding Links to a
 Lesson 1: Good and Poor Webpage
Design  Lesson 2: Adding Images to a
 Lesson 2: What Is Interaction Website
Design?  Lesson 3: Exploring Div
Feb. 14- Elements
 Lesson 3: The User Experience
Module 1 Prelim March 18,  Lesson 4: Adding Headings and
 Lesson 4: The Process of
2022 Lists
Interaction Design
 Lesson 5: Interaction Design Midterm Examination: April 20-22, 2022
and the User Experience Chapter 8: Applying CSS Styles to
Chapter 3: Design Thinking Webpages
 Lesson 1: What is Design  Lesson 1: Using CSS
Thinking?  Lesson 2: Inline and Block
 Lesson 2: Five Stages in the Elements
Design Thinking Process  Lesson 3: Creating an External
Chapter 4: Web Design Process Style Sheet
 Lesson 1: UX & UI  Lesson 4: Style Rules
 Lesson 2: The Web Design  Lesson 5: CSS List Properties
Process Chapter 9: Responsive Design Part 1:
Apr. 25-May
 Lesson 3: Sitemaps Module 3 Designing for Mobile Devices Semi-Final
13, 2022
 Lesson 4: Wireframes  Lesson 1: Exploring Responsive
Prelim Examination: March 21-23, 2022 Design
Chapter 4: Design Process (Cont…)  Lesson 2: Fluid Layouts
 Lesson 5: Mockups  Lesson 3: Making Images
 Lesson 6: Prototypes Flexible
Chapter 5: Introduction to the Aug. 9-Sept.  Lesson 4: a Mobile-First
Module 2 Prelim Strategy
Internet and Web Design 3, 2021
 Lesson 1: Exploring the  Lesson 5: Span Element
Internet  Lesson 6: Meta Tags
 Lesson 2: Planning a Website  Lesson 7: Viewports

Module 1| Chapter 1: Introduction to Human-Computer Interaction 2

 Module Assessment How Do You Use This Module?
Contents Time Frame
Number Period
Chapter 10: Responsive Design Part This module is written in a very user-friendly manner. Definitions,
2: Designing for Tablet and Desktop processes and samples are included as an input knowledge or as a guide.
Devices Instructions are made clear and straight to the point. Your resourcefulness and
 Lesson 1: Using Media Queries creativity are needed to be able to answer or do the task well. Just follow the
Apr. 25-May
Module 3  Lesson 2: Designing for Tablet Semi-Final directions and you will be guided as you move on page after page.
13, 2022
Viewports
 Lesson 3: Designing for
In this module, you are required to go through a series of activities in
Desktop Viewports
 Lesson 4: Pseudo-Classes
order to complete each learning outcome. Each chapter has lessons with Specific
Semi-Final Examination: May 18-20, 2022 Learning Outcomes, Discussions, Self-Assessments, and Activities. Follow and
Chapter 11: Creating Tables and perform the activities on your own. If you have questions, do not hesitate to ask
Forms for assistance from your instructor.
 Lesson 1: Discovering Tables
 Lesson 2: Styling Table Remember to:
Elements
 Lesson 3: Webpage Forms May 23-Jun.  Read and understand the Specific Learning Outcome(s). These tell you
Module 4 Final
 Lesson 4: Styling Forms 17, 2022 what you should know and be able to do at the end of this module.
Chapter 12: Integrating Audio and
Video  Work through all the information and complete the activities in each
 Lesson 1: Using Multimedia
section.
 Lesson 2: Integrating Audio
 Lesson 3: Integrating Video
 Read the discussions very well. Suggested references are included to
Final Examination: June 20-22, 2022
supplement the materials provided in this module.
Grading System
 After reading every discussion, test yourself on how much you learned
by means of the Self-Assessments.
The grading system is as follows:
 Demonstrate what you learned by doing the Activities. You must be able
Assessment Self-Assessments/Activities Major Exams Total
to apply what you have learned in another activity or in real life
Period
situation.
Prelim & Midterm 60% 40% 100%
 Keep all the outputs in your portfolio as a record of your
Module 1 50 points
accomplishments and submit on the designated period.
Module 2 50 points
Note: You need to complete this module before you can perform the next
Semi-Final & Final 60% 40% 100% module.
Module 3 50 points
Module 4 50 points

(Midterm Grade + Final Grade) / 2 = Final Rating

Module 1| Chapter 1: Introduction to Human-Computer Interaction 3
 Table of Contents CHAPTER 1

Title Page INTRODUCTION TO HUMAN-COMPUTER INTERACTION

How Do You Use This Module…………………………………………………………………… 3 Lesson 1: What HCI Is and Why It Is Important
Module 1 Human–computer interaction (HCI) - is a cross-disciplinary area (e.g., engineering,
Chapter 1: Introduction to Human-Computer Interaction psychology, ergonomics, design) that deals with the theory, design,
Lesson 1: What HCI Is and Why It Is Important…………………………. 4 implementation, and evaluation of the ways that humans use and interact with
Lesson 2: Principles of HCI……………………………………………………….. 4 computing devices.
Lesson 3: HCI Goals………………………………………………………………….. 5 Interaction - is a concept to be distinguished from another similar term, interface.
Lesson 4: Usability of Interactive System…………………………………. 5 It refers to an abstract model by which humans interact with the computing
Lesson 5: Universal Usability……………………………………………………. 6 device for a given task, and an interface is a choice of technical realization
Chapter 2: Interaction Design (hardware or software) of such a given interaction model. Thus, the letter I in HCI
refers to both interaction and interface, encompassing the abstract model and the
Lesson 1: Good and Poor Design………………………………………………. 7
technological methodology.
Lesson 2: What Is Interaction Design?......................................... 7
The early focus of HCI has been in how to design interaction and implement
Lesson 3: The User Experience…………………………………………………. 8
interfaces for high usability.
Lesson 4: The Process of Interaction Design…………………………….. 8
High Usability - means that the resulting interfaces are easy to use, efficient for
Lesson 5: Interaction Design and the User Experience……………… 8
the task, ensure safety, and lead to a correct completion of the task.
Chapter 3: Design Thinking
Lesson 1: What is Design Thinking?.............................................. 11
Lesson 2: Five Stages in the Design Thinking Process……………….. 12
Chapter 4: Web Design Process
Lesson 1: UX & UI…………………………………………………………………….. 14
Lesson 2: The Web Design Process…………………………………………… 14
Lesson 3: Sitemaps…………………………………………………………………… 14
Lesson 4: Wireframes………………………………………………………………. 15
References……………………………………………………………………………………………….. 16

User experience (UX) - a notion that not only encompasses the functional
completeness, high usability, and aesthetic appeal of the interactive artifact, but
also its seamless integration into one’s lifestyle or even creating a new one around
it.

Lesson 2: Principles of HCI

1. “Know Thy User”
Coined by Wilfred J. Hansen in 1971, the foremost creed in HCI is to
devise interaction and interfaces around the target users.

Module 1| Chapter 1: Introduction to Human-Computer Interaction 4

2. “Understand the Task” Lesson 3: HCI Goals
Another almost-commonsensical principle is to base HCI design on the  Safety: protecting the user from dangerous conditions and undesirable
understanding of the task. The term task refers to the job to be situations.
accomplished by the user through the use of the interactive system.  Utility: extent of providing the right kind of functionality so that users can
3. “Reduce Memory Load” do what they need or want to do.
Designing interaction with as little memory load as possible is a principle  Effectiveness: concern a user’s ability to accomplish a desired goal or to
that also has a theoretical basis. Humans are certainly more efficient in carry out work
carrying out tasks that require less memory burden, long or short term.  Efficiency: a measure of how quickly users can accomplish their goals or
Keeping the user’s short-term memory load light is of particular finish their work using the system.
importance with regard to the interface’s role as a quick and easy  Usability: ease of learning and ease of use.
guidance to the completion of the task.  Appeal: how well the user likes the system.
4. “Strive for Consistency”
In the longer term, one way to unburden the memory load is to keep Lesson 4: Usability of Interactive System
consistency. This applies to (a) both within an application and across User Interface Designer – heroes of the profound transformation.
different applications and (b) both the interaction model and interface  Their work turned personal computers into today’s widely successful
implementation.
devices, enabling users to communicate and collaborate in remarkable
5. “Remind Users and Refresh Their Memory”
Any significant task will involve the use of memory, so another good ways.
strategy is to employ interfaces that give continuous reminders of Eric Schmidt – Google’s Crusading Internet visionaries who promote a world with
important information and thereby refresh the user’s memory. The free access to information and entertainment.
human memory dissipates information quite quickly, and this is Successful designers go beyond vague notions of “user friendliness,” “intuitive,”
especially true when switching tasks in multitasking situations and “natural” doing more than simply making checklist of subjective guidelines.
6. “Prevent Errors/Reversal of Action” ISO 9241 standard Ergonomics of Human-System Interaction (ISO, 2013) –
While supporting a quick completion of the task is important, error free
focuses on admirable goals: effectiveness, efficiency and satisfaction.
operation is equally important [6]. As such, the interaction and interface
should be designed to avoid confusion and mental overload. Inactive Practical evaluation:
menu items are good examples of such a technique. Despite employing  Time to Learn – How long does it take for typical members of the users’
some of the principles and techniques described here, there is always a community to learn how to use the actions relevant to a set of task?
chance that the user will make mistakes. Thus, a very obvious but easy-  Speed of Performance – How long does it take to carry out the
to-forget feature is to allow an easy reversal of action. benchmark tasks?
7. “Naturalness”
 Rate of Errors by Users – How many and what kind of errors do people
The final major HCI principle is to favor “natural” interaction and
interfaces. Naturalness refers to a trait that is reflective of various make in carrying out the benchmark tasks?
operations in our everyday life. For instance, a perfect HCI may one day  Retention Over Time – How well do users maintain their knowledge after
be realized when a natural language–based conversational interface is an hour, a day, or a week?
possible, because this is the prevalent way that humans communicate.  Subjective Satisfaction – How much did users like using various aspects
of the interface?
The continuous logs and user comments guide evolutionary refinements.

Module 1| Chapter 1: Introduction to Human-Computer Interaction 5

Goals for our Profession Lesson 5: Universal Usability
Three broad goals for interface design profession: Profession’s ultimate goal: addressing the needs of all users.
1. Influencing academic and business researchers; Interface Designers measurements for differing situations that leads to
2. Providing tools, techniques, and knowledge for commercial rethinking interface designs:
designers; and 1. Variations in Physical Abilities and Physical Workplace – The great
3. Raising the user-interface consciousness of the general public. diversity in these static measures reminds us that there can be no image
Influencing academic and business researchers; of “average” users and that compromises must be made or multiple
Researchers in human-computer interaction are prolific as they produce more versions of a system must be constructed.
than 10000 papers per year. 2. Diverse Cognitive and Perceptual Abilities –
Fruitful directions of research: 3. Personality Differences – One evident difference is between men and
 Reduce anxiety and fear of computer usage. Some competent people women.
resist using email and engaging in e-commerce because they are anxious - Psychological scales.
about or fearful of: breaking the device, making an embarrassing mistake 4. Cultural and International Diversity – Users who were raised learning
or having their privacy violated. Japanese or Chinese will scan a screen differently from users who were
 Graceful evolution. Novices later wish to move up to more powerful raised learning to read English or French.
facilities. 5. Users with Disabilities – Designing for accessibility helps everyone.
 Social Media. The remarkable spread of social media is an indicator of 6. Older Adult Users – Understanding the human factors of aging can help
larger changes to come. designers to create user interfaces that facilitate access by older adult
 Input devices. The plethora of input devices presents opportunities and users.
challenges to interface designers. 7. Children - The noble aspirations of designers of children’s software
 Information exploration. Users will want to filter, select, and restructure include educational acceleration, facilitating socialization with peers, and
their information rapidly with minimum effort and without fear of getting fostering the self-confidence that comes from skill mastery.
lost or finding misleading information. 8. Accommodating Hardware and Software Diversity – The challenge of
Providing tools, techniques, and knowledge for commercial designers; accommodating diverse hardware is coupled with the need to ensure
Employers recognize the competitive advantage from high-quality consumer access through many generations of software.
interfaces and from improving the performance of their employees. Three main technical challenges:
Raising the user-interface consciousness of the general public. - Producing satisfying and effective Internet interaction on high-speed
One of this profession goal is to encourage users to translate their internal fears and slower connection.
into outrage action. - Responsive design enabling access to web services from large
displays and smaller mobile devices.
- Supporting easy maintenance of or automatic conversion to multiple
languages.

Module 1| Chapter 1: Introduction to Human-Computer Interaction 6