Module I: Introduction to Interaction Design​ ​ TOTAL : 22

1. Explain the differences between good and bad design, providing a specific example to
highlight these characteristics. [Repeated: 3 times]
Definition of Good Design
Good design is a design that effectively solves the user’s problem while being intuitive,
usable, efficient, and aesthetically pleasing.
It focuses on user needs and ensures easy interaction with minimal effort.
Example: The Google homepage – It has a simple layout, one search bar, and minimal
options, making it easy and fast to use.

Definition of Poor Design

Poor design is a design that fails to meet user needs, causing confusion, errors, and
difficulty in completing tasks.
It often ignores usability principles and lacks clarity and structure.
Example:A TV remote with 50 small, ungrouped buttons that make it hard for users to find
the correct option.

Classic Example: "Norman Doors"

Good Design (Clear Affordance)
well-designed door tells you what to do without words:
●​ A flat plate suggests pushing
●​ A handle suggests pulling
●​ You instinctively act correctly
No thinking required—this is good design.

Bad Design (Confusing Signals)

Now imagine:
A handle that looks pullable, but the door actually requires pushing
A tiny “PUSH” sign contradicting the handle
This creates hesitation or mistakes.

Another Example: TV Remote Controls

Good remote: Few buttons, clearly labeled, grouped logically
Bad remote: Dozens of tiny buttons, unclear symbols, cluttered layout
The bad one increases cognitive load—you have to think too much just to change the
volume.
 No. Good Design Bad Design

1 User-centered Designer-centered

2 Simple and minimal Cluttered and overloaded

3 Clear and logical navigation Confusing navigation

4 Consistent layout and Inconsistent layout

elements

5 Clear visual hierarchy No visual hierarchy

6 Easy to learn and use Hard to understand

7 Prevents user errors Causes frequent errors

8 Provides immediate feedback No or delayed feedback

9 Accessible to all users Difficult for some users (low contrast, small text)

10 Efficient task completion Time-consuming tasks

11 Logical grouping of elements Random placement of elements

12 High user satisfaction Leads to frustration

2. What is the difference between user interface design and user interaction
design?What is user interaction design, and why is it important?
User Interface (UI) Design
UI is the visual layer of a product. It focuses on how things look, covering aesthetics like
colors, fonts, and buttons to ensure the design is attractive, readable, and reflects the brand.
Interaction Design (IxD)
IxD is the behavioral layer of a product. It focuses on how things work, covering the
"dialogue" between the user and the system—such as animations, page transitions, and
feedback—to ensure the experience is logical and responsive.

No. Interaction Design (IxD) User Interface Design (UI)

1 Focuses on the flow and behavior of the Focuses on the visual and sensory
product. touchpoints.

2 Concerned with the logical path a user Concerned with the aesthetic quality of
takes. the screens.
 3 Primary goal is usability and task Primary goal is visual clarity and brand
efficiency. alignment.

4 Defines how a user interacts Defines the look of elements

(clicks, swipes, taps). (buttons, icons, color).

5 Uses wireframes to map out screen Uses high-fidelity mockups to show final
transitions. visuals.

6 Analyzes feedback loops Analyzes visual hierarchy

(e.g., "What happens after I click?"). (e.g., "Where does the eye go first?").

7 Deeply rooted in Human-Computer Deeply rooted in Graphic and Visual

Interaction (HCI). Design.

8 Focuses on the timing and motion of Focuses on typography, spacing, and

elements. color palettes.

9 Deals with information architecture and Deals with pixel-perfect layouts and
structure. assets.

10 Measures success by low friction and Measures success by emotional appeal

task speed. and legibility.

Why IxD is Critical for Success:

1. Reducing Cognitive Load
IxD removes the guesswork. By making flows logical and predictable, it guides users from
start to finish so they don't have to stop and think about how to use the product.
2. Providing Instant Feedback
IxD ensures the system "talks back." Whether it’s a loading bar or a button changing color, it
confirms to the user that their action was received, preventing frustration and repeated
clicks.
3. Creating Emotional Connection
IxD uses small, delightful details like smooth animations or satisfying sounds. These
"micro-interactions" make a product feel more human and enjoyable, which helps build
long-term user loyalty.
4. Error Prevention and Recovery
IxD stops mistakes before they happen, like keeping a "Submit" button disabled until a form
is filled. If an error does occur, it provides a clear, helpful way to fix it so the user never feels
stuck or confused.
5. Accessibility and Inclusivity
While UI handles visual clarity, IxD handles how people operate the product. It ensures the
app works for everyone by supporting keyboard shortcuts, voice commands, and screen
readers, rather than relying only on mouse clicks or sight.
6. Visibility (Finding Your Way)
IxD ensures that the most important actions are easy to see and find. It follows the logic that
a feature’s visibility should match its importance—users should never have to "hunt" for
essential tools like a "Save" or "Delete" button.

3. What are the primary challenges in designing user interactions? Discuss the
significance of the user's environment and why consistency is a non-negotiable factor
in the design process.
Primary Challenges in Interaction Design
1. Predicting Real Human Behavior
Design for "messy" human reality, not perfect logic. Since people skim text, get distracted, or
make accidental taps, the interface must be intuitive enough to handle users who are
rushing or multi-tasking.
2. Balancing Simplicity vs. Functionality
The goal is to provide enough features without overwhelming the user. Designers must
decide what information is essential to show immediately and what can be tucked away until
it is actually needed.
3. Providing Clear Feedback
Users need constant communication from the system to feel in control. Every action should
answer three questions: Did it work? Is it still processing? Or did it fail? Without this, the user
feels lost.
4. Handling Errors Gracefully
Design should anticipate mistakes like typos or lost internet connections. Instead of just
showing an error code, the system should gently guide the user on how to fix the problem
and move forward.
5. Designing for Different Skill Levels
A single design must work for everyone—from first-time beginners to power users and
people with accessibility needs. The interaction should be easy to learn for novices but
efficient for experts.

Why Consistency is Non-Negotiable

1. Reduces Learning Effort
Consistency ensures users don’t have to relearn your app on every page. Once they learn
how one button or menu works, they can apply that knowledge everywhere, making the app
feel intuitive.
2. Builds Trust
Inconsistent designs feel "broken" or unreliable. When elements behave the same way every
time, it removes doubt and makes the user feel confident that the system is stable and
professional.
3. Speeds Up Usage
Predictability allows for faster actions. When a user knows exactly where to look for a
"Search" bar or how a swipe gesture works, they can complete tasks quickly without pausing
to think.
4. Prevents Errors
Consistency creates a safety net. If a dangerous action like "Delete" always looks and
behaves the same way, users are much less likely to trigger it by mistake.
5. Supports Scalability
As a product grows, consistency provides a blueprint for new features. It ensures that any
new additions fit seamlessly into the existing experience and that design teams stay aligned.

The Significance of the User’s Environment

A product is never used in a vacuum. The context—where and how a user is interacting with
the device—completely changes how a design should function.
1. Physical Environment
Design must adapt to the user's surroundings. For example, if someone is outside in bright
sunlight, they need high-contrast visuals to see the screen.
2. The "One-Hand" Rule
Mobile designers must assume the user only has one hand free (e.g., they are holding a
grocery bag or a subway pole). Important buttons should be placed within the "thumb
zone"—the bottom and middle of the screen—making them easy to reach without dropping
the phone.
3. Cognitive State
Design should match the user's stress level and attention span. An emergency room nurse
needs bold, simple interactions because they are under high pressure.

Module II: Understanding & Conceptualizing Interaction

[Link] Cognition. List the various cognitive aspects (attention, perception, etc.) and
explain the specific role of Memory in interaction design with a practical example.

Cognition is the mental process of acquiring, processing, storing, and using information. It is
the "brainwork" that occurs between seeing a stimulus and taking an action. Cognition is vital
because it shapes how users notice, interpret, and act on an interface. Every interaction is
filtered through the user's mental capabilities and limitations.

Core Cognitive Aspects

When a user interacts with a product, several cognitive functions work together:
●​ Perception: How users see and interpret information, such as recognizing that a
blue underlined word is a clickable link.
●​ Attention: The ability to focus on specific tasks, like finding a checkout button, while
ignoring surrounding distractions.
●​ Problem Solving: The mental process of figuring out how to achieve a goal when the
path forward isn't immediately obvious.
●​ Language Processing: Reading and understanding the labels, instructions, and
small bits of text (microcopy) within an app.
●​ Memory: The storage and retrieval of information, which is often the most heavily
used function during digital interactions.
The Role of Memory in Interaction Design
Memory is the most fragile part of the human cognitive system. Designers must account for
two types: Working Memory (short-term with limited capacity) and Long-Term Memory (vast
but difficult to retrieve).
The primary goal is to reduce cognitive load—the mental effort required to use a product—by
prioritizing Recognition over Recall:
●​ Recall: Requires users to dig information out of their brain without help (e.g.,
remembering a command or a code). This is mentally taxing.
●​ Recognition: Provides visual cues that "trigger" the memory (e.g., seeing an icon or
a menu list). This is much easier for the brain.

Practical Example: The "Recently Viewed" Feature

Imagine you are shopping on a massive e-commerce site like Amazon.
●​ The Memory Challenge: Humans can generally only hold about $7 +/- 2$ items in
their working memory. If you look at 20 different pairs of headphones, your brain
physically cannot hold the details (price, specs, appearance) of the first five you saw.
●​ The Design Solution: The "Recently Viewed" or "Compare" tray.
●​ How it works: Instead of forcing you to recall which headphones had the best bass
or the lowest price, the interface provides a visual history. It offloads the burden of
storage from your brain to the screen.

[Link] is a conceptual model? Explain its importance in helping a user understand

how a system works.
A Conceptual Model is a high-level framework that explains how a system is organized and
operates. It acts as the "mental map" that helps users understand what a product is and how
to interact with it, bridging the gap between complex technical workings and the user
interface.
Importance of a Conceptual Model
●​ Predictability:If the model is clear, users can accurately guess what will happen
before they even act. This reduces hesitation and the need for frustrating
trial-and-error, as users already know which actions are possible.
●​ Discoverability: When a system is logical, users can find new features on their own.
If swiping works in one part of an app, a consistent model encourages them to try
that gesture elsewhere to find more options.
●​ Error Recovery: A clear structure helps users fix mistakes. If a user understands the
"Trash Can" metaphor, they know exactly where to go to retrieve a deleted file
instead of feeling stuck.
●​ Consistency and Simplicity: It ensures that navigation and behaviors remain
uniform throughout the design. By using clear metaphors and organized workflows,
even the most complex systems become easy to learn and navigate.
●​ Team Communication: It provides a shared understanding for designers and
developers, ensuring everyone agrees on what the system does and how users will
move through it.
Example:
1. The Personal Computer "Desktop"
Early computers required typing complex text commands. To make PCs accessible,
designers created a conceptual model based on a physical office desk.
The Implementation: The screen became the "Desktop," data was stored in "Files," and
these were organized into "Folders." To delete something, you move it to the "Trash Can."
The Result: Users instantly understood how to operate the machine because it mirrored the
logic of a physical office.
2. E-Commerce "Shopping"
Buying things online uses a framework borrowed from physical supermarkets to make digital
transactions feel familiar.
The Implementation: Designers use the conceptual model of a physical store. You browse
a "Catalog," put items into a "Shopping Cart" or "Bag," proceed to "Checkout," and pay a
digital "Cashier."
The Result: Because the digital process follows the steps of real-world shopping, users
know exactly what to do at each stage without needing instructions.

What Happens When the Conceptual Model Fails?​

When a conceptual model is weak, users fail to understand how a system actually works.
This disconnect leads to four primary consequences:

●​ Misuse of Features: Users ignore important tools or use them incorrectly because
they don't understand their function.
●​ Predictability Gaps: Users cannot anticipate outcomes. For example, setting a
thermostat to 90°F won't heat a room faster; it only changes the shut-off point, yet a
confused user will expect a "boost" in speed.
●​ Errors and Frustration: When the "System Image" (UI) fails to communicate logic,
users blame themselves for mistakes, leading them to view the system as "broken."
●​ Efficiency Loss: Without a clear mental map, users waste time and energy,
eventually leading to a total breakdown in trust.

[Link] the concept of expressive interfaces (how they convey emotional states or
feedback) with an example.
Expressive interfaces bridge the gap between mechanical utility and human emotion. An
Expressive Interface focuses on feeling, not just function. It uses "body language" (sounds,
animations, and tone) to make the system feel alive and tell the user how to feel.

Core Elements of Expressive Design

Affective Feedback: Beyond a simple "Success" message, these interfaces use
micro-interactions—like a subtle bounce, a soft chime, or a warm color shift—to evoke
feelings of relief or accomplishment.
Personality and Tone: Through tailored copy and visual style, the interface establishes a
brand voice. It might be witty and playful, or calm and reassuring, depending on the context
of the task.
System Vitality: Motion and transitions make the system feel "alive." Instead of instant cuts,
elements slide or fade, mimicking physical movement to show the user that the system is
actively thinking or reacting.
Nuanced Status: It replaces generic loading bars with meaningful cues. For example, an
"urgent" alert might use a sharp, rhythmic pulse to grab attention, while a "background task"
uses a gentle, slow-moving glow.

Example:
Mailchimp’s "High-Five" : The Mailchimp mascot, Freddie, uses an expressive interface to
turn a stressful task into a shared experience.
The Build-up (Empathy): Before you hit "Send" on a big email, Freddie’s hand hovers over
the button, shaking with a bead of sweat.
Purpose: The interface mirrors user anxiety, acknowledging the pressure of the moment.
The Payoff (Reward): After you click, the screen displays a giant "High-Five" from Freddie.
Purpose: The interface shifts from shared stress to shared celebration.

The iPhone "FaceID" Lock: When the face scan fails, the little lock icon at the top literally
"shakes its head" from side to side, mimicking the human gesture for "No."

Slack’s Loading Phrases: Instead of "Loading...", Slack displays messages like "Please
enjoy this moment of zen" or "You're doing a great job."

4. Describe how emotional design enhances user experience, providing real

world examples like gaming or fitness apps.

Emotional design is the practice of crafting interfaces that elicit specific, positive emotions
(like joy, surprise, trust, or pride) in order to create a deeper, more memorable connection
between the user and the product. When users feel good using a product, they are more
forgiving of minor flaws, more likely to form a habit, and more likely to recommend it to
others

The Three Levels of Emotional Design

1. Visceral Level (The First Impression)
This is the immediate, subconscious, "gut reaction" a user has the second they open an app.
It is entirely about aesthetics—colors, typography, imagery, and layout.
The Goal: To evoke instant delight or intrigue.

[Link] Level (The Joy of Use)

This level is about usability, performance, and the physical feel of interacting with the
product. Do the buttons feel responsive? Are the animations smooth? Does the system
provide satisfying feedback?
The Goal: To make the user feel smart, in control, and empowered

3. Reflective Level (The Long-Term Impact)

This is the highest level of cognitive processing. It happens after the user has put the app
away. It relates to self-image, personal pride, and how the product makes the user feel about
themselves.
The Goal: To align the product with the user's identity and values.
Example A: Fitness Apps (Apple Fitness, Strava, Nike Run Club)
Fitness apps use emotional design to motivate users to complete physically challenging
tasks.
Visceral Level: Bright, energetic colors and dynamic layouts create excitement and vitality.
Behavioral Level: Completing a workout triggers vibrations, sound effects, and animations
(like confetti), rewarding the user and increasing motivation.
Reflective Level: Sharing achievements and records builds pride and identity (“I am a
dedicated runner”), encouraging continued use.

Example B: Video Games (Role-Playing Games, Mobile Games)

Video games are designed to generate strong emotions like excitement and achievement.
Visceral Level: Attractive characters, immersive visuals, and engaging soundtracks capture
attention.
Behavioral Level: Smooth controls and satisfying audio-visual feedback make gameplay
enjoyable and responsive.
Reflective Level: Levels, badges, trophies, and rewards create a sense of accomplishment
and status.

Module III: Data Gathering, Requirements & Analysis

1. What methods/techniques are available for gathering data during the requirements
phase, and how do they help in understanding user needs and project goals?
​
Core Methods for Gathering Requirements Data and how they help
1. Interviews (The "Deep Dive")
What: One-on-one conversations are the most common method for deep dives. They can be
structured (pre-defined questions), unstructured (open-ended), or semi-structured.
Why it helps: Uncovers hidden pain points or personal grievances that users won't mention
in a group.

2. Surveys & Questionnaires (The "Trend Spotter")

What: Structured questions as digital forms sent to a large audience.
Why it helps: Provides quantitative data to validate assumptions. If 80% of users want a
feature, it becomes a priority.

3. Document Analysis (The "Baseline")

What: Reviewing existing business processes, system logs, organizational charts, and
previous project reports.
Why it helps: Ensures you don't miss legal or technical constraints and establishes the
current "as-is" state.

4. Observation (The "Reality Check")

What: Watching users work in their natural environment.
Why it helps: Reveals real behavior vs. reported behavior. People often forget the
"workarounds" they use until you see them in action.
5. Prototyping (The "Tangible Reaction")
What: Creating low- or high-fidelity mockups for users to interact with prototypes while being
observed
Why it helps: It gives users something tangible to react to. Most people find it difficult to
visualize a system from a text document, but they can instantly tell you what is wrong when
they see a screen mockup.

6. Workshops / JAD Sessions (The "Conflict Solver")

What: Bringing users, devs, and stakeholders together to hash out ideas.
Why it helps: Reduces "requirement churn" by resolving conflicts in real-time (e.g., Marketing
vs. Engineering).

7. Brainstorming (The "Idea Generator")

What: Criticism-free sessions to generate high-volume ideas.
Why it helps: Essential for innovation and thinking "out-of-the-box" to beat competitors.

Summarize the key issues in the Data Gathering process.

Key Issues in the Data Gathering Process (Summary)
Data gathering sounds straightforward—“just ask users”—but in practice it’s full of pitfalls
that can distort insights or lead to poor decisions.
1.​ Asking bad Questions: Using leading or confusing questions that result in biased or
shallow answers.

2.​ Wrong Method: Using the wrong tool for the job (e.g.,Using surveys when deep
insights are needed, Using interviews when large-scale trends are required).

3.​ Poor Interpretation: Misreading patterns, jumping o conclusions or ignoring evidence

that contradicts your idea.

4.​ Sampling Errors: Talking to the wrong people (e.g., only experts) or too few people.

5.​ User Bias: Users misreport behavior because they forget details or want to "look
good."

6.​ Researcher Bias: Designers unintentionally hearing what they want to hear based on
their own assumptions.

7.​ Context Gap: Gathering data in a lab instead of the real world, missing out on real-life
distractions.

8.​ Resource Limits: Running out of time, money, or access to users, leading to rushed
results.

9.​ Data Overload: Collecting so much "noise" that you can't find the useful "signal."

10.​Ethics & Privacy: Failing to protect user data or get proper consent, leading to legal
or trust issues.
2. What are the key benefits of conducting task analysis during the design process,
and how does it contribute to effective user experiences? [Repeated: 2 times]
Task Analysis is a UCD technique that breaks down complex goals into step-by-step actions
through direct observation. It breaks a big goal down into every tiny action, decision, and
thought a user has while trying to get something done.

Core Benefits
1.​ Focuses on Goals: You design for what the user wants to achieve (e.g., "paying a
bill") rather than just adding fancy features.

2.​ Exposes Friction: It highlights exactly where users get confused, make mistakes, or
deal with redundant [Link] are opportunities to simplify and improve.

3.​ Simplifies Workflow: Helps you cut out unnecessary clicks and combine actions to
make the system faster and cleaner to prioritize essential functions.

4.​ Organizes Information: You learn what info is "must-have" (primary) versus
"nice-to-have" (hidden), leading to better menu structures.

5.​ Guides Interaction: It dictates where buttons should go and the order of screens so
the flow feels logical and predictable.

6.​ Boosts Inclusivity: By understanding the task, you can design different paths for
beginners, experts, or users with disabilities.

7.​ Unifies the Team: It gives developers and stakeholders a "single source of truth" for
how the system should actually work.

How Task Analysis Builds Better UX

Matches Mental Models (Intuition)
Task analysis bridges the gap between how a system works and how a user thinks it should
work. When the workflow matches the user's "natural thinking," the learning curve
disappears, making the system feel intuitive rather than something they have to "figure out."

Minimizes Cognitive Load (Clarity)

By using Hierarchical Task Analysis to break big goals into tiny, manageable steps,
designers can present information "progressively." This prevents users from feeling
overwhelmed and ensures they feel confident and in control throughout the process.

Optimizes Efficiency (The 80/20 Rule)

Task analysis identifies the most frequent actions. UX designers use this to prioritize the top
20% of tasks that users do 80% of the time, making them the easiest to access. Fewer steps
and clearer actions lead to quicker completion and higher retention.

Prevents Errors & Boosts Accessibility

By mapping every step, designers can spot where mistakes are likely to happen and "design
them out" before they occur. It also highlights physical constraints (like using a phone while
walking), allowing the UX to be optimized for one-handed use or high-contrast visibility.
3. Briefly list and explain common Quantitative Data Analysis methods used in UX
research.

The "Big Picture" Stats

●​ Descriptive Statistics: Summarizes raw data into simple numbers like Means or
Percentages (e.g., "Average time on page").
●​ Inferential Statistics: Uses a small sample to predict how the entire population will
behave (e.g., T-tests or Confidence Intervals).
●​ Cohort Analysis: Groups users by a shared trait (e.g., "Users who joined in
January") to see how their behavior changes over time.

Testing & Relationships

●​ A/B Testing: A controlled experiment comparing two versions (A vs. B) to see which
one performs better.
●​ Correlation Analysis: Finds relationships between two things (e.g., "Do users who
watch the tutorial spend more money?"). Note: This shows patterns, not causes.

Usability & Performance

●​ Task Metrics: Measures Success Rate (% who finished) and Time-on-Task (how fast
they were).
●​ Error Rate Analysis: Tracks how often users "trip up" (e.g., form errors) to find
where the design is "broken."

User Journeys
●​ Funnel Analysis: Tracks the "drop-off" points in a process (e.g., seeing where users
quit during a 5-step checkout).
●​ Clickstream Analytics: Analyzes the exact path and buttons users click to reveal
real usage patterns.

User Opinion
●​ Survey Rating Analysis: Converts feelings into numbers using scales (e.g., a 1–5
Likert Scale for satisfaction).

Module IV: Process of Interaction Design & Prototyping

1. What is the role of prototyping in user interaction design? Explain different types of
prototyping (Low-fidelity vs. High-fidelity) with examples. [Repeated: 3 times]

Role of Prototyping in User Interaction Design (IxD)

In interaction design, prototyping is the bridge between ideas and real user experience. It
lets designers simulate how interactions will behave—not just how screens look.

1. Testing Interaction Patterns

Prototyping lets you experiment with gestures and navigation (like swiping vs. tapping)
before any code is written. It helps find the most natural way for a user to move through the
app.
2. Validating Mental Models
It checks if the system's logic matches user expectations. If a user expects to "swipe" but
has to "click," the prototype exposes that friction so you can align the design with human
intuition.
3. Reducing Risk and Cost
Fixing a design flaw in a prototype is cheap and fast; fixing it in the final code is expensive. It
identifies "dead-ends" early in the development cycle.
4. Refining Feedback (Microinteractions)
Prototypes allow you to test small details like button animations, loading bars, and success
messages. This ensures the user never feels lost and always knows the system's status.
5. Enabling Rapid Iteration
Since prototypes are easy to change, they encourage experimentation. You can quickly
build, test, and refine multiple versions of a feature based on real feedback without wasting
resources.
The Prototyping Loop
Prototyping is not a one-time event but a cycle that drives the design forward:
Build: Create a representation of the interaction (ranging from paper to high-fidelity code).
Test: Observe users as they attempt to complete tasks using the prototype.
Analyze: Identify where users hesitated, clicked incorrectly, or expressed frustration.
Refine: Update the design based on findings and repeat until the interaction is seamless.
Examples of Lo-Fi:
1. Paper Sketches (Physical & Fast)
Hand-drawn interfaces on paper or post-it notes used to map out layouts instantly.
Example: Sketching the UI for a QR-based attendance app on a notepad to check if the
"Scan" button is placed where a student’s thumb can easily reach it.

2. Digital Wireframes (Structured & Skeletal)

"Grey-box" layouts created in tools like Figma or Balsamiq that focus on structure rather than
style.
Example: Building a skeletal version of a finance tracker to determine if the "Add Expense"
feature works better as a floating button or a menu item.

Examples of Hi-Fi:
1. Interactive Digital Prototypes (Visual & Flow)
High-fidelity mockups built in tools like Figma or Adobe XD that simulate real user interaction
without backend code.
Example: A music utility app with a "Glassmorphism" UI where the notification background
blurs dynamically. This allows testers to check if the lyric text remains readable against
changing backgrounds.

2. Coded Prototypes (Functional & Technical)

Building specific features using frameworks like Flutter to test logic and high-performance
animations with real or mock data.
Example: Developing a screen that pulls live lyrics from an API to stress-test the
synchronization timing and the "glow" effect on the active line of text.

2. Define a wireframe and explain its purpose as a structural blueprint in the

prototyping phase.
A wireframe is a low-fidelity, non-visual guide that maps out the "bones" of a system. It
ignores aesthetics (colors, fonts, images) to focus purely on the structural layout, defining
exactly where elements like buttons and text belong and how the user moves between
screens.

Purposes of Wireframes
1. Establishes Content Hierarchy
Wireframes act as a "spatial map" that decides what information is most important. They
define the screen layout and navigation paths, ensuring the design has a logical foundation
before any visual polish is added.
2. Focuses on Usability over Aesthetics
By stripping away colors and images, wireframes force stakeholders to focus purely on
function and flow. This prevents distractions caused by visual design (like debating button
colors) and keeps the focus on whether the system actually works.
3. Facilitates Low-Cost Iteration
Wireframes are extremely fast to create and modify. Because they are low-effort, designers
can test multiple layouts and "fail fast," making changes at a fraction of the cost of changing
a high-fidelity prototype or final code.
4. Acts as a Shared Communication Tool
They serve as a "universal language" for designers, developers, and stakeholders. It
ensures the whole team is aligned on the structure and requirements of the product before
the expensive development phase begins.
[Link] a Blueprint for Prototypes
Wireframes are the "stepping stone" in the design process. They provide the necessary
structure that is eventually transformed into an interactive digital prototype and, finally, the
finished user interface.

Component What it Represents in a Wireframe

Boxes with an "X" Image or video placeholders.

Horizontal Lines Text content or descriptions.

Simple Rectangles Buttons or interactive call-to-actions.

Arrows/Links Navigational flow between different screens.

Wireframe vs. Prototype (Quick Difference)

Wireframe → static structure (blueprint)
Prototype → interactive experience (simulation)

3. What are the advantages and limitations of using interface metaphors in design?
Explain Desktop vs. Touch-Based Interfaces
An Interface Metaphor is a design strategy that maps digital functions to familiar physical
objects. It leverages a user's existing real-world knowledge to explain how a system works
without the need for complex instructions.

Advantages of Interface Metaphors

Easy to learn → Users already understand the concept
Improves usability → Less need for instructions
Reduces mental effort → Recognition instead of thinking
Creates familiarity → Comfortable user experience

Limitations of Interface Metaphors

Can be misleading → Not all real-world rules apply digitally
Limits creativity → Designers may stick to old ideas
Cultural differences → Not all users interpret metaphors the same way
Can become outdated → Example: floppy disk “save” icon
Desktop Interfaces
Best for: Complex tasks (programming, editing, file management)
Features:
Mouse + keyboard input
High precision
Multi-window multitasking
Limitations:
Not portable
Less natural interaction

Touch-Based Interfaces
Best for: Mobile and everyday tasks
Features:
Direct interaction (tap, swipe, pinch)
Natural and intuitive
Limitations:
Less precise
Limited screen space

4. VR Shopping Interface Metaphor

●​ Entrance Lobby: A starting point to select store categories like Clothing or

Electronics.
●​ Virtual Stores: Users "walk" through shops with 3D product displays.
●​ Product Interaction: Users can pick up, rotate, and "try on" items virtually.
●​ Floating Cart: A familiar shopping basket metaphor that follows the user.
●​ AI Assistant: A virtual avatar to suggest products and answer queries.

Module V: Design Rules & Industry Standards (High Weightage)

1. Discuss the golden rules of interface design with suitable examples.
The Golden Rules of Interface Design, proposed by Ben Shneiderman, are a set of simple
principles that help designers create systems that are easy, efficient, and pleasant to use.

1.​ Strive for Consistency: Use uniform layouts and terminology.

Example: If a “Submit” button is always blue, don’t make it green on another page.

2.​ Enable Shortcuts: Provide keyboard shortcuts (like $Ctrl+C$) for frequent users.
Example: Keyboard shortcuts like Ctrl + C / Ctrl + V for copy-paste

3.​ Offer Informative Feedback: Every action needs a response.

Example: After clicking “Upload,” show a progress bar or “File uploaded successfully”

4.​ Design Dialogs to Yield Closure: Tasks should have a clear start and finish (e.g., a
"Thank You" page after a purchase).
Example: After placing an order → show “Order Confirmed” or “Thank You” page
 5.​ Prevent Errors: Use dropdowns instead of text fields to limit incorrect data entry.
Example: Use dropdown menus instead of free text for selecting a country

6.​ Permit Easy Reversal: Always include an "Undo" or "Back" button.

Example: “Undo delete” option in email or a “Back” button

7.​ Support Internal Locus of Control: Let the user initiate actions; don't force them
into paths.
Example: Don’t auto-play videos or force navigation; let users choose actions

8.​ Reduce Memory Load: Use simple menus and autofill so users don't have to
memorize information.
Example: Autofill forms, show suggestions, or keep menus visible

2. Explain Norman's 7 Principles for designing user interfaces.

`Proposed by Don Norman, these principles explain how users understand and interact with
systems.

1. Discoverability
It should be possible for the user to determine what actions are possible and the current
state of the device or system.
The Goal: The user shouldn't have to hunt for features.
Application: If a button is hidden in a deep submenu, it lacks discoverability. In a mobile app,
keeping primary actions (like "Add" or "Search") visible in a bottom navigation bar ensures
high discoverability.

2. Feedback
Feedback is about communicating the results of an action. Every action taken by a user
should be met with an immediate and clear response from the system.
The Goal: To confirm that the system has registered the user's intent.
Application: A tactile vibration when a key is pressed, a loading spinner during a search, or a
"Success" toast message after saving a file.

3. Conceptual Model
A good design provides a clear conceptual model (or mental model) that allows the user to
predict the effects of their actions.
The Goal: The system should work the way the user expects it to work.
Application: A folder icon in a file manager suggests that it can hold other files, just like a
physical folder. If the icon behaved like a delete button, it would violate the user's conceptual
model.

4. Affordances
An affordance is a relationship between an object and a person. It is the perceived property
of an object that suggests how it can be used.
The Goal: To make the function of an element obvious without instructions.
Application: A physical door handle affords pulling; a flat plate affords pushing. In UI, a
button that looks raised or 3D suggests it can be clicked.
5. Signifiers
While affordances are what is possible, signifiers are the marks or sounds that communicate
where the action should take place.
The Goal: To clear up ambiguity when affordances aren't enough.
Application: A "Pull" sign on a door is a signifier. In digital design, a text label on an icon (like
a trash can with the word "Delete") or a blue underline on a link acts as a signifier.

6. Mapping
Mapping refers to the relationship between controls and their movements or results in the
world. Good mapping follows physical analogies or cultural standards.
The Goal: To make the control-to-result relationship feel natural.
Application: On a kitchen stove, the layout of the knobs should match the layout of the
burners. In software, a vertical scrollbar moves the page up and down, mirroring the physical
movement of the user's finger or mouse wheel.

7. Constraints
Constraints are limits that prevent the user from performing incorrect actions. They guide the
user toward the correct path by making other paths impossible.
The Goal: To minimize errors and simplify the mental process.
Application:
Physical: A USB plug can only be inserted in one (or two) specific ways.
Digital: Graying out a "Submit" button until all required fields are filled prevents the user from
sending an incomplete form.

3. Write a note on Nielsen's 10 Heuristics for usability.

Usability means how easily a user can use a system to achieve their goal. A system is
usable when users can complete tasks quickly, without confusion, and with satisfaction.

1.​ Consistency and Standards

Users should not have to wonder whether different words, situations, or actions mean
the same thing. Follow platform and industry conventions.
Application: Ensuring that "Settings" is always found in the same place across
different screens, or that a red button always signifies a destructive action.

2.​ Flexibility & Efficiency of Use

The system should cater to both beginners and experts. Experts should be able to
speed up their work using "hidden" tools.
Application: Keyboard shortcuts (Ctrl+C) or custom macros that beginners don't need
but experts love.

3.​ Visibility of System Status

The system should always keep users informed about what is going on through
appropriate feedback within a reasonable time.
Application: A progress bar during a file upload or a "Message Sent" confirmation.
4.​ Match Between System and the Real World
Avoid technical jargon. Use words and concepts that make sense to the user based
on their life experiences.
Application: Using a Trash Can icon instead of "Execute File Deletion Protocol."

5.​ Error Prevention

The best design prevents errors before they happen rather than just giving a good
error message later.
Application: Disabling a "Submit" button until the form is valid, or using auto-correct in
search bars.

6.​ User Control & Freedom

Users make mistakes. They need a clear way to "undo" or "cancel" an action without
getting stuck in a long process.
Application: A clearly visible Undo button or a "Cancel" option in a checkout flow.

7.​ Help Users Recognize, Diagnose, and Recover from Errors

Error messages should be expressed in plain language (no codes), precisely indicate
the problem, and constructively suggest a solution.
Application: Instead of "Error 404," a message saying: "We couldn't find that page.
Try going back to the Home screen or checking the URL."

8.​ Recognition Rather Than Recall

Don't make users memorize things. Keep options and information visible so they
don't have to remember data from a previous screen.
Application: A "Recently Viewed" section in an app so users don't have to search for
the same product twice.

9.​ Aesthetic & Minimalist Design

Every extra piece of info competes with the important stuff. Keep the UI clean and
focused on the primary task.
Application: A search engine home page (like Google) that is just a bar and a button,
not a wall of text.

10.​Help & Documentation

The system should be intuitive, but if a user gets stuck, they need searchable,
step-by-step instructions.
Application: Tooltips that appear when you hover over a complex setting or a
searchable Help Center.
4. Discuss the role of feedback in UI. Explain what makes an "effective error
message" and provide examples of good vs. bad error communication. [Repeated 3
times]
Feedback is how a system communicates the result of a user’s action. It answers the user’s
silent questions:
Did it work?
What’s happening now?
What should I do next?

The Role of Feedback in UI

Feedback is the primary tool for reducing uncertainty. Without it, users are left wondering if a
button click was registered, if a page is loading, or if an error has occurred.
●​ Confirmation: Validates that the system received the user's input (e.g., a button
changing color when pressed).
●​ Status Updates: Informs the user of ongoing background processes (e.g., a progress
bar for a file upload).
●​ Guidance: Helps users understand the "rules" of the interface (e.g., a field turning
green when a password meets the complexity requirements).
●​ Emotional Satisfaction: Well-designed feedback can make an interface feel
responsive and "alive," contributing to a more enjoyable user experience.

The 6 Pillars of Effective Error Messages

An effective error message doesn’t just say something went wrong—it helps the user
recover quickly.
●​ Clarity (No Jargon)
Avoid technical codes (like "Error 404") or developer-speak (like "Null Pointer"). Use
plain, human language that anyone can understand.
Bad: "Validation failed."
Good: "The email address is missing an '@' symbol."

●​ Precise Location & Visibility

The message should appear near the source of the problem (e.g., directly under the
specific text box) so the user doesn't have to hunt for it. It must be visually distinct,
often using high-contrast colors like red.

●​ Constructive & Actionable Guidance

Don't just state the problem; provide the solution. Tell the user exactly what steps to
take to fix the error and move forward.
Bad: "Invalid Password."
Good: "Passwords must be at least 8 characters long and include one number."

●​ Polite, Non-Blaming Tone

The system should take the responsibility. Use neutral language instead of accusing
the user of making a mistake.
Bad: "You entered the wrong date."
Good: "Please enter the date in the format DD/MM/YYYY."
 ●​ Preservation of User Data
An effective error message ensures that user input is not erased. If a user fills out a
10-field form and makes one mistake, the system should keep the other 9 fields filled
so they don't have to start over.

●​ Timeliness
Errors should be communicated immediately. Using "Inline Validation" (showing the
error as soon as the user moves to the next field) is much more effective than waiting
until they hit the "Submit" button at the end.

Good vs. Bad Error Communication

The difference between a bad and good error message often boils down to empathy and
actionable information.

Example 1: Login Failure

Bad: "Error 401: Unauthorized access."
Why: Too technical. The user doesn't know what 401 means or how to resolve it.
Good: "Incorrect password. Please try again or click 'Forgot Password' to reset it."
Why: Identifies the specific issue and provides a clear next step.

Example 2: Form Validation

Bad: "Invalid Input." (Displayed in a red box at the top of a long form).
Why: The user has to hunt through the entire form to find which field is "invalid."
Good: "Please enter a valid email address (e.g., name@[Link])." (Displayed directly
below the Email field).
Why: It highlights the specific field and provides a format example for guidance.

5. How does accessibility factor into IxD? Specifically, discuss the design
considerations required for deaf or hard-of-hearing users, providing a sample design
approach.
Accessibility in Interaction Design means ensuring a system remains functional by removing
single-point dependencies (like sound-only or color-only cues). By designing for the most
extreme needs—such as providing visual captions for the deaf—you create a "Curb Cut
Effect" where the design becomes more usable for everyone

1.​ Replace Audio with Visual Cues

Never rely on a "beep" or "ding" to signal an event. Every sound alert must have a
visual counterpart, such as a flashing icon, a banner, or a change in button color.

2.​ Provide Captions and Transcripts

All video content must include Synchronized Captions (Closed Captions). For purely
audio content like podcasts or voice notes, provide a full text transcript.

3.​ Implement Visual Alerts & Notifications

Use "Pop-ups," "Toast messages," or notification "Badges" to signal system status.
For example, when a message arrives, show a badge count or a brief animation
instead of just playing a sound.
 4.​ Use Haptic Feedback (Vibration)
On mobile devices, combine visual alerts with vibration. A physical pulse provides a
non-auditory way to grab the user's attention for high-priority alerts like incoming
calls.

5.​ Establish Clear Visual Hierarchy

Since these users rely entirely on their eyes, use size, color contrast, and positioning
to highlight the most important information. This helps them scan for updates without
needing audio prompts.

6.​ Avoid Audio-Only Instructions

Never use instructions like "Listen for the signal to proceed." Always provide
text-based instructions or visual indicators (like a progress bar turning green) to show
the system is ready.

7.​ Use Simple and Clear Language

Keep sentences short and avoid complex jargon. Some users who primarily use Sign
Language may find simple, direct written grammar easier and faster to process than
dense technical text.

8.​ Offer Sign Language Support

For complex or highly important content (like safety instructions), include a small
video overlay of a Sign Language interpreter or an avatar to provide the most
accessible form of communication.

Emergency Alert App: Designing for DHH Users

In an emergency, speed and clarity are life-saving. This example shows how Interaction
Design (IxD) removes audio barriers:
●​ Multi-Sensory Triggers: Instead of just a siren, the app uses a high-intensity LED
strobe flash and a unique continuous vibration pattern to grab attention.
●​ High-Visibility Content: The alert uses a full-screen, high-contrast red overlay with
large universal icons (like a warning triangle) to communicate urgency instantly.
●​ Visual Explanation: A Sign Language video auto-plays to explain the emergency,
ensuring users who prefer sign language over written text understand the exit routes
immediately.
●​ Non-Voice Action: The "Help" button opens a Real-Time Text (RTT) chat instead of
a voice call, allowing the user to communicate with emergency services directly
through typing.
Module VI: Evaluation Techniques & Framework
1. Explain the function and all components of the DECIDE framework in detail.
The DECIDE Framework is a structured, six-step approach used in UI/UX to plan and
execute usability evaluations systematically. It ensures that the study remains goal-oriented
and produces reliable insights.
D – Determine the goals
E – Explore the questions
C – Choose evaluation methods
I – Identify practical issues
D – Decide on ethical issues
E – Evaluate, interpret, and present data
The DECIDE Framework for Evaluation

D — Determine the Goals

Define the "Why." Are you finding bugs, comparing two designs, or checking accessibility?
Example: “Find out why users abandon the checkout process”
Key: Clear goals prevent misunderstandings and ensure you don't waste time on irrelevant
data.

E — Explore the Questions

Turn broad goals into specific, measurable questions.
Example: Instead of "Is it easy?", ask "Can a user find the 'Save' button in under 3
seconds?"
Key: This step dictates exactly what metrics (time, errors, clicks) you will track.

C — Choose the Evaluation Methods

Select the right tools based on your budget, timeline, and project stage.
Options: Usability Testing (observing users), Heuristic Evaluation (expert review), or Surveys
(large scale feedback).

I — Identify Practical Issues

Handle the logistics before you start.
The Checklist: Participant recruitment (who?), Facilities (remote or lab?), Equipment (screen
recorders?), and Budget/Schedule.

D — Decide How to Deal with Ethical Issues

Protect your participants.
Requirements: Obtain Informed Consent, ensure Anonymity (don't share names/faces), and
give users the right to withdraw at any time.

E — Evaluate, Analyze, and Present Data

Turn raw data into actionable design changes.
Task: Identify patterns and interpret results. Ensure your findings are Reliable (consistent)
and Valid (actually measuring the right thing).
Goal: Present insights so the team knows exactly what to fix next.
2. Compare and contrast evaluation in controlled settings (labs), natural settings (field
studies), and "any setting" (remote/automated).
Evaluation is a critical step in the design process to verify that a product meets user needs.
The choice of setting significantly impacts the type of data collected and the costs involved.
1. Controlled Settings (Lab Studies)
In this approach, users are brought into a specialized environment—often a usability
lab—where researchers observe their interactions under highly structured conditions.
Primary Goal: To uncover specific usability flaws and measure performance metrics (time
on task, error rates).
Strengths:
●​ High Control: Researchers can eliminate distractions and control the
hardware/software environment perfectly.
●​ Detailed Observation: Often involves specialized equipment like eye-trackers or
high-definition cameras to capture micro-expressions and gestures.
Weaknesses:
●​ Lack of Ecological Validity: Because the environment is artificial, users may behave
differently than they would at home (the "Hawthorn Effect").
●​ Expensive: Requires physical space and travel for participants.

2. Natural Settings (Field Studies)

Researchers observe users in their actual environment—such as their home, office, or while
commuting—as they use the product in the context of their real-world daily lives.
Primary Goal: To understand "how" and "why" a product is used in a real-world context and
identify environmental influencers.

Strengths:
●​ High Ecological Validity: Provides insights into how distractions, interruptions, and
actual workflows affect product use.
●​ Uncovers Latent Needs: Reveals "workarounds" or needs that users might not think
to mention in a lab.
Weaknesses:
●​ Low Control: The researcher cannot control the environment; unexpected events can
disrupt the study.
●​ Data Complexity: It is harder to collect clean quantitative metrics because every
user's environment is different.

3. "Any Setting" (Remote/Automated Evaluation)

This method allows users to interact with the product from any location using their own
devices, while data is collected through tracking software or remote conferencing tools.
Primary Goal: To gather data from a large, geographically diverse group of users quickly
and affordably.

Strengths:
●​ Scalability: You can test with hundreds of users simultaneously (e.g., A/B testing or
heatmaps).
●​ Cost-Effective: No need for a physical lab or travel.
●​ Natural Context: Users are on their own devices, which adds a layer of realism.
Weaknesses:
●​ Limited Observation: In "unmoderated" testing, the researcher cannot ask follow-up
questions or see the user's physical struggles (like squinting at the screen).
●​ Technical Risks: Participants may have poor internet connections or incompatible
hardware.

[Link] various usability inspection methods and provide a summary of the Cognitive
Walkthrough technique.
Usability inspection is a set of methods where evaluators—rather than end-users—examine
an interface to identify potential usability problems. These methods are generally faster and
less expensive than formal user testing.

1. Heuristic Evaluation (The "Expert Checklist")

A small group of experts (3–5) goes through the interface and checks it against a set of
proven rules, like Nielsen’s 10 Heuristics.
Best for: Finding general issues like lack of feedback, poor consistency, or bad error
messages.

2. Cognitive Walkthrough (The "First-Timer's Shoes")

Evaluators pretend to be new users and try to complete specific tasks step-by-step. They
ask: "Will the user know what to do next?" and "Will they notice they’ve succeeded?"
Best for: Testing learnability and seeing if a system is intuitive for beginners.

3. Pluralistic Walkthrough (The "Group Huddle")

A meeting where users, developers, and designers sit together to review screens. Everyone
discusses the design at the same time.
Best for: Getting immediate, diverse feedback and solving conflicts between "what looks
good" and "what can be built."

4. Perspective-Based Inspection (The "Roleplay")

Evaluators look at the system from specific viewpoints. One might focus only on accessibility,
another on security, and another on the needs of a power user.
Best for: Ensuring the system works for all stakeholders, not just the "average" user.

5. Formal Usability Inspection (The "Courtroom Review")

A highly structured technical review with defined roles (like a Moderator, Reader, and
Recorder). Every single button and label is scrutinized in a formal meeting.
Best for: High-stakes projects where every detail must be perfect and documented.

6. Feature & Consistency Inspection (The "Logic Check")

Feature: Focuses on whether the tools actually exist to help the user finish their job.
Consistency: Checks if buttons, fonts, and behaviors are the same across every screen.
Best for: Making the app feel professional and reducing "mental load."

7. Standards Inspection (The "Rulebook")

An expert checks if the design follows industry or platform-specific guidelines (like Apple’s
Human Interface Guidelines or Google’s Material Design).
Best for: Ensuring the app "fits in" on the device it’s built for.
Summary of the Cognitive Walkthrough Technique
Cognitive Walkthrough is a specialized inspection method that focuses on how easy it is for
new users to accomplish a task with a system. Unlike Heuristic Evaluation, which is broad,
this technique is task-specific.

The Core Concept

An expert "walks through" a specific task, step-by-step, pretending to be a new user. At
every single step, they must answer 4 Critical Questions:
Intent: Will the user know what the next step is?
Visibility: Can they actually see the button or control they need?
Meaning: Do they understand that this button does what they want?
Feedback: After clicking, do they know they’ve made progress?

Example
Task: “Send a message in a chat app”
Evaluator checks:
●​ Is the “New Message” button visible?
●​ Is it clear what it does?
●​ After tapping, is there feedback (chat screen opens)?
If any step is confusing → usability issue identified

Key Metrics in Usability Testing

●​ Task Success Rate: The percentage of users who complete a specific task
successfully without help.
●​ Time on Task: The exact time it takes for a user to finish a task.
●​ Error Rate: The total number of mistakes or wrong clicks made by users during the
process.
●​ Efficiency: A measure of the resources used, such as the number of clicks or pages
visited, to complete the task.
●​ Learnability: How quickly a first-time user can understand and perform tasks.
●​ Satisfaction: The user's comfort level and feedback, often measured via post-test
surveys.