HCI & System Engineering: Models, Tools, and Human-Centered Design

TAKEAWAYS:

• HCI focuses on designing interfaces that prioritize user needs, tasks, and accessibility (e.g., eSewa’s mobile-first design).
• System engineering integrates hardware, software, and human factors to build scalable systems (e.g., NTC’s network infrastructure).
• CASE tools automate design, testing, and documentation (e.g., Visual Paradigm for UML diagrams).
• Modular decomposition breaks systems into reusable components (e.g., Daraz’s microservices for orders/payments).
• Ethical HCI ensures fairness, privacy, and inclusivity (e.g., Pathao’s wheelchair-accessible app features).
• Exam focus: Link theory to real systems (e.g., "How does Google’s search UI apply Fitts’s Law?").

1. Human-Computer Interaction (HCI): Principles and Practices

HCI is the study of how humans interact with computers to design usable, efficient, and satisfying interfaces. It bridges psychology, design, and engineering to create systems that align with user behaviors and needs.

Key HCI Principles

mindmap
  root((HCI Principles))
    User-Centered Design
      "Prioritize users' needs/goals"
      "Iterative testing with real users"
    Consistency
      "Uniform UI patterns (e.g., buttons, menus)"
      "Follow platform conventions (iOS/Android)"
    Feedback
      "Immediate responses to user actions (e.g., loading spinners)"
      "Visual/auditory confirmation (e.g., WhatsApp message ticks)"
    Affordance
      "Design elements suggest their function (e.g., 3D buttons look clickable)"
    Error Prevention
      "Minimize mistakes (e.g., auto-save in Google Docs)"
    Accessibility
      "WCAG compliance (e.g., screen reader support in eSewa)"

Why It Matters in Nepal:

• eSewa: Uses gesture-based feedback (e.g., vibration on successful payment) and simplified workflows for low-literacy users.
• Khalti: Implements biometric authentication (fingerprint/face ID) to reduce errors in transactions.
• NTC’s Online Portal: Follows consistency with government service designs (e.g., same login flow across all portals).

HCI Design Process

1. User Analysis: Identify users’ goals, skills, and contexts (e.g., Pathao drivers vs. passengers).
2. Task Analysis: Break down user tasks (e.g., "Order food" → select restaurant → customize → pay).
3. Prototyping: Create low-fidelity (paper) or high-fidelity (digital) mockups.
4. Evaluation: Test with users (e.g., A/B testing Daraz’s checkout flow).
5. Iteration: Refine based on feedback (e.g., Google Maps’ rerouting suggestions).

Worked Example: Kathmandu Traffic Routes App

• Problem: Users struggle to navigate congested roads during Dashain.
• HCI Solution:
  • Task Analysis: Primary task = "Find fastest route home."
  • Prototype: Real-time traffic heatmap with Fitts’s Law (large tap targets for route options).
  • Feedback: Vibrate when route changes due to traffic.
  • Result: 30% faster navigation in pilot tests.

2. System Engineering: Integrating Hardware, Software, and Humans

System engineering (SE) ensures all components of a system (hardware, software, people, processes) work together efficiently. It’s critical for complex systems like:

• Nepal’s NEPSE Stock Exchange: Integrates trading software, high-frequency networks, and regulator oversight.
• Ncell’s 4G Network: Balances base stations, core network, and user apps (e.g., MyNcell).

System Engineering Lifecycle

Key Activities:

flowchart TD
  subgraph Architectural Design
    A[Daraz: Microservices
    (Orders, Payments)] -->|"UML Diagram"|
    B[Cloud Architecture
    (AWS/GCP)]
  end
  subgraph Integration
    C[eSewa: Bank Links
    (NMB, Global IME)] -->|"API Gateways"|
    D["Middleware"]
  end
  subgraph Testing
    E[NEPSE: Failover
    Systems] -->|"Load Testing"|
    F["Chaos Engineering"]
  end

Modular Decomposition

Breaking a system into independent, reusable modules improves maintainability and scalability.

Example: Daraz’s Order Processing System

classDiagram
  class OrderModule {
    +placeOrder()
    +cancelOrder()
  }
  class PaymentModule {
    +processPayment()
    +refund()
  }
  class InventoryModule {
    +checkStock()
    +updateStock()
  }
  OrderModule --> PaymentModule : "triggers"
  OrderModule --> InventoryModule : "triggers"

• Advantages:
  • Isolation: A payment module failure doesn’t crash orders.
  • Reusability: Same payment module used for Daraz and Foodmandu.
  • Parallel Development: Teams work on modules simultaneously.

Disadvantages:

• Overhead: Module communication adds latency (e.g., Daraz’s API calls between services).
• Complexity: Requires strong documentation (e.g., Swagger for Daraz’s APIs).

3. Computer-Aided Software Engineering (CASE) Tools

CASE tools automate design, coding, testing, and documentation to improve productivity and quality.

Types of CASE Tools

How Nepali Companies Use CASE Tools:

• eSewa: Uses Visual Paradigm for UML diagrams to model payment workflows.
• NTC: Employs Wireshark (network analysis tool) to debug fiber-optic issues.
• Ncell: Leverages JIRA to track app development sprints (e.g., MyNcell updates).

Benefits of CASE Tools

• Reduced Errors: Auto-code generation (e.g., Java from UML in Enterprise Architect).
• Faster Development: Prototyping in tools like Figma (used by Daraz’s UI team).
• Traceability: Links requirements to code (critical for NEPSE’s regulatory compliance).
• Collaboration: Cloud-based tools (e.g., GitHub, Confluence) for remote teams.

Limitations:

• Learning Curve: Steep for small teams (e.g., startup devs in Nepal).
• Cost: Enterprise tools (e.g., IBM Rational) are expensive for local firms.
• Overhead: May slow down agile teams if misused.

4. Human-Computer Interaction in System Engineering

HCI and SE overlap in user-facing systems where hardware/software interact with humans. Examples:

Worked Example: NEPSE Trading Terminal

• HCI: Traders need low-latency feedback (e.g., stock price updates in <100ms) and customizable dashboards.
• SE: The terminal integrates:
  • Hardware: High-speed trading PCs with FPGA accelerators.
  • Software: C++ backend for order matching, Python for analytics.
  • Network: Dedicated fiber-optic link to NEPSE’s exchange.

5. Ethical and Professional Responsibilities in HCI/SE

Software engineers must ensure systems are fair, private, and accessible.

Key Ethical Challenges

Professional Responsibilities:

• Transparency: Disclose how data is used (e.g., Pathao’s privacy policy).
• Accountability: Take responsibility for system failures (e.g., NEPSE’s 2021 crash).
• Sustainability: Design for energy efficiency (e.g., NTC’s green data centers).

6. Real-World Applications: How Nepali and Global Companies Use These Concepts

Case Study 1: eSewa’s Payment System

• HCI: Simplified UI for low-literacy users, voice confirmation for transactions.
• SE: Modular design with:
  • Payment Module (Razorpay API)
  • User Auth Module (biometrics)
  • Bank Integration Module (NMB, Global IME)
• CASE Tools: Lucidchart for workflow diagrams, JIRA for sprint planning.

Why It Works:

• Modularity: Adding a new bank (e.g., Siddhartha Bank) only requires updating the bank module.
• User Testing: A/B tested button colors to reduce error rates by 15%.

Case Study 2: Daraz’s Microservices Architecture

• Problem: Monolithic system was slow during sales (e.g., Dashain discounts).
• Solution: Migrated to microservices (HCI + SE):
  • Frontend: React-based UI (HCI focus on speed).
  • Backend: Kubernetes-managed services (SE scalability).
  • Database: Sharded MongoDB for inventory (SE performance).
• Outcome: 40% faster page loads during peak traffic.

Case Study 3: Google Search UI (Global Example)

• HCI Principles Applied:
  • Fitts’s Law: Large search bar for easy clicking.
  • Feedback: Instant suggestions as you type.
  • Accessibility: Keyboard navigation, screen reader support.
• SE Integration:
  • Hardware: Google’s custom Tensor Processing Units (TPUs) for ranking.
  • Software: PageRank algorithm (SE core logic).
  • Network: Global CDN for low-latency delivery.

Exam Tip: How to Score Full Marks

1. Link Theory to Real Systems:

   • If asked about modular decomposition, compare Daraz’s microservices to a monolithic system.
   • For HCI principles, relate Fitts’s Law to eSewa’s button design.

2. Use Diagrams:

   • Mermaid diagrams for processes (e.g., HCI lifecycle).
   • Class diagrams for modular systems (e.g., Daraz’s modules).
   • Sequence diagrams for protocol exchanges (e.g., eSewa payment flow).

3. Answer Structures for Common Questions:

   • Define + Explain:

     "HCI is the study of designing interfaces for usability. In Nepal, eSewa applies HCI by using gesture feedback (vibration on success) and simplified workflows for low-literacy users."

   • Compare:

     Monolithic System	Microservices (Daraz)
     Single codebase	Independent services
     Slow scaling	Auto-scaling (Kubernetes)
     Hard to update	Modular updates

   • Worked Example:

     "For NTC’s online portal, task analysis revealed users struggled with multi-step forms. The solution was a progressive disclosure design (show steps one at a time), reducing drop-offs by 25%."

4. Avoid Common Mistakes:

   • ❌ Saying "HCI is just about making things pretty."
   • ✅ Emphasize usability, accessibility, and user testing.
   • ❌ Ignoring the system engineering side (e.g., hardware/software integration).
   • ✅ Tie HCI to SE (e.g., "The ATM’s touchscreen (HCI) relies on the transaction server (SE).").

5. Memorize Key Terms:

   • HCI: User-centered design, affordance, Fitts’s Law, WCAG.
   • SE: Modularity, integration testing, lifecycle models.
   • CASE: Upper/lower CASE, UML, repositories.

Practice Questions (Self-Check)

1. Draw a sequence diagram for a user logging into eSewa using biometrics.
2. Compare the challenges of designing an HCI for:
   • A rural farmer using Pathao.
   • A stock trader using NEPSE’s terminal.
3. Explain how Daraz could use CASE tools to improve its order processing system.
4. Discuss ethical concerns in Ncell’s use of location data for targeted ads.

Summary Table: Key Concepts

Final Note: This unit is highly practical. Always relate abstract concepts to real systems (eSewa, Daraz, NTC) and visualize processes with diagrams. For exams, prioritize worked examples and comparisons.