What is the difference between flow CHART and UI flow?

Many of the concepts in the UI design do not appear to be very different, but in fact they are very diverse. @akane_lee, a Taiwanese designer who has not issued a paper for a long time, has elaborated the function of flow Chart and UI flow by discriminating the concept of opportunity.

Nearly one months without a dispatch, busy writing planning cases, do Prototype, run the experimental students report. A lot of UI flow has to be sorted recently, and the more you organize your head, the more it looks like paste. Let's talk about UI flow and flow Chart. Flow is "process",ui flows are page processes, and flow Chart are flowcharts, which are completely different graphs. "

UI Designer are familiar with UI flow and may be less familiar to flow Chart. In software development, flow Chart is usually written by SA, with emphasis on "judgment" ... Not so difficult, take it as a psychological test attached to the magazine, choose "Yes" to go to the right, choose "No" to go to the left.

For RD, you need to know "logic" before you write a program, which is an operational architecture composed of various "judgments". Logic is also important to the UI, otherwise what does the user have to respond to when he or she is operating?

The most Yangchun member login

"Member Login" for example, user input account password, input correct automatically jump to the member information page, input error on the prompt error ...

Light from the functional Map to draw the UI flow often ignores "user operation error How to do", the last moment to find that there is a lack of UI emergency painting missed page, RD poor plug function is not elegant, suggesting that the error is not to put down a stage or to fill the things, The page and the program is not in the mouth of the painting in writing ...

I'll give you the code for the random input.

It seems so simple. The actual painting will find that many things in the UI flow can easily ignore the missing parts. (And how could this be the only thing that doesn't function?)

Sometimes the user will always input the error, reasonable guess is someone try to steal account. A common blocking method is to allow users who have entered multiple errors to fill in a field with a captcha. So the flow Chart becomes:

The picture above is just a simple process demonstration, but just a little more "Hello, help me add a verification code function",flow Chart will suddenly fat a cut. " Real Member Login Verification there are more tricks and security considerations, such as log in error 3 times to prompt a "forgotten password" and so on, the more ruthless direct lock account please users to find customer service complaints.

Flow Chart and UI flow complement each other, even with flow Chart to have UI flow. The chances of poorly planned page leaks are very high when there is no flow Chart and no knowledge of how much judgment to process to produce the UI flow.

If only the UI flow does not have flow chart,rd reluctantly can imagine the flow Chart, judging style, but the system more easily out of the package Bug, according to the RD experience to determine the rate of charter flights. But even the UI flow is not, light with a few Wireframe or mockup, is simply elephant, see a single static diagram RD will not know how the page string, pure rely on the brain is not strange.

If you don't give anything, just throw Prototype to RD and ask him to copy, say exactly the same, do a come out, very simple? RD also wants each screen each button to poke the poke to look, has tried each kind of error to be able to know the function how to answer. How much do you hate RD for this whole family?

Resources:

Flowchart –mba Intelligence Library Encyclopedia

Flowchart description

In terms of UI Designer, flow Chart can be viewed as "How users perform tasks in this context, how the software responds" and extends the UI flow to "because the user does this and we have the functionality and the information to render so that the page and the page are threaded.

UI Designer does not necessarily draw flow Chart, but it must be understood. Common flowchart symbols are fixed, do not design a new style because you are ugly, RD absolutely to turn the table.

There is a famous saying, "Before the wedding head into the water is married flow of tears," set to the software development, "before the start of the little Flower of the brain is started to hurt the liver." How many functions early did not think, there are many hours later did not expect ...