What is a complete UI design process?

Received a mail that mentions several questions about the design process and Prototype. UI Design Flow:wireframe-> prototyple->mockup-> High fidelity prototyple, such a process is right? Today to talk about what a complete UI design process should be like, dry goods!

According to the students ' response and their own experience, the current situation in the industry is mostly the UI designers received the "start" notice, and then start from Wireframe. The user how to operate, what function, user and customer's demand is often by PM simple dictate.

Why would Wireframe do that? What do you have to do before Wireframe?

All by channeling.

Therefore, the implementation of the project during the change to the last day will always be able to close the release of it, and then start the next change to the reincarnation.

　　Development process

Basically, my own process of developing a product is largely not going to be too far away from this picture.

User Story

Functional Map

Flow Chart

UI Flow

Wireframe

mockup

Prototype

What does the user want? > sort out Features > How users operate these functions from the requirements. What pages are required for the > Operation process? > What is the content/component of the page? > What does the user see on the page?

Each family has its own practices, no standards or the right to do this process, but I do my own toys will do so.

A large company with a UX team will be able to break the process down more carefully, and do user research, a small team of ui/ux ... These 7 items are the lowest must produce the document, according to personal want to lazy experience, and then remove the streamlining will be in the process of executing the project leakage of the west, then fill the hole instead spend more time and effort.

　　1. User Story

How does the function come from? Start with what the user wants or what the customer expects users want.

Depending on the identity of the user, the desired function will be different, complete the task is not the same.

Like "blog":

I am a reader and I want to see all the articles written by this author.

I am the author and I want to write and publish the article.

I am a platform provider and I want to see all memberships and payment status.

These three identities are completely different from the "blog" of the product.

　　2. Functional Map

Write the User Story to know what size features to do. Select features from the story to address the needs of different users. The identity of the user often affects the functions they can use, sorting out the similarities and differences.

　　3. Flow Chart

When a developer knows what the user wants and has a function, he has a way of thinking about "how users perform their tasks or achieve their goals".

UI designers often say: "With the user's habits and behavior to design the operating process." is planning at this stage. If you skip the flow Chart, your home RD will wail with your head as long as the product features are complex.

　　4. UI Flow

Know how the user will operate a function, there is a way to plan the operation of moving lines. UI flow refers to the process of operation between pages and pages, and how many pages the user wants to complete.

Another reader asked why my previous article said not to use the picture version of the UI flow, to use the text version of it?

First of all, this is the problem of chicken eggs and raw chicken. If the project starts from scratch, and then the flow Chart and then the UI flow, where can the picture version flow? Even Wireframe hasn't started painting yet!

Second, when your product page is a lot of time ... Not too much, 20 pages, using a picture to string out a UI flow, how large is this flow chart size? Who has the heart to move back and forth on a large picture with the hand tool to see the page trend?

Third, a lot of people do the picture version of the UI flow, the line is connected to the "page" and "page", at this time you only know "Oh ~ this page of the next page will be here", but you absolutely do not know why to this page. What's the point, or what happened, so you came here? Guess what?

You have to guess the document to read it (write it) Why? Don't waste your time.

Text version of the UI flow I'll take it as a "catalog", and compare it to the Wireframe number, and look for the details quickly.

The picture version of the UI flow I will use when "optimizing" the old product operation, connectors will know which steps can be omitted or modified to be easier to use, from "component to page" instead of "page to page", and write a text description next to the picture and line.

　　5. Wireframe

A painting Wireframe does not mean that the engineer can understand what to do, just look at the face crumpled into a ball of expression you do not know whether he kicked to the toe or eat the plum. Text description is the focus of Wireframe, including triggers, feedback, state changes, and so on.

A Web page will automatically appear ads, or open the page after waiting for 3 seconds to appear ads?

Does the advertisement appear 10 seconds to automatically disappear, or do you want to press (X) button?

Web stop 30 seconds No action do you want to show me the ad?

Engineers just do what you write and don't do what you want. Engineers are not gods or worms, they are ordinary people, no his heart through this power, there will certainly be cognitive gap in communication, so to speak clearly, the designer's common sense is not equal to the knowledge of engineers.

Flow Chart, UI flow, Wireframe These three documents are written in half to find something missing and back up is normal phenomenon, not once in place.

　　6. mockup

Visual manuscript ... Do it according to Grid and guideline, and then have Chettu and logo files to get.

The advantage is that Chettu and logo files have an external tool can do, even the designer as long as the original file, Chettu and marking documents are avocode or Zeplin solution.

The disadvantage is that if you do not know the technical constraints, do things that engineers can not use even if, they also white to the designer's scold.

"Why do you make out something and I draw a few px?"

Please! RWD can't be exactly the same as you painted, okay?

"Are you not capable or lazy?" my drawings come out. Why can't you do it? "

"Dry ..."

　　7. Prototype

The reader asked another question about Prototype:

Hi-Fidelity Prototyple is made after Chettu to Rd, so the idea is to make sure that there are any problems with the RD program before it is finished?

That high-fidelity Prototyple is just as long as the finished product can also operate it??

The purpose of doing Prototype is usually to test and verify, whether it is for the user to take a look at the user's operating conditions to do user testing, or the engineer to finish the program on the line before testing to see if there are worms or which side of the explosion. So it must be able to be manipulated, can not be the actual operation is how to test?

Prototype to be able to be manipulated!

Prototype to be able to be manipulated!

Prototype to be able to be manipulated!

All that cannot be manipulated is not Prototype.

Wireframe can do Prototype, low-fidelity prototype.

Mockup can do Prototype, high-fidelity prototypes.

Chettu called the Engineer to write the program registration do a, high-fidelity prototype.

Most of my own mockup after the Prototype test.

Because, Wireframe do low-fidelity prototype general users can not understand or feel, no way to do user testing =_=

Wireframe do Prototype at most internal test, but internal testing is often not accurate, engineers and designers of the mind and the general people are not the same, the measurement of the focus often crooked off ...

　　Supplementary notes

Another reader, after reading this article, had a feeling that the arraignment had been discussed with me.

And the boss today also talked about whether to have functional Map and UI flow and so on these processes, let us in the previous discussion of the time can be clarified, rather than in the visual version to modify or increase, he also bluntly that we do not have so much time to follow such a process, really powerless ...

Don't have that much time to follow this process? Of course, because we have to leave time behind and change it. ~~~~~

Time is always spent, to see whether it is spent in the early planning or later to fill the hole. said that there is no time to follow the process is there is no process can be photographed.

Want to force staff, reduce team morale, as far as possible, it doesn't matter, anyway, we all know that the disorderly change of the person even if they want to do not know what to have to open his mouth under the instructions.