Differences between FLOW CHART and UI FLOW


Many concepts in UI design literally seem to be quite different, but in fact they are quite different. Teacher @Akane_Lee, a Taiwanese designer who has not written for a long time, elaborates on the functions of Flow Chart and UI Flow by analyzing concepts.~

I haven’t written for nearly a month. I’m busy writing business plans, prototype and report of running lab students. Recently, a lot of UI Flows have to be sorted out, and the more you sort your head out, the more it looks like paste. Let’s talk about UI Flow and Flow Chart. Flow is the process, UI Flow is the page process, and Flow Chart is the flow chart. They are totally different diagrams.

UI Designer is familiar with UI Flow and may not be familiar with Flow Chart. Flow Chart is usually written by SA in software development, focusing on judgment. It’s not that difficult. Think of it as a psychological test attached to a magazine. Choose Yes to the right and No to the left.

For RD, it is necessary to know “logic” before writing a program, that is, the operational framework consisting of various “judgments”. Logic is also important to the UI, otherwise what is the user’s response to it?

Most Spring Members Log in

Take “member login” as an example. When the user enters the password of the account, the user automatically jumps to the member information page if the input is correct. When the input is wrong, the user prompts the error.

FLOW CHART 和 UI FLOW 有什么差别? developpaer

Functional Map alone wants to draw UI Flow, which often overlooks “what to do with user operating errors”. At the last moment, it is found that the missing pages are urgently added by UI, the RD misery plug function is not elegant, the prompting errors are not put down a stage or something that has time to be repaired, and the pages and programs are not written by mouth.

Give you the verification code if you type it randomly

It seems very simple. That’s not the only way. Actually, when you draw it, you will find that many things are easily overlooked in UI Flow. (And how could it possibly be that way without functionality?)

Sometimes the user always enters the wrong account. It’s reasonable to assume that someone tries to steal the account. A common blocking method is to ask users who have entered multiple errors to fill in an extra field of validation code. So Flow Chart becomes:


The figure above is just a simple process demonstration, but if you say “Help me add a verification code function”, Flow Chart will suddenly become fat. Real member login validation also has more tricks and security considerations, such as three login errors prompting a “forgotten password” and so on, and more ruthless direct lock account to ask users for customer service complaints.

Flow Chart and UI Flow complement each other, even if there is Flow Chart before UI Flow. UI Flow is produced without Flow Chart and without knowing how much judgment to process. The probability of not planning the page leak function is very high.

If only UI Flow does not have Flow Chart, RD can barely imagine Flow Chart from the picture, how to judge, but the more likely the system is to outsource Bug, according to RD experience value to determine the probability of outsourcing. But even UI Flow is not, only a few Wireframe or Mockup, is simply a blind spot, to see a single static map RD will not know how the page string, pure brain supplement is good.

If you don’t give anything, throw Prototype directly to RD and ask him to copy it, and say that it is very simple to do it one by one, and RD is also very simple. How much hate do you have for RD?

Reference material:

Flow chart – MBA think tank Encyclopedia

Flow chart description

From the UI Designer’s point of view, Flow Chart can be seen as “how users operate to complete tasks, how software responds in this context”, and UI Flow can be extended to “because users operate in this way, and we have these functions and information to present, so the pages and pages are connected in this way”.

UI Designer doesn’t have to be able to draw Flow Charts, but it has to be able to understand them. Common flow chart symbols are fixed. Don’t design a new style because you are ugly. RD will definitely turn the table.

There is a famous saying that “the water in the head before marriage is the tears shed after marriage”. When applied to software development, “the brain that spends less before construction is the liver that will be hurt after construction”. How many functions were unexpected in the early stage and how many working hours were unexpected in the late stage?

Recommended Today

Oracle (PLSQL) introduction 1

Oracle installation, user authorization, table operation, data type, DDL table, DML data. Next: Oracle introduction 2 Learning video: https://www.bilibili.com/video/BV1tJ411r7EC?p=15 Baidu cloud installation package is attached to the installation tutorial: https://blog.csdn.net/qq_ 40774525/article/details/79919057 Oracle Baidu cloud installation package: https://pan.baidu.com/s/1qVWwCUR37j2JxEecYbe5HQ Extraction code: 5abz After the Oracle service above is installed, open the client of SQL developer and the […]