The 3 common types of flowcharts in product design

Flowchart : A series of operations that reflect a specific logical relationship between a particular subject in order to meet a specific need. To summarize, a flowchart is a graphical representation of a series of operations. This operation process has a specific subject, is to meet specific needs and have a specific logical relationship. For example: Jingdong's shopping process, the specific subject is the user, the specific needs are shopping, specific logical relationships is the logic of the user's shopping process

There are three kinds of flowcharts involved in product design, business flowchart , task flowchart , page flowchart . .

Everything is a process, including the simplest eat, sleep and brush your teeth, brush your teeth, you have to first pick up the toothbrush toothpaste, squeeze toothpaste, brush your teeth, rinse your mouth, wash your toothbrush, put a good toothpaste toothbrush.

You found a pain point of the user, want to go to solve it, product positioning and demand analysis, you need to analyze the entire business model, you need to consider a few questions ① What are the subjects involved? ② What are the tasks of each subject? ② What are the tasks of each subject? ③ How are the subjects connected to each other?

This is an online swimlane diagram of a shopping and payment process, which is used to reflect the business process. The above swimlane diagram involves sellers, buyers, third-party payments, banks, and so on; each subject has its corresponding tasks; and arrows are used to indicate the order of the tasks.

The swim lane diagram analyzes the whole business process from the strategic layer, and then it is necessary to decompose it into the specific operation of each task layer. For example, the above buyer's task of purchasing goods involves searching for goods, browsing the search results, checking the details of the goods, and entering the task of ordering if they are satisfied with the result, and returning to the search results or re-searching if they are not satisfied with the result, and this is the flow of a specific task.

Drawing the specific task flow should pay attention to the overall process to the local process, from the main process to the branch, from the normal process to the abnormal process. For interaction designers, the main body of the task process is generally the user of the product, the task flow diagram reflects the user's behavior.

Take the drop and easy to say, taxi is the backbone process, view the trip, view the coupon, set up is the branch process, do the design should first consider the taxi process, and then go to perfect the other processes; the user normal to hit the car is the normal process, network abnormalities, peak hours can not hit the car belongs to the abnormal process, first consider the normal process, and then consider the unusual process, and the abnormal process must be thinking about the Comprehensive. The logical flaws in the product are mostly due to the abnormal process is not considered clearly, so drawing the task flow chart can effectively reduce the logical flaws in the product prototype diagram.

Although flowcharts are simple, there are a set of rules. Follow the rules to draw so you don't get laughed at.

Through the swim lane diagram and flowchart, the business process and the task flow of each function is sorted out graphically. Among them, the task flow chart intuitively tells us how the whole business model is, what subjects are involved, and what tasks are to be accomplished under these subjects; the task flow chart shows the main tasks and branching tasks, and describes the general flow of a task.

The object of the page flow chart is the page, and the page is the most basic unit of Internet product design, no matter whether it is APP or H5 or PC, these products are composed of one page after another. Page flow describes what pages a user needs to go through to complete a task. That is, where I am, after what operation, can go where. There are three elements to a pageflow: Pages, Action Points, and Connecting Lines. Here's an example of a pageflow for shopping: