SlideShare ist ein Scribd-Unternehmen logo
1 von 33
Downloaden Sie, um offline zu lesen
The definitive guide to
                         V2

Web flowcharts
Felix Ding
http://dingyu.me
July 25, 2012
Felix Ding
An old-school Web designer who loves alternative rock, classical guitar, reading and writing.
http://dingyu.me
felixding@gmail.com
@felixding_
1 / 24




Special 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.
1 / 24




Preface
I started to draw flowcharts from the very beginning of my design career. In the early days, the flowcharts I
drew were simple, the number of nodes were limited, and the logics were straightforward. Thus, I didn’t
realize that the complex flowcharts could be so useful until I joined Alipay.com, the largest online payment
platform in China. Here business logics and requirements were so complicated and fast-changing that
understanding the business itself was very challenging. That was when I started to rely on flowcharts to
learn the requirements, and to design the interactions. It worked like a charm. The product manager liked
it, 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 Web
flowcharts", 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 of
flowchart templates following the same design style I introduced in the tutorial. Today, the article that was
published almost four years ago still leads a lot of traffic to my personal site.
Preface
However, the tutorial has a major problem which makes the content misleading: It didn't use "Visual
vocabulary" for "describing information architecture and interaction design". Frankly, I wasn’t aware of this
vocabulary when I was writing the tutorial; instead, I created my own vocabulary and presented the idea to
the 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 it
hasn't drawn as much attention as the original post.

Besides, it's been years already and I have gained new experiences and thoughts that I would like to share
with the community, especially with the English readers.

So here you have it, the English version of "Some experience on drawing Web flowcharts", with updated
content and home-brew templates ready for download.
Table of contents
This 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
1
Basic Idea
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.
How do flowcharts help you?
In general terms, flowcharts can be useful to anyone who wants to create a flow for almost anything. For
example, a factory can use a flowchart to tell its workers what are the right procedures when someone gets
hurt. 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
2
Visual Vocabulary
Visual Vocabulary
In 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
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.
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.
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 http://dingyu.me/portfolios/dingyu-me .
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.
Conditional Branches
Conditional Branches look like Decision Points, but they behaves quite differently. In Decision Points, the
decisions are made explicitly by users, while in Conditional Branches, it's the system that chooses the
right branch automatically in the background.
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.
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.
Description
Description is a handy way to save time in your communications. Don't get me wrong, you still need all
kinds of communications with your flowcharts readers, but descriptions can be used as memos and
tips, which, from my experiences, will really save much time.
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, don't 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.
Elements Wrap Up
3
Examples
Log In
A simple log in flow that describes how a system should respond when someone wants to log in.
Security Check
This flowchart shows how to use elements like System Action and Sub-flow. The flowchart is from a
real project, but changed by me for copyright reasons.
Other real-world examples
As you can see, flowcharts are able to describe how a system works, no matter how complex
business logics can be.
4
Suggestions and Tips
Based on research,
the guide to wireframes
Users and their characteristics are the first thing to consider when drawing a flowchart. Based on the
findings of user research, what are the users’ past experiences and expectations? How about the scenarios
and 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, the
content and even layout of each wireframe is set. This is, of course, what a flowchart essentially does:
connects wireframes.




          Research                            Flowcharts                           Wireframes




Note: Usually we have other deliverables before flowcharts, such as Use Cases. The chart above does’t include
those because they are not the key points in the slide.
Make your flowcharts
comprehensive
One major difficulty when drawing a flowchart is, you have to cover all the possible situations, which, from
my 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 a
comprehensive flowchart requires you not only to understand users, but also to know business logics, and
even 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 who
are related to the business requirements. I see so many interaction designers work all on their own, and
then get fierce challenges in meetings. Don’t do that again. Instead, collaborate with the ones who are
involved in the project, work together on your flowcharts (and other deliverables), and eliminate
uncertainties from different angles, so that you can make your flowcharts comprehensive. (No one will
challenge you again because it’s also his or her work)
Don’t forget Meta




From the collaboration and documents management perspective, you should leave at least a name, an
author, a version number, and a date on your flowchart.

Besides, even if your flowcharts followed the conventional visual vocabulary, your colleagues or clients
may still have difficulties understanding the fancy elements. So do remember to add a legend.
5
Tools and Templates
Tools
Among 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 Visio

Windows users may consider Microsoft’s Visio. It has several templates
built-in which probably can make your work a lot easier.
Templates
Allen Le has created a set of templates for Microsoft Visio based on my origin post. It’s beautiful and I
appreciate his work. You can find it at: http://www.allenle.com/archives/1530.html .

OmniGraffle fans can download the templates made by me on GraffleTopia:           http://graffletopia.com/
stencils/905 .
That’s it!
Composing this guide took me almost two weeks, and writing a tutorial fully in English made things even
harder, 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 create
something 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: http://dingyu.me/blog/the-definitive-guide-
to-web-flowcharts .



Felix
July 25, 2012

Weitere ähnliche Inhalte

Was ist angesagt?

Top 8 subsea engineer resume samples
Top 8 subsea engineer resume samplesTop 8 subsea engineer resume samples
Top 8 subsea engineer resume samplesporisjom
 
Piping Introduction.pptx
Piping Introduction.pptxPiping Introduction.pptx
Piping Introduction.pptxSairajJakal2
 
Top 5 commissioning engineer interview questions with answers
Top 5 commissioning engineer interview questions with answersTop 5 commissioning engineer interview questions with answers
Top 5 commissioning engineer interview questions with answersbantdaisy35
 
AVEVA’s ERM, Efficient Planning and Management of Project Resources
AVEVA’s ERM, Efficient Planning and Management of Project Resources AVEVA’s ERM, Efficient Planning and Management of Project Resources
AVEVA’s ERM, Efficient Planning and Management of Project Resources AVEVA Group plc
 

Was ist angesagt? (7)

Top 8 subsea engineer resume samples
Top 8 subsea engineer resume samplesTop 8 subsea engineer resume samples
Top 8 subsea engineer resume samples
 
Common MCF Bypass Line for Multiple Pumps
Common MCF Bypass Line for Multiple PumpsCommon MCF Bypass Line for Multiple Pumps
Common MCF Bypass Line for Multiple Pumps
 
Piping Introduction.pptx
Piping Introduction.pptxPiping Introduction.pptx
Piping Introduction.pptx
 
SP3D_Course Content.pdf
SP3D_Course Content.pdfSP3D_Course Content.pdf
SP3D_Course Content.pdf
 
Top 5 commissioning engineer interview questions with answers
Top 5 commissioning engineer interview questions with answersTop 5 commissioning engineer interview questions with answers
Top 5 commissioning engineer interview questions with answers
 
AVEVA’s ERM, Efficient Planning and Management of Project Resources
AVEVA’s ERM, Efficient Planning and Management of Project Resources AVEVA’s ERM, Efficient Planning and Management of Project Resources
AVEVA’s ERM, Efficient Planning and Management of Project Resources
 
Piping interview
Piping interviewPiping interview
Piping interview
 

Andere mochten auch

Creating a Website Sitemap
Creating a Website SitemapCreating a Website Sitemap
Creating a Website SitemapJeannie Melinz
 
Sitemap Templates by Creately
Sitemap Templates by CreatelySitemap Templates by Creately
Sitemap Templates by CreatelyCreately
 
Website Architecture: Sitemap & Wireframes
Website Architecture: Sitemap & WireframesWebsite Architecture: Sitemap & Wireframes
Website Architecture: Sitemap & WireframesAmy Lamp
 
Flowchart & layout website
Flowchart & layout websiteFlowchart & layout website
Flowchart & layout websitewanamateur_48
 
Website Layout and Structure
Website Layout and StructureWebsite Layout and Structure
Website Layout and StructureMichael Zinniger
 
What is UX? Or How We're Learning to Build the Right Thing, The Right Way
 What is UX? Or How We're Learning to Build the Right Thing, The Right Way What is UX? Or How We're Learning to Build the Right Thing, The Right Way
What is UX? Or How We're Learning to Build the Right Thing, The Right WayBen Melbourne
 
Event Management System Document
Event Management System Document Event Management System Document
Event Management System Document LJ PROJECTS
 
Algorithms and Flowcharts
Algorithms and FlowchartsAlgorithms and Flowcharts
Algorithms and FlowchartsDeva Singh
 
Search Engine Optimization PPT
Search Engine Optimization PPT Search Engine Optimization PPT
Search Engine Optimization PPT Kranthi Shaik
 
Introduction to SEO
Introduction to SEOIntroduction to SEO
Introduction to SEORand Fishkin
 
Introduction to NSF-sponsored Big Data Education Project
Introduction to NSF-sponsored Big Data Education ProjectIntroduction to NSF-sponsored Big Data Education Project
Introduction to NSF-sponsored Big Data Education ProjectBig Data Education
 
Big Data and Clouds: Research and Education
Big Data and Clouds: Research and EducationBig Data and Clouds: Research and Education
Big Data and Clouds: Research and EducationGeoffrey Fox
 
Omnigraffle Tutorial
Omnigraffle TutorialOmnigraffle Tutorial
Omnigraffle TutorialJackson Fox
 
An Introduction To Python - Problem Solving: Flowcharts & Test Cases, Boolean...
An Introduction To Python - Problem Solving: Flowcharts & Test Cases, Boolean...An Introduction To Python - Problem Solving: Flowcharts & Test Cases, Boolean...
An Introduction To Python - Problem Solving: Flowcharts & Test Cases, Boolean...Blue Elephant Consulting
 
White Paper: Agile Web Development & The Scrum Process
White Paper: Agile Web Development & The Scrum ProcessWhite Paper: Agile Web Development & The Scrum Process
White Paper: Agile Web Development & The Scrum ProcessMagic Logix
 
Jordan on the social media map
Jordan on the social media mapJordan on the social media map
Jordan on the social media mapMais AbuSalah
 
Creating Usable Websites with Interaction Design Patterns: Do It With Drupal!
Creating Usable Websites with Interaction Design Patterns: Do It With Drupal!Creating Usable Websites with Interaction Design Patterns: Do It With Drupal!
Creating Usable Websites with Interaction Design Patterns: Do It With Drupal!Karen McGrane
 

Andere mochten auch (20)

Creating a Website Sitemap
Creating a Website SitemapCreating a Website Sitemap
Creating a Website Sitemap
 
Sitemap Templates by Creately
Sitemap Templates by CreatelySitemap Templates by Creately
Sitemap Templates by Creately
 
Website Architecture: Sitemap & Wireframes
Website Architecture: Sitemap & WireframesWebsite Architecture: Sitemap & Wireframes
Website Architecture: Sitemap & Wireframes
 
Flowchart & layout website
Flowchart & layout websiteFlowchart & layout website
Flowchart & layout website
 
Website Layout and Structure
Website Layout and StructureWebsite Layout and Structure
Website Layout and Structure
 
Creating a Website: Design and Layout
Creating a Website: Design and LayoutCreating a Website: Design and Layout
Creating a Website: Design and Layout
 
A primer on ux design
A primer on ux designA primer on ux design
A primer on ux design
 
What is UX? Or How We're Learning to Build the Right Thing, The Right Way
 What is UX? Or How We're Learning to Build the Right Thing, The Right Way What is UX? Or How We're Learning to Build the Right Thing, The Right Way
What is UX? Or How We're Learning to Build the Right Thing, The Right Way
 
Event Management System Document
Event Management System Document Event Management System Document
Event Management System Document
 
Algorithms and Flowcharts
Algorithms and FlowchartsAlgorithms and Flowcharts
Algorithms and Flowcharts
 
Algorithm and flowchart
Algorithm and flowchartAlgorithm and flowchart
Algorithm and flowchart
 
Search Engine Optimization PPT
Search Engine Optimization PPT Search Engine Optimization PPT
Search Engine Optimization PPT
 
Introduction to SEO
Introduction to SEOIntroduction to SEO
Introduction to SEO
 
Introduction to NSF-sponsored Big Data Education Project
Introduction to NSF-sponsored Big Data Education ProjectIntroduction to NSF-sponsored Big Data Education Project
Introduction to NSF-sponsored Big Data Education Project
 
Big Data and Clouds: Research and Education
Big Data and Clouds: Research and EducationBig Data and Clouds: Research and Education
Big Data and Clouds: Research and Education
 
Omnigraffle Tutorial
Omnigraffle TutorialOmnigraffle Tutorial
Omnigraffle Tutorial
 
An Introduction To Python - Problem Solving: Flowcharts & Test Cases, Boolean...
An Introduction To Python - Problem Solving: Flowcharts & Test Cases, Boolean...An Introduction To Python - Problem Solving: Flowcharts & Test Cases, Boolean...
An Introduction To Python - Problem Solving: Flowcharts & Test Cases, Boolean...
 
White Paper: Agile Web Development & The Scrum Process
White Paper: Agile Web Development & The Scrum ProcessWhite Paper: Agile Web Development & The Scrum Process
White Paper: Agile Web Development & The Scrum Process
 
Jordan on the social media map
Jordan on the social media mapJordan on the social media map
Jordan on the social media map
 
Creating Usable Websites with Interaction Design Patterns: Do It With Drupal!
Creating Usable Websites with Interaction Design Patterns: Do It With Drupal!Creating Usable Websites with Interaction Design Patterns: Do It With Drupal!
Creating Usable Websites with Interaction Design Patterns: Do It With Drupal!
 

Ähnlich wie The definitive guide to Web flowcharts

20מאת יוסי אמרם Steps To Better Wireframin מצגת
20מאת יוסי אמרם Steps To Better Wireframin מצגת20מאת יוסי אמרם Steps To Better Wireframin מצגת
20מאת יוסי אמרם Steps To Better Wireframin מצגתAMRAMy
 
Building complex sites with Joomla
Building complex sites with JoomlaBuilding complex sites with Joomla
Building complex sites with JoomlaPaul Delbar
 
Accessibility in pattern libraries
Accessibility in pattern librariesAccessibility in pattern libraries
Accessibility in pattern librariesRuss Weakley
 
Accessibility in Pattern Libraries
Accessibility in Pattern LibrariesAccessibility in Pattern Libraries
Accessibility in Pattern LibrariesRuss Weakley
 
Professional web development with libraries
Professional web development with librariesProfessional web development with libraries
Professional web development with librariesChristian Heilmann
 
Scripted navigation ideas for Oracle Service Cloud
Scripted navigation ideas for Oracle Service CloudScripted navigation ideas for Oracle Service Cloud
Scripted navigation ideas for Oracle Service CloudMark Kehoe
 
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014MoodLabs
 
From Website To Webapp Shane Morris
From Website To Webapp   Shane MorrisFrom Website To Webapp   Shane Morris
From Website To Webapp Shane MorrisShane Morris
 
Approaches to Enhancing the User Experience
Approaches to Enhancing the User ExperienceApproaches to Enhancing the User Experience
Approaches to Enhancing the User ExperienceMichael McGarel
 
Smart Tips for Wireframing by Indrajit basu
Smart Tips for Wireframing by Indrajit basuSmart Tips for Wireframing by Indrajit basu
Smart Tips for Wireframing by Indrajit basuNASSCOM
 
Technical-design-for-Angular-apps.pdf
Technical-design-for-Angular-apps.pdfTechnical-design-for-Angular-apps.pdf
Technical-design-for-Angular-apps.pdfSakthivelPeriyasamy6
 
Week4 : Wireframes and Sketching
Week4 : Wireframes and SketchingWeek4 : Wireframes and Sketching
Week4 : Wireframes and SketchingMark Zelis
 
Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Shah Muhammad Baig
 
BDD with SpecFlow and Selenium
BDD with SpecFlow and SeleniumBDD with SpecFlow and Selenium
BDD with SpecFlow and SeleniumLiraz Shay
 

Ähnlich wie The definitive guide to Web flowcharts (20)

20מאת יוסי אמרם Steps To Better Wireframin מצגת
20מאת יוסי אמרם Steps To Better Wireframin מצגת20מאת יוסי אמרם Steps To Better Wireframin מצגת
20מאת יוסי אמרם Steps To Better Wireframin מצגת
 
Building complex sites with Joomla
Building complex sites with JoomlaBuilding complex sites with Joomla
Building complex sites with Joomla
 
Chapter 4 interaction design
Chapter 4 interaction designChapter 4 interaction design
Chapter 4 interaction design
 
Accessibility in pattern libraries
Accessibility in pattern librariesAccessibility in pattern libraries
Accessibility in pattern libraries
 
Accessibility in Pattern Libraries
Accessibility in Pattern LibrariesAccessibility in Pattern Libraries
Accessibility in Pattern Libraries
 
Professional web development with libraries
Professional web development with librariesProfessional web development with libraries
Professional web development with libraries
 
Scripted navigation ideas for Oracle Service Cloud
Scripted navigation ideas for Oracle Service CloudScripted navigation ideas for Oracle Service Cloud
Scripted navigation ideas for Oracle Service Cloud
 
Designing usable forms
Designing usable formsDesigning usable forms
Designing usable forms
 
Business Analyst
Business AnalystBusiness Analyst
Business Analyst
 
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014
 
From Website To Webapp Shane Morris
From Website To Webapp   Shane MorrisFrom Website To Webapp   Shane Morris
From Website To Webapp Shane Morris
 
Approaches to Enhancing the User Experience
Approaches to Enhancing the User ExperienceApproaches to Enhancing the User Experience
Approaches to Enhancing the User Experience
 
Smart Tips for Wireframing by Indrajit basu
Smart Tips for Wireframing by Indrajit basuSmart Tips for Wireframing by Indrajit basu
Smart Tips for Wireframing by Indrajit basu
 
Design system for new O2 CRM and web apps
Design system for new O2 CRM and web appsDesign system for new O2 CRM and web apps
Design system for new O2 CRM and web apps
 
Technical-design-for-Angular-apps.pdf
Technical-design-for-Angular-apps.pdfTechnical-design-for-Angular-apps.pdf
Technical-design-for-Angular-apps.pdf
 
DOC
DOCDOC
DOC
 
Week4 : Wireframes and Sketching
Week4 : Wireframes and SketchingWeek4 : Wireframes and Sketching
Week4 : Wireframes and Sketching
 
Interaction-design-basic.pptx
Interaction-design-basic.pptxInteraction-design-basic.pptx
Interaction-design-basic.pptx
 
Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014
 
BDD with SpecFlow and Selenium
BDD with SpecFlow and SeleniumBDD with SpecFlow and Selenium
BDD with SpecFlow and Selenium
 

Mehr von FelixDing

闲谈用户体验V0.3.20100701
闲谈用户体验V0.3.20100701闲谈用户体验V0.3.20100701
闲谈用户体验V0.3.20100701FelixDing
 
丁宇-开场
丁宇-开场丁宇-开场
丁宇-开场FelixDing
 
Web产品在移动终端的应用和未来
Web产品在移动终端的应用和未来Web产品在移动终端的应用和未来
Web产品在移动终端的应用和未来FelixDing
 
范凯 运营专业型社区的经验和反思
范凯 运营专业型社区的经验和反思范凯 运营专业型社区的经验和反思
范凯 运营专业型社区的经验和反思FelixDing
 
Ami zoom in-zoom_out
Ami zoom in-zoom_outAmi zoom in-zoom_out
Ami zoom in-zoom_outFelixDing
 
西乔 理性的设计
西乔 理性的设计西乔 理性的设计
西乔 理性的设计FelixDing
 
谭思亮-开放平台
谭思亮-开放平台谭思亮-开放平台
谭思亮-开放平台FelixDing
 
人本设计沙龙-曹晓刚-人间微社区的设计与实现
人本设计沙龙-曹晓刚-人间微社区的设计与实现人本设计沙龙-曹晓刚-人间微社区的设计与实现
人本设计沙龙-曹晓刚-人间微社区的设计与实现FelixDing
 
Apple和它的设计-文字注释版-v0.2
Apple和它的设计-文字注释版-v0.2Apple和它的设计-文字注释版-v0.2
Apple和它的设计-文字注释版-v0.2FelixDing
 

Mehr von FelixDing (9)

闲谈用户体验V0.3.20100701
闲谈用户体验V0.3.20100701闲谈用户体验V0.3.20100701
闲谈用户体验V0.3.20100701
 
丁宇-开场
丁宇-开场丁宇-开场
丁宇-开场
 
Web产品在移动终端的应用和未来
Web产品在移动终端的应用和未来Web产品在移动终端的应用和未来
Web产品在移动终端的应用和未来
 
范凯 运营专业型社区的经验和反思
范凯 运营专业型社区的经验和反思范凯 运营专业型社区的经验和反思
范凯 运营专业型社区的经验和反思
 
Ami zoom in-zoom_out
Ami zoom in-zoom_outAmi zoom in-zoom_out
Ami zoom in-zoom_out
 
西乔 理性的设计
西乔 理性的设计西乔 理性的设计
西乔 理性的设计
 
谭思亮-开放平台
谭思亮-开放平台谭思亮-开放平台
谭思亮-开放平台
 
人本设计沙龙-曹晓刚-人间微社区的设计与实现
人本设计沙龙-曹晓刚-人间微社区的设计与实现人本设计沙龙-曹晓刚-人间微社区的设计与实现
人本设计沙龙-曹晓刚-人间微社区的设计与实现
 
Apple和它的设计-文字注释版-v0.2
Apple和它的设计-文字注释版-v0.2Apple和它的设计-文字注释版-v0.2
Apple和它的设计-文字注释版-v0.2
 

Kürzlich hochgeladen

Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 

Kürzlich hochgeladen (19)

Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 

The definitive guide to Web flowcharts

  • 1. The definitive guide to V2 Web flowcharts Felix Ding http://dingyu.me July 25, 2012
  • 2. Felix Ding An old-school Web designer who loves alternative rock, classical guitar, reading and writing. http://dingyu.me felixding@gmail.com @felixding_
  • 3. 1 / 24 Special 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 / 24 Preface I started to draw flowcharts from the very beginning of my design career. In the early days, the flowcharts I drew were simple, the number of nodes were limited, and the logics were straightforward. Thus, I didn’t realize that the complex flowcharts could be so useful until I joined Alipay.com, the largest online payment platform in China. Here business logics and requirements were so complicated and fast-changing that understanding the business itself was very challenging. That was when I started to rely on flowcharts to learn the requirements, and to design the interactions. It worked like a charm. The product manager liked it, 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 Web flowcharts", 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 of flowchart templates following the same design style I introduced in the tutorial. Today, the article that was published almost four years ago still leads a lot of traffic to my personal site.
  • 5. Preface However, the tutorial has a major problem which makes the content misleading: It didn't use "Visual vocabulary" for "describing information architecture and interaction design". Frankly, I wasn’t aware of this vocabulary when I was writing the tutorial; instead, I created my own vocabulary and presented the idea to the 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 it hasn't drawn as much attention as the original post. Besides, it's been years already and I have gained new experiences and thoughts that I would like to share with the community, especially with the English readers. So here you have it, the English version of "Some experience on drawing Web flowcharts", with updated content and home-brew templates ready for download.
  • 6. Table of contents This 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
  • 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. For example, a factory can use a flowchart to tell its workers what are the right procedures when someone gets hurt. 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
  • 11. Visual Vocabulary In 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 http://dingyu.me/portfolios/dingyu-me .
  • 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 Branches Conditional Branches look like Decision Points, but they behaves quite differently. In Decision Points, the decisions are made explicitly by users, while in Conditional Branches, it's the system that chooses the right 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. Description Description is a handy way to save time in your communications. Don't get me wrong, you still need all kinds of communications with your flowcharts readers, but descriptions can be used as memos and tips, 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, don't 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.
  • 23. Log In A simple log in flow that describes how a system should respond when someone wants to log in.
  • 24. Security Check This flowchart shows how to use elements like System Action and Sub-flow. The flowchart is from a real project, but changed by me for copyright reasons.
  • 25. Other real-world examples As you can see, flowcharts are able to describe how a system works, no matter how complex business logics can be.
  • 27. Based on research, the guide to wireframes Users and their characteristics are the first thing to consider when drawing a flowchart. Based on the findings of user research, what are the users’ past experiences and expectations? How about the scenarios and 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, the content and even layout of each wireframe is set. This is, of course, what a flowchart essentially does: connects wireframes. Research Flowcharts Wireframes Note: Usually we have other deliverables before flowcharts, such as Use Cases. The chart above does’t include those because they are not the key points in the slide.
  • 28. Make your flowcharts comprehensive One major difficulty when drawing a flowchart is, you have to cover all the possible situations, which, from my 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 a comprehensive flowchart requires you not only to understand users, but also to know business logics, and even 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 who are related to the business requirements. I see so many interaction designers work all on their own, and then get fierce challenges in meetings. Don’t do that again. Instead, collaborate with the ones who are involved in the project, work together on your flowcharts (and other deliverables), and eliminate uncertainties from different angles, so that you can make your flowcharts comprehensive. (No one will challenge you again because it’s also his or her work)
  • 29. Don’t forget Meta From the collaboration and documents management perspective, you should leave at least a name, an author, a version number, and a date on your flowchart. Besides, even if your flowcharts followed the conventional visual vocabulary, your colleagues or clients may still have difficulties understanding the fancy elements. So do remember to add a legend.
  • 31. Tools Among 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 Visio Windows users may consider Microsoft’s Visio. It has several templates built-in which probably can make your work a lot easier.
  • 32. Templates Allen Le has created a set of templates for Microsoft Visio based on my origin post. It’s beautiful and I appreciate his work. You can find it at: http://www.allenle.com/archives/1530.html . OmniGraffle fans can download the templates made by me on GraffleTopia: http://graffletopia.com/ stencils/905 .
  • 33. That’s it! Composing this guide took me almost two weeks, and writing a tutorial fully in English made things even harder, 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 create something 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: http://dingyu.me/blog/the-definitive-guide- to-web-flowcharts . Felix July 25, 2012