User Interfaces: Design, Types, Interaction & Evaluation

TAKEAWAYS:

• Understand UI design principles (consistency, feedback, affordance) and how they improve user experience.
• Differentiate between graphical (GUI), command-line (CLI), and natural interfaces with examples from apps like WhatsApp and Ncell.
• Learn usability heuristics (Nielsen’s 10 principles) and apply them to evaluate interfaces like Daraz’s checkout flow.
• Trace event-driven interaction models (e.g., mouse clicks, touch gestures) using real scenarios like Pathao’s ride-hailing UI.
• Compare UI frameworks (e.g., Flutter, React Native) and their role in cross-platform apps like eSewa.
• Master UI evaluation methods (heuristic evaluation, A/B testing) with a case study on NTC’s bill payment interface.

1. Introduction to User Interfaces (UI)

A user interface (UI) is the point of interaction between a user and a system (software, hardware, or device). It includes:

• Input methods: Keyboard, mouse, touchscreen, voice (e.g., Google Assistant).
• Output methods: Visuals (GUI), audio (speech feedback), haptics (vibration).
• Interaction styles: Direct manipulation (drag-and-drop), menu-driven, form-fill.

Why UI matters in multimedia? Multimedia systems (e.g., YouTube, eSewa) rely on intuitive UIs to deliver content efficiently. Poor UI design leads to user frustration (e.g., confusing Daraz filters).

2. Types of User Interfaces

UI types vary by input/output modality and interaction style. Compare them in this table:

3. UI Design Principles

Good UI design follows 7 key principles (adapted from Jakob Nielsen and Don Norman):

1. Consistency: Use familiar patterns (e.g., "X" for close in all apps).
2. Feedback: Confirm actions (e.g., WhatsApp’s "Message sent" checkmark).
3. Affordance: Design suggests functionality (e.g., a button looks clickable).
4. Minimalist Design: Avoid clutter (e.g., YouTube’s clean home screen).
5. Error Prevention: Warn users (e.g., "Are you sure?" before deleting).
6. Flexibility & Efficiency: Shortcuts for power users (e.g., keyboard shortcuts in Photoshop).
7. Accessibility: Support disabilities (e.g., screen readers for blind users).

Worked Example: eSewa’s UI

• Problem: Users often abandon transactions due to unclear steps.
• Solution:
  • Consistency: Same color scheme for "Pay" and "Cancel" buttons.
  • Feedback: Progress bar during payment processing.
  • Affordance: Buttons are 3D-style to indicate clickability.
• Result: Reduced abandonment by 20% (per eSewa reports).

4. Interaction Models

UI interactions follow event-driven models, where user actions trigger responses. Common models:

A. Direct Manipulation

• Definition: User acts directly on objects (e.g., dragging files in Windows).
• Example: Pathao’s map where users drag to re-route.

B. Menu-Driven

• Definition: Users select from options (e.g., dropdown menus).
• Example: Daraz’s product filters (Price, Rating).

C. Form-Fill

• Definition: Users input data into fields (e.g., login forms).
• Example: Ncell’s recharge form.

sequenceDiagram
    participant User
    participant NcellSystem
    User->>NcellSystem: Enters phone number (10-digit)
    User->>NcellSystem: Selects Rs. 100 plan (dropdown)
    NcellSystem-->>User: Shows confirmation (success/failure)
    NcellSystem-->>User: Displays recharge code

5. Usability Heuristics (Nielsen’s 10 Principles)

Evaluate UIs using these 10 heuristics (with Nepalese app examples):

6. UI Evaluation Methods

Test UIs using these 4 methods:

Worked Example: NTC’s Bill Payment UI

• Problem: Users struggle to find the "Pay Bill" button.
• Evaluation:
  1. Heuristic Check: Fails "Visibility of System Status" (button is hidden in a submenu).
  2. A/B Test: Tested a prominent red "Pay Now" button vs. the old gray icon.
  3. Result: Red button increased payments by 15%.

7. UI Frameworks & Tools

Developers use frameworks to build UIs efficiently. Compare popular ones:

8. Real-World Applications in Nepal

A. eSewa: Transaction UI

• Idea Used: Feedback + Consistency
  • How: Shows real-time transaction status (e.g., "Rs. 500 deducted from your account").
  • Why: Reduces user anxiety during payments.

B. Pathao: Ride-Hailing UI

• Idea Used: Direct Manipulation + Real-Time Feedback
  • How: Users drag the map to re-route or drop a pin for pickup.
  • Why: Mimics real-world navigation (like hailing a taxi in Kathmandu traffic).

C. Daraz: E-Commerce UI

• Idea Used: A/B Testing + Heuristics
  • How: Tested a one-click checkout vs. multi-step forms.
  • Result: One-click increased conversions by 30%.

D. Ncell: Mobile Recharge UI

• Idea Used: Error Prevention + Accessibility
  • How: Disables the "Recharge" button if balance is insufficient.
  • Why: Prevents failed transactions (common in low-balance scenarios).

9. Common UI Pitfalls in Nepalese Apps

Exam Tip

For TU/PU exams on User Interfaces, focus on:

1. Definitions: Know the difference between GUI, CLI, and natural UI.
2. Heuristics: Memorize Nielsen’s 10 principles and apply them to case studies (e.g., eSewa, Daraz).
3. Evaluation Methods: Be able to describe heuristic evaluation vs. A/B testing.
4. Real-World Links: Relate UI principles to Nepalese apps (e.g., "How does Pathao use direct manipulation?").
5. Diagrams: Draw interaction models (e.g., event-driven flowcharts) for full marks.

Common Exam Questions:

• "Evaluate the UI of eSewa using Nielsen’s heuristics." (Answer: Check visibility, consistency, and error prevention.)
• "Compare GUI and CLI interfaces with examples from Ncell and Linux." (Answer: Use the table above.)
• "Design a UI for a traffic route planner for Kathmandu. Apply 3 heuristics." (Answer: Use drag-and-drop for routes, add real-time feedback, and ensure mobile optimization.)

Visual Summary