Human-Computer Interaction (HCI) Explained

Introduction to Human-Computer Interaction (HCI)

• HCI is a multidisciplinary field studying the interaction between humans and digital systems.
• HCI integrates elements from engineering, psychology, ergonomics, and design.
• HCI aims to understand how people use technology, improve technology design to meet user needs, and analyze the impact of technology on behavior and well-being.

HCI vs. UX

• HCI focuses on user-product interaction and its efficient execution.
• UX encompasses the entire user journey, including emotions, usability, and satisfaction.

Importance of HCI

• HCI is essential for creating easy-to-use, intuitive interfaces.
• HCI results in efficient systems that enhance productivity.
• HCI ensures safe interactions that prevent errors and protect user data.
• HCI facilitates accurate designs that ensure successful task completion.

UI vs. UX

• UI includes design elements like buttons, screens, and layouts.
• UX involves the overall feeling, usability, and satisfaction from using a system.

Key UI Features

• Displays internal system states (e.g., screen indicators).
• Manages input from users (e.g., keyboard, touch controls).
• Acts as the bridge between humans and computers.

Key UX Features

• Ensures all system functions work properly.
• Provides an intuitive and visually appealing experience.
• Seamlessly integrates technology into users' daily lives.

Key Principles of HCI

• Know Thy User: Design interfaces based on user needs and capabilities.
• Understand the Task: Identify user tasks and streamline them for better usability.
• Reduce Memory Load: Minimize cognitive effort by simplifying navigation and recall.
• Strive for Consistency: Maintain uniform design across applications for familiarity.
• Remind Users and Refresh Their Memory: Provide prompts or reminders to help users complete tasks.

HCI Guidelines

• Guidelines are a set of information for advising how something should be done.
• HCI guidelines are rules and best practices for designing user-friendly systems
• HCI guidelines aim to make software easy to use, efficient, and accessible.

Importance of HCI Guidelines

• Improve usability
• Reduce user errors
• Enhance efficiency
• Increase accessibility

HCI Guideline Categories & Examples

• Consistency ensures uniformity in design across an interface (e.g., Gmail's "Undo Send" feature).
• Feedback ensures the system provides responses to user actions (e.g., ATM displays "Transaction Successful" message).
• Visibility ensures important elements are easy to find (e.g., Google Search bar is immediately visible).
• Error Prevention & Recovery helps prevent mistakes and allow users to correct errors (e.g., Google Drive moves deleted files to "Trash").
• User Control & Freedom ensures users can undo, navigate back, or cancel actions (e.g., Photoshop's History Panel).
• Efficiency & Flexibility supports both beginners and expert users (e.g., Microsoft Word).
• Aesthetic & Minimalist Design ensures interfaces are clean and clutter-free (e.g., Google Homepage).
• Accessibility ensures designs are usable by everyone, including people with disabilities (e.g., YouTube’s closed captions).

Human Factors in HCI

• Ensures systems are intuitive and reduce cognitive load; enhances user experience by considering human limitations and capabilities.
• Key aspects involve usability, making interfaces easy to learn and use, and efficiency, reducing time and effort required for tasks.

Human Problem Solving

• Process of approaching and resolving challenges when interacting with technology.
• Sensation involves sensing external information (e.g., visual, aural, haptic).
• Perception involves interpreting and extracting basic meanings from external information.
• Memory stores short-term and long-term information.
• Decision Making & Execution involves formulating and acting on a plan based on memory.

Sensation and Perception of Information

• Visual Modality is the most important information medium, with over 40% of the brain processing visual information, related to color, brightness, and contrast. Brightness measures the amount of light energy, color responds to different light wavelengths, and contrast is the difference in brightness/color between objects.
• Aural Modality uses sound in interfaces, such as alerts, notifications and voice assistants, an example is ChromeVox for visually impaired users.
• Haptic/tactile Modality utilizes force feedback, vibrations, and touch (e.g., game controllers).

Multimodal Interaction

• combines visual, aural, and haptic modalities (e.g., navigation apps, smartwatches).
• Human Body Ergonomics focuses on comfort and safety to reduce strain and enhance comfort, achieved through proper seating, device placement, and posture, with examples like ergonomic office chairs and monitor stands.

Fitt’s Law

• Predicts the time required to reach a target based on its size and distance with the formula T = a + b log2(D/W), where T is time to reach target, D is distance to target, W is the width of the target, and a and b are constants, interface design optimizes button size and placement according to Fitt's law.

Motor Control in HCI

• Definition: Coordination and execution of physical movements in system interaction like using a smartphone to tap, swipe, or type.
• Principles: Precision & Accuracy, Reaction Time, Fatigue & Strain Reduction, ensuring visual/haptic responses reinforce correct actions.

HCI Design Process Meaning

• HCI Design focuses on making interactions between people and computers efficient, effective, and satisfying while prioritizing user needs, preferences, and limitations.

Overall Design Process

• Involves user analysis, task analysis, requirements analysis, scenarios & storyboards, object-class diagram & message diagram, implementation & testing.
• Development Library: Collection of pre-written code to assist in software development.

Requirements Analysis

• It is the first step in the design process, understanding what the users' needs are and what the system must achieve.
• Functional Requirements define system behavior.
• Non-Functional Requirements (NFRs) define system qualities and serve as constraints or restrictions.

User Analysis

• Identifying user background, skills, and needs and refining the UI to fit different users.

Scenarios

• Describes how users interact with the system.

Task Modeling

• Breaks down interactions into steps.

UX Storyboard

• Visual representation of how users interact with a system.

HCI Interface Selection Options

• Considers usability and efficiency and includes hardware platforms and wearables.

Software Interface Components

• Include visual elements, controls, and feedback mechanisms that allow users to perform tasks.
• Icons are interactable objects visually represented as compact and small pictograms.
• Menus allow activation of commands and tasks
• Text boxes, toolbars, forms, dialog/combo boxes, text fields, and voice interfaces are UI components.

Wireframing

• It is a rough sketch of a webpage/app layout used for structuring and planning UI design before adding visuals, with screen layouts, navigation bars, components of UX and UI design, and interactive elements.

Types of Wireframe Design

• Low-Fidelity: Basic layout, no details.
• Mid-Fidelity: More refined, shows some UI elements.
• High-Fidelity: Pixel-accurate, includes actual images and text.

Elements Included in a Wireframe

• Includes layout structure, UI elements, navigation flow, and content placement.

Tools Used to Create Wireframes

• Adobe XD, Figma, Balsamiq, and Sketch.