Design Interaction

Module -3
• In Human-Computer Interaction (HCI), Design Interaction refers to
the creation and evaluation of user interfaces that enable effective,
efficient, and enjoyable interaction between people and computer
systems.

It focuses on
how users engage with technology
-Through buttons, gestures, voice, screens, or even virtual environments
how designers can improve that experience
- By understanding user needs, behaviors, and limitations.
 Core Elements of Interaction Design in HCI:

Element Purpose
Who will use the system? What are their needs, goals,
Users
limitations?

Tasks What tasks are users trying to accomplish?

Where and how is the system being used? (desktop, mobile,

Environment
VR, etc.)

Feedback How does the system communicate back to the user?

The medium of interaction — graphical UI, voice, gestures,

Interface
etc.
Shneiderman’s 8 Golden Rules
1. Strive for consistency
2. Enable frequent users to use shortcuts
3. Offer informative feedback
4. Design dialogs to yield closure
5. Offer error prevention and simple error handling
6. Permit easy reversal of actions
7. Support internal locus of control
8. Reduce short-term memory load
1. Strive for consistency

• 1 Strive for consistency.(uniformity)

Consistent sequences of actions should be required in similar
situations; identical terminology should be used in prompts, menus,
and help screens; and consistent commands should be employed
throughout.

• Example (same theme, color, buttons –uniform, similar to each other),

increase learnability
 Examples
1. WhatsApp
✅ Tick marks (✓, ✓✓, ✓✓ blue) always mean the same thing (sent, delivered, read).
✅ Voice messages always show the play button on the left and waveform on the right.
✅ Attachment icon (paperclip) in the exact same spot across all chats.
✅ Message layout and options (Delete, Forward, Reply) are always in the same order.

Instagram
✅ Like (❤️) and comment (💬) icons always appear in the same order under posts.
✅ Double-tap to like works across feed, reels, and explore.
✅ Story bar appears consistently at the top of the app.
✅ Profile, Home, and Search tabs stay fixed on the bottom navigation bar.
 Examples
Microsoft Office (Word, Excel, PowerPoint)
✅ Ribbon interface is consistent across all apps.
✅ Same shortcuts and alignment tools across applications.
✅ Font, paragraph, insert image functions are in similar positions.

Operating Systems (Windows, macOS, Android)

✅ Context menus (right-click or long-press) behave the same across apps.
✅ Settings menus have a consistent structure.
✅ Notification systems use standard positions and formats.
• 2 Enable frequent users to use shortcuts.
As the frequency of use increases, so do the user's desires to reduce the number of
interactions and to increase the pace of interaction. Abbreviations function keys, hidden
commands, and macro facilities are very helpful to an expert user.
 Examples
Instagram
While Instagram is primarily touch-based, frequent users benefit from:
Swipe gestures to switch stories.
Double-tap to like.
Hold to preview profiles or posts.
These gestures act like shortcuts for touch navigation.

Microsoft Word

Ctrl + B: Bold
Ctrl + S: Save
Ctrl + Shift + C/V: Copy/Paste formatting
Designed for heavy document users who prefer speed and keyboard flow.
Rule 3 Offer informative feedback. (Every user action should result in some system
feedback that is clear, immediate, and meaningful. )
For every operator action, there should be some system feedback.
For frequent and minor actions, the response can be modest, while for
infrequent and major actions, the response should be more substantial.
Examples :
File Upload Systems (Google Drive, Dropbox)
Upload shows progress bar with size, speed, and ETA.
If upload fails, a toast message or alert explains the error.
Microsoft Word
Auto-save icon spins during saving.
Spellcheck underlines errors instantly in red.
“Document recovered” message if app crashes.
4 Design dialog to yield closure.

• Sequences of actions should be organized into groups with a beginning,

middle, and end.
• The informative feedback at the completion of a group of actions gives
the operators the satisfaction of accomplishment, a sense of relief, the
signal to drop contingency plans and options from their minds, and an
indication that the way is clear to prepare for the next group of actions.
• Ex : dialog box
Google Forms
Submitting a form:
Clear message "Your response has been recorded."
Optional link to submit another response or go back.
This marks the end of the user’s task.
Rule 5 Offer simple error handling.

As much as possible, design the system so the user cannot make a serious
error. If an error is made, the system should be able to detect the error and
offer simple, comprehensible mechanisms for handling the error.

Eg: exception handling

• Design systems so that users can easily detect, understand, and recover
from errors.
Rule 5 -- Offer simple error handling.
 Examples
E-commerce Apps (Amazon, Flipkart)
Payment fails?
Clear message: “Transaction unsuccessful. Try another payment method.”
Options: Retry, choose another method, or contact support.
Invalid coupon code?
“Coupon not valid. Please check terms or try a different code.”

File Upload Systems (Drive, Dropbox)

Upload fails due to format or size:
Message: “File too large. Max size is 25MB.”
Suggests compressing or splitting the file.
Online Forms / Signups
• Password mismatch?
• Message: “Passwords do not match.”
• Highlighted fields in red for clarity.
• Weak password?
• Feedback: “Too short. Add a symbol or number.”
Google Forms
• If a required field is left empty:
• Red warning appears: “This question is required.”
• If an invalid email format is entered:
• Shows: “Please enter a valid email address.”
Rule 6 Permit easy reversal of actions.

This feature relieves anxiety, since the user knows that errors can be
undone; it thus encourages exploration of unfamiliar options. The units of
reversibility may be a single action, a data entry, or a complete group of
actions. Eg : exposure the s/w as much as possible (control c)
• Users should be able to undo or redo actions easily.
• It reduces anxiety and encourages exploration
 Examples
Google Docs / Microsoft Word
• Ctrl + Z / Cmd + Z:
• Universal Undo shortcut for reversing typing, formatting, deletion, etc.
• Redo available with Ctrl + Y or Cmd + Shift + Z.

Shopping Apps (Amazon, Flipkart)

• Cancel Order option is available shortly after purchase.
• Remove item from cart easily with a click.
• Undo “Remove from Cart” in some apps (temporary prompt).
Rule 7 Support internal locus of control.
Experienced operators strongly desire the sense that they are in charge of
the system and that the system responds to their actions. Design the system
to make users the initiators of actions rather than the responders.
Example
Phone Settings
• User has full control over:
• Enabling/disabling WiFi, Bluetooth
• Setting brightness, volume
• App permissions
• You don’t feel forced — you control everything.
8 Reduce short-term memory load.
The limitation of human information processing in short-term memory
requires that displays be kept simple, multiple page displays be
consolidated, window-motion frequency be reduced, and sufficient
training time be allotted for codes, mnemonics, and sequences of
actions. Eg : not to memorise, options easy
Examples
Online Forms with Autofill
• When filling your address, browser suggests:
• Name
• Email
• ZIP code
• No need to recall details = reduced memory load
• Drop-down Menus (e.g., Booking Flights)
• Instead of typing country/airport codes:
• User picks from a list
• No memory burden for names or formats
 Norman’s 7 Principles
1. Use both knowledge in the world and knowledge in the head.
2. Simplify the structure of tasks.
3. Make things visible: bridge the gulfs of Execution and Evaluation.
4. Get the mappings right. (User mental model = Conceptual model = Designed
model).
5. Exploit the power of constraints, both natural and artificial.((Physical
constraints, Cultural constraints, Technological constraints).
6. Design for error.
7. When all else fails, standardize.
1.Use both knowledge in the world and knowledge in the head.
Knowledge in the Head:
• What the user already knows from memory, experience, or training.
• It requires learning, recall, and practice.
Examples:
• Knowing keyboard shortcuts (like Ctrl + C to copy).
• Remembering how to solve a math formula.

Knowledge in the World:

• Information provided in the environment to help users recognize what to do.
• Requires less memory — the interface provides visible clues.
Examples : A trash bin icon for deleting files.
A progress bar showing file upload status.
•Beginners rely more on knowledge in the world (labels, tooltips).

•Experts rely more on knowledge in the head (speed, shortcuts).

•A good design supports both to help all users succeed.

Real-World Examples

Example How Discoverability Works

Clearly labeled buttons (1, 2, 3, etc.) and icons (🔼🔽)
Elevator Buttons
show what each does.
A button labeled "Start" and "Stop" makes it obvious
Microwave Oven
what action will happen.
A red power symbol (⏻) suggests it's for turning the
TV Remote
device on/off.

Digital Examples

Example Discoverable Action

Instagram's "+" icon Easily discoverable for adding a new post.

 2. Simplify the structure of tasks.
• Break down complex processes into smaller, clearer steps
• Group related functions together
• Reduce the user’s mental load by making tasks easy to follow and predictable
• A conceptual model helps users understand how a system works by simplifying
the structure of tasks and making relationships clear.
• Make things understandable through a good Conceptual Model
 Examples
Example 1: ATM Machine
• Before (Complex Task):
• Insert card → type PIN → multiple menus → unclear options
• After (Simplified):
• Insert card → options grouped clearly: Withdraw, Balance, Transfer
• Each option leads step-by-step with clear buttons and feedback
Example 2: Online Food Delivery App
Simplified structure:
Step 1: Select restaurant
Step 2: Choose items
Step 3: View cart
Step 4: Confirm and pay
3. Make things visible: bridge the gulfs of Execution and
Evaluation.
This principle focuses on making important information visible at the right time
to help users:
• Know what to do (execution)
• Understand what happened after they did it (evaluation)
In other words, users should:
• Know what actions are available
• Know what state the system is in after they act
 Gulf Description Goal

The gap between what the user

Gulf of Execution wants to do and what the system Help users figure out how to act
allows them to do

The gap between what the system

Help users see what happened and
Gulf of Evaluation did and whether the user can see
interpret it
and understand the result
example
• Good Visibility (Bridging the Gulfs)
Example Explanation
A progress bar during file upload Shows the action is happening and how much is left
A highlighted “selected” button Helps the user see which option they picked

• Poor Visibility (Wide Gulfs)

Design Tips
• Make buttons, controls, and system states highly visible
• Provide immediate feedback after actions
• Use clear labels, icons, or animations to guide user actions and
understanding
• Avoid hiding important information in menus or requiring memory to
recall actions
Get the mappings right. (User mental model =
Conceptual model = Designed model).
Design Tips to Get Mapping Right:
• Arrange controls in natural spatial layouts
• Use clear labels or icons
• Keep cause-and-effect simple and logical
• Match system behavior to real-world expectations
 Get the mappings right. (User mental model = Conceptual
model = Designed model).
• Mapping refers to the relationship between controls and their effects.
Good mapping helps users intuitively understand how their actions lead to
results.

🔹 User’s Mental Model

= 🔹 Conceptual Model of the System
= 🔹 Designer’s Intended Model
When all three match, users find the system natural and easy to use.

Goal: All three models should match — this reduces confusion and errors.
Model Meaning
User’s Mental Model What the user believes about how the system works
Conceptual Model The actual system logic and interaction flow
Designer’s Model What the designer intended the system to be
• Real-World Examples of Good Mapping:
Example Explanation
The user naturally knows which knob controls which
Stove knobs arranged like burners
burner.
Steering wheel Turn left → car turns left. Obvious and direct.
Drag right = brighter, drag left = dimmer — intuitive
Touchscreen brightness slider
direction.

Examples of Poor Mapping:

Example Problem
Four stove burners with knobs in a straight line User can’t tell which knob maps to which burner.
Remote with unclear button icons User struggles to guess what each button does.
Options feel misplaced or unrelated — hard to find
App menu with unrelated groupings
actions.
 5. Exploit the power of constraints, both natural and artificial.((Physical
constraints, Cultural constraints, Technological constraints).
• Constraints are design limits or rules that guide user actions and prevent
errors.
They help simplify choices and make interfaces more intuitive.
• A constraint is a rule, limit, or restriction that makes it easier for users to
do the right thing and harder to do the wrong thing.
• To reduce errors
• To guide users toward the correct operation
• To simplify decisions
• Example in Real Life:
1. Physical Constraint
Definition: Limits interaction based on shape, size, or movement.
Example:
• A USB-A plug only fits into the port in one direction.
• A scrollbar can only be dragged vertically or horizontally, not diagonally.
2. Cultural Constraint
• Definition: Based on user’s learned behavior or cultural norms.
• Example:
• A red button means “stop” or “delete” because red is culturally associated with
danger or cancellation.
• A trash can icon is understood to mean “delete” in most cultures.
3. Logical Constraint
Definition: Limits actions based on logic or reasoning.
Example:
• In a form where you enter your date of birth, the year dropdown won’t allow
years in the future.
• You cannot press “Submit” until all required fields are filled.
4. Semantic Constraint
Definition: Based on the meaning of the situation or object.
Example:
• A picture of a speaker with a “mute” icon indicates sound control — users
understand it without explanation.
• A door handle shaped like a flat panel implies pushing, not pulling.
5. Technological Constraint
Definition: Limits set by the system’s technology or rules.
Example:
• A button is grayed out (disabled) until a user agrees to the terms and
conditions.
• A software only allows you to upload JPG or PNG files, not PDFs.
6. Design for error.

• Instead of assuming users won’t make mistakes, designers should

anticipate errors and design systems that minimize the impact of
those errors.

• People will make errors — design should help prevent them, and
make recovery easy.
• Error Prevention
• Use constraints, confirmations, clear affordances.
• Ex: Disable “Submit” button until form is valid.
• Error Detection
• Help users recognize what went wrong.
• Ex: “Password must include 1 capital letter.”
• Error Recovery
• Let users undo, retry, or recover.
• Ex: “Undo Send” in Gmail.
• Design forgiving systems
• Allow corrections without starting over.
• Ex: Autosave drafts, version control.
Practical Steps
• Add "Undo" wherever possible
• Show clear error messages, not codes
• Use confirmation steps for destructive actions
• Make errors easy to reverse
When all else fails, standardize.
• Standards reduce the need to learn. Users already know how things
work from prior experience.
• When no design solution seems intuitive or clear, and when
discoverability, mappings, or constraints are insufficient—rely on
standards that users are familiar with.
• If nothing else works in your interface, stick to what people already
know.
Standards aren't boring—they’re reliable.
• Key Ideas:
• Consistency across systems:
Similar operations should behave the same in different applications.
• Platform conventions:
Follow established norms (e.g., Ctrl+C for copy, trash icon for delete).
• Reduces cognitive load:
Users don't need to relearn basic tasks.
Why It's Important:
• Prevents confusion when creative design fails
• Promotes usability and efficiency
• Enables transfer of learning from one system to another
• Saves training and support costs