What are the differences between FLOW CHART and UI FLOW?

This time I will bring you what are the differences between FLOW CHART and UI FLOW, and what are the precautions when using FLOW CHART and UI FLOW in projects. The following is a practical case, let's take a look.

Many concepts in UI design may appear to be similar in name, but in reality they are vastly different. Teacher @Akane_Lee, a Taiwanese designer who has not posted for a long time, took the opportunity to analyze concepts and elaborated on the functions of Flow Chart and UI Flow~

It has been almost a month since I posted, busy writing projects, working on prototypes, etc. Running lab student report. I have to sort out a lot of UI flows recently, and the more I sort them out, the more my brain feels like a mess. Let’s talk about UI Flow and Flow Chart. Flow is "process", UI Flow is page flow, and Flow Chart is flow chart. The two are completely different charts.

UI Designer is very familiar with UI Flow, but may not be familiar with Flow Chart. In software development, Flow Chart is usually written by SA, and the focus is on "judgment"...it is not that difficult. Think of it as a psychological test attached to the magazine. If you choose "Yes", go to the right, and if you choose "No", go to the left.

For RD, before writing a program, you must first know the "logic", which is the operation structurestructure composed of various "judgments". Logic is also very important for the UI. Otherwise, what response should the user give him after the operation? , if the input is correct, it will automatically jump to the member information page. If the input is incorrect, an error message will appear...

I just want to draw the UI Flow from the Functional Map. I often ignore "What to do if the user makes an operation error", and only find out at the last moment that there is a flaw. The UI urgently adds missing pages, the RD plug-in function is inelegant, and the error prompts are not something to be put aside for a stage or to be replenished when you have time. Pages and programs are not drawn and written by mouth...

Input randomly and I will give you the

verification code

It seems very simple? It’s not just that. When you actually draw, you will find that there are many things that are easily overlooked in the UI Flow. (And how could it just be like this without adding functions?) Sometimes users keep making mistakes, and it is reasonable to guess that someone is trying to steal the account. A common blocking method is to ask users who make multiple incorrect entries to fill in an additional verification code field. So the Flow Chart becomes:

The above picture is just a simple process demonstration, but if you just casually say "Hey, help me add a verification code function", the Flow Chart will suddenly become fatter. Real member login verification has more tricks and

security

considerations. For example, if you log in incorrectly three times, you will be prompted with "forgot password", etc., or even more severely, the account will be directly locked and the user will be asked to appeal to customer service.

　Flow Chart and UI Flow complement each other, and even Flow Chart comes first before UI Flow. When there is no Flow Chart and you don’t know how many judgments to process, the UI Flow is generated. The probability of page leakage due to poor planning is very, very high. If there is only UI Flow and no Flow Chart, RD can barely imagine the Flow Chart and how to use the judgment formula based on the picture. However, the larger the system, the more likely it is that there will be bugs in the package. The probability of package delivery is determined based on the RD experience value. But there is not even UI Flow. Just relying on a few Wireframes or Mockups is simply a blind man trying to figure out the elephant. Looking at a single

static

picture, the RD will not know how to link the pages. It is strange to rely solely on brainstorming.

If you don’t give me anything, just throw the Prototype to RD and ask him to copy it. It’s easy to make one exactly the same, right? RD also needs to press every button on every screen. Only after watching and trying various errors will you know how to connect the function. How much do you hate RD for treating people like this...

From the perspective of a UI Designer, you can think of Flow Chart as "how the user operates to complete the task in this situation, and how the software responds", and UI Flow is extended to "because The user operates in this way, and we have these functions and information to present, so the pages are connected in this way." UI Designer does not necessarily need to be able to draw Flow Chart, but must be able to understand it. Common flowchart symbols are fixed. Don’t design a new style just because it looks ugly. RD will definitely turn the tables.

There is a famous saying, "The water in the head before marriage is the tears shed after marriage." When applied to software development, "The brain that is spent less before starting work is the liver that will be injured after starting work." How many functions were not expected in the early stage, and how many man-hours were not expected in the later stage...

I believe that after reading these cases, you have mastered the methods. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

How to set the horizontal and vertical centering of HTML elements

What are the commonly used tags in XHTML

How to use horizontal line annotations and code comments in HTML

The above is the detailed content of What are the differences between FLOW CHART and UI FLOW?. For more information, please follow other related articles on the PHP Chinese website!