User Flow Diagrams
User Flow Diagrams
Embedded Files
Overview
Overview
A user flow diagram tracks the path a user takes to accomplish their goals within the app or website. It converts the journey map information into functionality. Key events tracked include:
Entry and endpoints
Process or action steps
User choice or decision points
Connections between elements or the flow’s direction
Use any diagramming software you wish. Note: Google Slides and Google Drawings have all of the flowchart symbols as does most UX/UI prototyping tools like Figma, and Sketch
Goals For good UX
Goals For good UX
Strive for the fewest number of steps needed to accomplish goals or tasks
Action prompts should be clearly stated and follow conventions, such as 'login' 'enter' 'view' 'select' , etc.
Feedback loops are important, such as 'submitted' 'saved' ''review' and other confirmations.
Recovery options are critical, such as 'reset' 'reenter' 'select different' and 'back'.
Common User Flow Symbols
Common User Flow Symbols
Lozenges: signify entry and endpoints
Rectangles: indicate process or action steps
Diamonds: signal user choice or decision points
Rectangle inside a rectangle: subroutine
Arrows: denote connections between elements or the flow’s direction
User Flow Diagrams can be created with any charting software, including the drawing tools in Google Slides.
A Typical User Flow Diagram
A Typical User Flow Diagram
But Wait, There's More Symbols!
But Wait, There's More Symbols!
In addition to the basic symbols above, advanced user UX designers collaborating on complex application will sometimes use an expanded symbol set.
Advanced User Flow Symbols
Advanced User Flow Symbols
Google Sites
Report abuse