A User Interaction Flow Chart is a simple diagram of the path that a user will take through your web application.
Creating a UI Flow Chart requires the designer to adopt the point of view of a user and plot how a user will interact with the website.
A UI Flow Chart helps the designer think of everything that needs to be made for the site to be fully functional and offer a straight forward user experience.
Every link, button and interaction should be documented in the UI Flow Chart.
Any drawing or graphics software can be used to create a simple UI Flow Chart. We will use Google Draw as an example.
Symbols
There are three main symbols we will use for the UI flow chart.
Rectangle + label
Any page should be represented by a rectangle with a label.
Arrow + label
An arrow represents a user interaction, clicking on a button, link, form or other.
Diamond + label
A diamond shape represents a choice for the program. In this case, the choice is whether the user authentication is valid. If not then the user will either need to create a profile or try again. If they are then they will be sent either back to the home page, or a user profile page, or another part of the document.
All of the interactions on your app should be able to be diagrammed with one of these symbols.
Creating a UI flow chart requires creating multiple versions. Your first attempt will not be perfect. It will reveal repetitive interactions, endless loops or dead ends. Draw one and then quickly work on a new one.
