How to create a Diagram?
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.
Why Create Diagrams Online?
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.
How to Create a Diagram — A Methodology
1. Define the Problem
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.
2. Create Start and End Points
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.
3. Draw the Paths as a User
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
4. Refine and Optimize
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.
Previous
What is a flow diagram?
Learn what makes a flow diagram different from all other diagram types and why it is so important in user experience planning.
Next
Crafting user flow
Learn about the best way to plot and optimize user flow paths throughout a website. Get flowchart examples and a tutorial from the Slickplan team.