THE INTERACTION

Module 2
 INTERAC TION MODELS IN HC I
Interaction models define the framework that guides how users interact with
systems or applications. These models help design intuitive and user-friendly
interfaces.
1. Direct Manipulation: Users directly manipulate objects on the screen with
input devices (e.g., mouse, touchscreen). This model is prevalent in GUIs and is
favored in HCI for its intuitive nature.
• Example in HCI: Dragging and dropping files in a desktop environment,
resizing windows, or interacting with touchscreens on mobile devices.
• This model emphasizes visibility, feedback, and rapid response, making it easy
to learn and intuitive.
• HCI Focus: Enhances user engagement through visual feedback, providing a
sense of control, and is especially helpful for novice users.
 INTERAC TION MODELS IN HC I
2. Command-Line Interaction: Though less common in modern interfaces,
command-line models are still used in HCI for expert users who need
efficiency and precision.
• Example in HCI: Advanced users interact with systems using command-line
terminals to perform complex tasks like batch processing.
• HCI Focus: Streamlines tasks for power users, but presents a steep learning
curve and is not as beginner-friendly.
3. Form-Fill Interaction: Common in applications that require structured
data entry, such as databases or online forms.
• Example in HCI: Filling out user registration forms, data entry tasks in
enterprise applications.
• HCI Focus: Ensures data accuracy and reduces errors but can become
tedious for users if not designed properly with clear instructions and error
handling.
 INTERAC TION MODELS IN HC I
4. Menu-Based Interaction: Users select options from a structured list of
commands (e.g., drop-down menus).
• Example in HCI: Menu-based systems in software applications like Microsoft
Office or mobile apps.
• HCI Focus: Simplifies task completion for users by breaking down options
into manageable categories, reducing cognitive load.
5. Natural Language Interaction: Users interact with the system through
natural language input (either voice or text).
• Example in HCI: Virtual assistants like Siri, Alexa, and chatbots.
• HCI Focus: Increases accessibility for non-technical users by enabling
interaction in everyday language, but challenges include ambiguity in user
inputs.
 D ON ALD NO RMA N ’S MO DE L
• It outlines the steps involved in completing a task using a device or
interface. The model is useful in user-centered design and usability
engineering, helping designers create systems that align with how people
think and act.
Execution Phase - is about what the user does to accomplish their goal.
Example Scenario: a user wants to set an alarm on their smartphone.
1. Forming the goal: The user determines what they want to accomplish.
Example The user decides, "I want to wake up at 6 AM tomorrow.”, setting
an alarm to wake up at a specific time.
2. Forming the intention: The user decides how they plan to achieve their
goal. Example: The user thinks, "I need to set an alarm for 6 AM on my
phone.” The user now translates the goal into an intention, deciding that
setting an alarm on their phone will help them achieve the goal.
 DONALD NORMAN’S MODEL
3. Specifying the action: The user identifies what actions need to be
taken to reach the goal. Example: "I need to open the alarm app,
create a new alarm, and set it to 6 AM.” The user breaks down the
intention into specific actions, identifying what needs to be done to
set the alarm.
4. Executing the action: The user performs the action. Example, The
user picks up the phone, opens the clock app, taps on "add alarm,"
and sets it to 6 AM. The user now performs the actions they
specified, interacting with the phone’s interface to achieve the goal.
 DONALD NORMAN’S MODEL
Evaluation Phase - is about how the user interprets the system’s response and
whether they’ve achieved their goal.
1. Perceiving the system state: The user observes the system's response to their
action. Example : The user sees that the phone shows an alarm set for 6 AM.
After executing the action, the user looks at the phone’s display to perceive
whether an alarm has been set.
2. Interpreting the system state: The user makes sense of what they perceive,
understanding the system's feedback. Example : The user interprets the
screen and understands that an alarm is successfully set because they see
"6:00 AM" with a green icon indicating it’s activated. The user makes sense of
the feedback from the system (in this case, the visual indication of the alarm)
and determines if the action was successful.
3. Evaluating the outcome: The user assesses whether the outcome matches
their goal. Example: The user evaluates, "The alarm is set correctly for 6 AM,
which was my goal.” The user compares the result (alarm set for 6 AM) with
their original goal (wake up at 6 AM) to see if the system’s response matches
their expectation.
 G U L F O F E X E C U TI O N A N D G U L F O F E VA LUATI O N
• Gulf of Execution: The gap between the user’s intentions and the actions
available in the system.
• If the phone’s alarm app is well-designed, it should be easy for the user to
figure out how to set the alarm, thereby minimizing the gulf of execution (the
gap between the user's intentions and available actions).
• Example: If the alarm app has a simple interface with clear buttons like "Add
Alarm" and easy-to-use time selectors, the user can quickly execute their
intended action.
• Gulf of Evaluation: The gap between the system’s output and the user's
ability to interpret and understand it.
• The feedback from the phone (showing that the alarm is set) should be clear
and easy to interpret, minimizing the gulf of evaluation (the gap between the
system’s feedback and the user’s ability to understand it).
• Example: If the phone shows a clear visual confirmation, such as "Alarm set
for 6:00 AM" with an active icon, the user can confidently evaluate that the
task is complete.
 A BOWD A ND BE A LE F RA ME WOR K
• It is a conceptual model used in human-computer interaction
(HCI) to describe the communication between the user and the
system. It focuses on the flow of information during interactions
and helps analyze how users and systems exchange data.
This framework primarily divides interaction into four components:
1. User – person interacting the system. Ex. Operating computer or
phone
2. Input – information or action provided i.e. mouse clicks, keyboard
strokes, touch or voice commands. Ex. Typing keywords – search
engines
3. System – software or device. Ex. Search engine algorithm
4. Output – Display feedback or response, visual, auditory, tactile
 E XAMP L E IN C ONT EXT: A S HOP P ING AP P

• User: A person who wants to purchase a product.

• Input: The user types the product name into the search bar.
• System: The app's search engine processes the request,
retrieving product listings.
• Output: The app displays the search results (products that
match the query).
 T WO COMMUNICAT ION CYCLES :
A. Input-Output Interaction (User → System)
• This interaction involves the user sending input to the system, and the
system processing that input to produce an output. The user’s actions drive
the system’s behavior.
• Example: A user clicks on a button to play a video, and the system responds
by playing the video.
B. Feedback Interaction (System → User)
• Once the system processes the input, it provides feedback to the user. The
user interprets this feedback and may adjust their actions accordingly. Clear
and timely feedback is critical for a good user experience.
• Example: The system might display a loading icon after the user clicks
"Play," indicating that the video is buffering. This informs the user that the
system is processing their request.
 E RGO NO MI CS I N H CI
• Ergonomics, often referred to as human factors, is the study of designing
systems, devices, and interfaces that fit human physical and cognitive
capabilities. In HCI, ergonomics ensures that interactions with systems are
comfortable, safe, and efficient and reducing strain or injury during
prolonged use.
Ergonomics in HCI Context:
1. Physical Ergonomics: Focuses on optimizing the physical interaction
between users and computers.
• Example in HCI: Designing comfortable keyboards and mice to prevent
repetitive strain injuries (RSI), adjustable monitor stands to reduce eye
strain, and touchscreens that minimize finger fatigue.
• HCI Focus: Prevents user discomfort, fatigue, and injury by considering
posture, input devices, and physical layout in interaction design.
 PHYSIC AL ERGONOMICS
• Input Devices: Keyboards, mice, and touchscreens should be designed for
comfort and ease of use.
• Posture and Layout: Desk setup, monitor height, and distance can
minimize strain on users.
• Accessibility: Consideration of users with different abilities, ensuring that
interfaces are usable by everyone (e.g., large buttons for those with motor
impairments).
 ERGONOMICS IN HCI
2. Cognitive Ergonomics: Concerned with understanding how users process
information and how interface design can reduce cognitive load.
• Example in HCI: Simplifying interfaces by grouping related functions, using
recognizable symbols, and avoiding information overload.
• HCI Focus: Helps users efficiently process information, avoid errors, and
make faster decisions by minimizing distractions and providing clear, concise
feedback.
3. Accessibility Ergonomics: Ensures that systems are accessible to users of
varying physical and cognitive abilities.
• Example in HCI: Including screen readers for visually impaired users,
providing keyboard shortcuts, and offering customizable font sizes for better
readability.
• HCI Focus: Improves inclusivity by allowing diverse user groups, including
people with disabilities, to effectively use the system.
 I NT E RFAC E ST YLE S I N H CI
• Interface styles determine how users interact with systems, and in HCI,
selecting the right style is essential for improving user experience. Interface
styles in HCI are designed with the goal of reducing complexity while
ensuring users can easily perform their tasks.
Key Interface Styles in HCI:
1. Graphical User Interface (GUI): GUIs use visual elements such as
windows, icons, and menus to interact with the system.
• Example in HCI: Operating systems like Windows, macOS, or mobile
systems like iOS.
• HCI Focus: GUIs in HCI are designed to be intuitive and visually
appealing. They cater to both novice and expert users, with consistent
visual metaphors and feedback to help users navigate tasks easily.
 I NT E RFAC E ST YLE S I N H CI
2. Touch Interfaces: Interfaces optimized for touch-based devices, like
smartphones and tablets.
• Example in HCI: Apps designed for touch-based interactions, such as pinch-to-
zoom gestures on smartphones or tablets.
• HCI Focus: Touch interfaces in HCI prioritize ease of use, minimizing interaction
steps and providing visual feedback to support gestures. They are especially
important for mobile devices and are designed for small screens.
3. Voice User Interface (VUI): Allows users to interact with systems using
voice commands.
• Example in HCI: Virtual assistants (e.g., Google Assistant, Siri) and smart home
devices.
• HCI Focus: VUIs enhance accessibility and convenience, allowing hands-free
interaction. However, challenges in VUIs include voice recognition accuracy and
interpreting natural language in complex scenarios.
 I NT E RFAC E ST YLE S I N H CI
3. Command-Line Interface (CLI): Text-based interfaces where users type
commands to interact with the system.
• Example in HCI: Terminal applications in software development
environments.
• HCI Focus: While powerful and efficient for expert users, CLI poses usability
challenges for novices, requiring precise syntax and memorization of
commands.
4. Natural Language Interfaces (NLI): Enable users to interact with
systems via conversational language.
• Example in HCI: Chatbots used in customer service applications.
• HCI Focus: NLIs in HCI aim to replicate human communication, offering
more natural and intuitive interactions, though they are limited by the
system’s ability to accurately interpret user intent.
 WI MP IN H CI
WIMP (Windows, Icons, Menus, Pointer) is a core paradigm in HCI,
forming the basis of most graphical user interfaces. It creates a visual
and interactive environment that allows users to interact with software
easily.
WIMP Elements in HCI:
1. Windows: Provide users with multiple areas for interacting with
different applications or tasks.
• Example in HCI: Multi-window support in operating systems like
Windows and macOS.
• HCI Focus: Windows allow multitasking, giving users flexibility to
manage different tasks simultaneously. In HCI, managing window
arrangement and navigation is crucial for optimizing user
experience.
 WI MP IN H CI
2. Icons: Graphical representations of objects or actions, making it easy for
users to recognize and interact with the system.
• Example in HCI: Desktop icons representing files, folders, or shortcuts to
applications.
• HCI Focus: Icons reduce cognitive load by providing a visual shortcut to
actions or files. HCI focuses on making icons intuitive, visually distinct, and
meaningful.
3. Menus: Present users with lists of commands or options in a structured
way.
• Example in HCI: Drop-down menus in software like Microsoft Word or
context menus in right-click interactions.
• HCI Focus: Menus in HCI are designed to be accessible and organized,
helping users find and execute commands without overwhelming them with
choices.
 WI MP IN H CI
4. Pointer: Used to navigate and interact with the graphical elements
on the screen.
• Example in HCI: Mouse cursor used to click buttons, select text, or
drag items.
• HCI Focus: The pointer facilitates direct interaction with the system.
In HCI, ensuring the pointer's responsiveness and precision is critical
for smooth interactions.
WIMP in Modern HCI Context:
• While WIMP remains foundational in HCI, its limitations in mobile and
touch interfaces have led to its evolution. Modern interfaces prioritize
touch, voice, and gesture-based interactions, expanding beyond the
traditional WIMP framework to accommodate more diverse and
natural interaction methods.
 KINDS OF MENUS
1. Drop-Down Menus - A drop-down menu appears when a user clicks on a
menu title, displaying a list of options below it.
2. Contextual (Context) Menus -These menus appear upon right-clicking (or
long-pressing) on an item, offering options relevant to that item or context.
3. Toolbar Menus - Toolbars consist of icons or buttons that represent
commands or functions. Clicking an icon performs an action without opening a
separate menu.
4. Pop-Up Menus - These menus appear on top of the current interface without
blocking the entire screen, often triggered by user actions like clicks or
keyboard shortcuts.
5. Mega Menus - A large, multi-column drop-down menu that displays a wealth
of options and categories at once. Example : online retailer that expands to
show product categories, subcategories, and featured items.
 KINDS OF MENUS
6. Hamburger Menus - A collapsed menu represented by three horizontal lines (☰),
which expands to show a full menu when clicked.
7. Radio Button Menus - A set of options where only one can be selected at a time,
often presented as a vertical or horizontal list.
8. Check Box Menus - Similar to radio buttons, but users can select multiple
options simultaneously. Each option is represented by a checkbox.
9. Navigation Menus - Typically found at the top or side of a webpage or
application, providing links to the main sections or features.
10. Step-by-Step Menus (Wizards) - A series of menus that guide users through a
process step by step, often with "Next" and "Back" buttons.