Lecture 5

Course instructor: Muhammad Ashad

Baloch

1
 Ergonomics in HCI
• Ergonomics (also called Human Factors) is the study of how to design
computer systems, devices, and work environments that fit human
physical and mental abilities.
• 👉 Goal: Make systems comfortable, safe, and efficient for users.
• Key Aspects of Ergonomics in HCI
• Physical Ergonomics → How the body interacts with devices.
– Example: Keyboard and mouse should be designed to reduce strain (avoid
repetitive strain injury).
– Correct chair height, screen distance, and lighting reduce eye strain and back
pain.
• Cognitive Ergonomics → How the mind processes information.
– Example: Interfaces should be simple and clear, avoiding information overload.
– Use of icons, colors, and feedback to make systems easier to understand.
• Organizational Ergonomics → Work environment and policies.
– Example: Designing workflows, team collaboration tools, and scheduling to reduce
stress.
• ✅ In short: Ergonomics makes sure the user is comfortable and efficient
while interacting with computers.
2
 Interaction Styles in HCI
Interaction styles are the different ways users communicate with
computers.
Main Types of Interaction Styles:
Command Line Interface (CLI): User types text commands.
Example: MS-DOS, Linux terminal.
Advantages: Powerful, flexible, fast for experts.
Disadvantages: Hard for beginners, requires memorization.
Menu-Driven Interface: User chooses from a list of options.
Example: ATMs, restaurant ordering kiosks, drop-down menus in software.
Advantages: Easy to use, no memorization.
Disadvantages: Limited options, can be slow with too many menus.
Form-Fill Interface: User enters data into fields of a form.
Example: Online registration forms, surveys.
Advantages: Simple, structured input.
Disadvantages: Can be repetitive, rigid.
3
 Interaction Styles in HCI
Direct Manipulation (Graphical User Interface – GUI): User interacts with objects on
the screen (drag, drop, click).
Example: Windows desktop, mobile apps.
Advantages: Intuitive, visual, immediate feedback.
Disadvantages: Needs good graphics and can be slow for complex tasks.
Natural Language Interaction: User interacts by speaking or typing in natural
language.
Example: Siri, Alexa, Google Assistant.
Advantages: Very easy for beginners, no special training.
Disadvantages: Still limited, may misunderstand commands.
Gesture-Based & Touch Interaction: Interaction through gestures, touch, or motion.
Example: Touchscreens, VR hand tracking, Nintendo Wii.
Advantages: Intuitive, natural.
Disadvantages: Can cause fatigue, may lack precision.
Virtual Reality / Augmented Reality Interaction: Interaction in immersive 3D
environments.
Example: VR headsets, AR apps like Pokémon Go.
Advantages: Realistic, engaging.
Disadvantages: Expensive, requires special hardware.
4
 WIMP interface
• WIMP stands for Windows, Icons, Menus, and Pointers.
• It is a type of Graphical User Interface (GUI) that allows users to interact
with computers using visual elements rather than typing commands.
• Common in operating systems like Windows, macOS, Linux desktops, and
most software applications.
• These elements of the WIMP interfaces are called widgets, and they
comprise the toolkit for interaction between user and system
• WIMP interfaces reduce the learning curve and are easily used by people
who are not technical. In the furture, WIMP interfaces will most likely begin
to integrate speech recognition devices and eye movement detection
interfaces.
• Many people are only familiar with WIMP interfaces and have trouble
understanding traditional command line type interfaces. In general, WIMP
interfaces tend to provide greater productivity and efficiency in a wide
variety of applications.

5
 Characteristics of a WIMP
system:
1. Windows: Rectangular areas on the screen that display
content (like files, applications, or settings).
•Can be moved, resized, minimized, maximized, or closed.
•Example: A Word document window, a browser window.
•👉 Purpose: Allows multitasking (working with multiple
programs at once).
2. Icons: Small graphical symbols that represent programs,
files, or commands.
•Example: Trash bin icon, folder icon, app shortcuts.
•Clicking an icon usually opens or executes the associated
item.
•👉 Purpose: Provides a quick, easy-to-recognize way to
access functions.

6
 Characteristics of a WIMP
system:
3. Menus
•Lists of options or commands available to the user.
•Types of menus:
•Drop-down menus (File, Edit, View in apps)
•Context menus (right-click options)
•Pop-up menus
•👉 Purpose: Organizes commands so users don’t need to memorize
them.
4. Pointer
•A visual symbol (usually an arrow or hand) that shows where the
user’s input will be applied.
•Controlled by a mouse, trackpad, stylus, or touchscreen.
•Example: Moving the pointer to click on buttons, icons, or links.
•👉 Purpose: Allows direct manipulation of on-screen objects.

7
 WIMP Interface:
Advantages of WIMP Interfaces
•Easy to use and learn (beginner-friendly).
•Visual and intuitive (no need to memorize commands).
•Supports multitasking.
•Provides immediate feedback (click, highlight, hover
effects).
🔹 Limitations of WIMP Interfaces
•Requires more hardware resources (graphics, memory).
•May be slower for expert users compared to command line.
•Not ideal for small screens (e.g., smartwatches).
•Can be less efficient for repetitive tasks.

8
List out the rules to be followed for
Readability in mobile design?
• Use a high-contrast typeface
• Use the right typeface
• Provide decent leading (rhymes with “heading”) or
line spacing
• Leave space on the right and left of each line; don’t
crowd the screen
• Generously utilize headings
• Use short paragraphs

9
Why Wireframes required?
• Why are Wireframes Required?
• A wireframe is like a blueprint of a website or app.
• It shows where things will go on a page (layout),
but without colors, images, or fancy design.
• Think of it as a rough sketch that explains how
users will interact with the site

10
Why Wireframes required?
Main Reasons We Need Wireframes
•Plan the Layout
– Wireframes show where menus, buttons, images, and text will appear.
– Example: Where to put the navigation bar (top or side)?
•Focus on Function, Not Design
– They separate the structure (layout) from the look (visual design).
– First, we decide how things work, later we decide how they look.
•Show User Interaction
– Wireframes explain how users will move through the site.
– Example: What happens when a user clicks a button? Where does it take them?
•Answer Design Questions Early
– How do users navigate?
– What icons or buttons make sense?
– How do we show information clearly?
•Make Ideas Tangible
– A sitemap shows what pages exist, but wireframes show how the pages will look
and work.
– This makes ideas more concrete and easier to discuss.
11
Different types of Mobile
Prototyping.
Paper prototypes- The most basic level we have is
paper prototyping: taking our printed out wireframes or
even drawings of our interface, and putting them in
front of people.
Context prototype- Take a higher-end device that
enables you to load full-screen images on it. Take your
wireframes or sketches and load them onto the device,
sized to fill the device screen.
HTML prototypes- This is a prototype that you can
actually load onto a device and produce the nearest
experience to the final product, but with static dummy
content and data. It takes a little extra time, but it is
worth the effort
12
Heuristic Evaluation
• A heuristic evaluation is a method used by designers and
usability experts to find problems in a user interface (UI).
• The evaluators check the interface against a set of usability
rules (heuristics).
• If they find problems, the design is improved before release.
• It is quick, cost-effective, and helps create user-friendly
systems.
• 👉 In short: It’s like a checklist test for usability problems.
Why is it Important?
• Detects usability issues early in the design.
• Saves time and cost compared to testing after full
development.
• Helps make the system easy, consistent, and error-free for
users.
13
Nielsen’s Ten Usability Heuristic
Principles
• Visibility of system status
– The system should always keep users informed about what is happening.
– Example: A loading bar while uploading a file.
• Match between system and real world
– Use language and concepts familiar to the user, not technical terms.
– Example: A trash bin icon for deleting files (real-world metaphor).
• User control and freedom
– Users should easily undo/redo actions or exit unwanted states.
– Example: “Back” button in a browser, “Undo” in MS Word.
• Consistency and standards
– Follow common design standards so users don’t get confused.
– Example: Blue underlined text means a link, save icon always looks like a
floppy disk.
• Error prevention
– Design should prevent mistakes before they happen.
– Example: A confirmation dialog (“Are you sure you want to delete?”).
14
Nielsen’s Ten Usability Heuristic
Principles
• Recognition rather than recall
– Make options visible so users don’t have to remember commands.
– Example: Drop-down menus instead of typing commands.
• Flexibility and efficiency of use
– Allow shortcuts for experienced users while still easy for beginners.
– Example: Keyboard shortcuts (Ctrl+C, Ctrl+V) in addition to menu options.
• Aesthetic and minimalist design
– Keep design simple, show only necessary information.
– Example: Google homepage (just a search bar and logo).
• Help users recognize, diagnose, and recover from errors
– Error messages should be clear and helpful.
– Example: “Incorrect password. Please try again” instead of “Error 404.”
• Help and documentation
• Provide help and support if needed.
• Example: A help center, FAQs, or tooltips inside the app.

15
Usability Paradigm and Principles

• Usability = The quality of a system that

makes it easy, effective, and satisfying to
use.
• According to ISO, usability has three key
goals:
– Effectiveness – Can users achieve their goals?
– Efficiency – How quickly and easily can they do
it?
– Satisfaction – Is it pleasant and comfortable to
use?

16
Usability Paradigm and Principles

Usability Paradigms
•A paradigm is a general approach or style of
interaction between humans and computers.
•Major Paradigms for Interaction:
•Command-Line Interfaces (CLI)
– Users type text commands.
– Example: MS-DOS, Linux Terminal.
– ✅ Fast and powerful for experts.
– ❌ Hard for beginners (requires memorization).

17
Usability Paradigm and Principles

WIMP / GUI (Windows, Icons, Menus,

Pointer)
Visual interfaces with windows, icons, menus,
and pointer.

Example: Windows OS, macOS, Android apps.

✅ Easy to use, visual, user-friendly.

❌ Can be slower for repetitive expert tasks.

18
Usability Paradigm and Principles

• Direct Manipulation Interfaces

• Users interact directly with objects on the
screen (drag, drop, resize).
• Example: File drag-and-drop, photo editing
apps.
• ✅ Intuitive and gives immediate feedback.
• ❌ Requires good graphics and resources.

19
Usability Paradigm and Principles

• Menu-Driven Interfaces
– Users select options from lists/menus.
– Example: ATMs, settings menus in software.
– ✅ Simple and structured.
– ❌ Slow if too many menus/submenus.
• Natural Language Interfaces
– Users interact through spoken or written language.
– Example: Siri, Alexa, Google Assistant.
– ✅ Natural and easy.
– ❌ Limited understanding, can misinterpret
commands.
20
Usability Paradigm and Principles

• Gesture-Based and Touch Interfaces

• Interaction through touch, gestures, or
motion.
• Example: Touchscreen smartphones, VR hand
tracking.
• ✅ Very intuitive.
• ❌ Can cause fatigue, not always precise.

21
Usability Paradigm and Principles

• Virtual Reality (VR) and Augmented

Reality (AR)
• Immersive interaction in 3D environments.
• Example: Oculus VR, AR apps like Pokémon
Go.
• ✅ Engaging and realistic.
• ❌ Expensive and requires special hardware.

22
Usability Principles (based on Nielsen
& Shneiderman):
• Learnability → Easy to learn for new users.
– Example: Mobile apps with tutorials.
• Efficiency → Fast for experienced users.
– Example: Keyboard shortcuts, saved preferences.
• Memorability → Easy to remember after not using for a while.
– Example: Consistent icons (scissors = cut).
• Error Handling → Few errors, and easy recovery if errors occur.
– Example: Undo/Redo options.
• Satisfaction → Users feel happy and comfortable using it.
– Example: Clean design, smooth animations.
• Consistency → Same actions work in the same way across the
system.
– Example: “Save” always works the same in different apps.
• Feedback → System gives clear response to user actions.
– Example: Loading bar, “File saved” message.

23