Learning Product Design: Drawing Interactive design flowchart

Article Description: Draw an interactive flowchart.

Learning product design In the early days will certainly encounter two problems: first, how to consider more comprehensive; second, how to draw an interactive flowchart. Before you start product design, consider all the possibilities and how you can organize the required design elements in a linear flowchart. Xiaozheng's "Interactive design Table" has introduced a very practical form of exhaustive method, suitable for beginners to use.

The flowchart is the product manager and the interaction design must master the skill, a flowchart may save the request document and the interactive design document many text descriptions, lets the technical staff clearly understand the design intention, facilitates the organization procedure logical order.

Drawing flow chart from simple principles, flowchart is the output of designers, embodies the design intent, mainly to technicians and testers to browse, as to how they think should not be reflected in the flowchart. Others also want to go home early by the wife, no time to care about how you carefully consider, and do not care about how users will think and operate, please directly show them the results of the design.

Complex and tangled left to themselves, simply left to others. This is true for users as well as for working companions.

Legend 1: Mobile phone program power-on Check the updated flow chart

The flowchart includes the following graphics:

• The rectangle represents the interactive link
• Diamond Representation problem judgment
• Arrows indicate the direction of the workflow

Also useful rounded rectangles indicate "start" and "end", and individuals generally do not want the graphic because of a linear flowchart from top to bottom. The top of the graph or the beginning of the arrow is the "Start" of the flowchart, as in the legend, the open program triggers the event, the program starts checking for updates, and the bottom of the graph or arrowhead terminates is the "end" of the flowchart, such as restarting the program and no longer prompting for the end of the event, without drawing a distinction between "start" and "End". ”。

Flowcharts are easy to confuse with operational steps, such as the login box steps in the Interactive design table:

1. Click on login, pop-up login box
2. Click on the user name input box, enter the user name
3. Click on the Password input box, enter the password
4. Click to login

The procedure is the operation that the user normally completes an operation, and the interactive flowchart (strictly called the Program flowchart) is the path of the execution logic, which is popular when the user clicks a button and the program executes the order. More complex system flowcharts are available for the product architecture.

After the user clicks on the login box, the text describes the order in which the program is executed:

1. Check to see if the user name is empty. If blank, remind the user "Please enter your username". If the username is set to enter a mobile number, check to see if the phone number starts with a 13/15/18 11 digits.
2. Check to see if the password is empty. If blank, remind the user "Please enter your password".
3. Check whether the user name is an already used account. Program submission data is compared to server data. If not, remind the user that the user name is incorrect. Question: How is the user name wrong and does not exist how to judge?
4. Check to see if the password matches the account. As an error, remind the user "incorrect password input".

Now most of the login box will merge 4 and 3, only to remind "user name or password is incorrect", may be to inform the user too accurate information will increase the risk of theft.

Legend 2,wap Station Verify user mobile number