Looking to create the perfect user flow diagram for a website? Check out our methodology below to help you get started. Adding user experience planning to your website design process will help keep your visitors happy and engaged. Our engineers have created a flow diagramming tool that is specially designed for mapping out user flow throughout a website.
The Slickplan Diagramming web app gives you a powerful toolset to build a special type of flowchart that deals with users’ movements and interactions? Creating diagrams in an online environment with Slickplan grants you helpful collaboration and sharing features: easily work on projects with others in real-time, communicate directly from within the app, seamlessly share diagrams with colleagues or clients, and manage approval workflows. Integrate and link your diagram elements within your Slickplan sitemap pages so you can easily plan and organize every detail of your website project, all from one system.
It is important to understand what problems you are hoping to solve with a diagram before you begin the
design process. Think about what goals you would like your visitors to achieve on your website. Identify what decisions the
system and/or the users will need to make while on the site in order to reach those goals. It may be helpful to list the
different types of visitors you are hoping to attract along with their behavioral characteristics, especially if you plan to
attract multiple groups of visitors with common attributes (commonly called personas). Understanding that different persona
types may travel different paths on your site will be important when crafting potential user paths.
You may also want to create a flow diagram that documents only a particular process within your website structure, such as how
to handle a search query or a shopping cart checkout. If you only need to solve or communicate specific parts of the system,
it may be helpful to leave out sections or create multiple flow diagrams to avoid clutter.
Start your diagram design process by placing symbols that represent starting and ending points for visitors on your website. Multiple start and exit points may be required depending on the number of goals you have set, your website system functionality, or the number of user personas you wish to cater to. To avoid confusion, always label your diagram components as you draw them.
Beginning at the starting points, draw symbols representing locations and places of interaction that your
users will need to follow to get them to the end points. Common user path scenarios may include moving from page to page,
performing an action such as a login, entering search criteria, or making a decision. It may be helpful to draw each element
as if you were the user, thinking about what steps they will need to accomplish next to get closer to the goal. You may need
to repeat the process and go back several times to account for multiple paths.
As you draw, link your symbols with connectors or solid lines that represent the flow from one place to another. Try some
advanced symbols that convey additional information about actions, conditional scenarios, branches, and decision points. Check
out our Diagram Symbols Reference Guide to learn more
When you have finished drawing, go back to the beginning and trace over the potential user paths within your
diagram. Look for opportunities to reduce the number of steps needed to move from start to finish. You may find that it is
possible to direct users to skip over certain locations or avoid some interactions within your website. Consider creating
system automations that handle decision making points for the user on the fly. Make the user’s path as simple and intuitive as
possible. For each point in the path ask yourself, “would I as the user expect to be at this website location based on the
website location I just came from?”
Try to identify possible dead-ends, broken paths, missing components, or points of confusion in a user’s path. There may be
opportunities to provide connectors from dead-ends back to the starting or mid-points in a particular path. This is also a
good time to determine how you will deal with errors, pages not found, or other possible complications.
Website planning simplified. Try it for free!
