UI Design Principles, Types, Heuristics & Prototyping

TAKEAWAYS:

• UI design bridges users and software by balancing aesthetics, usability, and functionality using principles like consistency, feedback, and affordance.
• Three main interface types (CLI, GUI, NUI) suit different user needs—CLI for efficiency, GUI for accessibility, NUI for innovation.
• Jakob Nielsen’s 10 heuristics (e.g., "visibility of system status," "user control and freedom") are critical for evaluating UI flaws.
• Prototyping (low-fidelity to high-fidelity) helps test designs early, reducing costly late-stage revisions.
• Accessibility standards (WCAG) ensure interfaces work for users with disabilities (e.g., screen readers, keyboard navigation).
• Real-world ties: WhatsApp’s chat bubbles use visual hierarchy and feedback (typing indicators), while eSewa’s OTP system relies on clear error messages and user control.

1. What is User Interface (UI) Design?

UI design focuses on how users interact with software through visual and interactive elements. It combines:

• Visual design (colors, typography, layout).
• Interaction design (buttons, menus, gestures).
• Information architecture (how content is organized).

Why it matters: Poor UI leads to user frustration (e.g., confusing bank app menus), while good UI increases engagement (e.g., Pathao’s intuitive ride-hailing flow).

2. Core UI Design Principles

These principles guide intuitive and effective interfaces:

A. Visual Hierarchy

Arrange elements to guide user attention. Example:

• Daraz’s product page: The "Add to Cart" button is larger and brighter than secondary options.
• Principle: Use size, color, and contrast to emphasize key actions.

B. Consistency and Standards

Follow platform conventions (e.g., Android’s back button, iOS’s swipe gestures). Example:

• Khalti’s payment flow: Uses Nepali Rupee symbols (₹) and standard button colors (green for "Pay").

C. Feedback

Inform users of actions (e.g., button clicks, loading states). Example:

• WhatsApp: Shows a "2…1…" counter when sending a message.
• NTC’s website: Displays a spinner while loading data.

D. Affordance

Design elements should suggest their function. Example:

• A 3D button looks clickable; a flat icon may not.
• Nepal Rastra Bank’s app: Uses raised buttons for transactions.

E. Error Prevention and Recovery

Minimize mistakes and provide undo options. Example:

• eSewa: Asks for OTP confirmation twice before deducting funds.
• Google Forms: Shows "Are you sure?" before deleting a response.

F. Accessibility

Design for all users, including those with disabilities. Example:

• Screen readers: Websites must use alt text for images (e.g., Ncell’s app describes icons).
• Keyboard navigation: All interactive elements must be reachable via Tab.

3. Types of User Interfaces

Interfaces vary by input/output methods and user needs:

Real-World Example:

• NTC’s IVR system (Voice User Interface) lets users check bills by speaking digits.
• Pathao’s app (GUI + NUI) combines swipe gestures (NUI) with buttons (GUI).

4. Jakob Nielsen’s 10 Usability Heuristics

Nielsen’s heuristics help identify UI flaws. Apply them to critique designs:

Worked Example: Critiquing eSewa’s UI

1. Heuristic 3 (User Control): eSewa shows a timer for OTP entry but no "Resend" option if the user makes a mistake.
   • Fix: Add a "Didn’t receive OTP?" link.
2. Heuristic 9 (Error Handling): If the OTP is wrong, it says "Invalid OTP" without suggesting fixes.
   • Fix: Add "Check your phone for the code" or "Resend OTP."

5. UI Design Process: Prototyping

Prototyping turns ideas into testable models. Types:

Example: Prototyping a Bank App

1. Low-Fidelity: Sketch a paper mockup of the home screen with "Balance," "Transfer," and "Loan" buttons.
2. Mid-Fidelity: Create a clickable Figma prototype where tapping "Transfer" shows recipient fields.
3. High-Fidelity: Build an interactive prototype in Adobe XD with animations for button presses.

6. UI Evaluation Methods

Test prototypes before development to catch issues early:

Real-World Example:

• WhatsApp uses A/B testing to decide between two designs for the "Status" feature (e.g., grid vs. list view).

7. Accessibility in UI Design

Follow WCAG (Web Content Accessibility Guidelines) to include all users:

In the Real World

1. eSewa’s OTP System

   • Idea Used: Error prevention (Heuristic 5) and feedback (Principle C).
   • How: After entering an OTP, eSewa shows a countdown timer and a "Resend OTP" option if the user fails. This reduces frustration and errors.

2. Pathao’s Ride-Hailing App

   • Idea Used: Visual hierarchy (Principle A) and natural UI (NUI).
   • How: The app uses large, colorful buttons for "Pickup" and "Drop-off," and swipe gestures to navigate between screens—making it intuitive for non-tech-savvy users.

3. Ncell’s Mobile Banking App

   • Idea Used: Consistency (Heuristic 4) and accessibility (WCAG).
   • How: The app follows Nepal’s banking standards (e.g., green for "Confirm," red for "Cancel") and supports screen readers for visually impaired users.

8. Worked Example: Designing a UI for a Traffic Route Planner

Scenario: Create a UI for a Kathmandu traffic app (like Google Maps Nepal) that helps users avoid jams.

Step 1: Define User Needs

• Primary Users: Daily commuters, tourists.
• Key Tasks: Find fastest route, avoid tolls, check real-time traffic.

Step 2: Apply UI Principles

1. Visual Hierarchy:
   • Make the "Start" and "Destination" fields largest.
   • Use red icons for traffic jams, green for clear roads.
2. Feedback:
   • Show an estimated time when a route is selected.
   • Animate the route on the map with a car icon.
3. Error Prevention:
   • Warn if the destination is unreachable (e.g., "No route due to road closure").
4. Accessibility:
   • Support voice input for addresses (e.g., "Go to Thamel").
   • High-contrast mode for low-light use.

Step 3: Prototyping

• Low-Fidelity: Sketch a map with buttons for "Avoid Tolls" and "Real-Time Traffic."
• High-Fidelity: Use Figma to create a clickable prototype with:
  • A search bar with autocomplete.
  • A legend for traffic colors.
  • A "Share Route" button.

Mermaid Diagram: UI Flow for Traffic App

9. Common UI Mistakes to Avoid

Exam Tip

For TU/PU exams on User Interface Design, expect:

1. Short Questions (2–5 marks):
   • Define GUI vs. CLI or list 3 UI principles.
   • Example: "Explain the principle of affordance with an example from a Nepali app."
2. Long Questions (10–15 marks):
   • Design a UI for a given scenario (e.g., a library management system).
     • Include wireframes, heuristics applied, and accessibility considerations.
   • Critique a UI (e.g., "How would you improve eSewa’s payment flow using Nielsen’s heuristics?").
3. Case Studies:
   • Compare two apps (e.g., Khalti vs. IME Pay) based on usability and design principles.
4. Prototyping:
   • Describe the steps to create a low-fidelity prototype for a given task (e.g., a hospital appointment app).

Key Formula to Remember:

Usability = Learnability × Efficiency × Memorability × Error Rate

Visual Cheat Sheet for Exams:

mindmap
  root((UI Design Principles))
    Consistency
    Feedback
    Affordance
    Hierarchy
    Accessibility
    Error Prevention