Many concepts in UI design don't look very different in literal terms, but in fact they vary greatly. Teacher @Akane_Lee, a Taiwanese designer who has not published a long time, took the opportunity of analyzing concepts and elaborated on the functions of Flow Chart and UI Flow in detail~
I haven't posted any articles for almost a month, and I'm busy writing plans, making Prototypes, and running experimental students' reports. Recently, I have to organize a lot of UI Flows. The more I organize my head, the more I feel like a paste. Let’s talk about UI Flow and Flow Chart. Flow is "process", UI Flow is the page flow, and Flow Chart is the 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, with the focus on "judgment"... It is not that difficult, treat it as a psychological test attached to the magazine, just select "Yes" and go to the right, and select "No" and go to the left.
For RD, you must first know "logic" before writing a program, that is, an operating architecture composed of various "judgments". Logic is also very important for the UI, otherwise what response should the user give him after operation?
The most prosperous member login
Taking "Member Login" as an example, if the user enters the account password, and if the input is correct, it will automatically jump to the member information page. If the input is wrong, it will prompt an error...
Just from Functional Map, I want to draw UI Flow. I often ignore "what to do if the user operates incorrectly". At the last moment, I found that there is a shortage, which means that the UI urgently adds missing pages, and the RD is not elegant in its hard work. It prompts that the error is not something that is put down a stage or is supplemented when you have time. The pages and programs are not written by their mouths...
I'll send you a verification code
It seems very simple? It's not just that. When you actually draw it, you will find that many things are easily overlooked on UI Flow that are not considered. (And how could it be that there is no function added?)
Sometimes the user will keep typing errors, and it is reasonable to guess that someone is trying to steal the account. A common blocking method is to ask users who enter multiple errors to fill in one more field of verification code. So Flow Chart becomes:
The picture above is just a simple process demonstration, but it's just a casual sentence "Hey, add a verification code function for me", and the Flow Chart will suddenly become fat. There are more tricks and security considerations for real member login verification. For example, if you have 3 login errors, you will give me a more "forgot your password" and so on. If you lock the account directly, please contact the customer service to appeal.
Flow Chart and UI Flow complement each other, and even UI Flow Chart is first provided. When there is no Flow Chart and you don’t know how much judgment to process, you will produce UI Flow. The probability of missing pages and missing functions is very, very high.
If there is only UI Flow and no Flow Chart, RD can barely imagine Flow Chart based on the picture and how to judge, but the larger the system, the more bugs the package will be, and the chance of the package is determined based on the RD experience value. But there is not even a UI Flow. Just a few Wireframes or Mockups are just a blind man touching an elephant. If you look at a single static image, you won’t know how to string the page. It would be strange if you rely on your brain to make up for it.
If you don’t give anything, just throw Prototype and ask RD to copy it. It’s very simple to do it exactly the same? RD also needs to poke and poke every button press on each screen and try various errors before you know how to connect the function. How much do you hate RD for doing this?
References:
Flowchart – MBA Think Tank Encyclopedia
Flowchart description
From the perspective of UI Designer, Flow Chart can be regarded as "how users operate and complete tasks and how software responds in this situation", and UI Flow is extended to "because users operate in this way and we have these functions and information to present, so the page and the page are connected in such a way."
UI Designer does not have to know how to draw Flow Charts, but you must understand them. Common flowchart symbols are fixed. Don’t design a new style just because you look ugly. RD will definitely turn the table.
There is a famous saying "The water in your head before marriage is the tears shed after marriage", which is applied to software development, "The brain that is less spent before work is the liver that will be damaged after work is the liver that will be damaged after work is the one that starts." How many functions are not expected in the early stage, how many working hours are not expected in the later stage...