BIT UCSC IT4106 - User Experience Design Pass paper Model 2024 Questions and Answers with explanation

BIT UCSC IT4106 – Interaction Design & HCI

Exam Preparation Guide (Questions 1–25)

Click on each question below to reveal the theory, correct answers, and exam tips!

Question 1 – Purpose of User Experience (UX) Design

Question

Which of the following best describe the purpose of UX Design?

Correct Answer

✅ (b), (c)

High-Level Theory

User Experience (UX) Design is about creating products that are easy, useful, enjoyable, and meaningful for users. UX designers study user needs, improve usability, accessibility, and overall satisfaction.

Option Explanation

❌ (a) Designing the internal logic of algorithms
This is the responsibility of software developers, not UX designers.

✅ (b) Creating a cohesive and meaningful experience for users
This is one of the main goals of UX.

✅ (c) Improving usability and accessibility
UX ensures products are easy to learn and usable by everyone.

❌ (d) Reducing server costs
This belongs to system architecture or infrastructure.

❌ (e) Ensuring coding standards
This is software engineering, not UX.

💡 Exam Tip: UX = User Feelings + User Experience + User Satisfaction

Question 2 – Difference Between UI and UX

Correct Answer

✅ (a), (b)

High-Level Theory

Many students confuse UI and UX.

• UI (User Interface): Buttons, Menus, Colours, Icons, Layout.
• UX (User Experience): Ease of use, User satisfaction, User research, User journey, Overall experience.

Think of a car: UI = Steering wheel, dashboard, seats. UX = How enjoyable and easy the car is to drive.

Option Explanation

✅ (a) UI focuses on buttons and menus

✅ (b) UX understands user needs

❌ (c) UI and UX are the same

❌ (d) UX only concerns layout (UX is much broader)

❌ (e) Database optimization

💡 Exam Tip: UI = Look | UX = Feel

Question 3 – Third HCI Paradigm

Correct Answer

✅ (a), (c), (e)

High-Level Theory

The Third HCI Paradigm studies how technology fits into real-life situations. Instead of only focusing on efficiency or cognition, it considers: Social interaction, Culture, Environment, User values, Emotions, and Context.

Option Explanation

✅ (a) Social and cultural aspects

❌ (b) Computational models of cognition (Belongs to the Second HCI Paradigm)

✅ (c) Users adapt technology in new ways (This is called appropriation)

❌ (d) Efficiency over context

✅ (e) User values

💡 Exam Tip: First Paradigm → Body | Second Paradigm → Brain | Third Paradigm → Society & Context

Question 4 – Conceptual Models

Correct Answer

✅ (a), (c), (e)

High-Level Theory

A Conceptual Model explains how a system works before designing the interface. It helps both designers and users understand: What the system does, How users interact with it, and How different functions are connected.

Option Explanation

✅ (a) High-level description

❌ (b) Eliminates user involvement (Users should always be involved early)

✅ (c) Helps users build mental models

❌ (d) Created after physical design (It should be created before UI design)

✅ (e) Helps designers plan interactions

💡 Exam Tip: Conceptual Model = Blueprint of system behaviour

Question 5 – Interaction Types

Correct Answer

✅ (b), (c), (d)

High-Level Theory

Interaction Design includes different ways users communicate with systems:

• 1. Instructing: Giving commands (Click "Print", Press Save).
• 2. Conversing: Talking with the system (Siri, ChatGPT, Alexa).
• 3. Manipulating: Directly moving objects (Dragging files, Zooming photos).
• 4. Exploring: Moving through physical or virtual spaces (Google Maps, VR games).

Option Explanation

❌ (a) Instructing means direct manipulation (Instructing is giving commands, not manipulating objects)

✅ (b) Conversing = dialogue

✅ (c) Manipulating = dragging and gestures

✅ (d) Exploring = moving through environments

❌ (e) Responding means giving commands (Responding refers to the system reacting to user input)

💡 Exam Tip: Instructing → Commands | Conversing → Talking | Manipulating → Drag & Touch | Exploring → Navigation

Question 6 – Multimodal Interfaces

Question

Which of the following statements are true about multimodal interfaces in user experience design?

Correct Answer

✅ (b), (d)

High-Level Theory

A Multimodal Interface allows users to interact with a computer using more than one input or output method (e.g., touch, voice, gestures, screen, sound). Examples include smartphones and smart TVs.

Option Explanation

❌ (a) They allow users to interact using a single consistent input like keyboard only.
This describes a single-modal interface.

✅ (b) They support interaction using speech, gesture and touch.
This is the exact definition of a multimodal interface.

❌ (c) They are designed only for visually impaired users.
Everyone can use multimodal interfaces.

✅ (d) They enhance expressiveness and flexibility in HCI.
Users can choose the interaction method they prefer.

❌ (e) They replace all GUI interfaces.
GUI is still widely used; multimodal interfaces usually work together with GUI.

💡 Exam Tip: Multi = Many, Modal = Mode. Multimodal = Many ways to interact (Input: Touch, Voice, Gesture | Output: Screen, Sound, Vibration).

Question 7 – Experiential Cognition

Question

Which of the following are characteristics of Experiential Cognition?

Correct Answer

✅ (b), (c)

High-Level Theory

Experiential Cognition refers to thinking that happens automatically while performing familiar, routine activities (like driving or typing). It develops through practice and requires little conscious thought, unlike Reflective Cognition which involves deep thinking and problem-solving.

Option Explanation

❌ (a) Deliberate thinking and judgement
This is Reflective Cognition.

✅ (b) Happens automatically during routine activities
Core definition of Experiential Cognition.

✅ (c) Driving, reading and watching videos
These activities become automatic through experience.

❌ (d) Requires planning and decision making
This is Reflective Cognition.

❌ (e) Solving new problems
This is also Reflective Cognition.

💡 Exam Tip: Experiential = Automatic & Routine | Reflective = Deep Thinking & Problem Solving.

Question 8 – Mental Models

Question

Which statements are true regarding Mental Models in Interaction Design?

Correct Answer

✅ (b), (c), (e)

High-Level Theory

A Mental Model is the user's understanding or expectation of how a system works, developed through experience and observation. Designers should create Conceptual Models that match users' Mental Models to improve usability. Incorrect mental models lead to user errors.

Option Explanation

❌ (a) Mental models are always technically correct.
Users can misunderstand systems.

✅ (b) Users quickly form mental models.
People begin making assumptions immediately.

✅ (c) Designers should match conceptual models with users' mental models.
This improves usability.

❌ (d) Mental models never change.
They improve and change as users gain experience.

✅ (e) Incorrect mental models cause misunderstanding.
This often leads to user errors.

💡 Exam Tip: Mental Model = User's understanding | Conceptual Model = Designer's plan. Good design aligns both!

Question 9 – Distributed Cognition

Question

Which statements reflect the Distributed Cognition framework?

Correct Answer

✅ (b), (c), (e)

High-Level Theory

Distributed Cognition states that thinking is not just inside one person's brain; it is shared among people, computers, documents, tools, and the environment. Examples include airline cockpits (pilot + instruments) or using a shopping list/Google Maps to offload memory.

Option Explanation

❌ (a) Thinking only happens inside one person's mind.
Opposite of Distributed Cognition.

✅ (b) Thinking is shared across people, tools and environment.
Main definition.

✅ (c) Documents become part of thinking.
External representations support cognition.

❌ (d) Only reducing memory load.
It also includes teamwork and interaction with tools, not just memory reduction.

✅ (e) Airline cockpit example.
Classic HCI example of distributed cognition.

💡 Exam Tip: Distributed Cognition = Thinking is shared across people, tools, and environment (not just inside the brain).

Question 10 – Structured Interviews

Question

Which are advantages of Structured Interviews during UX data gathering?

Correct Answer

✅ (a), (c), (d)

High-Level Theory

A Structured Interview asks every participant the exact same questions in the same order. This ensures fairness, consistency, and makes it easy to compare answers statistically (quantitative data). However, it lacks flexibility and cannot explore unexpected topics.

Option Explanation

✅ (a) Easy to replicate.
Everyone receives the same questions.

❌ (b) Provides highly flexible responses.
Structured interviews are not flexible; unstructured interviews are.

✅ (c) Generates quantitative data for comparison.
Responses are easy to compare statistically.

✅ (d) Reduces interviewer bias.
The interviewer asks the same questions to everyone.

❌ (e) Encourages natural conversation.
This is a feature of unstructured interviews.

💡 Exam Tip: Structured = Same questions, easy to compare, less bias | Unstructured = Flexible, natural conversation.

Question 11 – Triangulation

Correct Answer

✅ (a), (c), (d)

High-Level Theory

Triangulation uses multiple methods, data sources, or theories to improve the validity and reliability of research. It does not remove the need for participant consent.

💡 Memory Tip: Triangulation = 3 or more ways to verify data.

Question 12 – Contextual Inquiry

Correct Answer

✅ (a), (c)

High-Level Theory

Researcher observes users in their real work environment. User acts as the expert. Researcher acts as the apprentice.

💡 Memory Tip: Contextual Inquiry = Observe users where they actually work.

Question 13 – Quantitative Data

Correct Answer

✅ (a), (b), (e)

High-Level Theory

Numerical data. Can be analyzed statistically. Measures quantities, trends, and patterns.

💡 Memory Tip: Quantitative = Quantity = Numbers.

Question 14 – Affinity Diagram

Correct Answer

✅ (b), (c), (e)

High-Level Theory

Write observations on sticky notes. Group similar ideas. Find themes and relationships.

💡 Memory Tip: Affinity Diagram = Organize ideas into groups.

Question 15 – Critical Incident Analysis

Correct Answer

✅ (a), (c), (e)

High-Level Theory

Focuses on important user events. Studies errors, confusion, and usability problems. Helps improve system design.

💡 Memory Tip: Critical Incident = Important event that affects usability.

Question 16 – Grounded Theory

Correct Answer

✅ (c), (d)

High-Level Theory

A qualitative research method used to develop a new theory from collected data (Data → Theory). Involves Open, Axial, and Selective coding stages.

💡 Memory Tip: Grounded Theory = Collect Data First → Theory Later.

Question 17 – Structured Notations

Correct Answer

✅ (a), (c), (e)

High-Level Theory

Standardized ways to present information using diagrams (UML, Flowcharts, HTA). Good for structure, but misses human emotions and social context.

💡 Memory Tip: Structured Notation = Good for structure, Bad for human emotions.

Question 18 – Low-Fidelity Prototype

Correct Answer

✅ (a), (c), (e)

High-Level Theory

Simple and inexpensive model (paper sketches, sticky notes) created during early design stages to test ideas quickly and receive early feedback.

💡 Memory Tip: Low Fidelity = Low Cost = Early Design = Paper Prototype.

Question 19 – Wizard of Oz Prototype

Correct Answer

✅ (a), (c), (e)

High-Level Theory

A testing technique where users believe they are interacting with a real computer system, but a human secretly performs the system's responses.

💡 Memory Tip: Wizard of Oz = Human Pretends to be Computer.

Question 20 – Conceptual Model

Correct Answer

✅ (a), (c), (e)

High-Level Theory

A high-level description of how users will interact with a system. Main components include Interface Metaphors, Interaction Types, and Mapping.

💡 Memory Tip: Conceptual Model = Metaphor + Interaction + Mapping.

Question 21 – High-Fidelity Prototype

Correct Answer

✅ (a), (b), (d)

High-Level Theory

A prototype that looks and behaves very similar to the final product. Includes realistic layouts, colors, and interactions. Used for usability testing and client presentations.

💡 Memory Tip: High Fidelity = High Quality = Near Final Product.

Question 22 – Formative Evaluation

Correct Answer

✅ (b), (d)

High-Level Theory

Conducted during the design and development process to improve the product before it is completed. Detects problems early to save development costs.

💡 Memory Tip: Formative = Form the Design (During development).

Question 23 – Pluralistic Walkthrough

Correct Answer

✅ (a), (c), (d)

High-Level Theory

A usability evaluation method where users, designers, developers, and usability experts evaluate a prototype together step-by-step to find issues.

💡 Memory Tip: Pluralistic = Many People Review Together.

Question 24 – Controlled Evaluation Settings

Correct Answer

✅ (a), (c), (e)

High-Level Theory

Conducted in a controlled environment (such as a usability lab) where researchers manage variables to obtain accurate results and compare user performance fairly.

💡 Memory Tip: Controlled Evaluation = Same Environment + Same Tasks = Fair Comparison.

Question 25 – A/B Testing

Correct Answer

✅ (a), (c), (d)

High-Level Theory

Compares two versions of a webpage or interface (Version A vs Version B) to determine which one performs better based on metrics like click rate or conversion rate.

💡 Memory Tip: A/B Testing = Compare Version A vs Version B.

🎯 Final Revision Sheet (Questions 1–25)

Q	Topic	Correct Answer
1	UX Design	b, c
2	UI vs UX	a, b
3	Third HCI Paradigm	a, c, e
4	Conceptual Models	a, c, e
5	Interaction Types	b, c, d
6	Multimodal Interfaces	b, d
7	Experiential Cognition	b, c
8	Mental Models	b, c, e
9	Distributed Cognition	b, c, e
10	Structured Interviews	a, c, d
11	Triangulation	a, c, d
12	Contextual Inquiry	a, c
13	Quantitative Data	a, b, e
14	Affinity Diagram	b, c, e
15	Critical Incident Analysis	a, c, e
16	Grounded Theory	c, d
17	Structured Notations	a, c, e
18	Low-Fidelity Prototype	a, c, e
19	Wizard of Oz Prototype	a, c, e
20	Conceptual Model	a, c, e
21	High-Fidelity Prototype	a, b, d
22	Formative Evaluation	b, d
23	Pluralistic Walkthrough	a, c, d
24	Controlled Evaluation	a, c, e
25	A/B Testing	a, c, d

🎓 BIT UCSC Exam Tips

If you understand these concepts—not just memorize the answers—you'll be well prepared for similar MCQs and theory questions in the BIT UCSC IT4106 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

Chapter 2 Part 4 Section 2.2.1 (Mental, Conceptual, and Implementation Models) and Section 2.3 (Interface Metaphors) IT4106 - User Experience Design

2.2.1 Mental, Conceptual & Implementation Models

🎯 Learning Objectives

• Define Mental, Conceptual, and Implementation Models.
• Compare the three models.
• Explain why all three models are important in UX design.

🧠 1. Mental Model (User's View)

When designing software, different people see the system in different ways. Users think about how they expect the system to work.

Definition

A Mental Model is the user's understanding or expectation of how a system works based on their previous knowledge and experience.

Simple Definition: What users think will happen when they use a system.

Examples

• Print Button: A user expects clicking "Print" will immediately print the document.
• Elevator: Press button → Elevator arrives → Door opens. (Users already know this flow).

Characteristics

• Based on user experience.
• Different users may have different mental models.
• Can be correct or incorrect.
• Changes as users gain experience.

📐 2. Conceptual & 3. Implementation Models

2. Conceptual Model (Designer's View)

Definition: The designer's representation of how the system should work from the user's point of view. It is the plan for how users interact with the system.

Example (Online Shopping):
Browse Products → Add to Cart → Checkout → Payment → Order Confirmation.

Characteristics: Created during design, user-centered, easy to understand, independent of programming.

3. Implementation Model (Developer's View)

Definition: Describes how the system is actually built using programming, databases, and hardware.

Example (Login Process):
Validate username → Check password → Query database → Create session → Open dashboard.

Characteristics: Technical, used by developers, includes code/APIs, hidden from users.

🔄 Comparison & Real-Life Example (ATM)

Comparison Table

Feature	Mental Model	Conceptual Model	Implementation Model
Created By	User	Designer	Developer
Focus	User expectations	System behaviour	Technical implementation
Technical Details	No	No	Yes
Used For	Understanding	Designing interface	Building software

Real-Life Example: ATM Machine

• Mental Model: "I insert card, enter PIN, get cash."
• Conceptual Model: Insert Card → Enter PIN → Choose Transaction → Receive Cash.
• Implementation Model: Read card mag-stripe → Verify PIN in DB → Check balance → Update records → Dispense cash → Print receipt.

🤝 Why Models Must Match & Activity

Why Should These Models Match?

A good UX design ensures that the Conceptual Model matches the User's Mental Model. If users expect one thing but the system behaves differently, they become confused.

Example of Mismatch: If clicking a "Shopping Cart" icon unexpectedly opens the "User Profile" instead of the cart, the user's mental model and the system's conceptual model do not match.

📝 Classroom Activity: Choose a mobile app (e.g., WhatsApp). Identify the User's Mental Model, Designer's Conceptual Model, and Developer's Implementation Model. Discuss how they work together.

Summary

• Mental Model: What the user thinks the system does.
• Conceptual Model: How the designer wants the system to work.
• Implementation Model: How the developer actually builds the system.

2.3 Interface Metaphors

🎯 Learning Objectives & Introduction

• Define an interface metaphor.
• Explain why interface metaphors are used in UX design.
• Identify common interface metaphors.
• Discuss advantages and disadvantages.

Introduction

When learning new software, users understand it quickly if it resembles something they already know. UX designers use interface metaphors to make digital systems familiar.

Definition: The use of familiar real-world objects or concepts in a computer interface to help users understand how the system works.

Simple Definition: A real-world object used to represent a digital function.

🖼️ Common Interface Metaphors

🖥️ Desktop

Screen looks like an office desk with files and folders.

📂 Folder

Stores documents like a physical office folder.

🗑️ Recycle Bin

Temporarily stores deleted files before permanent removal.

🛒 Shopping Cart

Holds selected items before checkout (e.g., Daraz, Amazon).

🔍 Magnifying Glass

Represents the "Search" function.

✉️ Envelope

Represents Email or Messages.

📷 Camera

Represents taking photos or opening the camera app.

📅 Calendar

Represents schedules, events, and appointments.

💾 Floppy Disk

The universal "Save" icon (even though disks are obsolete).

✨ Characteristics, Pros & Cons

Characteristics of a Good Metaphor

• Be familiar to users.
• Be easy to understand.
• Represent the function correctly.
• Be consistent throughout the system.

Advantages

• Easy for beginners to learn.
• Reduces training requirements.
• Makes interfaces intuitive.
• Helps users remember functions.

Disadvantages

• Some metaphors become outdated (e.g., Floppy Disk).
• Different cultures may interpret metaphors differently.
• Overusing metaphors can limit creativity.
• Some digital functions have no real-world equivalent.

📊 Summary Table & Activity

Quick Reference Table

Interface Metaphor	Represents
Folder	Store files
Shopping Cart	Selected products
Recycle Bin	Deleted files
Envelope	Email
Camera	Take photos
Calendar	Events/Schedules
Magnifying Glass	Search
Bookmark	Save webpage

📝 Classroom Activity: Look at your smartphone and identify five interface metaphors (e.g., Gear icon for Settings). Discuss why these icons help users understand the application.

Summary

An Interface Metaphor uses familiar real-world objects to represent digital functions. Good metaphors improve usability, reduce learning time, and enhance the overall user experience by leveraging what users already know.

🎓 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 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