Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The definitive guide to Web flowcharts


Published on

About four years ago, I wrote a blog post about Web flowcharts design. It was, and still is, very popular. Today, I'm thrilled to publish the long-waited follow-up article: The definitive guide to Web flowcharts.

The new guide is pretty comprehensive. It covers the most common topics about flowcharts design, from basic ideas to visual vocabulary, from examples to suggestions and tips, from tools for drawing flowcharts to templates and stencils.

Find more information at

Published in: Design, Technology

The definitive guide to Web flowcharts

  1. The definitive guide to V2Web flowchartsFelix Dinghttp://dingyu.meJuly 25, 2012
  2. Felix DingAn old-school Web designer who loves alternative rock, classical guitar, reading and writing.
  3. 1 / 24Special Thanks To Larry Kern Everett, Washington Mr. Kern is my English teacher. He spent hours helping me correcting this tutorial. I couldn’t have done this without his effort. I would like to thank him for everything he has done for me.
  4. 1 / 24PrefaceI started to draw flowcharts from the very beginning of my design career. In the early days, the flowcharts Idrew were simple, the number of nodes were limited, and the logics were straightforward. Thus, I didn’trealize that the complex flowcharts could be so useful until I joined, the largest online paymentplatform in China. Here business logics and requirements were so complicated and fast-changing thatunderstanding the business itself was very challenging. That was when I started to rely on flowcharts tolearn the requirements, and to design the interactions. It worked like a charm. The product manager likedit, and the engineers used it as a guide to program the Web pages.In the fall of 2008, I summarized my experiences into a tutorial, titled as "Some experience on drawing Webflowcharts", and published it on my blog. The article instantly gained a wide attention. Recommendations,reprints, discussions, and follow-up blog posts emerged online and offline. Someone even created a set offlowchart templates following the same design style I introduced in the tutorial. Today, the article that waspublished almost four years ago still leads a lot of traffic to my personal site.
  5. PrefaceHowever, the tutorial has a major problem which makes the content misleading: It didnt use "Visualvocabulary" for "describing information architecture and interaction design". Frankly, I wasn’t aware of thisvocabulary when I was writing the tutorial; instead, I created my own vocabulary and presented the idea tothe mass. Therefore, some of the content didn’t follow the convention, which is not appropriate from the“Don’t Repeat Yourself” perspective. I did write a new blog post one year later pointing out the flaw but ithasnt drawn as much attention as the original post.Besides, its been years already and I have gained new experiences and thoughts that I would like to sharewith the community, especially with the English readers.So here you have it, the English version of "Some experience on drawing Web flowcharts", with updatedcontent and home-brew templates ready for download.
  6. Table of contentsThis guide covers the most important things you should know about Web flowcharts, which include: • Basic Idea • Visual Vocabulary • Examples • Suggestions and Tips • Tools and Templates
  7. 1Basic Idea
  8. What is a flowchart?A flowchart, as its name indicates, is just a chart describing how a system, under different circumstances,reacts to users status, decisions and behaviors.
  9. How do flowcharts help you?In general terms, flowcharts can be useful to anyone who wants to create a flow for almost anything. Forexample, a factory can use a flowchart to tell its workers what are the right procedures when someone getshurt. However, in this guide, I will only talk about flowcharts on Web design.A flowchart is an essential tool for interaction designers as well as product managers. It helps you to: • design the interaction flow of your product • make sure your product is still friendly to users, even in rare malfunction cases which you wouldn’t have thought about before • organize and connect scattered wireframes • collaborate with your colleagues from different disciplines; for example, guide engineers on developing
  10. 2Visual Vocabulary
  11. Visual VocabularyIn the following few slides I will introduce the visual vocabulary, as well as the use of these elements.These elements include: • Start and End Point • Interface • Dialog • Decision Point • Conditional Branches • Sub-Flow • Jump Point • Description • System Action
  12. Start and End Point A Start Point and an End Point are where users start an interaction flow and exit. Every flowchart should have only one Start Point and at least one End Point.
  13. Interface An Interface element represents user interfaces such as a window, or a Web page. The number in an Interface node is the identifier, which can be very useful in collaborations. For example, you can reference an Interface element by saying "Node X" in a conference call. What’s more, designers can name the wireframes by following the same convention. For instance, "23.png" for the Interface element 23. It helps document readers, like engineers, to save some time finding the right wireframe.
  14. Dialog As Web apps are emerging, Web interaction is migrating from linear pattern to state-based pattern. Partial page update and in-page interactions are more and more common. One of the most common scenarios is to display a floating message, like form validation errors. However, it’s unnecessary and even awkward to make two almost identical wireframes. Therefore, I specifically create a new type of element called Dialog for Javascript-rendered modal or modal-less dialogs. Note 1: My friend Cao Xiao Gang (@caoxg), an aged developer and an entrepreneur, uses UML State Machine to describe the states and the transitions of these states for Web apps. I’m thinking of finding a way to transform this State Machine into a simplified, designer-friendly diagram. Note 2: If what are you designing is not a Web app (to be specific, not something that behaves like a desktop application but runs in browsers), I would suggest that you not rely on Javascript, nor use it at all! This, of course, is another topic, thus I won’t elaborate about it here. Find the reasons and my “JapMag” design language at .
  15. Decision Point A Decision Point is where users make decisions. Usually at this point, the interface is waiting for its user to choose where to go next. Generally I would flow the positive paths down, and direct the negative paths right, as shown in the picture on the left. This convention makes the reading experience much better since the convention is clear and natural (well, since English is written in this way). It also helps designers in planning the flowcharts: the major path is on the left, from top to bottom, while branches are on the right, which together extend the flowcharts from left to right, top to bottom. Note: I actually have read the book, Decision Points, written by George W. Bush, the former president of the United States. Writing this slide keeps reminding me about the book.
  16. Conditional BranchesConditional Branches look like Decision Points, but they behaves quite differently. In Decision Points, thedecisions are made explicitly by users, while in Conditional Branches, its the system that chooses theright branch automatically in the background.
  17. Sub-Flow A Sub-Flow is a flowchart that is relatively independent and re-usable across the whole system. For example, you may want to wrap some common tasks, like User Authentication or Connecting Networks, into Sub-Flows, and integrate these into larger and/or specific flowcharts. If the flowchart you are going to deliver contains Sub-flows, you probably want to deliver all the Sub-flowcharts as references as well, before someone asks about it.
  18. Jump Point In some highly complex situations, we need our users to jump to another path directly. That’s when you use Jump Points. As mentioned before, the number in the circle is the identifier of a node, and it represents the node that this Jump Point leads to. Obviously, a Jump Point is the end of a path.
  19. DescriptionDescription is a handy way to save time in your communications. Dont get me wrong, you still need allkinds of communications with your flowcharts readers, but descriptions can be used as memos andtips, which, from my experiences, will really save much time.
  20. System Action A System Action represents a background task done by the system. For example, we may want to collect the data when a user fails to sign in, and we do this by putting a System Action titled as "Collect Error Log" on the flowchart. We, as designers or product managers, of course, dont have to put every background task on flowcharts. Instead, we only do those that are User Experience related, or those that are so vital to us that, besides describing them in the specs or documentations, we need to declare them again to make sure everyone will remember them.
  21. Elements Wrap Up
  22. 3Examples
  23. Log InA simple log in flow that describes how a system should respond when someone wants to log in.
  24. Security CheckThis flowchart shows how to use elements like System Action and Sub-flow. The flowchart is from areal project, but changed by me for copyright reasons.
  25. Other real-world examplesAs you can see, flowcharts are able to describe how a system works, no matter how complexbusiness logics can be.
  26. 4Suggestions and Tips
  27. Based on research,the guide to wireframesUsers and their characteristics are the first thing to consider when drawing a flowchart. Based on thefindings of user research, what are the users’ past experiences and expectations? How about the scenariosand contexts? This kind of question plays a key role in flowchart design.A flowchart is also a guide to make wireframes. Most of the time, as soon as your flowchart is done, thecontent and even layout of each wireframe is set. This is, of course, what a flowchart essentially does:connects wireframes. Research Flowcharts WireframesNote: Usually we have other deliverables before flowcharts, such as Use Cases. The chart above does’t includethose because they are not the key points in the slide.
  28. Make your flowchartscomprehensiveOne major difficulty when drawing a flowchart is, you have to cover all the possible situations, which, frommy point of view, is very challenging under complex business requirements. You may encounter many“What if” questions and some of the situations you wouldn’t know until some engineers tell you! Drawing acomprehensive flowchart requires you not only to understand users, but also to know business logics, andeven to be familiar with system mechanism behind the scenes!The best way to solve this is to work closely with Product Managers, Engineers, and others colleagues whoare related to the business requirements. I see so many interaction designers work all on their own, andthen get fierce challenges in meetings. Don’t do that again. Instead, collaborate with the ones who areinvolved in the project, work together on your flowcharts (and other deliverables), and eliminateuncertainties from different angles, so that you can make your flowcharts comprehensive. (No one willchallenge you again because it’s also his or her work)
  29. Don’t forget MetaFrom the collaboration and documents management perspective, you should leave at least a name, anauthor, a version number, and a date on your flowchart.Besides, even if your flowcharts followed the conventional visual vocabulary, your colleagues or clientsmay still have difficulties understanding the fancy elements. So do remember to add a legend.
  30. 5Tools and Templates
  31. ToolsAmong all tools, I recommend OmniGraffle and Microsoft Visio. OmniGraffle For Mac users, OmniGraffle was, and still is, the first choice. It has a rich features set, and most importantly, the best user experience in the crowd. Most designers I know have already switched to Macs and consequently use OmniGraffle. Microsoft VisioWindows users may consider Microsoft’s Visio. It has several templatesbuilt-in which probably can make your work a lot easier.
  32. TemplatesAllen Le has created a set of templates for Microsoft Visio based on my origin post. It’s beautiful and Iappreciate his work. You can find it at: .OmniGraffle fans can download the templates made by me on GraffleTopia: .
  33. That’s it!Composing this guide took me almost two weeks, and writing a tutorial fully in English made things evenharder, as I’m not a native English speaker. This is my very first time to write a tutorial in another language,but I really enjoy doing it. To me, writing is a great opportunity to summarize the past then createsomething new, and I would be more than happy if someone else could also benefit from it.For any questions or suggestions, please leave a comment at: .FelixJuly 25, 2012