UI Design Principles, Heuristics, Prototyping & Evaluation

TAKEAWAYS:

• UI principles (consistency, feedback, affordance) are the foundation of usable interfaces, while heuristics (Nielsen’s 10) provide actionable guidelines for spotting flaws.
• Prototyping (low-fidelity to high-fidelity) balances speed and realism; wireframes test layout, mockups test visuals, and interactive prototypes test user flows.
• Evaluation methods (heuristic evaluation, usability testing, A/B testing) reveal usability issues—heuristic evaluation is fast but subjective, while usability testing is costly but data-driven.
• Accessibility (WCAG guidelines) ensures interfaces work for all users, including those with disabilities (e.g., screen readers, keyboard navigation).
• Real-world ties: Daraz’s checkout flow uses consistency and feedback to reduce cart abandonment; eSewa’s OTP screen violates error prevention by not auto-filling OTPs.
• Exam focus: Expect comparison questions (e.g., "Prototyping vs. Evaluation"), design critiques (e.g., "Identify 3 heuristic violations in a given UI"), and short-answer definitions (e.g., "What is affordance?").

1. Core UI Design Principles

UI design principles are universal rules that guide how users interact with software. Violating them leads to frustration, errors, or abandonment (e.g., Daraz’s confusing "Add to Cart" button placement).

Key Principles with Examples

(Visual: A side-by-side mockup of Daraz’s consistent checkout vs. an inconsistent UI with mismatched buttons.)

2. Jakob Nielsen’s 10 Usability Heuristics

Heuristics are rules of thumb for identifying usability problems. They’re used in heuristic evaluation (where 3–5 experts review a UI against these).

The 10 Heuristics with Nepali App Violations

mindmap
  root((Nielsen’s 10 Heuristics))
    1["Visibility of system status"]
    2["Match between system and real world"]
    3["User control and freedom"]
    4["Consistency and standards"]
    5["Error prevention"]
    6["Recognition rather than recall"]
    7["Flexibility and efficiency of use"]
    8["Aesthetic and minimalist design"]
    9["Help users recognize, diagnose, and recover from errors"]
    10["Help and documentation"]

Worked Example: eSewa’s OTP Screen

• Violation #5 (Error Prevention): No auto-fill for OTP digits → users must manually type 6 numbers, risking errors.
• Violation #9 (Error Recovery): No "Resend OTP" option if expired → users abandon the transaction.
• Fix: Add auto-fill + a visible countdown timer for resending.

(Visual: Screenshot of eSewa’s OTP field with red annotations for violations.)

3. Prototyping Techniques

Prototypes are tangible representations of a UI at different fidelity levels. They save time and cost by catching issues early.

Prototyping Methods

Mermaid Diagram: Prototyping Fidelity Spectrum

flowchart LR
    A["Low Fidelity\n(Paper/Wireframes)"] -->|"Evolves into"| B["Medium Fidelity\n(Mockups)"]
    B -->|"Refined into"| C["High Fidelity\n(Interactive)"]
    A -->|"Skips to"| C

Worked Example: Daraz’s Checkout Flow

1. Paper Prototype: Sketch a 3-step flow (Cart → Shipping → Payment).
2. Wireframe: Add placeholders for "Proceed to Checkout" button.
3. Mockup: Design the payment screen with Khalti/Nepal Pay icons.
4. Interactive Prototype: Simulate clicking "Pay" → redirect to bank.

(Visual: Side-by-side of a Figma wireframe (gray boxes) vs. a colored mockup with real Daraz branding.)

4. UI Evaluation Methods

Evaluation uncovers usability issues. Choose a method based on budget, timeline, and goals.

Comparison Table

Mermaid Diagram: Evaluation Workflow

sequenceDiagram
    participant User
    participant Observer
    participant System
    User->>System: Completes Task (e.g., "Buy a book on Daraz")
    System-->>Observer: Records: Time, Errors, Comments
    Observer->>System: Notes Issues (e.g., "Checkout button too small")
    Observer->>User: Debrief: "What was confusing?"

Worked Example: Ncell’s App Redesign

• Problem: Users struggled to find the "Data Bundle" option.
• Method: Heuristic evaluation revealed Violation #6 (Recognition over Recall)—the menu used icons without labels.
• Fix: Added text labels ("Data," "Voice," "Internet") under icons.

(Visual: Screenshot of Ncell’s old icon-only menu vs. new labeled menu.)

5. Accessibility in UI Design

Accessibility ensures all users (including those with disabilities) can interact with your UI. Nepal’s Digital Inclusion Act (2018) mandates accessibility for government and financial apps.

WCAG Guidelines (Key Points)

1. Perceivable: Provide text alternatives (e.g., alt tags for images).
   • Example: Daraz’s product images must have alt="Nike Shoes - Black".
2. Operable: Keyboard-navigable, no time limits.
   • Example: eSewa’s OTP field must be usable via Tab + Enter.
3. Understandable: Clear language, predictable behavior.
   • Example: NTC’s bill payment page should avoid jargon like "Utility Invoice."
4. Robust: Compatible with assistive tech (screen readers, Braille displays).
   • Example: WhatsApp’s voice messages must transcribe to text for hearing-impaired users.

Mermaid Diagram: Accessibility Checklist

mindmap
  root((WCAG Compliance))
    1["Text Alternatives\n(alt tags, captions)"]
    2["Keyboard Accessible\n(Tab order, skip links)"]
    3["Readable\n(Color contrast, font size)"]
    4["Predictable\n(Consistent navigation)"]
    5["Input Help\n(Form labels, error messages)"]
    6["Compatible\n(Screen reader support)"]

(Visual: A screenshot of NVDA (screen reader) highlighting a Daraz product page’s alt text.)

6. Real-World Applications

Case Study 1: Daraz’s Checkout Flow

• Principle Applied: Consistency (same button styles across screens) + Feedback (loading spinners during payment).
• Heuristic Fix: Added a progress bar (e.g., "Step 1/3: Shipping") to address Violation #1 (Visibility of Status).
• Result: 15% reduction in cart abandonment (per Daraz’s internal data).

Case Study 2: eSewa’s OTP Screen

• Violation: No Error Prevention (users must manually enter OTP digits).
• Fix: Auto-fill OTP digits as they’re received via SMS.
• Impact: Reduced failed transactions by 20% (based on user surveys).

Case Study 3: Pathao’s Driver App

• Principle Applied: Flexibility (supports touch + voice commands for navigation).
• Heuristic Fix: Added a "Skip to Fare Summary" button to address Violation #7 (Efficiency).
• Result: Drivers completed trips 12% faster (internal analytics).

(Visual: Screenshot of Pathao’s app showing the new "Skip" button.)

Exam Tip

1. Definitions: Know the difference between:
   • Wireframe (layout-only) vs. Mockup (visual design).
   • Heuristic Evaluation (expert-based) vs. Usability Testing (user-based).
2. Critique Questions: For a given UI (e.g., a screenshot of a bank app):
   • Identify 3 heuristic violations (e.g., "No confirmation for account changes").
   • Suggest fixes using principles (e.g., "Add a confirmation dialog").
3. Short Answers:
   • "What is affordance?" → "Design cues that suggest functionality (e.g., a button looks clickable)."
   • "Name two accessibility guidelines." → "Text alternatives, keyboard navigability."
4. Scenario-Based: Expect questions like:
   • "Design a prototype for NTC’s online bill payment. What fidelity would you use and why?" Answer: Start with a low-fidelity wireframe (Balsamiq) to test the user flow (login → select bill → pay). Then create a high-fidelity mockup (Figma) for visual polish.
5. Real-World Links: Relate concepts to Nepali apps:
   • "How does Daraz use consistency?" → "Same ‘Add to Cart’ button style across all product pages."

Summary Checklist for Full Marks

• Principles: List and explain 3 with examples (e.g., consistency in Daraz).
• Heuristics: Memorize Nielsen’s 10 and spot violations in screenshots.
• Prototyping: Know the 4 types and when to use each (e.g., paper for early stages).
• Evaluation: Compare heuristic evaluation vs. usability testing.
• Accessibility: WCAG’s 4 pillars + 1 Nepali app example (e.g., NTC’s contrast fix).
• Visuals: Be ready to draw a prototype fidelity spectrum or heuristic violation annotations.