Flowchart
UX Design
What is a Flowchart
A Flowchart is a visual representation of a process, system, or user journey that uses standardized symbols and connecting arrows to show the sequence of steps, decisions, and outcomes. It helps teams understand and communicate complex flows in a clear, standardized way.
Types of Flowcharts in UX
Common applications include:
- User Flow Charts: Mapping user journeys through an interface
- Decision Trees: Showing conditional paths and outcomes
- System Flow Charts: Documenting technical processes
- Task Flow Charts: Breaking down specific user tasks
When to use Flowcharts
Create flowcharts when you need to visualize complex processes, document user journeys, plan navigation structures, or communicate system behavior. They're particularly valuable during planning phases and when coordinating with development teams.
How to create effective Flowcharts
Design clear flowcharts by using standard symbols, maintaining consistent direction, adding clear labels, and keeping diagrams as simple as possible while conveying necessary information. Start with high-level flows before adding detail.
Find your next job!
While both show processes, user flows specifically focus on user interactions and paths through an interface. Flowcharts can represent any process, including technical and business operations.
Include enough detail to serve your purpose without becoming overwhelming. For high-level planning, keep it simple. For technical documentation, include more detail. Consider creating multiple versions for different audiences.
Popular tools include Figma, Miro, Lucidchart, and Draw.io. Choose based on your needs for collaboration, integration with other tools, and complexity of the charts you need to create.
UX Design Terms
See more UX Design terms
Modal
What is a Modal A Modal (also known as modal window or dialog...
Design System
What is a Design System A Design System is a complete collect...
Onboarding
What is Onboarding? Onboarding is the process of introducing ...
Information Architecture
What is Information Architecture Information Architecture (IA...
Value proposition
What is a Value Proposition? A value proposition is a clear s...
Affinity Diagram
What is an Affinity Diagram? An affinity diagram is a collabo...