Web design: A guide to drawing a web flowchart

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

Editor's note: This writer is designer Felix Ding, Ding. In the early days of the author's design career, it began to contact the flowchart. A good flowchart that can be used to understand requirements, parse complex business processes, and also facilitate interactive design.

In order to maximize the value of the flow chart, the paper focuses on the analysis of the beginning and end tag, interface, dialog box, decision Point, Conditional Branch, sub process, jump point, description, System behavior and other visual terms.

Objective

Early in my design career, I started drawing flowcharts. In the beginning, I have drawn the flow chart mostly simpler, the nodes in the diagram are not many, the logic is straightforward. So until I joined Alipay, the biggest online payment platform in China, I realized that the complexity of flowcharts was of great use. In Alipay, the complexity and rapid changes in business requirements and processes make it a challenging task to understand themselves. It was at this point that I began to rely on flowcharts to understand the requirements and to use this method for interactive design. Gradually, the flowchart shows its allure: the product manager likes it, and even engineers use it to guide development.

In the fall of 2008, I summed up my experience as an article titled "A Little Experience in drawing Web Flowcharts", published on my blog. The text immediately drew wide attention. Various recommendations, reprints, discussions and follow-up articles are frequently appearing online, and even people follow the method I mentioned in the article to create a flowchart template. Today, this article, published four years ago, still brings a lot of traffic to my personal homepage.

However, the above article has a more serious problem, making its content misleading: it does not use a visual glossary for describing information architecture and interactive design. To be honest, I did not notice the existence of such a well-known glossary, but rather created my own vocabulary and introduced it to the public. As a result, part of the article does not follow the Convention, which is not appropriate from the point of view of dry (Don t Repeat yourself, don't repeat yourself). A year after the article was published, I did point out the problem in another article, but unfortunately this time it did not attract as much attention as it did last time.

In addition, it has been several years since the article was published, and I have accumulated a lot of new experiences and ideas that I wish to share with you, especially English readers.

So now, as you can see, I have completed the English version, with the latest content of the "painting the Web flowchart of a little experience," and provided a homemade version of the template download.

Content Overview

This article covers the most important guidelines you should know about Web flowcharts:

Basic ideas

Visual Glossary

Example

Suggestions and Tips

Tools and Templates

1. Basic Ideas

What is a flowchart?

Flowchart, as the name suggests, is used to describe a system in different situations, how to respond to the user's state, decision and behavior of the diagram.

What kind of help can the flowchart give you?

Typically, flowcharts are useful for anyone who wants to create a process, no matter what process is created. For example, a factory can use a flowchart to tell its employees what the correct first aid process is when someone is injured. Of course, in this article, I'll just give you an example of a web design flowchart.

Flowcharts are a core tool for interaction designers and product managers. It can help you:

Design your product interaction process

Make sure your product is friendly at all times (even when a failure occurs that you have never considered before)

Help you integrate fragmented wireframes

Help you communicate with colleagues from different backgrounds: for example, to lead an engineer to develop

2. Visual Vocabulary

In the next few pages, I'll look at the visual vocabulary and how they are used:

Start and end

Interface

dialog box

Decision Points

Conditional Branch

Sub Process

Jump Point

Description

System behavior

Start and end

　　

A start and end point is where the beginning and end of an interaction is identified, and any flowchart must have a starting point and at least one endpoint.

Interface

　　

Interface elements are used to represent various user interfaces, such as forms or Web pages. The number of interfaces can be used to make identifiers that are useful in the collaboration process. For example, in a conference call, you can use "Node n" to express the interface element you want to indicate.

Also, designers can use this rule to name Wireframes. For example, "23.png" wireframes correspond to the 23rd interface. This greatly saves the reader of the document-for example, the engineer-to find the time for the corresponding wireframe.

dialog box

　　

With the advent of Web applications, web interaction has been transformed from linear to state based mode. Local page updates and single page interactions are becoming more common, and one of the most common forms is floating messages, such as error prompts that occur after a form validation error. However, it is not necessary or even awkward to make two almost identical wireframes. So, for this javascript-rendered modal or modeless dialog box, I specifically created a new element called the dialog box.

Note1: My friend Cao Xiaogang (@caoxg), a senior technical person and entrepreneur, uses the UML (Unified Modeling Language, Unified Modeling Language) state machine to describe the state in Web applications and the transitions between these states. I'm trying to turn this state machine into a simpler, more designer-suited icon.

Note2: If you're not designing web apps (specifically, not the ones that look like desktop apps running on browsers), I suggest you don't rely on JavaScript or even use it. The specific reason is of course the digression, and I will not describe it in detail here. If you want an answer and know my "japmag" design language, please visit: http://dingyu.me/portfolios/dingyu-me.

Decision Points

　　

A decision point is where the user needs to make a decision, usually when the process comes, and the interface waits for the user to decide where to go next.

As the figure shows, I usually let the positive selection ("Yes") flow downward, while the negative selection ("No") points to the right.

This rule provides a better reading experience because the rules themselves are clear and natural (as is the case in English).

This rule can also help the designer to plan the flowchart: the main line of the flowchart is left, the top is flowing, and the branch is on the right, so the whole flow chart structure is automatically left to right and up to the bottom.

Note: In fact, I have read the autobiography of former US president Geoge W.Bush "Decision Points" (Chinese version is "The Choice Moment"). Therefore, writing this page always reminds me of this book.

Conditional Branch

　　

Conditional branches appear to be similar to decision points, but they accomplish distinct functions: decisions are made explicitly by the user at the decision point, and for conditional branching, the appropriate path is automatically selected by the system in the background.

Sub Process

　　

Sub-processes are relatively independent processes that can be reused throughout the system. For example, you can package some of the same (frequently used) tasks-such as user authentication and access networks-into sub-processes, and then integrate them into larger or specific flowcharts.

If your flowchart contains a sub-process, it is best to submit all of the relevant sub flowcharts before someone asks you to do so.

Jump Point

　　

In some highly complex situations, we need the user to jump directly to another path, which requires a jump point.

As previously said, the number in the circle points to a node, which is the node that the jump point directs.

Obviously, a jump point is the end point of a path.

Description

　　

Description is a convenient way to save communication time. But don't get it wrong, you still need to communicate in a variety of ways with your flow-chart readers, just to describe the role of forgetting and prompting, which, in my experience, will actually save a lot of time.

System behavior

　　

System behavior refers to a series of background actions performed by the system. For example, if we want to record the data when a user fails to log in, we can represent the system behavior of "collecting error logs" in the flowchart.

As a designer or product manager, we don't have to pay for each of these backstage operations. But it is also necessary to put those related to the user experience, or those that are important to us, into the flowchart, in addition to the specification or documentation, to make it clear once again that everyone can appreciate the meaning.

Element Summary

　　

3. Examples

Log

The following figure is a simple login flowchart that describes how the system responds when a user logs on:

　　

Security

The following flowchart shows how to use elements such as system behavior and subprocesses. It comes from real projects, just because the copyright issue has been slightly modified by me.

　　

Other real examples

As you can see, no matter how complex the business logic is, flowcharts are used to describe how the system works.

　　

4. Suggestions and Tips

Based on the survey results, the guide line diagram

Users and their characteristics are the primary factors that guide the drawing of flowcharts. User surveys Find out: What is the user's past experience? What is the user's expectation? What are the usage scenarios and environments? These issues play a key role in the design of flowcharts.

In the same way, the flowchart has a guiding effect on the production of wireframe. Most of the time, once the flowchart is completed, the contents of the wireframe and even the layout are almost certain. Of course, this is precisely the purpose of the flowchart: the cable block diagram.

　　

Note: We will have other deliverables like use cases before the flowchart. This is not covered in the above picture because it is not the focus of this page.

Make your flowchart complete

The hardest part of making a flowchart is that it must encompass all possible scenarios, which, in my view, are challenging to deal with the business needs of complex logic. You'll be confronted with a lot of questions like, "What if," and sometimes it's not until the engineer tells you that you realize that you didn't think about it before! Therefore, the production of a complete flowchart not only requires you to understand the user, but also need you understand the business logic, and even familiar with the behind-the-scenes system

The best approach is to work closely with product managers, engineers, and other colleagues involved in business needs. I've seen a lot of interaction designers working in the middle of a job, and then encountering drastic challenges in product meetings. Don't do that again! Instead, work with project-related people to create flowcharts (and other deliverables), eliminate uncertainty from different angles, and make it more complete (so no one will challenge you anymore because each of them is part of the production).

Don't forget meta data

　　

From the perspective of collaboration and document management, you must at least name the flowchart and write down the author, version, and time.

In addition, even if your flowchart uses the visual glossary, your co-workers or customers may still not be able to understand the fancy elements, so please remember to add the legend.

5. Tools and Templates

Among many tools, I recommend omnigaffle and Microsoft Visio.

Omnigaffle

　　

For Mac users, OmniGraffle used to be, and is now the preferred tool. Not only is it rich in functionality, but most importantly, its user experience is the leading one. Many of the designers I know have switched Macs and used OmniGraffle.

Microsoft Visio

　　

Windows users can consider Visio, which has some built-in templates that may greatly reduce your work.

Template

Allen le based on my previous article published a series of Visio templates, very beautiful, I am grateful for this. You can find here: http://www.allenle.com/archives/1530.html.

OmniGraffle fans can download HTTP://GRAFFL etopia.com/stencils/905 to the template I made.

End

It took me about two weeks to write this article and it was more difficult to write in English, because English is not my mother tongue. It was the first time I had written in a non-native language, but I enjoyed it very much. For me, writing is a great way to sum up the past and keep creating, and I would be very happy if anyone could benefit from it. Any questions or suggestions, please leave a message here:

Http://dingyu.me/blog/the-definitive-guideto-web-flowcharts

Via:the Definitive Guide to Web flowcharts

PPT on the wall SlideShare inexplicably

Source: Lei Feng Net http://www.leiphone.com/flowcharts-web-design.html