HUMAN COMPUTER INTERFACE

2024 MAY_JUNE

Q1 a) What is meant by design? Which are the important points needed to

consider for designing? [6]

b) Explain what is mean by human error in detail. [6]

c) List out Eight golden rules. [6]

Q2) a) Explain the process of design using suitable example. [6]

b) Discuss the Software Life cycle used in HCI system using appropriate example. [6]

c) Elaborate Graphical User Interface in Detail. [6]

2023 MAY_JUNE

Q1) a) Explain what is mean by Human err in detail. [6]

b) Elaborate Graphical User Interface in detail. [6]

c) Explain web user interface in detail. [6]

Q2) a) Explain usability Engineering with suitable example. [6]

b) Write down about interactive design and prototyping using suitable

example. [6]

c) Write short note on: [6]

i) Popularity of Graphics

ii) Concept of Direct Manipulation

2022 NOV_DEC

Q1) a) List the interaction styles and explain command line interfaces in detail.[6]

b) Explain the Direct Manipulation interaction style with example [6]

c) How does Menu selection interaction style impact on better user

interface/Explain with example. [6]

Q2) a) Explain any three Principles of User interface of design in detail. [6]

b) What are the important aspects of Graphics to be considered in any web

page interface designs? [6]

c) Explain Usability Engineering in detail. [6]

2023 NOV_DEC

Q1) a) What is Ergonomics? Explain the Arrangement of controls and display

with respect to cognitive aspects of design. [6]

b) List the interaction styles and explain any one in detail. [6]

c) Write a short note on Human Memory and its types. [6]

Q2) a) What are the psychological reactions to poor interface designs? [6]

b) What is Usability Engineering? Explain Scenario based usability

Engineering. [6]

c) List the Principles of User Interface of design and explain any one in

detail.

1. Design & Process of Interaction Design

2. Human Error
3. Interaction Styles
4. Graphical User Interface (GUI)
5. Web User Interface
6. Principles of Interface Design
7. Usability Engineering
8. Interactive Design & Prototyping
9. Graphics (popularity, characteristics, aspects)
10. Ergonomics & Cognitive Aspects
11. Human Memory
12. Psychological Reactions to Poor Design
✅ SORTED QUESTIONS (According to Unit III Topics)

1️⃣ DESIGN & PROCESS OF DESIGN

 2024 Q1(a) What is meant by design?

 2024 Q2(a) Explain the process of design with example.

2️⃣ HUMAN ERROR

 2024 Q1(b) Human error

 2023 May/June Q1(a) Human err

3️⃣ INTERACTION STYLES

 2022 Q1(a) List interaction styles + explain command line

 2022 Q1(b) Direct manipulation

 2022 Q1(c) Menu selection

 2023 Nov/Dec Q1(b) Interaction styles (any one)

4️⃣ GRAPHICAL USER INTERFACE (GUI)

 2024 Q2(c) Elaborate GUI

 2023 May/June Q1(b) Elaborate GUI

 2023 May/June Q2(c)(i) Popularity of Graphics

 2023 May/June Q2(c)(ii) Concept of direct manipulation

 2022 Q2(b) Important aspects of Graphics

 2023 May/June Q1(b) GUI (again)

5️⃣ WEB USER INTERFACE

 2023 May/June Q1(c) Explain web user interface

 Syllabus: Web UI characteristics, merging graphics + web

6️⃣ PRINCIPLES OF USER INTERFACE DESIGN

 2024 Q1(c) Eight Golden Rules

 2022 Q2(a) 3 Principles of UI design

 2023 Nov/Dec Q2(c) List principles + explain one

7️⃣ USABILITY ENGINEERING

 2023 May/June Q2(a) Usability Engineering

 2022 Q2(c) Usability Engineering

 2023 Nov/Dec Q2(b) Scenario-based usability engineering

8️⃣ ITERATIVE DESIGN & PROTOTYPING

 2023 May/June Q2(b) Interactive design & prototyping

9️⃣ GRAPHICS (POPularity, Characteristics)

 2023 May/June Q2(c)(i) Popularity of graphics

 2022 Q2(b) Graphics in web page interface

 GUI characteristics also come under graphics

🔟 ERGONOMICS & COGNITIVE DESIGN

 2023 Nov/Dec Q1(a) Ergonomics + arrangement of controls & displays

1️⃣1️⃣ HUMAN MEMORY

 2023 Nov/Dec Q1(c) Human Memory + types

1️⃣2️⃣ PSYCHOLOGICAL REACTIONS TO POOR UI

 2023 Nov/Dec Q2(a) Psychological reactions to bad interface

TOP REPEATED (MOST IMPORTANT) – 6 Topics

1. Graphical User Interface (GUI)
2. Usability Engineering
 3. Interaction Styles
4. Design / Process of Design
5. Human Error
6. Principles of UI Design (Eight Golden Rules)

🟡 Moderate Importance – 4 Topics

7. Graphics (Popularity, Aspects)
8. Web User Interface
9. Interactive Design & Prototyping
10. Ergonomics

🟢 Less Frequent – 2 Topics

11. Human Memory
12. Psychological Reactions

🧠 SUMMARY
✔ Total Topics in Unit III: 12
✔ Highly important & repeated topics: 6
✔ Moderately important topics: 4
✔ Low-frequency topics: 2

HCI – Definition
Human–Computer Interaction (HCI) is the study of how people interact with computers and
digital systems.
It focuses on designing computer interfaces that are easy to use, efficient, safe, and user-
friendly.
HCI combines computer science, psychology, design, and ergonomics to make technology
more comfortable and effective for users.

Unit III Interaction Styles and HCI in Software Process 07 Hours

Design
Design means creating an interface or system that is easy, efficient, and comfortable for the
user to use. In HCI, design focuses on how users interact with computers and how the
interface supports their tasks.
Purpose of Design
 To make systems simple and user-friendly
 To reduce user errors
 To improve user satisfaction
 To provide smooth interaction between user and machine
Important Aspects of Good Design
1. User Requirements – Understand who the users are and what they need.
2. Consistency – Same icons, colors, buttons, and functions everywhere.
3. Simplicity – Avoid complex layouts; keep the design clean.
4. Feedback – System should show results of user actions.
5. Error Prevention – Avoid situations where users can make mistakes.
6. Accessibility – Interface must support all types of users.
7. Flexibility – Different ways to do tasks (mouse, keyboard, shortcuts).
8. Efficiency – Tasks should be completed quickly with minimum steps.

Process of Interaction Design

Interaction design is the process of designing how users interact with a system.
It focuses on user needs, task flow, usability, and continuous improvement.
Steps in Interaction Design Process
1. Identify Needs and Requirements
 Understand user goals, tasks, skills, and environment.
 Interview users, observe tasks, create user profiles.
2. Develop Alternative Design Solutions
 Create different ideas and approaches.
 Sketch screens, layouts, navigation structure.
3. Build Interactive Prototypes
 Make low-fidelity prototypes (paper sketches)
or high-fidelity prototypes (Figma, Adobe XD, code).
 Show main workflow and interactions.
4. Evaluate Designs with Users
 Test prototype with real users.
 Take feedback on usability, clarity, and comfort.
 Identify problems and improve design.
5. Implement the Final Design
 Convert approved design into actual software.
 Apply UI principles during development.
6. Refinement and Iteration
  Test again → get feedback → improve.
 Repeat cycle until design becomes perfect.
This is called iterative design.

Simple Example of Interaction Design Process

Example: Designing a Food Delivery App
1. Identify needs → users want fast ordering, easy tracking
2. Design ideas → menu screen, cart, tracking page
3. Prototype → create sample screens
4. Evaluate → users test ordering flow
5. Implement → develop full app
6. Refine → fix confusing buttons, improve speed

Q1(a) What is meant by design? Which are the important points needed to consider for
designing? [6]
Meaning of Design
Design in HCI means planning and creating a user interface that is simple, clear, easy to use,
and supports the user's tasks effectively.
It focuses on layout, navigation, colors, icons, buttons, and user interaction.
Design aims to make a system usable, efficient, error-free, and user-friendly.

Important Points to Consider for Designing (any 6–7 expected)

1. User Requirements
o Understand who the users are and what they need.
2. Simplicity
o Keep the interface simple and easy to understand.
3. Consistency
o Buttons, colors, fonts, and layout style should remain the same everywhere.
4. Feedback
o System should show messages or responses after every action.
5. Error Prevention
o Reduce the chances of mistakes through warnings, validations, and clear
instructions.
6. Flexibility
o Allow different ways to perform actions (mouse, keyboard, shortcuts).
7. Accessibility
o Design must support all users, including beginners and differently-abled
users.
8. Efficiency
o User must complete tasks quickly with minimum steps.
9. Aesthetic and Minimalist Design
 o Simple design with no unnecessary elements.

Q2(a) Explain the process of design using a suitable example. [6]

The design process in HCI follows step-by-step activities to create a usable and efficient
interface.

Steps in the Design Process

1. Identify Needs and Requirements
 Understand user goals, expectations, and problems.
 Collect information using interviews, observations, surveys.
2. Develop Alternative Designs
 Think of different layout ideas.
 Make rough sketches and design options.
3. Create Prototypes
 Build sample versions of the interface.
 Can be paper sketches or digital prototypes.
 Helps visualize the final system.
4. Evaluate the Prototype
 Test with real users.
 Check what works well and what is confusing.
 Collect feedback and modify the design.
5. Implement the Final Design
 Develop the actual interface based on selected design.
6. Iterate
 Repeat testing and improvement until the design becomes perfect.
 Known as iterative design.

Suitable Example: Food Delivery App

1. Identify Needs
Users want fast ordering, simple navigation, and tracking.
2. Alternative Designs
Create different menu layouts, category views, and tracking screens.
3. Prototype
Build screens for home page, cart, order summary, and live tracking.
4. Evaluate
Test with users; improve confusing menu options.
5. Implement
Develop the full app with clean UI.
6. Iterate
Fix issues based on user feedback (button size, colours, placement).
Interaction Styles (Definitions + Points)
Interaction styles describe how a user interacts with a computer system. Each style has its
own advantages, disadvantages, and ideal use cases.

1. Command Line Interface (CLI)

Definition:
A text-based interaction style where the user types commands to perform actions.
Key Points:
 Uses keyboard input only.
 Requires the user to remember commands.
 Very fast for expert users.
 Hard for beginners (steep learning curve).
 Common examples: Windows CMD, Linux Terminal, Git Bash.
 Best for tasks requiring precision & automation.
Advantages:
• Very fast for expert users.
• Uses fewer system resources (lightweight).
• Precise control over system functions.
• Easy to automate using scripts.
Disadvantages:
• Difficult for beginners to learn.
• High memory load (must remember commands).
• Typing errors cause mistakes.
• No visual guidance.
Examples (2):
1. Linux Terminal
2. Git Bash for version control

2. Menu Selection
Definition:
An interaction style where users choose actions from a list of options (menus).
Key Points:
 No need to remember commands.
 Suitable for beginners.
 Uses drop-down menus, navigation bars, right-click menus.
 Slower than CLI for experts.
 Useful when the list of actions is limited & structured.
 Example: File → Save, Settings menus, ATM screens.
Advantages:
• Very easy for beginners.
• Reduces user memory load.
• Prevents errors since only valid options appear.
• Clear and structured navigation.
Disadvantages:
• Can be slower than typing for experts.
• Too many menu items cause confusion.
• Not suitable for very complex tasks.
Examples (2):
1. MS Word Menu Bar (File → Save)
2. ATM screen options

3. Form Fill-in
Definition:
Users enter data into fields such as text boxes, dropdowns, checkboxes, etc.
Key Points:
 Used mainly for data entry.
 Guides the user using labels & placeholders.
 Reduces errors through validation.
 Common examples:
o Login forms
o Signup pages
o Online application forms
 Useful when structured information is needed.
Advantages:
• Easy for users to understand.
• Reduces errors through validation.
• Suitable for collecting structured data.
• Allows customization (dropdowns, radio buttons, checkboxes).
Disadvantages:
• Time-consuming to fill long forms.
• Errors occur if fields are unclear.
• Requires typing—slow for some users.
Examples (2):
1. Google Login Page
2. Online Job Application Form

4. Direct Manipulation
Definition:
Users interact with objects directly on screen by dragging, dropping, clicking, resizing, etc.
Key Points:
 Very intuitive and easy to learn.
 Immediate visual feedback.
  WYSIWYG (What You See Is What You Get).
 Examples:
o Dragging files to the Recycle Bin
o Moving icons on a smartphone
o Editing images in Canva or Photoshop
 Great for interactive & visual tasks.
Advantages:
• Very easy for beginners to understand.
• Fast and interactive.
• Less chance of mistakes because operations are visible.
• Highly engaging and realistic.
Disadvantages:
• Requires more system resources (graphics).
• Not suitable for very complex tasks.
• Hard to use on small screens sometimes.
Examples (2):
1. Dragging icons on a smartphone home screen
2. Editing images in Canva

Quick Comparison (Exam Table)

Style Input Type User Skill Level Speed Examples
Command Line Typed commands Expert Fast CMD, Terminal
Menu Selection Choose from list Beginner Medium App menus, ATM
Form Fill-in Enter values in fields All Medium Login forms
Direct Manipulation Drag/drop/click All Fast Smartphones, Canva

✅ Interaction Style Questions (Year-wise)

📌 2022 NOV/DEC
Q1(a) List the interaction styles and explain command line interfaces in
detail.
Q1(b) Explain the Direct Manipulation interaction style with example.
Q1(c) How does Menu Selection interaction style impact on better user
interface? Explain with example.

Q1(c) How does Menu Selection interaction style impact on better

user interface? Explain with example.
Answer:
Menu selection means the user chooses an option from a list, like a drop-
down menu or buttons on the screen.
Impact on better user interface:
 1. Easy to use:
Users don’t need to remember commands. All options are shown on
the screen.
2. Less mistakes:
Since users only select from given choices, chances of errors are
very low.
3. Simple navigation:
Menus are arranged in categories (File, Edit, View), so finding any
option becomes easy.
4. Good for beginners:
New users can learn the system quickly by looking at the available
options.
5. Consistent design:
Menu items stay in the same place, so users feel comfortable and
confident.

Example:
ATM machine:
On the ATM screen, options like Withdraw Money, Check Balance, Mini
Statement are shown as menus.
Users simply select the option they want. This makes the ATM easy to use
for everyone without remembering anything.

📌 2023 NOV/DEC
Q1(b) List the interaction styles and explain any one in detail.

📌 2023 MAY/JUNE
Q2(c) (ii) Concept of Direct Manipulation.

1. Graphical User Interface (GUI)

A Graphical User Interface (GUI) allows users to interact with the computer through
graphical elements such as windows, icons, menus, buttons, and pointers instead of typing
commands.
It is visual, user-friendly, easy to learn, and widely used in operating systems, websites, and
apps.

2. Popularity of Graphics
Graphics are popular in modern interfaces because:
1. Easy to understand – Users quickly understand icons and symbols.
2. Attractive and engaging – Colors, images, and animations improve the experience.
3. Better communication – Information is shown visually (charts, icons) instead of text.
4. Supports direct manipulation – Users can drag, drop, resize objects.
 5. Reduces memory load – Users don’t need to remember commands.
6. Used everywhere – Gaming, education, design tools, mobile apps, multimedia.
Graphics make the interface simple, clear, and interactive.

3. Concept of Direct Manipulation

Direct Manipulation means interacting directly with on-screen objects using actions like
dragging, dropping, clicking, moving, and resizing.
Features
 Continuous visual representation.
 Immediate feedback to every action.
 Easy to learn (intuitive).
 WYSIWYG – “What You See Is What You Get.”
Examples
 Dragging files to Recycle Bin.
 Moving icons on smartphone.
 Resizing a photo in Canva.
 Drawing and shaping objects in MS Paint.
Direct manipulation makes GUI natural and realistic.

4. Characteristics of GUI
1. WIMP Model – Uses Windows, Icons, Menus, Pointer.
2. Consistent Layout – Same colors, fonts, and buttons everywhere.
3. Direct Manipulation – Users interact with objects instantly.
4. Immediate Feedback – Highlight, animation, message after every action.
5. Multitasking Support – Many windows opened at once.
6. Easy Navigation – Toolbars, icons, and menus guide users.
7. Event-Driven – Actions done by clicking, selecting, dragging.
GUI is designed to be simple and user-friendly.

5. Advantages of GUI
1. Easy for beginners – no need to remember commands.
2. Very interactive and visually clear.
3. Faster learning curve.
4. Reduces user errors through guided menus.
5. Allows multitasking using windows.
6. Good for creative tasks (design, editing).

6. Disadvantages of GUI
1. Requires more memory and processing power.
2. Can be slow for expert users compared to command line.
3. GUI design is complex and time-consuming.
 4. Too many elements may confuse some users.
5. Not suitable for heavy automation tasks.

Short Summary (Exam-Friendly)

GUI uses graphics to interact with the system.
Graphics became popular because they are easy, attractive, and support direct manipulation.
Direct manipulation makes interaction natural by dragging, dropping, and clicking objects.
GUI has many advantages, but it also requires more resources and can become complex.