How to draw a page flowchart

There should have been some students have read my "How To draw Business flowchart", and some students send letters come over, put forward hope I can talk about the page flowchart.

　　actually This topic I have been brewing, but has not been written out. To say the reason, in addition to lazy, actually reasons for another several:

1. The 1.5 of my work is built around the data platform, so it's not very versatile, so I can't give an example.

2. Although I have been painting the page flowchart, but, to tell the truth, my method belongs to the folk prescription more, is relying on my intuition to act, so let me summarize one or two general "rules" is more difficult.

What about today? Because the weather forecast is supposed to be lei heavy rain, so let me cancel the original plan, and I just stay at home, I think I would like to throw this brick, hoping to use this topic to stimulate more sharing and discussion.

The case ... Think of a simple and representative case is really not easy, it can not be too easy, too simple words almost no page, also can not be too complicated, too complicated I still hold live.

Just before soon in the house to tidy up the clothes, reluctant to throw but not wear, then nag a sentence, said if there is a place can submit under donation, someone to collect on the door. When I have a headache how to illustrate the page flow chart, I will probably yy a bit, the use of "public donations site" as an example to illustrate it.

The page flowchart is a good thing

Business process diagrams It is important to describe who did what under what conditions.

The page flow chart is specific to the site, system, product function design, performance page before the flow of the relationship-what the user through what the page and subsequent operations and pages.

There is no doubt that there are many stages from demand to solution. Demand analysis-who is the user? What are the user's problems or requirements? What functions to meet the needs or solve the problem? What are the priorities of these features? These questions need to be defined gradually, and at the same time you need to use some wireframes, prototypes or demos (which I think are all one thing) To help yourself refine these features and to get a thorough understanding of those needs.

It is certainly possible to draw a wireframe directly from a single page, but there may be a sudden entry into a single page, without first systematic planning, consider each function before and after, the context of each operation, it is easy to lose, missing important status or ignore the task should be simplified.

Here, a single page of the wireframe is like PPT, I personally do PPT before, in fact, must have a brain map or has been on a large paper on the directory structure, the focus of each page are written out, painted. So the real PPT is just doing it, can do very quickly, just because the heart has long been a spectrum. So before I draw the wireframe, I'm used to drawing the page flowchart first.

Benefits for designers or product managers:

Page Flowchart A page to help you complete the interactive story of the user and the system, it is easier for you to know what the potential mines are in the process, where the efficiency is low, to help systematize, global, comprehensive thinking

The basis for refining the workload, through the page flowchart can accurately assess how many pages are needed.

Focus: Each page in the page flowchart does not need to be refined-your goal is to plan the behavioral path rather than the single page interaction design, so there is no need to consider page content, layout. So you will focus more on the completion of the user goals and tasks. Don't get bogged down in details prematurely.

The key is soon. There may be dozens of of wireframes, you don't draw that fast, and once you get into the details, you need to dig deeper. But the page flowchart may be a matter of hours. You can have an idea of the whole project.

Benefits to Development engineers:

They'll be happy to have you in the absence of a prototype, the first time to take out the page flowchart and discuss the requirements. Believe me, it's more exciting than just a list of features or a business flowchart.

Can be an important basis for assessing the amount of work that can be done to help them be aware of the workload.

As an important reference for carrying out code work-especially front-end development, you must know what pages each operation points to.

They will map the functional logic and will give you more good advice.

Before drawing--

Back to the beginning we said the case--the charity donation website, this is just idea, really not enough to make it into a product. Now, with this topic, let's try to quickly turn an idea of random bursts into a product.

The first step: idea interrogation

The purpose of this step is to verify the degree of idea. What's the word?

1. Target users-not Martians-and have a certain scale.

2. Valuable to the target user-the recommended use of before&after (the term is not Google, Heidi coined) to describe clearly.

before--is the status quo analysis (demand, problem). What are the problems your target users are experiencing without your product? What are their clear and potential needs? What products are already in the market? Why didn't these products meet these needs and solve the problem? (Of course, internal products, there is no need to analyze too many competing goods, but the mind to go through these problems, no harm.) )

after--How does this product meet the demand and solve the problem? What are the potential benefits? can be divided into users, the company a number of dimensions explained.

3. Target users can use-have the appropriate capacity to reserve (no need to study, training can use your products), accessibility (you can reach these user groups, let them know that there is a product available)

This case in order to tie in with the page flow chart conveniently, simple objective description, you can also help diagnose whether the reliable.

Let's go under yy.

Suppose we're going to do a site like this, we have to have a couple of roles to play. Someone has to pick up the laundry and get in touch with the public organizations, social workers and charitable organizations so that they can be the first parties. It's not unfolding here.

Of course, someone must donate clothing, here, the assumption of positioning in the youth community, willing to buy also willing to donate, there is enough capacity to reserve can use the online system instead of waiting to collect waste of the big Uncle Yell.

Target users: Households in all residential areas, young people mainly, aged 22-35 years

Unreported:

Space contradictions: Small huxing house, storage space is limited, fashion groups, consumption space is very large, more like early taste, clothing and all kinds of life items only into not, there is not enough place to accommodate, must push Chen.

The way to deal with old clothes is limited: the only child group, and no family relatives can be presented. Even if they know where there is a disaster, there is no channel for the victims to donate; the second-hand market is energy-intensive and ineffective. ......

After:

can be submitted at any time to donate demand, waiting for someone to collect, easy to do not mind the eyes do not bother.

The donation brings additional benefits: 1. In exchange for public interest points (points can be used to subscribe to the magazine, enjoy the activities of business concessions, in exchange for books, etc.) 2. Public interest points can be offset by water and electricity ... All right, yy.

But write here, I found that the basic reliable bar, so continue to go down.

Step two: Feature List and priority

This step is to further clarify what to do and how the user will probably participate in the use.

Participate in this product is responsible for the clothing, but also donated clothing, a single watch this donation of clothing user role bar, lest accidentally lost.

Business story: Small A has a number of clothes to donate, he submitted a donation demand on the mobile phone, to specify what clothes they want to donate, the new and the old degree, how many, the number of ways to book the door time ... Small a submitted a donation, received an appointment call, about 3 days after the weekend afternoon door to pick up clothes. At the scheduled time, the door-to-door social worker checked the number of donations, took out the phone to find the small a donation of the list, confirmed received a few clothes, and sent points. Small a donated a few times clothes, found that they have a lot of public interest points, small a can be in the points channel can exchange books, also can exchange some of the benefits of cooperative business card, such as car wash, eat and so on.

What functions might be included in the story?

For donors:

Login/Registration: Support microblogging, QQ account login

Fill in and submit donation request: Donation content, picture, new and old degree, time of visiting (can choose Advance Telephone reservation)

View and track the status of donations: see past donated clothing and points received

Donate clothes and get points

Public Interest Points view: View their points, historical total points, redeemed and not convertible

Redeem: Redeem all participating public interest coupons.

Some examples of business flowcharts:

It can be said that the work of these two steps is necessary to draw a page flowchart preparation, we understand what to do, for who to do, what is the main function of the process? But because it is the Internet product, these processes must take the page as the carrier, for instance "submits the donation" is an activity, to the page design, we must use several pages to complete this one movement? What are the relationships between these pages?

Draw a page flowchart

Now that we know what the system should be and what we should provide, we need to assign these features and content to different pages.

Page Flowchart Brief:

page = action + content, action is required to trigger the user, including links, buttons, forms and so on. Through these actions, the user sees different content on the same page, or jumps to another page.

Page Flowchart Objective: To express the user's different operating instructions under different page flow relationship.

Page Flowchart elements: page, operation or state, link wiring

There are also categories of pages: Please note that some actions may not take you to a real page, but it is possible to send a text message, send an email, etc., which also need to be displayed.

How do I start drawing?

That is, like telling a story, the simplest is to start with the user's first initial page.

Or someone asked: my user role may not use some of the operation, all roads to Rome, he chose only one of the paths, then how can I put all the pages are painted?

My experience is: do not subdivide the user type, but based on the page to do a poor operation, based on the assumptions to determine what the user clicks to where.

In this case, I want the user's first page to be the homepage.

He has two predominantly guided operations: 1. Can view donations or submit a new donation. 2. You can view public interest points or redeem points.

"Some Tips":

The page is generally rectangular, the page to reflect the key content block and the main operation.

A rounded rectangle is placed on the connector to represent each operation. A page can lead to multiple operations pointing to different pages.

Only to reflect the system, the user's own judgment does not need to be reflected-for example, the user to the details of the page is to buy it? Or do you want to go to the collection? These direct actions point to different pages.

There are also not suitable for the page flow chart to performance of the site, mainly because the operation of the class is more than a step-by-step process, but a parallel jump, such as Portal class site to view the news use cases, such as music sites and so on. In this case, it is best to use the site map to express page dependencies.

Perhaps you will notice that the operation in the image above may be a real button or text link on the page at design time, yes.

However, some of the page flow diagram may not be able to complete the operation, the page to connect, the following figure is a 3 years ago I painted a page flowchart (please note that this flowchart does not meet the few rules I said). When the user arrives at the details page, what might be his next move? The details page has too many operations ... Pay, join the shopping cart, join the collection, recommend to friends, leave, and then stroll ... The following figure "later" is not an operation, "the comparison and then decide" is not an operation, which is like what? Is it an artificial classification of operations or a tendency to express the intention of the user? When I drew this picture intuitively, the intention was to find out if there was room for optimization in the shopping path, So you want to enumerate the intentions of the user before the operation. If users like this product, what might they want to do? What features do we offer to continue down the road? What do they want to do when they don't like it? What do we do now?

So, we can also add "intent" to the page flowchart, you can use the shape you like to express "intent", such as ellipses.

Finally-

Someone must ask what the drawing tools are ...

The donation case that I put in the article, I use PPT to draw conveniently.

If the space does not need to be too big, completely can use PPT to draw, save as Picture, import into Axure Prototype tool, and then add a transparent rectangle on each page, then Added link to the corresponding wireframe page.

Previously also used axure to draw a page flowchart, such as: (This example, the Operation button is not put on the link line, because this use case page number is not much, the page can be larger, the connector can be directly from the operation of the page to draw)

The last thing I want to say is that the page flowchart is about getting things clear, telling the page clearly, not having to chase too many rules and regulations, and you can express it in the most comfortable way. The way in the article, I am more accustomed to, but also welcome you to exchange students how to draw the page flowchart.