Chapter 1: Introduction to Human Computer Interaction (HCI)

🎯 Learning Objectives

By the end of this study session, you’ll be able to:

Define HCI and explain why it’s crucial in today’s technology-driven world
Trace the fascinating evolution of computer interfaces from the 1950s to today’s ubiquitous computing
Distinguish clearly between User Interface (UI), User Experience (UX), and Usability - and explain how they work together
Break down usability into its three core components: effectiveness, efficiency, and satisfaction
Identify the key disciplines that contribute to successful HCI design (you’ll be surprised how many fields are involved!)
Compare and contrast the traditional waterfall development approach with the HCI framework
Apply PACT analysis (People, Activities, Contexts, Technologies) to real-world design scenarios
Recognize the effects of poor UI design and understand why good design often goes unnoticed
Understand why iteration is the secret sauce of successful interface design

🌟 The Big Picture

Here’s what this chapter is really about: HCI is the bridge between humans and computers, and building that bridge well requires understanding both sides deeply.

Think about it this way - we’ve moved from a world where only computer experts could use machines (remember those punch cards?) to one where your grandmother video calls her grandchildren with ease. This transformation didn’t happen by accident. It happened because designers learned to put humans first instead of just focusing on what computers could do.

The core message you’ll discover is that creating great interactive systems isn’t just about programming - it’s about understanding psychology, ergonomics, sociology, and more. It’s about designing systems that don’t just work, but work beautifully for real people doing real tasks in real environments.

📚 Core Concepts

What is HCI and Why Should You Care?

Let’s start with the basics! HCI stands for Human Computer Interaction (though it used to be called Man-Machine Interaction back in the day). Here’s how I like to think about it:

HCI is the study of people and computing, and how they influence each other. It’s like being a translator between two very different languages - human needs and computer capabilities.

The formula is simple: Human + Computer + Interaction = HCI

But here’s what makes it fascinating - usability is the main star of the show. Usability means making systems that are:

Safe to use
Easy to learn
Easy to use

The Goals That Drive HCI Forward

HCI has three main goals that guide everything we do:

Increase individual and organizational productivity - Help people get stuff done faster and better
Improve safety and reduce health hazards - Think about those airplane cockpits or medical devices
Reduce costs associated with developing user interfaces - Good design saves money in the long run

Visual Reference (Slide 3):

The document shows WWII aircraft cockpit images that illustrate the complexity and chaos of early human-machine interfaces - dozens of gauges, switches, and controls with no clear organization. This historical example shows us why good interface design became so crucial, especially in high-stakes environments where confusion could be deadly.

The Fascinating Evolution of Computer Interfaces

Let me take you on a time travel journey through interface design! This evolution shows us how we gradually learned to make computers more human-friendly.

The 1950s-60s: When Computers Were Exclusive Club Members

Back then, computers were like exclusive, expensive clubs:

Computing resources were incredibly expensive
Only highly trained professionals could operate them
You literally fed instructions to computers using punch cards and magnetic tape

Visual Reference (Slide 6):

The images show massive room-sized computers with technicians in white coats, people holding stacks of punch cards, and complex control panels. These weren’t personal devices - they were industrial machines that required specialized knowledge to operate.

The 1970s: Personal Computers and Command Lines

This decade brought us the Personal Computer and the Command Line Interface (CLI):

Computers became smaller and more accessible
You typed text commands to tell the computer what to do
Still required learning specific commands, but much more user-friendly than punch cards

Visual Reference (Slide 7):

Shows early personal computers with green text on black screens, displaying command prompts and basic menu systems. The human element becomes more prominent - regular people, not just technicians, sitting at these machines.

The 1980s: The GUI Revolution Begins

The Graphical User Interface (GUI) changed everything!

Xerox Star was the pioneer - the first commercial attempt at a mouse-based GUI. Though it wasn’t commercially successful, it laid the groundwork for everything that followed.

Visual Reference (Slide 8):

Two images show the Xerox Star workstation with its distinctive design and the revolutionary GUI interface with windows, icons, and mouse interaction - concepts we take for granted today.

1984: The Macintosh Makes GUI Mainstream

Apple’s Macintosh brought GUI to the masses with:

User-friendly icons and windows
Point-and-click interaction
The famous “Hello” message that welcomed users

Visual Reference (Slide 9):

Shows the iconic original Macintosh computer and screenshots of its GUI, including the desktop with folders and the early drawing program displaying “Hello Wikipedia!” - demonstrating how GUI made computers more intuitive and creative.

1987: Windows Enters the Scene

Microsoft launched Windows 1.0 and 2.0, bringing GUI concepts to PC users with multiple overlapping windows and early versions of familiar applications.

Visual Reference (Slide 10):

Displays the busy, colorful interface of early Windows with multiple overlapping windows, showing games, file managers, and various applications - quite chaotic compared to modern standards but revolutionary for its time.

The 1990s-2000s: Computing Goes Mainstream

This era marked a crucial shift:

Computing resources became cheap
Computers were operated by non-computer experts - regular people like you and me!

Visual Reference (Slide 11):

Shows the sleek iMac and Windows 98 desktop, representing the era when computers became household items rather than professional tools.

Present-Future: Ubiquitous Computing

We’ve now entered the age of Ubiquitous/Pervasive Computing where computing is everywhere - in our homes, cars, pockets, and soon, maybe even embedded in our daily objects.

Visual Reference (Slide 12):

Displays an isometric illustration of a smart home with a family using various connected devices, representing how computing has become seamlessly integrated into our daily lives.

Understanding User Interfaces (UI)

Here’s a simple way to think about UI: It’s everything the user can SEE, HEAR, and TOUCH when interacting with your system.

Classic UI Components (Standard PC):

Screen (what you see)
Keyboard (what you type on)
Mouse (what you point and click with)
Speakers (what you hear)

Modern UI Components Get Creative:

Microphone (voice input - think Siri or Alexa)
Buttons (physical ones on printers, remote controllers, etc.)
Lights (status indicators on modems, ATMs, air conditioners)
Hand-tracking gloves (detect finger movements for VR)
Eye trackers (know where you’re looking)

Visual Reference (Slide 14):

Shows a person wearing VR goggles and hand-tracking gloves alongside an eye-tracking device and a heat map showing where users look on a webpage. These images illustrate how UI has evolved beyond traditional keyboard and mouse to include gesture, voice, and gaze interactions.

The Human Factor: Why We Design for People

Here’s a crucial insight: The user (human) is the one whom computer systems are designed to assist. This means we absolutely must understand human capabilities and limitations.

The key thing to remember: Humans are limited in their capacity to process information. This limitation has huge implications for design - we can’t just throw unlimited information at people and expect them to handle it well.

This is why understanding psychology, ergonomics, and human factors becomes so important in HCI design.

The Interaction Triangle: UI, UX, and Usability

This is where many students get confused, so let’s clear this up once and for all! Think of these three concepts as closely related family members:

Visual Reference (Slide 16):

Shows a diagram illustrating the human-computer interaction system with components like human information processing, language/communication, ergonomics on the human side, and dialogue techniques, computer graphics, and architecture on the computer side.

User Interface (UI)

What it is: The part of the system users interact with directly
Think of it as: The “face” of your system

Usability

What it is: How well users can use the interface to accomplish their goals
Think of it as: The “performance” of your system

User Experience (UX)

What it is: The overall feeling and perception users have about your system
Think of it as: The “emotion” your system creates

Breaking Down Usability: The Three Pillars

According to the International Standard Organisation (ISO 9241-11:2018), usability has three core components. Think of them as three legs of a stool - you need all three for stability:

1. Effectiveness

Can users actually accomplish what they set out to do?

Measures completeness and accuracy of goal achievement
Looks at whether user goals were met successfully
Checks if all work is correct
Key question: “Can users use the system to do the work they need to do?“

2. Efficiency

How quickly can users complete their tasks?

Focuses on resources used in relation to results achieved
Resources include time, human effort, costs, and materials
Key question: “Once users have learned the design, how quickly can they perform tasks?“

3. Satisfaction

How pleasant is it to use the system?

Measures physical, cognitive, and emotional responses
Looks at comfort and acceptability
Considers whether the system meets user needs and expectations
Key question: “How pleasant is it to use the design?”

User Experience (UX): The Emotional Layer

UX goes beyond just usability - it’s about the person’s perceptions and responses from using (or even anticipating using) your product.

UX can make systems:

Enjoyable and fun
Entertaining and motivating
Aesthetic and rewarding
Emotionally fulfilling and informative
And so much more!

Visual Reference (Slide 22):

Shows happy cartoon characters expressing various positive emotions, illustrating how good UX creates positive emotional responses in users.

The Ketchup Bottle Analogy: UI vs UX vs Usability

Visual Reference (Slide 23):

This brilliant analogy uses three Heinz ketchup bottles:

UI Bottle: Traditional glass bottle - functional but basic interface
UX Bottle: Upright squeeze bottle - improved experience, easier to use
Usability Bottle: Upside-down squeeze bottle - optimized for actual use patterns

This shows how UI provides the interface, UX improves the experience, but usability focuses on actual task completion.

Design Philosophy: Function vs. Action vs. Emotion

Visual Reference (Slide 24):

Two interface designs are compared:

UI Design: Simple dialog with just a “Submit” button

Philosophy: “Function: It works”
Gets the job done but nothing more

Usability Design: Dialog with both “Submit” and “Cancel” buttons

Philosophy: “Action: It works well”
Considers user needs and provides options

Visual Reference (Slide 25):

User Experience Design: Friendly dialog saying “Yes, Complete My Order” with “No thanks” option

Philosophy: “Emotion: It works well and makes me say Wow!”
Creates positive emotional connection

Real-World UX Example: How Gojek Handles Bad News

Visual Reference (Slides 26-27):

Gojek’s approach to order cancellation shows brilliant UX design:

Traditional approach: “Order cancelled! Sorry, your order has been cancelled by the driver. OK”

Gojek’s UX approach: Uses empathetic language and imagery:

Shows broken heart illustration
Says “Driver has cancelled your order. Let’s move on and find another one. Shall we?”
In Indonesian: “Yah, belum jodoh… Driver gak jadi ngambil order” (roughly: “Ah well, not meant to be…“)
Adds humor: “Tenang, masih ada driver lain yang siap nganterin!” (“Don’t worry, there are other drivers ready to deliver!“)

This transforms a frustrating experience into something more human and understanding.

The Power of Good Design: Benefits for Everyone

Benefits for Developers:

Minimize customer support costs (fewer confused users calling for help)
Reduce training time needed (intuitive systems need less explanation)
Build good reputation (happy users become advocates)

Benefits for Users:

Increased productivity (get more done in less time)
Reduced learning time (start being productive faster)
Fewer errors (well-designed systems prevent mistakes)
Reduced stress (frustration-free computing)

The Dark Side: Effects of Poor UI Design

While good design often goes unnoticed, poor design makes itself very obvious. Bad interfaces can:

Cause users to make more errors (leading to frustration and lost work)
Create unnecessary anxiety and inconvenience (stress nobody needs)
Decrease user productivity (people accomplish less)
Make products difficult to use and learn (high abandonment rates)
Cause products to be perceived as low quality (even if the underlying functionality is good)

The Interdisciplinary Nature of HCI

Here’s something that might surprise you: Creating great interactive systems requires expertise from many different fields! As Alan Dix famously said: “It is not possible to design effective interactive systems from one discipline in isolation.”

Key Disciplines Contributing to HCI:

Computer Science:

Studies software construction
Provides knowledge about technology capabilities and limitations

Cognitive Psychology:

Studies how information is processed and represented in the mind
Provides knowledge about user capabilities and limitations

Ergonomics/Human Factors:

Studies human beings in relationship to their working environment
Provides knowledge about designing tools and environments that suit human capacities

Social and Organizational Psychology:

Studies how people work together and within organizations
Plus many other disciplines!

Visual Reference (Slide 35):

Shows various interface design considerations like mobile device ergonomics, tablet usage patterns, and proper computer workstation setup, illustrating how human factors influence design decisions.

Visual Reference (Slide 36):

A vending machine example with labeled points (A, B, C, D) showing how different disciplines contribute:

A (Computer Science): The internal computing system
B (Cognitive Psychology): The user interface and information processing
C (Ergonomics): The physical interaction points and accessibility
D (Social/Organizational Psychology): The social context of use

Visual Reference (Slide 37):

A comprehensive diagram showing all the disciplines that feed into “Designing Interactive Systems” - from sociology and psychology at the top, to technologies and engineering on the sides, to business and organizational factors at the bottom.

Development Approaches: Waterfall vs. HCI Framework

Understanding these two approaches will help you appreciate why HCI thinking revolutionized software development.

The Traditional Waterfall Approach:

Follows a linear sequence:

Analysis → 2. Design → 3. Program → 4. Test → 5. Operational

Problems with this approach:

Development driven by functional requirements (what the system can do)
Delivers what designers think users want
No user involvement until the end
Hard to make changes once you’re far along

The HCI Framework Approach:

Emphasizes iteration and user involvement:

Study users & tasks (Analysis)
Design prototype
Usability test ↔ (iterate between steps 2 and 3)
Program (final implementation)

Key principles:

Focus on user needs from the beginning
Analyze user tasks so you can provide functionality to support those tasks
Build prototypes for early testing
Carry out early testing and evaluation with real users
Iterate until a good design is achieved

Visual Reference (Slide 41):

Side-by-side comparison showing the linear waterfall model versus the iterative HCI framework with its crucial feedback loop between design prototype and usability testing.

The Essential Difference: Iteration

The HCI framework recognizes that you can’t get the design right the first time. You need to build a little, test a little, and refine based on what you learn from real users.

PACT Analysis: A Framework for Understanding Context

Before designing any interface, you need to understand the current situation. PACT Analysis gives you a systematic way to do this:

P - People

Consider:

Physical characteristics (age, height, weight, disabilities)
Psychological factors (memory, mental models, cognitive abilities)
Usage patterns (expert vs. novice users, frequency of use)

A - Activities

Think about:

Time factors (when, how often, time pressure)
Complexity (simple vs. complex tasks)
Safety criticality (what happens if something goes wrong?)
Content type (information, media, data being handled)

C - Context

Examine:

Physical environment (lighting, noise, space constraints)
Social context (culture, language, organizational factors)
Usage context (mobile, desktop, public, private)

T - Technologies

Evaluate:

Input methods (touchscreen, mouse, voice, gestures)
Output methods (monitor, speaker, haptic feedback)
Platform constraints and capabilities

PACT Example: Designing a Train Ticket Machine

Let’s apply PACT to a real scenario:

People: Wide range of ages and technical abilities, people carrying luggage, possible language barriers, varying heights

Activities: Quick ticket purchase, often under time pressure, may involve complex route planning, payment processing

Context: Noisy train station environment, people standing in line behind you, outdoor/semi-outdoor locations, varying lighting conditions

Technology: Touchscreen interface, ticket printer, payment card readers, possibly multilingual support

This analysis reveals design requirements like: large, clear buttons; simple navigation; multiple language options; accessibility considerations; and robust hardware for harsh environments.

🔄 Connections and Review

Let’s tie this all together! Here are the key connections you should remember:

The Big Evolution Story: We’ve moved from computers that only experts could use to ubiquitous computing that surrounds us. This journey shows us the importance of human-centered design.

The Three Pillars Work Together: UI provides the interface, usability ensures it works well, and UX creates positive emotions. You need all three for success.

Iteration is Everything: Unlike traditional software development, good interface design requires building, testing, and refining based on real user feedback.

It Takes a Village: HCI draws from computer science, psychology, ergonomics, and many other fields because creating great interactive systems requires understanding both humans and technology deeply.

Context Matters: PACT analysis reminds us that good design must consider the people, activities, contexts, and technologies involved in real usage scenarios.

The bottom line? Great HCI design puts humans first, embraces iteration, and recognizes that technology should adapt to people, not the other way around.

You’re now ready to think like an HCI designer - someone who creates technology that truly serves human needs! 🎉

Note51

Explorer

0.0 by Claude