CHAPTER 2: Part 3 CONCEPTUAL INTERACTION IT4106 - User Experience Design BIT UCSC 2nd Year 2nd Semester Notes PDF Download ICT Classes

2.1.4 Principles of Good Interaction Design

🎯 Learning Objectives

After studying this lesson, students should be able to:

• Define Interaction Design Principles.
• Explain why design principles are important.
• Describe the eight fundamental principles of interaction design.
• Apply these principles when designing user interfaces.
• Identify poor interface designs by analyzing design principles.

📖 Introduction & What are Design Principles?

Imagine two websites that sell the same product. Website A is simple, organized, and easy to use. Website B is confusing, cluttered, and difficult to navigate. Most people will choose Website A. Why? The difference is good interaction design.

What are Interaction Design Principles?

Definition: A set of guidelines used by UX designers to create systems that are easy, efficient, consistent, and satisfying for users.

Simple Definition: Rules that help designers create user-friendly software.

Why are they Important?

Following these principles helps designers:

• Reduce user confusion and prevent errors.
• Improve usability, efficiency, and user satisfaction.
• Reduce training time and build user confidence.

👁️ 1. Visibility & 2. Feedback

1. Visibility

Definition: Making important functions and controls easy for users to see. If users cannot see a function, they cannot use it.

Good Design: A large green "Checkout" button placed clearly at the bottom of the cart.
Bad Design: The checkout button is hidden inside a complex menu.

Design Tips: Make important buttons large, use readable fonts, highlight primary actions, and avoid hiding important features.

2. Feedback

Definition: The information provided by the system after a user performs an action. It tells users what happened.

Types of Feedback:

• Visual: Loading bar, animation, check mark, progress indicator.
• Audio: Notification sound, keyboard click, camera shutter.
• Haptic: Phone vibration, game controller vibration.

Why it matters: Without feedback, users might click "Pay" multiple times if there is no loading indicator, causing duplicate transactions.

🚧 3. Constraints & 4. Consistency

3. Constraints

Definition: Limitations placed on users to prevent incorrect actions. They stop users from making mistakes.

Types of Constraints:

• Physical: A USB plug only fits in one orientation.
• Logical: The "Next" button is disabled until all required fields are filled.
• Cultural: Red means Stop, Green means Go.
• Semantic: A steering wheel belongs in front of the driver.

4. Consistency

Definition: Using the same design patterns, layouts, terminology, and behaviors throughout a system. Similar things should behave in similar ways.

Example: If the "Save" button is blue on one page, it should be blue on every other page. Android apps consistently place the "Back" button in the same location.

🚪 5. Affordance & 6. Signifiers

5. Affordance

Definition: The properties of an object that suggest how it can be used. It tells users what an object allows them to do.

• Door Handle: Affords "Pull".
• Push Plate: Affords "Push".
• Button: Affords "Click".
• Slider: Affords "Drag".

6. Signifiers

Definition: Visual, textual, or audio cues that indicate how an object should be used.

Difference Between Affordance and Signifier

Feature	Affordance	Signifier
Definition	What the object can do	How users know what it can do
Example	A button affords clicking	Its blue color and shadow signify it is clickable

Examples of Signifiers: Underlined text (hyperlink), Play icon ▶ (video), Hamburger menu ☰ (navigation), Bell icon (notifications).

🗺️ 7. Mapping & 8. Learnability

7. Mapping

Definition: The relationship between controls and the effects they produce. Users should easily understand which control affects which function.

Good Example: A stove with four burners and four knobs. Good mapping places each knob in the exact same spatial arrangement as the burners. Poor mapping forces users to guess which knob controls which burner.

8. Learnability

Definition: The ease with which new users can learn to use a system effectively. A learnable system is easy for beginners to understand.

Example: Most people can learn to use WhatsApp within minutes because its interface is simple, familiar, and features clear navigation.

📊 Summary Table & Classroom Activity

Summary of the 8 Principles

Principle	Meaning	Example
Visibility	Important functions are easy to see	Large "Checkout" button
Feedback	System informs users about actions	"File Saved Successfully"
Constraints	Prevent incorrect actions	Password complexity rules
Consistency	Similar elements behave similarly	Same menu layout on every page
Affordance	Object suggests its use	Button suggests clicking
Signifiers	Cues indicate how to use something	Underlined hyperlink
Mapping	Clear relationship between control & effect	Correct stove knob layout
Learnability	Easy for beginners to learn	WhatsApp interface

📝 Classroom Activity: Visit any popular e-commerce website (such as Daraz or Amazon) and identify examples of the 8 principles. Discuss how these principles improve the user experience.

🏁 Topic 2.1 Status & Final Summary

✅ Topic 2.1 (Conceptualizing Interaction) Completed!
We have now covered:

• ✅ Introduction to Interaction & Conceptualizing Interaction
• ✅ Types of Interaction (Instructing, Conversing, Manipulating, Exploring)
• ✅ Interaction Paradigms (CLI to AI)
• ✅ Direct vs. Indirect Manipulation
• ✅ Principles of Good Interaction Design

Final Summary: Interaction Design Principles are the foundation of good UX. By applying visibility, feedback, constraints, consistency, affordance, signifiers, mapping, and learnability, designers can create systems that are intuitive, efficient, and enjoyable to use.

2.2 Conceptual Models

🎯 Learning Objectives

• Define a conceptual model.
• Explain why conceptual models are important.
• Identify the components of a conceptual model.
• Differentiate between conceptual, mental, and implementation models.
• Develop simple conceptual models for software systems.

📖 Introduction & What is a Conceptual Model?

Before developing any software, designers need to understand how users think the system should work. Instead of immediately designing screens or writing code, UX designers first create a conceptual model.

Definition

A Conceptual Model is a high-level representation of how a system works from the user's perspective. It explains the objects, actions, and relationships within the system without focusing on technical implementation.

Simple Definition: A plan or blueprint that shows how users interact with a system.

Example: ATM System

Insert Card ↓ Enter PIN ↓ Choose Transaction ↓ Process Request ↓ Display Result ↓ Return Card

This shows how the system works from a user perspective, not how it is programmed.

Why are Conceptual Models Important?

• Help understand user requirements and simplify complex systems.
• Improve communication among developers, designers, and stakeholders.
• Reduce design errors, save development time/cost, and improve UX.

🧩 Components of a Conceptual Model

A conceptual model usually includes four main components:

1. Objects

The items users interact with (e.g., Button, File, Folder, Shopping Cart, Product, Customer).

2. Actions

What users can do with objects (e.g., Open, Save, Delete, Search, Add to Cart, Login).

3. Relationships

How objects are connected. Example: Customer → Places → Order; Order → Contains → Products.

4. Feedback

How the system informs users about the result of their actions (e.g., "Login Successful", "Order Confirmed").

Example: Online Shopping System

Object	Action
Product	View, Add to Cart
Cart	Checkout
User	Login
Order	Track

✨ Characteristics, Examples & Pros/Cons

Characteristics of a Good Conceptual Model

A good conceptual model should be: Simple, Easy to understand, Consistent, User-centered, Logical, Flexible, and Easy to learn.

Real-World Example: Library Management System

• Objects: Book, Student, Librarian.
• Actions: Search Book, Borrow Book, Return Book, Renew Book.

Search Book → Select Book → Borrow Book → Return Book

Advantages & Disadvantages

Advantages	Disadvantages
Easy to understand. Reduces confusion. Helps identify design problems early. Improves team communication.	Does not show technical details. May need updates when requirements change. Different people may interpret the model differently.

📝 Classroom Activity & Summary

📝 Classroom Activity: Design a conceptual model for a Food Delivery App.

Expected Answer (Flow):
Login → Browse Restaurants → Select Food → Add to Cart → Checkout → Payment → Track Order

Summary

A Conceptual Model is a simplified representation of how a system works from the user's point of view. It identifies the objects, actions, relationships, and feedback within a system. Creating a conceptual model before development helps designers build systems that are easier to understand and use.

🎓 Expert ICT, Coding, School Classes, Digital Marketing & University Project Guidance

Struggling with your university final year project? Want to master coding, upscale your business with expert digital marketing, or learn absolute computer basics from scratch? We offer high-quality individual and group online classes conducted in English, Sinhala, or Tamil mediums. Get guaranteed academic success and professional growth with tailored guidance.

---

🎓 University Final Year Project Guidance & AI

Get specialized, end-to-end mentoring and technical support to pass your degree or master's program with flying colors:

• 🏫 Targeted Institutes: Expert guidance tailored for BIT UCSC, UoM, SLIIT, NIBM, and other leading universities.
• 🔬 Postgraduate Support: Comprehensive assistance for MSc Software Final Year Projects.
• 🤖 AI & Smart Applications: Step-by-step implementation of AI, Machine Learning (ML), and automation modules.
• ✅ Guaranteed Success: Help with documentation, system architecture, coding, and viva preparation.

---

🏫 School ICT & Corporate Beginner Classes

• 💻 Non-IT Staff Computer Basics: Absolute beginner-friendly online classes covering essential computer skills, office tools, and internet operations.
• 🎒 Primary & Secondary (Grades 1-10): Interactive online ICT classes tailored to build strong foundations from early ages.
• 📝 Exam Prep: Dedicated training packages for GCE O/L, GCE A/L ICT, and GIT exams.
• 🌍 Global Syllabuses: Complete curriculum coverage for Local, Edexcel, and Cambridge in English & Tamil Mediums.

---

📢 Software Development & Digital Marketing Services

• ⚙️ Software & Web Development: Professional custom software application and website development built using PHP & MySQL.
• 🎯 Social Media Management: Content creation, publishing, and channel management for Facebook, Instagram, TikTok, and YouTube.
• 📈 Ad Boosting: Highly targeted paid advertising campaigns to drive leads, traffic, and sales to your business.

---

📞 Connect With Us Instantly

Book your slot for online classes or get a premium tech service quote today!

💬 WhatsApp: +94 729622034

📧 Email: ITClassSL@gmail.com

---

🌐 Explore Our Resources & Communities

Stay updated with our latest tutorials, project ideas, and student guides across all our official platforms:

• 📺 YouTube Tutorials: Subscribe to our Channel
• 💼 Professional Network: Connect on LinkedIn
• ✍️ Tech Blog: Visit our WordPress Site
• ❓ Project Q&A: Follow our Quora Guide Profile
• 📰 Monthly Updates: Read Our Newsletter
• 🌐 Official Portfolios: Wix Site | Google Business | Strikingly Portfolio
• 🗣️ Student Forum: Join our ElaKiri Discussion Thread

CHAPTER 2: Part 2 IT4106 - User Experience Design BIT UCSC UoM Computer ICT Notes Online Classes

2.1.2 Interaction Paradigms

🎯 Learning Objectives

After studying this section, students should be able to:

• Define an interaction paradigm.
• Explain the evolution of interaction paradigms.
• Identify different interaction paradigms.
• Compare traditional and modern interaction paradigms.
• Explain how interaction paradigms influence User Experience (UX).

📖 Introduction & What is a Paradigm?

Technology has changed dramatically over the past few decades. The way people interacted with computers in the 1960s is very different from how we interact with today's smartphones, smartwatches, and AI assistants. These changes are known as Interaction Paradigms.

What is a Paradigm?

Definition: A paradigm is a model, pattern, or way of thinking that guides how something is designed or performed. In computer science, it represents a standard approach used to solve problems or design systems.

Simple Definition: A paradigm is a general way of doing something.

Example (Transportation): People first travelled by walking → horse carts → bicycles → cars → electric vehicles. Each represents a different transportation paradigm. Similarly, computers evolved from command-line systems to graphical interfaces, touch screens, and voice-controlled systems.

💡 What is an Interaction Paradigm?

Definition

An Interaction Paradigm is the overall approach or style used for communication between users and computer systems. It defines how users perform tasks and how the system responds.

Simple Definition: The method through which people communicate with computers.

Why are Interaction Paradigms Important?

Interaction paradigms influence user behaviour, satisfaction, productivity, learnability, and accessibility. A good interaction paradigm makes software intuitive and reduces the learning curve.

Example (Windows GUI): Click icons → Open folders → Drag files → Delete documents. This follows the Graphical User Interface (GUI) paradigm.

🖥️ Evolution: CLI & GUI

1. Command-Line Interface (CLI)

Users type text commands to communicate with the computer (e.g., Windows Command Prompt, Linux Terminal, MS-DOS).

mkdir Projects (Creates a new folder) cd Projects (Moves into the directory) dir (Displays all files)

• Advantages: Very fast for experts, low resource usage, powerful for automation.
• Disadvantages: Must memorize commands, typing errors cause failures, not suitable for beginners.

2. Graphical User Interface (GUI)

Users interact using graphical elements such as icons, windows, buttons, and menus (e.g., Windows 11, macOS, Android).

Click Folder → Folder Opens → Select File → Drag File → Drop into Another Folder

• Advantages: Easy to learn, visual, no command memorization, suitable for beginners.
• Disadvantages: Consumes more memory, may become cluttered if poorly designed.

🌐 Evolution: Web, Mobile & Touch

3. Web-Based Interaction

Users communicate with applications through web browsers (e.g., Google, Facebook, YouTube, Amazon).

• Pros: Accessible anywhere, no installation, easy updates, cross-platform.
• Cons: Internet required, performance depends on network speed.

4. Mobile Interaction

Users interact through touch, swipe, pinch, voice, and biometrics (e.g., WhatsApp, TikTok, Banking Apps).

• Pros: Portable, natural, location-aware, camera integration.
• Cons: Small screen, limited keyboard, battery dependency.

5. Touch-Based Interaction

Users directly manipulate objects using gestures like tap, swipe, pinch, spread, and rotate (e.g., Google Maps zooming).

🚀 Evolution: Voice, Gesture, VR, AR & AI

6. Voice User Interface (VUI)

Users communicate using spoken language (e.g., Siri, Alexa, ChatGPT Voice). Pros: Hands-free, accessible. Cons: Recognition errors, privacy concerns.

7. Gesture-Based Interaction

Users control systems through body movements (e.g., Microsoft Kinect, VR Controllers).

8. Virtual Reality (VR) & 9. Augmented Reality (AR)

VR: Creates a completely digital environment (e.g., Meta Quest). AR: Adds digital info to the real world (e.g., Pokémon GO, IKEA Place).

10. AI-Based Interaction

Users communicate naturally, and systems understand intentions (e.g., ChatGPT, Copilot). Users simply say "Summarize this document," and the AI generates it.

📊 Comparison & Case Study: Banking

Comparison of Interaction Paradigms

Paradigm	Input Method	Examples	Suitable For
Command Line	Keyboard Commands	Linux Terminal	Experts
GUI	Mouse + Keyboard	Windows	General Users
Web	Browser	Google, Facebook	Internet Apps
Mobile/Touch	Touch	Android, iPhone	Smartphones
Voice	Speech	Siri, Alexa	Hands-Free
VR/AR	Headset/Camera	Meta Quest, Pokémon GO	Simulation/Real-World
AI-Based	Natural Language	ChatGPT	Intelligent Assistance

Case Study: Evolution of Banking

1980: Visit Branch → Paper Forms → Manual Processing ↓ 2000: ATM Machines → Card + PIN → Cash Withdrawal ↓ 2010: Internet Banking → Web Browser → Transfer Money Online ↓ 2025: Mobile + AI → Face Recognition → Voice Commands → Instant Payments

🔑 Key Points to Remember

• An interaction paradigm is the overall method through which users interact with a computer system.
• Paradigms evolved from CLI → GUI → Web → Mobile → Touch → Voice → Gesture → VR → AR → AI.
• Each paradigm has its own strengths, limitations, and suitable application areas.
• UX designers must select the paradigm that best matches users' goals, skills, and context of use.

2.1.3 Direct & Indirect Manipulation

📝 Note for Lecturer: Although "Direct vs. Indirect Manipulation" is not explicitly listed in the syllabus, it is a core concept under Conceptualizing Interaction (from the recommended textbook). Understanding this helps students grasp why some interfaces feel intuitive and others do not.

🎯 Learning Objectives

• Define Direct and Indirect Manipulation.
• Explain the characteristics of Direct Manipulation.
• Compare Direct and Indirect Manipulation.
• Identify real-world applications of both interaction styles.
• Apply Direct Manipulation principles in interface design.

📖 Introduction & What is Direct Manipulation?

One of the main goals of UX Design is to make systems feel natural. This idea was introduced by Ben Shneiderman in the early 1980s.

What is Direct Manipulation?

Definition: An interaction style where users directly interact with visible objects on the screen instead of entering commands. Objects respond immediately with continuous visual feedback.

Simple Definition: Users directly touch, move, or control objects on the screen.

Direct vs Indirect Example (Moving a File)

DIRECT: Click file → Drag it → Drop into folder (File moves immediately) INDIRECT: Type "Move File" → Type destination → Press Enter (User gives instructions)

✨ Characteristics & Real-Life Examples

3 Characteristics of Direct Manipulation (Shneiderman)

1. Continuous Representation of Objects: Objects remain visible throughout the interaction (e.g., you can always see files and folders on the Desktop).
2. Physical Actions Instead of Complex Commands: Users interact using simple actions like click, drag, drop, touch, swipe, pinch.
3. Immediate Feedback: Every action produces an immediate response (e.g., dragging a folder moves it instantly).

Real-Life Examples

• Smartphones: Touch, swipe, pinch, rotate. Everything responds instantly.
• Google Maps: Pinch to zoom, drag to move, rotate to change direction.
• Microsoft Paint / Canva: Draw, erase, resize, move shapes in real-time.
• Mobile Photo Gallery: Swipe for next photo, pinch to zoom.

⚖️ Advantages & Disadvantages of Direct Manipulation

Advantages

• Easy to Learn: Beginners (even children) quickly understand how to use it.
• Faster Interaction: Dragging files is faster than typing file paths.
• Immediate Feedback: Users know instantly if an action succeeded.
• Fewer Errors: Objects remain visible, reducing mistakes.
• More Enjoyable: Smooth animations improve satisfaction.

Disadvantages

• Requires Graphical Interfaces: Cannot be used in simple text-based systems.
• High Hardware Requirements: Needs graphics processing and touch-sensitive screens.
• Screen Size Limitations: Small mobile screens can become crowded.
• Accessibility Issues: Visually impaired users may need screen readers instead.

⌨️ What is Indirect Manipulation?

Definition

Indirect Manipulation is an interaction style where users communicate using commands, menus, forms, or keyboard input instead of directly controlling objects.

Simple Definition: Telling the computer what to do instead of directly moving objects.

Examples

Command Prompt, Linux Terminal, PowerShell, SQL Commands, Programming Languages.

Instead of dragging a file, the user types: move Report.docx D:\Documents (The computer executes the command) In Linux: cp file.txt backup/

Pros & Cons

• Advantages: Very powerful, suitable for experts, supports automation, works without GUI, consumes fewer resources.
• Disadvantages: Requires memorizing commands, steeper learning curve, higher chance of typing errors, less intuitive.

🔄 Direct vs Indirect Manipulation

Comparison Table

Feature	Direct Manipulation	Indirect Manipulation
Interaction	Directly controls objects	Uses commands or menus
Learning	Easy	More difficult
Feedback	Immediate	Often delayed
User Type	Beginners & general users	Advanced & technical users
Examples	Smartphones, Canva, Maps	Linux Terminal, CMD
Error Rate	Lower	Higher (if commands are wrong)

Real-World Comparison: Deleting a File

Direct Manipulation

Open folder → Select file → Press Delete → Confirmation dialog → File moved to Recycle Bin

Indirect Manipulation

Open Terminal → Navigate to folder → Type: rm report.pdf → Press Enter → File deleted

Which is Better? There is no universally better approach. It depends on user experience level, task complexity, and environment. A graphic designer benefits from Direct Manipulation (Photoshop), while a system administrator benefits from Indirect Manipulation (Linux terminal for automation).

🛠️ Design Guidelines, Activity & Summary

Design Guidelines for Direct Manipulation

• Keep important objects visible.
• Provide immediate feedback for every action.
• Allow users to undo mistakes.
• Use familiar gestures (drag, drop, swipe, pinch).
• Maintain consistency and minimize unnecessary typing.
• Use animations carefully to reinforce actions, not distract.

📝 Classroom Activity: Identify whether the following are Direct or Indirect Manipulation.

Activity	Answer
Dragging a file into a folder	Direct
Typing mkdir Project in Linux	Indirect
Pinching to zoom on Google Maps	Direct
Running a SQL query in a database	Indirect
Rotating an image using touch gestures	Direct

Summary

Direct Manipulation allows users to interact directly with visible objects using actions like clicking and dragging. It provides immediate feedback and is easy to learn.

Indirect Manipulation requires users to issue commands through keyboards or menus. It is powerful for advanced users but has a steeper learning curve.

Good UX designers choose the interaction style based on users' needs, task complexity, and the context in which the system will be used.

🎓 Expert ICT, Coding, School Classes, Digital Marketing & University Project Guidance

Struggling with your university final year project? Want to master coding, upscale your business with expert digital marketing, or learn absolute computer basics from scratch? We offer high-quality individual and group online classes conducted in English, Sinhala, or Tamil mediums. Get guaranteed academic success and professional growth with tailored guidance.

---

🎓 University Final Year Project Guidance & AI

Get specialized, end-to-end mentoring and technical support to pass your degree or master's program with flying colors:

• 🏫 Targeted Institutes: Expert guidance tailored for BIT UCSC, UoM, SLIIT, NIBM, and other leading universities.
• 🔬 Postgraduate Support: Comprehensive assistance for MSc Software Final Year Projects.
• 🤖 AI & Smart Applications: Step-by-step implementation of AI, Machine Learning (ML), and automation modules.
• ✅ Guaranteed Success: Help with documentation, system architecture, coding, and viva preparation.

---

🏫 School ICT & Corporate Beginner Classes

• 💻 Non-IT Staff Computer Basics: Absolute beginner-friendly online classes covering essential computer skills, office tools, and internet operations.
• 🎒 Primary & Secondary (Grades 1-10): Interactive online ICT classes tailored to build strong foundations from early ages.
• 📝 Exam Prep: Dedicated training packages for GCE O/L, GCE A/L ICT, and GIT exams.
• 🌍 Global Syllabuses: Complete curriculum coverage for Local, Edexcel, and Cambridge in English & Tamil Mediums.

---

📢 Software Development & Digital Marketing Services

• ⚙️ Software & Web Development: Professional custom software application and website development built using PHP & MySQL.
• 🎯 Social Media Management: Content creation, publishing, and channel management for Facebook, Instagram, TikTok, and YouTube.
• 📈 Ad Boosting: Highly targeted paid advertising campaigns to drive leads, traffic, and sales to your business.

---

📞 Connect With Us Instantly

Book your slot for online classes or get a premium tech service quote today!

💬 WhatsApp: +94 729622034

📧 Email: ITClassSL@gmail.com

---

🌐 Explore Our Resources & Communities

Stay updated with our latest tutorials, project ideas, and student guides across all our official platforms:

• 📺 YouTube Tutorials: Subscribe to our Channel
• 💼 Professional Network: Connect on LinkedIn
• ✍️ Tech Blog: Visit our WordPress Site
• ❓ Project Q&A: Follow our Quora Guide Profile
• 📰 Monthly Updates: Read Our Newsletter
• 🌐 Official Portfolios: Wix Site | Google Business | Strikingly Portfolio
• 🗣️ Student Forum: Join our ElaKiri Discussion Thread

CHAPTER 2 Part 1: CONCEPTUAL INTERACTION IT4106 - User Experience Design Online ICT BIT UCSC Notes

CHAPTER 2: CONCEPTUAL INTERACTION

🎯 2.1 Conceptualizing Interaction - Learning Objectives

At the end of this lesson, students should be able to:

• Define interaction and conceptualizing interaction.
• Explain why conceptualizing interaction is important in User Experience (UX) Design.
• Identify the four main types of interaction.
• Apply conceptual interaction principles when designing software systems.
• Analyze different software interfaces based on interaction concepts.

📖 Introduction

Whenever we use a computer, smartphone, ATM, website, or mobile application, we are constantly communicating with a computer system. This communication is known as interaction. Every click, swipe, touch, voice command, or keyboard input is an interaction between the user and the system.

Before software developers start writing code, UX designers must carefully think about how users will interact with the system. This planning process is called Conceptualizing Interaction.

Conceptualizing interaction is one of the most important stages of User Experience (UX) Design because it determines whether a system will be easy or difficult to use.

Example: When you open WhatsApp, you immediately know how to send a message because the interaction is simple and familiar. However, if every button had confusing labels or unnecessary steps, users would struggle to perform even simple tasks. Therefore, UX designers focus on designing interactions that are simple, natural, efficient, and enjoyable.

💡 What is Interaction?

Definition

Interaction is the communication or exchange of information between a user and a computer system while performing a task. According to Human-Computer Interaction (HCI), interaction occurs whenever a user performs an action and the computer responds to that action.

Simple Definition: Interaction is the process through which a user communicates with a computer to accomplish a specific goal.

Understanding Interaction

Interaction is not simply pressing buttons. It is a complete communication cycle consisting of four stages:

1. The user performs an action.
2. The system receives the action.
3. The system processes the request.
4. The system provides feedback.

This process continues until the user's goal has been achieved.

Example: Using an ATM

Insert ATM Card ↓ ATM reads the card ↓ Enter PIN ↓ ATM verifies PIN ↓ Choose "Withdraw Cash" ↓ Enter Amount ↓ ATM checks account balance ↓ Cash is dispensed ↓ Receipt printed

Every step above is an interaction between the customer and the ATM.

Everyday Examples of Interaction

Device	User Action	System Response
Smartphone	Touch icon	Opens application
ATM	Insert card	Displays PIN screen
Facebook	Click Like	Updates Like count
YouTube	Press Play	Starts video
Google Search	Enter keywords	Displays search results
Food Delivery App	Place Order	Confirms order
Online Banking	Transfer money	Displays success message

Components of Interaction

Every interaction has four main components:

• 1. User: The person who uses the system (e.g., Student, Customer, Doctor).
• 2. Goal: The reason why the user is using the system (e.g., Withdraw money, Watch a video).
• 3. Action: The operation performed by the user (e.g., Clicking, Typing, Swiping).
• 4. Feedback: The response given by the computer system (e.g., Success message, Sound notification, Loading animation). Without feedback, users do not know whether the system has received their request.

🧠 What is Conceptualizing Interaction?

Definitions

Academic Definition: Conceptualizing Interaction is the process of designing and planning how users will interact with a computer system before the interface is developed. It involves identifying user goals, tasks, system behaviour, expectations, and feedback mechanisms.

Simple Definition: Conceptualizing interaction means thinking about how people will use a system before designing its screens or writing any code. It is the planning stage of interaction design.

Why is Conceptualizing Interaction Important?

A well-designed interaction makes software easier to understand and more enjoyable to use.

• 1. Reduces User Confusion: Users can easily understand how the system works (e.g., "Add to Cart" vs "Acquire Merchandise").
• 2. Saves Time: Users complete tasks faster because they know what to do (e.g., Google Search requires only one box).
• 3. Reduces Errors: A clear interaction design prevents mistakes (e.g., Windows asking "Are you sure you want to delete this file?").
• 4. Improves User Satisfaction: Simple systems make users feel confident and comfortable.
• 5. Reduces Development Cost: Identifying interaction problems during the design phase is much cheaper than fixing them after development.

Real-World Example: Food Delivery App

The user's goal is to order a pizza. The conceptual interaction flow:

Open App ↓ Browse Restaurants ↓ Select Restaurant ↓ Choose Pizza ↓ Add to Cart ↓ Checkout ↓ Choose Payment Method ↓ Confirm Order ↓ Track Delivery

Note: This is not the interface design. It is a conceptual interaction flow, showing how users achieve their goal.

Characteristics of Good Interaction

• Simplicity: Users should be able to complete tasks with minimal effort.
• Consistency: Buttons, menus, and actions should behave the same way throughout the application.
• Visibility: Important options should be easy to find.
• Feedback: The system should always inform users about the results of their actions.
• Learnability: New users should be able to understand the system quickly.
• Efficiency: Experienced users should be able to complete tasks rapidly.
• Error Prevention: The system should minimize the chances of user mistakes and provide recovery options.

🔄 2.1.1 Types of Interaction (Overview)

People interact with computers in different ways depending on the type of system they are using. To design effective software, UX designers must understand these different interaction styles.

According to Helen Sharp, Yvonne Rogers, and Jennifer Preece, there are four fundamental types of interaction: Instructing, Conversing, Manipulating, and Exploring.

Interaction Type	User Activity	Common Examples
Instructing	Giving commands	ATM, Calculator, Printer
Conversing	Communicating using language	ChatGPT, Siri, Alexa
Manipulating	Moving or controlling objects	Photoshop, Mobile Touch Screens
Exploring	Navigating through environments	Google Maps, VR Games

⌨️ 1. Instructing

Definition

Instructing is an interaction style in which the user gives explicit commands to the computer, and the computer performs the requested task. The user tells the computer what to do, and the computer follows the instruction.

Interaction Process

User gives command ↓ Computer receives command ↓ Computer processes command ↓ Computer displays result

Real-Life Examples

• ATM: Insert Card → Enter PIN → Select Withdraw → Enter Amount → Receive Cash.
• Microsoft Word: User clicks File → Save. System saves the document.
• Online Banking: User clicks Transfer Money → Enters Amount → Clicks Confirm → System transfers money.
• Restaurant POS: Cashier → Select Food → Enter Quantity → Generate Bill → Print Receipt.

Advantages & Disadvantages

Advantages:

• Easy to Learn: Users simply follow instructions.
• Fast: Commands are executed immediately.
• Accurate: The computer performs exactly what is requested.
• Suitable for Repetitive Tasks: Great for factories, banks, and POS systems.

Disadvantages:

• Users must know which command to use (e.g., finding "Export PDF").
• Wrong commands produce errors (e.g., deleting the wrong file).
• Too many menus may confuse users.

📝 Classroom Activity: Ask students to list five commands used in Microsoft Word.
Possible Answers: Save, Print, Undo, Copy, Paste.

💬 2. Conversing

Definition

Conversing is an interaction style in which users communicate with the computer using natural language, just as they communicate with another person. The system interprets the user's language and provides an appropriate response using AI and Natural Language Processing (NLP).

Common Conversational Systems

ChatGPT, Google Assistant, Siri, Alexa, Customer Service Chatbots, Banking Chatbots.

Real-Life Example: Sri Lankan Bank Chatbot

Customer types: "I forgot my debit card PIN."
↓
Chatbot replies: "Please visit your nearest branch or use Internet Banking to reset your PIN."

Advantages & Disadvantages

Advantages:

• Natural: Feels like talking to another person.
• Easy for Beginners: No need to remember commands.
• Faster: Especially useful while driving (e.g., "Call Mom").
• Accessible: Helps visually impaired users.

Disadvantages:

• AI may misunderstand questions (e.g., due to accent differences).
• Internet connection is usually required.
• Privacy concerns (voice assistants continuously listen for wake words).

🗣️ Classroom Discussion: Why is ChatGPT considered Conversing instead of Instructing?
Expected Answer: Because users communicate using natural language instead of fixed, rigid commands.

🖱️ 3. Manipulating

Definition

Manipulating is an interaction style in which users directly control objects displayed on the screen. Instead of typing commands, users move, drag, resize, rotate, or touch objects.

Interaction Process

User touches object ↓ Object responds immediately ↓ User sees changes instantly

Real-Life Example: Google Maps

Users zoom, rotate, drag, and explore. No typing is required.

Advantages & Disadvantages

Advantages:

• Easy to understand and highly natural.
• Provides immediate feedback.
• Reduces typing and is highly suitable for touch screens.

Disadvantages:

• Requires graphical interfaces.
• Less suitable for visually impaired users without accessibility support.
• Can be difficult on very small screens.

Software Examples: Adobe Photoshop, Microsoft Paint, Google Maps, Canva, AutoCAD, Mobile Phones, Tablets.

🗺️ 4. Exploring

Definition

Exploring is an interaction style where users navigate through a digital environment to discover information or locations. Users decide where to go and what to investigate.

Real-Life Examples

• Google Street View: Users move through roads and cities as if they are physically there.
• University Virtual Tour: Students walk through classrooms, libraries, laboratories, and hostels using a computer.
• Others: Google Earth, Virtual Reality, Museum Tours, Video Games, 3D Campus Tours.

Advantages & Disadvantages

Advantages:

• Highly engaging and excellent for education.
• Supports visualization and creates immersive experiences.

Disadvantages:

• Requires powerful hardware.
• VR equipment can be expensive.
• May cause motion sickness in some users.

📊 Comparison & Key Points to Remember

Comparison of the Four Interaction Types

Interaction Type	Main Idea	Examples	Best Used For
Instructing	User gives commands	ATM, Calculator, Word	Performing specific tasks
Conversing	Communicating using natural language	ChatGPT, Siri, Alexa	AI assistants and customer support
Manipulating	Directly controls screen objects	Photoshop, Google Maps	Design tools and touch interfaces
Exploring	Navigates through virtual environments	Google Earth, VR, Games	Learning, simulation, navigation

Key Points to Remember

• Instructing = Giving commands.
• Conversing = Talking with the computer using natural language.
• Manipulating = Directly interacting with objects on the screen.
• Exploring = Navigating through digital or virtual environments.

These four interaction types are fundamental concepts in UX design because they help designers choose the most appropriate way for users to interact with a system based on its purpose and target audience.

🎓 Expert ICT, Coding, School Classes, Digital Marketing & University Project Guidance

Struggling with your university final year project? Want to master coding, upscale your business with expert digital marketing, or learn absolute computer basics from scratch? We offer high-quality individual and group online classes conducted in English, Sinhala, or Tamil mediums. Get guaranteed academic success and professional growth with tailored guidance.

---

🎓 University Final Year Project Guidance & AI

Get specialized, end-to-end mentoring and technical support to pass your degree or master's program with flying colors:

• 🏫 Targeted Institutes: Expert guidance tailored for BIT UCSC, UoM, SLIIT, NIBM, and other leading universities.
• 🔬 Postgraduate Support: Comprehensive assistance for MSc Software Final Year Projects.
• 🤖 AI & Smart Applications: Step-by-step implementation of AI, Machine Learning (ML), and automation modules.
• ✅ Guaranteed Success: Help with documentation, system architecture, coding, and viva preparation.

---

🏫 School ICT & Corporate Beginner Classes

• 💻 Non-IT Staff Computer Basics: Absolute beginner-friendly online classes covering essential computer skills, office tools, and internet operations.
• 🎒 Primary & Secondary (Grades 1-10): Interactive online ICT classes tailored to build strong foundations from early ages.
• 📝 Exam Prep: Dedicated training packages for GCE O/L, GCE A/L ICT, and GIT exams.
• 🌍 Global Syllabuses: Complete curriculum coverage for Local, Edexcel, and Cambridge in English & Tamil Mediums.

---

📢 Software Development & Digital Marketing Services

• ⚙️ Software & Web Development: Professional custom software application and website development built using PHP & MySQL.
• 🎯 Social Media Management: Content creation, publishing, and channel management for Facebook, Instagram, TikTok, and YouTube.
• 📈 Ad Boosting: Highly targeted paid advertising campaigns to drive leads, traffic, and sales to your business.

---

📞 Connect With Us Instantly

Book your slot for online classes or get a premium tech service quote today!

💬 WhatsApp: +94 729622034

📧 Email: ITClassSL@gmail.com

---

🌐 Explore Our Resources & Communities

Stay updated with our latest tutorials, project ideas, and student guides across all our official platforms:

• 📺 YouTube Tutorials: Subscribe to our Channel
• 💼 Professional Network: Connect on LinkedIn
• ✍️ Tech Blog: Visit our WordPress Site
• ❓ Project Q&A: Follow our Quora Guide Profile
• 📰 Monthly Updates: Read Our Newsletter
• 🌐 Official Portfolios: Wix Site | Google Business | Strikingly Portfolio
• 🗣️ Student Forum: Join our ElaKiri Discussion Thread

IT4106 – User Experience Design (UXD) 1 – Introduction to Interaction Design and User Experience UCSC Online Classes Notes Exam Questions Model Paper

📘 Course Overview & Learning Outcomes

Course Details

• Course: IT4106 – User Experience Design
• Chapter: 1 – Introduction to Interaction Design and User Experience
• Recommended Teaching Time: 3 Hours
• Level: Beginner / Second Year Undergraduate

Learning Outcomes

After completing this chapter, students should be able to:

1. Define Human–Computer Interaction (HCI).
2. Explain the evolution of HCI.
3. Define Interaction Design.
4. Differentiate between UI and UX.
5. Identify characteristics of good and poor user experiences.
6. Explain the importance of understanding users.
7. Describe the User-Centered Design (UCD) process.

🎤 Lecture Opening (5 minutes)

Ask Students:

“Have you ever used a mobile app and felt confused, frustrated, or unable to find what you wanted?”

Then Explain:

“That frustration is not usually the user’s fault. It is often a design problem. User Experience Design aims to create products that are easy, useful, and enjoyable to use.”

1️⃣ Modern Day Human–Computer Interaction (HCI)

1.1 What is HCI?

Definition

Human–Computer Interaction (HCI) is the study of how people interact with computers and how to design technology that is effective, efficient, safe, and satisfying.

Simple Explanation

HCI asks the question: “How can we make computers easier for humans to use?”

1.2 Components of HCI

Component	Examples
Human	Student, teacher, customer, doctor
Computer	PC, mobile phone, ATM, smart TV
Interaction	Typing, clicking, touching, speaking

1.3 Evolution of HCI

Era	Technology
1950s	Punch cards
1970s	Command-line systems
1980s	Graphical User Interfaces (GUI)
2000s	Web applications
2010s	Mobile & touch interfaces
Today	Voice, AI, AR/VR, wearables

1.4 Why HCI is Important

Benefits

• Reduces user errors
• Improves productivity
• Increases customer satisfaction
• Makes systems accessible
• Saves training costs
• Improves business success

2️⃣ Interaction Design

2.1 Definition

Interaction Design (IxD) focuses on designing how users interact with digital products.

Key Idea: “Not only what the system looks like, but how it behaves.”

2.2 HCI vs Interaction Design

HCI	Interaction Design
Broad field	Subset of HCI
Studies interaction	Designs interactions
Research-oriented	Design-oriented

2.3 Core Design Principles

Principle	Meaning
Visibility	Important options should be visible
Feedback	System should respond to actions
Consistency	Similar actions behave similarly
Affordance	Objects suggest how to use them
Mapping	Controls should match outcomes

Example: Mobile App

• Good Design Large visible buttons, clear feedback after tapping.
• Poor Design Hidden menus, no confirmation messages.

3️⃣ User Experience (UX)

3.1 What is UX?

User Experience (UX) is the overall experience a person has while using a product or service.

Includes:

• Ease of use
• Efficiency
• Emotions
• Trust
• Enjoyment
• Accessibility

3.2 UX vs UI

UI (User Interface)	UX (User Experience)
Looks	Feels
Colors	Satisfaction
Buttons	Usability
Layout	Overall journey

3.3 Good vs Poor UX

Good UX	Poor UX
Easy to learn Fast to use Few errors Pleasant experience Users return again	Confusing navigation Slow performance Many errors Frustrating experience Users abandon the product

4️⃣ Understanding Users

4.1 Why Study Users?

Designers should not design for themselves. They must design for the actual users.

4.2 User Characteristics

Characteristic	Examples
Age	Children, adults, elderly
Experience	Beginner, expert
Language	English, Sinhala, Tamil
Physical abilities	Vision, hearing, mobility
Goals	Learn, buy, communicate

4.3 User Research Methods

Common Methods:

• Interviews
• Questionnaires
• Observation
• Focus groups
• Usability testing

5️⃣ User-Centered Design (UCD)

5.1 Definition

User-Centered Design is a design approach that places users and their needs at the center of the development process.

5.2 UCD Process

1. Understand users – Research their needs.
2. Design – Create possible solutions.
3. Prototype – Build a simple version.
4. Test – Observe real users.
5. Improve – Fix problems and repeat.

5.3 Advantages of UCD

• Higher user satisfaction
• Fewer usability problems
• Better business results
• Reduced development risk
• More accessible products

📝 Classroom Activity & Exam Preparation

Classroom Activity (10 minutes)

Group Activity: Ask students to evaluate a popular app (WhatsApp, Facebook, Daraz, PickMe).

Questions:

• What is easy to use?
• What is confusing?
• What feedback does the app provide?
• How could the UX be improved?

Important Exam Definitions

Term	Exam Definition
HCI	Study of interaction between humans and computers.
Interaction Design	Design of interactive digital products.
User Experience	Overall experience of a user when using a product.
User-Centered Design	Design approach focused on user needs and goals.

MCQs (with Answers)

1. HCI mainly studies:

a) Database design
b) Human-computer interaction
c) Networking
d) Programming languages

Answer: b

2. Which is a UX goal?

a) Confusion
b) Frustration
c) Satisfaction
d) Complexity

Answer: c

3. Feedback means:

a) Hiding options
b) System response to user actions
c) Making errors
d) Slowing down the system

Answer: b

4. UCD focuses primarily on:

a) Developers
b) Hardware
c) Users
d) Servers

Answer: c

5. Which is NOT a user research method?

a) Interview
b) Observation
c) Questionnaire
d) Compilation

Answer: d

Structured Questions

Question 1: Explain the difference between HCI and Interaction Design. (5 marks)

Model Answer:

• HCI is a broad field studying interactions between humans and computers.
• Interaction Design is a subset of HCI.
• HCI includes research and evaluation.
• Interaction Design focuses on designing behaviors and interfaces.
• Example: HCI studies ATM usability; Interaction Design designs the ATM interface.

Essay Question

Discuss: “User-Centered Design leads to better digital products.” (10 marks)

Expected Points:

• Definition of UCD
• Understanding user needs
• Iterative design
• Prototyping and testing
• Reduced errors
• Improved satisfaction
• Business benefits
• Conclusion

🚀 Quick Revision Sheet & References

Quick Revision Sheet

Remember:

• HCI = Humans + Computers + Interaction
• Interaction Design = Designing behavior of systems
• UX = Overall user experience
• UI = Visual interface
• Good UX = Useful, usable, enjoyable
• UCD = Design with users at the center
• Key Principles = Visibility, Feedback, Consistency, Affordance, Mapping

Recommended References

• Sharp, Rogers & Preece – Interaction Design: Beyond Human-Computer Interaction (5th Edition)
• UCSC BIT IT4106 Syllabus
• ISO 9241-210 Human-Centered Design Standard

End of Chapter 1
This note is sufficient to teach a 2–3 hour university lecture and prepare students for MCQs, structured questions, and essay questions in the BIT external degree examination.

🎓 Expert ICT, Coding, School Classes, Digital Marketing & University Project Guidance

Struggling with your university final year project? Want to master coding, upscale your business with expert digital marketing, or learn absolute computer basics from scratch? We offer high-quality individual and group online classes conducted in English, Sinhala, or Tamil mediums. Get guaranteed academic success and professional growth with tailored guidance.

---

🎓 University Final Year Project Guidance & AI

Get specialized, end-to-end mentoring and technical support to pass your degree or master's program with flying colors:

• 🏫 Targeted Institutes: Expert guidance tailored for BIT UCSC, UoM, SLIIT, NIBM, and other leading universities.
• 🔬 Postgraduate Support: Comprehensive assistance for MSc Software Final Year Projects.
• 🤖 AI & Smart Applications: Step-by-step implementation of AI, Machine Learning (ML), and automation modules.
• ✅ Guaranteed Success: Help with documentation, system architecture, coding, and viva preparation.

---

🏫 School ICT & Corporate Beginner Classes

• 💻 Non-IT Staff Computer Basics: Absolute beginner-friendly online classes covering essential computer skills, office tools, and internet operations.
• 🎒 Primary & Secondary (Grades 1-10): Interactive online ICT classes tailored to build strong foundations from early ages.
• 📝 Exam Prep: Dedicated training packages for GCE O/L, GCE A/L ICT, and GIT exams.
• 🌍 Global Syllabuses: Complete curriculum coverage for Local, Edexcel, and Cambridge in English & Tamil Mediums.

---

📢 Software Development & Digital Marketing Services

• ⚙️ Software & Web Development: Professional custom software application and website development built using PHP & MySQL.
• 🎯 Social Media Management: Content creation, publishing, and channel management for Facebook, Instagram, TikTok, and YouTube.
• 📈 Ad Boosting: Highly targeted paid advertising campaigns to drive leads, traffic, and sales to your business.

---

📞 Connect With Us Instantly

Book your slot for online classes or get a premium tech service quote today!

💬 WhatsApp: +94 729622034

📧 Email: ITClassSL@gmail.com

---

🌐 Explore Our Resources & Communities

Stay updated with our latest tutorials, project ideas, and student guides across all our official platforms:

• 📺 YouTube Tutorials: Subscribe to our Channel
• 💼 Professional Network: Connect on LinkedIn
• ✍️ Tech Blog: Visit our WordPress Site
• ❓ Project Q&A: Follow our Quora Guide Profile
• 📰 Monthly Updates: Read Our Newsletter
• 🌐 Official Portfolios: Wix Site | Google Business | Strikingly Portfolio
• 🗣️ Student Forum: Join our ElaKiri Discussion Thread