HCI 02

• User flow in digital product design

  The sequence of actions a user takes when interacting with a website or app to enhance the user experience
• User flow

  • Outlines the steps required to reach a goal or complete a task within the product, mapping out the user's journey from start to finish
• 5 Types Of Symbols In User Flow Diagrams

  • Start/End (Oval)
  • Process (Rectangle)
  • Input/Output (Parallelogram)
  • Decision (Diamond)
  • Direction (Arrow)
• Avoid making assumptions about what the user wants or needs
• Importance of Understanding User Behavior and Interactions

  • Helps in improving usability, reducing friction, and ensuring that the product meets the expectations of its target users
  • Helps designers and developers understand how users interact with the product, identify potential roadblocks or areas for improvement, and optimize the flow to make it more intuitive
  • Ensures a user-centric design approach, enhances usability, and improves overall satisfaction and retention rates
• Types of User Flows

  • Linear flows
  • Branched flows
• Linear flows


  Focus on a single, primary task (e.g., user registration, checkout process)
• Branched flows


  Map out multiple paths a user might take based on decisions (e.g., troubleshooting flow with different error scenarios)
• Define the steps involved in creating a User Flow

  1. Define User Personas & Goals

  2. Map the User Journey

  3. Consider Decision Points

  4. Wireframing & Prototyping (Optional)
• Define User Personas & Goals

  Identify your target user types and their goals when using the software
• Map the User Journey

  Break down the steps users take to achieve their goals (from entry point to completion)
• Consider Decision Points


  Include branching points where users might make choices or encounter errors
• Wireframing & Prototyping (Optional)


  Create visual mockups to represent the user flow visually