(translation) timing of website flow chart and user flow chart

   The user experience design of the website is not just for a single page , Also consider the flow between pages . If you don't plan the page flow , You may encounter problems when starting the design .
   for example ：

• Forget to design some pages in the process of building the website ;
• Forget to design the call to action function to link some pages together ;
• Do not know the position of some pages in the site hierarchy ;
• I don't know which pages should be linked ;
• I don't know which pages to navigate for the user to complete the operation .

   If you encounter the above problems , You should use the website flowchart or user flowchart , They can help designers finally solve and avoid these problems . Use website flow chart and user flow chart , First of all, we have to understand their differences .

Website flow chart and user flow chart are not the same thing

   Many designers confuse the website flow chart with the user flow chart , Although both are used to show the page flow , But the level and purpose are different .
   The website flow chart is similar to the territory Map , A bird's-eye view of the whole map , You can see the general direction of the destination . The high-level perspective of the website flow chart can make people feel the scale and complexity of the site .

   User flow chart is like from A Point to B Indication of points , You can see which route to take 、 Where to turn 、 The mileage needed to get to the destination , It helps to reach the destination efficiently . The low-level perspective of user flow chart can make people feel the time and energy required to complete the operation .

When to use the website flow chart

   Before sketch design , Designers should know all the pages involved in the website , Then figure out which pages should be linked to each other , In this way, users can be guided to execute the correct page process .
   The website flow chart can also clearly show the navigation hierarchy of the website , Designers can see its breadth and depth . If the navigation path is too deep , Consider simplifying the path , And the navigation range is too large , You should consider merging related pages . All these help designers design simpler navigation experiences .

   Other project members can also benefit from the website flow chart . Developers usually need to understand the link relationship between pages when coding , Facing the website flow chart , It can prevent developers from writing wrong or missing links .
   The website flow chart can also help developers understand the micro interaction in a single page , The latter usually involves important coding and functions , This allows them to plan ahead , And find ways to meet the needs of micro interaction .

When to use the user flow chart

   Not all the page processes involved in the operation are simple and direct , Some are circuitous , The page flow of the latter is more complex , It needs to be carefully designed . User flow charts are particularly suitable for analyzing the execution efficiency of these operations .
   for example , Resetting the password involves more than just clicking on the page , The user is also required to confirm the reset operation 、 Fill out the form 、 Check email . The user flow chart supports checking all aspects of the operation process , In order to operate faster .

   User flow charts can also help developers understand how the system interacts with users . When the user operates incorrectly , The system needs to respond . Developers can view all the details and specific requirements of interaction from the user flow chart .

Quick creation tool of flow chart

   Designers should not spend a lot of time creating flowcharts , The latter should contribute to the design work , Not an obstacle .
   Consider using something similar Flow Patterns Auxiliary tool kit , It predefines various process pages for designers to use and customize , At the same time, there is micro interaction 、 Marking and marking functions , In order to create flow charts faster .

The flow chart is for everyone

   The flow chart is not only for designers' reference , It can also be used to share the vision of the website with team members . If the team members have a spectrum in their hearts , The more confident they are about the future of the website .
   Users will also benefit from flow charts . The designers carefully planned the navigation and web page process , Make the user experience better .
   Website flow charts and user flow charts can affect the user experience at the architectural level . If the website flow chart and user flow chart are used in the website design process , Everyone can benefit ！

Original address ：https://uxmovement.com/wireframes/site-flows-vs-user-flows-when-to-use-which/