Muhammad Amin
Computer Science Student

HCI Design Principles

Human-Computer Interaction concepts applied within comprehensive software development practice

Integrating HCI with Software Engineering

As part of my Computer Science education at UTeM, I studied Human-Computer Interaction (BITM2313) which provided essential principles for designing user-centered software systems. This page demonstrates how HCI concepts are integrated with other software engineering practices in my work.

Course: BITM2313 - Human Computer Interaction
Semester: Year 3, 2025/2026

HCI Principles in Practice

🎯

User-Centered Design

Designing systems around user needs, capabilities, and limitations rather than forcing users to adapt to system requirements.

Applied in Projects:

  • Conducting user research for project requirements
  • Creating user personas and scenarios
  • Iterative design based on user feedback
User Stories Persona Development Usability Testing
♿

Accessibility & Inclusivity

Ensuring software is usable by people with diverse abilities, including visual, auditory, motor, and cognitive considerations.

Applied in Projects:

  • Implementing ARIA labels and semantic HTML
  • Ensuring keyboard navigation support
  • Testing with screen readers
  • Providing alternative text for images
WCAG Compliance Semantic HTML Keyboard Navigation
⚡

Efficiency & Performance

Optimizing interaction efficiency through predictable interfaces, quick response times, and minimizing user effort.

Applied in Projects:

  • Implementing Fitts' Law for button placement
  • Reducing cognitive load through clear information hierarchy
  • Optimizing response times in web applications
  • Applying Hick's Law for menu design
Fitts' Law Hick's Law Performance Metrics
🔄

Consistency & Standards

Maintaining consistent design patterns and following established conventions to reduce learning curves and user errors.

Applied in Projects:

  • Following platform design guidelines
  • Creating reusable component libraries
  • Maintaining consistent navigation patterns
  • Using standard icons and terminology
Design Systems Component Libraries UI Patterns
💡

Feedback & Affordances

Providing clear system feedback and designing interfaces that suggest their functionality through visual cues and affordances.

Applied in Projects:

  • Implementing loading states and progress indicators
  • Designing clear hover and focus states
  • Providing immediate feedback for user actions
  • Using visual hierarchy to indicate importance
Visual Feedback Affordance Design State Management
🧠

Cognitive Considerations

Designing for human memory, attention, and learning capabilities by minimizing cognitive load and supporting mental models.

Applied in Projects:

  • Chunking information for better memory
  • Providing clear error messages and recovery paths
  • Designing for both novice and expert users
  • Supporting recognition over recall
Cognitive Load Mental Models Error Prevention

HCI Implementation in This Portfolio

How HCI principles are applied in the design and development of this website

Information Architecture

Clear Navigation

Consistent navigation bar with clear labels and active state indicators

Content Hierarchy

Clear typographic hierarchy using proper heading levels (H1-H4)

Progressive Disclosure

Complex information revealed gradually through expandable sections

Gestalt Principles Information Scent

Interaction Design

Direct Manipulation

Interactive 3D header responds to mouse movement for engagement

Feedback Systems

Visual feedback on all interactive elements (hover states, focus indicators)

Consistent Controls

Uniform button styles and interaction patterns across all pages

Affordances Consistency

Accessibility Features

Keyboard Navigation

All interactive elements accessible via keyboard (Tab, Enter, Space)

Screen Reader Support

Proper ARIA labels, semantic HTML, and alternative text for images

Color Contrast

WCAG AA compliant color contrast ratios throughout the interface

Universal Design WCAG Guidelines

HCI in Broader Computer Science Context

How HCI principles integrate with other software engineering concepts

1

Software Engineering Integration

HCI principles inform requirements gathering and system design phases in Software Engineering (BITP2213), ensuring user needs drive technical specifications.

BITP2213 - Software Engineering → User Requirements
2

Database Design Considerations

User interface design decisions in HCI influence database schema design (BITP2313) to support efficient data retrieval and manipulation patterns identified through user research.

BITP2313 - Database Design → Data Presentation
3

Web Application Development

HCI usability testing informs frontend architecture decisions in Web Application Development (BITM2113), guiding component design and state management strategies.

BITM2113 - Web Application Development → Usability Patterns
4

Interactive Media & Graphics

HCI principles of engagement and feedback drive technical implementation choices in Interactive Media Authoring (BITM1123) and graphics programming.

BITM1123 - Interactive Media Authoring → Engagement Design

Professional Development Perspective

While HCI provides essential user-centered design principles, my comprehensive Computer Science education ensures these concepts are implemented within robust technical frameworks. This balanced approach allows for creating software that is both user-friendly and technically sound.

HCI informs the "what" and "why" of design decisions
Software engineering provides the "how" of implementation
Database and systems knowledge ensures scalability and performance

Interested in seeing how these principles are applied in actual projects?

View Technical Projects