Interaction Design & Prototyping: Models, Styles, Tools

TAKEAWAYS:

• Interaction design shapes how users physically and mentally engage with digital interfaces, using models like hub-and-spoke (e.g., Daraz’s category menus) or stepwise (e.g., eSewa’s payment flow).
• Prototypes bridge the gap between paper sketches and final products, with low-fidelity (wireframes) for early feedback and high-fidelity (interactive mockups) for usability testing.
• Micro-interactions (e.g., Pathao’s ride confirmation animation) and feedback mechanisms (e.g., WhatsApp’s read receipts) reduce user frustration by validating actions.
• Prototyping tools like Figma or Adobe XD simulate real-world behavior, while paper prototypes (e.g., NTC’s app navigation tests) save time and cost.
• Responsive prototyping ensures designs work across devices (e.g., Ncell’s mobile app vs. desktop portal), testing touch vs. mouse interactions.
• Iterative prototyping (e.g., NEPSE’s trading platform updates) refines designs based on user testing, aligning with the UX process cycle.

1. Interaction Design: Definitions and Core Principles

Interaction design (IxD) defines how users interact with digital products. It blends user psychology, technology, and design to create intuitive, efficient, and enjoyable experiences.

Key Concepts

• Interaction Model: A framework describing how users navigate and manipulate an interface.

  • Direct Manipulation: Users perform actions directly on objects (e.g., dragging items in Daraz’s cart).
  • Command-Based: Users input commands (e.g., typing git commit in VS Code).
  • Menu-Driven: Users select options from predefined lists (e.g., NTC’s call menu).

• Interaction Styles: How users trigger actions (see comparison table below).

• Feedback: Confirmation that an action was registered (e.g., WhatsApp’s blue checkmark).

Interaction Models in UI Design

Five common models with real-world examples:

Why it matters:

• Hub-and-spoke reduces cognitive load for Daraz users by grouping products intuitively.
• Stepwise in eSewa prevents errors by guiding users through each payment stage.

2. Interaction Styles: How Users Act

Interaction styles categorize how users trigger actions. Each has trade-offs in speed, complexity, and usability.

Comparison Table

Worked Example: Pathao’s Ride Selection Pathao uses direct manipulation (swipe gestures) and menu selection (ride type dropdown) to balance speed and clarity:

1. User swipes left/right to browse ride options (direct manipulation).
2. Taps "Taxi" to filter results (menu selection).
3. Confirms pickup location (form filling). Why it works:

• Swiping reduces friction for quick decisions.
• Dropdowns prevent overwhelming users with too many choices at once.

3. Feedback in Interaction Design

Feedback confirms actions to users, reducing uncertainty. Types include:

• Visual: Icons, color changes (e.g., WhatsApp’s blue checkmark).
• Audio: Beeps, chimes (e.g., YouTube’s video load sound).
• Haptic: Vibrations (e.g., smartphone notifications).
• Textual: Toasts, success/error messages (e.g., "Payment failed. Retry?").

Example: eSewa’s Payment Confirmation

sequenceDiagram
    participant User
    participant eSewa
    User->>eSewa: Enters amount + taps "Pay"
    eSewa->>User: Shows loading spinner (visual feedback)
    eSewa->>User: Plays confirmation chime (audio)
    eSewa->>User: Displays "Payment successful" toast (textual)
    eSewa->>User: Vibrates phone (haptic)

Why it’s critical:

• Loading spinners prevent user frustration.
• Multi-modal feedback (sound + vibration) ensures users notice the action even if they’re not looking.

4. Prototyping: From Sketches to Interactive Models

Prototypes simulate a product’s functionality. They range from low-fidelity (paper sketches) to high-fidelity (interactive digital models).

Types of Prototypes

Low-Fidelity vs. High-Fidelity: Trade-offs

Worked Example: NTC’s App Navigation Test NTC used a low-fidelity prototype (paper mockups) to test navigation:

1. Drawn a hub-and-spoke layout on paper.
2. Recruited 10 users to navigate to "Bill Payment."
3. Findings:
   • 60% struggled to find the "Bill Payment" option (hidden under "Services").
   • Solution: Moved it to the homepage hub (top-right corner). Impact: Reduced user drop-off by 30%.

5. Creating Realistic Prototypes

High-fidelity prototypes mimic real-world behavior using:

A. Transitions and Animations

• Micro-interactions: Small animations that respond to user actions (e.g., button press feedback).

  sequenceDiagram
      participant User
      participant Button
      User->>Button: Taps "Submit"
      Button->>User: Scales up (0.9s), then returns to normal
      Button->>User: Plays "click" sound

• Example: Pathao’s ride confirmation animation (a car icon spins before showing the driver’s photo).

B. Interactive Elements

• Clickable zones: Buttons, links, and gestures (e.g., swiping in Daraz).
• Dynamic content: Data that changes based on user input (e.g., NEPSE’s stock price updates).

C. Feedback Loops

• Loading states: Spinners, progress bars (e.g., Daraz’s checkout loading screen).
• Error handling: Clear messages + recovery options (e.g., "Retry" or "Cancel" buttons).

6. Prototyping Tools

7. Prototyping in the UX Process

Prototypes are iterative. The cycle:

flowchart TD
    A["User Research"] --> B["Define Requirements"]
    B --> C["Low-Fidelity Prototype"]
    C --> D["User Testing"]
    D --> E["Refine Prototype"]
    E --> F["High-Fidelity Prototype"]
    F --> G["Usability Testing"]
    G --> H["Iterate"]
    H --> A

Key Stages:

1. Low-fidelity: Test structure (e.g., "Can users find the checkout?").
2. High-fidelity: Test functionality (e.g., "Does the payment flow work?").
3. Iterate: Fix pain points (e.g., "Users abandoned at the billing step").

Example: NEPSE’s Trading Platform

• Problem: Traders struggled to place orders quickly.
• Solution:
  1. Created a low-fidelity prototype of the order screen.
  2. Tested with 50 traders → found they ignored small fonts.
  3. Built a high-fidelity prototype with larger buttons and color-coded alerts.
  4. Result: Order placement time reduced by 40%.

8. Responsive Prototyping

Prototypes must adapt to devices (mobile, tablet, desktop) and input methods (touch, mouse, keyboard).

Challenges

• Touch vs. Mouse: Buttons must be large enough for touch (e.g., Ncell’s app buttons are 48x48px).
• Orientation: Landscape vs. portrait layouts (e.g., Daraz’s mobile vs. desktop views).
• Keyboard Accessibility: Tab order, focus states (critical for banks like Global IME).

Tools for Responsive Prototyping

• Figma/Adobe XD: Device previews and breakpoints.
• User Testing: Test on real devices (e.g., Pathao’s app tested on iPhone and Android).

9. Prototyping Mistakes to Avoid

In the Real World

1. Pathao’s Ride Confirmation Animation

   • Idea Used: Micro-interactions (spinning car icon + driver photo reveal).
   • Why It Works: Reduces anxiety by showing the ride is "in progress" visually and audibly (beep sound).
   • Real Impact: 25% fewer cancellations after implementation.

2. Daraz’s Checkout Flow Prototype

   • Idea Used: Stepwise interaction model + high-fidelity prototype testing.
   • How It Was Used:
     • Prototyped a 3-step checkout (Cart → Payment → Confirm).
     • Tested with 200 users → found Step 2 (Payment) had a 30% dropout rate.
     • Simplified to 2 steps: Cart → One-click Payment.
   • Result: 50% increase in completed orders.

3. Ncell’s App Navigation (Low-Fidelity → High-Fidelity)

   • Idea Used: Hub-and-spoke navigation tested via paper prototypes.
   • Process:
     1. Drawn a paper menu with "Home," "Plans," "Top-Up."
     2. Asked users: "Where would you go to check your balance?"
     3. Issue: Only 10% found it under "Plans."
     4. Solution: Moved balance check to the homepage hub.
   • Impact: Reduced support calls by 20%.

Exam Tip

This unit tests conceptual understanding, real-world application, and critical analysis. Focus on:

1. Comparative Questions:

   • Expect questions comparing interaction models (e.g., "Why is hub-and-spoke better for Daraz than a flat model?").
   • Tip: Use the table above and tie examples to Nepalese apps (e.g., "Pathao uses stepwise for ride booking").

2. Prototyping Workflow:

   • Describe the iterative cycle (low-fidelity → high-fidelity → test → refine).
   • Tip: Draw a flowchart like the one above and label each stage with a Nepalese example (e.g., "NEPSE’s order screen prototype").

3. Feedback Mechanisms:

   • Explain how feedback reduces cognitive load (e.g., "WhatsApp’s blue checkmark prevents users from resending messages").
   • Tip: Mention multi-modal feedback (visual + audio + haptic) for full marks.

4. Tool-Specific Questions:

   • If asked about tools, name Figma/Adobe XD for high-fidelity and Balsamiq/paper for low-fidelity.
   • Tip: Describe a worked example (e.g., "How would you prototype NTC’s app using Figma?").

5. Responsive Design Pitfalls:

   • Highlight touch vs. mouse and orientation challenges.
   • Tip: Give a real-world fix (e.g., "Ncell’s app uses 48px buttons for touch compatibility").

Sample Answer Structure for 20 Marks:

1. Define the interaction model/style (1 mark).
2. Explain with a Nepalese example (2 marks).
3. Compare to another model/style (2 marks).
4. Analyze pros/cons (3 marks).
5. Apply to a real scenario (e.g., "How would you redesign Pathao’s ride selection using a hub-and-spoke model?") (8 marks).
6. Conclude with a design principle (2 marks).

Example Question: "Analyze the importance of visual hierarchy in interface design. Explain how any four principles such as contrast, proximity, alignment, size, color, and typography can be used to direct user attention." Your Answer Must Include:

• A definition of visual hierarchy.
• Four principles with real examples (e.g., "Daraz uses contrast to highlight 'Sale' badges in red").
• A worked example (e.g., "How would you apply these principles to Ncell’s app to improve the 'Top-Up' section?").
• A comparison table (if asked to compare two principles).