Flowcharts

Your constantly-updated definition of Flowcharts and collection of topical content and literature

What are Flowcharts?

Flowcharts are diagrams of user flows and tasks in processes. Designers use these versatile tools to visualize the interactions in designs and present easy-to-understand maps of designs to stakeholders. They connect labeled, standardized symbols with lines to show everything users might do in interactive contexts.

“You cannot understand good design if you do not understand people; design is made for people.”

— Dieter Rams, Industrial designer and pioneer of “less is better”

Author/Copyright holder: LucidChart. Copyright terms and license: Fair Use.

LucidChart has an intuitive drag-and-drop interface.

Map out New Designs and Evaluate Existing Ones using Flowcharts

In user experience (UX) design, designers use flowcharts mainly to plot how users move through an interface, such as an app, to achieve their goals (e.g., to purchase clothes online). They describe the relationships between pages/screens and show all interactive possibilities—the starting points, actions required, moments of decision and endpoints—as users encounter and use interfaces. They also aim to account for the various factors that impact users’ interactions (e.g., busy environments). Since flowcharts are highly visual, they’re valuable reference points throughout projects. Flowcharts have a standardized set of:

  • Symbols e.g., typically, a rectangle represents an app screen or webpage, a line with an arrow represents the direction users move through a user flow, and a diamond represents a decision point where users must choose an option (so, it’s crucial to show all the directions users can go); and
  • Conventions – e.g., you present data from left to right and top to bottom.

As paper or digital deliverables, flowcharts represent interactive sequences at two levels:

  1. User flows – Overviews of the complete process of steps which users might take through a whole app, service or website (e.g., from accessing a webshop’s landing page to confirming purchases).
  2. Task flows – Specific aspects of the above (e.g., just the checkout process).

You can use flowcharts especially effectively to:

  1. Visualize interactions for ideation and exploration – to:
    1. Account for all possible interactions (at the start of the design process, to shape user flows).
    2. Evaluate your design’s efficiency – anytime during or after development: e.g., you can spot a user flow which takes too many steps to complete, or a dead end that will likely confuse users (e.g., if they find an item is out of stock and don’t know what to do next).
  2. Present to stakeholders:
    1. Internal stakeholders can examine flowcharts whenever you need approval/buy-in before you can proceed to prototyping (although time and resource constraints might suggest you just prototype instead).
    2. External stakeholders (e.g., clients) can understand your project’s scale and scope when you use a flowchart to help explain how your UX deliverables will ultimately appear.

Paper flowcharts work best here, as your design team can easily erase and redraw these while bouncing ideas around.

Create Flowcharts that Capture Realistic Experiences and All Possibilities

You can dissect even the most complex processes into concise, attractive flowcharts on paper or choose from an array of software to create digital flowcharts with varying features (e.g., real-time collaboration, drag-and-drop functionality). Popular flowcharting UX tools include LucidChart, Microsoft Visio and OmniGraffle.

To accurately reflect what your users experience via a flowchart, it’s best to define:

  1. Your users and their needs through UX research.
  2. What you want your solution to help users do.
  3. The tasks and subtasks from point of entry to goal completion: From a point of entry (e.g., when a user Googles and finds your site), you can break each task (e.g., purchasing tickets) into 4–8 subtasks (from clicking an app to completing checkout).
  4. Decision points: Discover the critical times users must think about their activities, and how they’ll form impressions of your product/design.
  5. Various paths users can take: Map out task sequences so users can complete actions easily and without wondering how to use your product/design. (In seamless experiences, users shouldn’t have to think about your product/design itself.)

Your best flowcharts will show you empathize with users at each stage corresponding to their customer journey maps.

Author/Copyright holder: icrosoft. Copyright terms and license: Fair Use.

Microsoft Visio is a flowchart tool which a similar UI to the Microsoft Office suite of apps.

Wireflows

Wireflows are alternatives to flowcharts. You need wireframing skills to make these. In a wireflow, you connect the wireframes of various pages according to how users will interact with them. So, you’ll have a more realistic-looking, concrete solution to ideate with and spot potential usability problems. However, wireflows tend to be better for showing more simple designs—e.g., websites with few pages—and they can vary in fidelity, or sophistication. Also, in dynamic solutions where users can interact in more complicated workflows, flowcharts may be better due to limitations in space or resources. Plus, there’s a risk of overinvestment (especially earlier on) if your high-fidelity wireflow gets discarded.

Overall, always approach flowcharts with a designer’s eye for visuals. When you diagram tasks thoughtfully for users’ contexts, you can better plan how to help them move as easily as possible from start to finish in each process. Your solutions will therefore more likely resonate with users.

Learn More about Flowcharts

Take our UX Portfolio course, which addresses many aspects of organizing information: https://www.interaction-design.org/courses/How-to-create-a-UX-portfolio

This Justinmind blog offers helpful flowcharting hints: https://www.justinmind.com/blog/tips-and-tricks-for-making-a-ux-flowchart/

Read some additional in-depth insights on flowcharts here: https://medium.com/eightshapes-llc/creating-excellent-ux-flow-charts-df6f1e46e524

Literature on Flowcharts

Here’s the entire UX literature on Flowcharts by the Interaction Design Foundation, collated in one place:

Learn more about Flowcharts

Take a deep dive into Flowcharts with our course Design Thinking: The Beginner’s Guide .

Some of the world’s leading brands, such as Apple, Google, Samsung, and General Electric, have rapidly adopted the design thinking approach, and design thinking is being taught at leading universities around the world, including Stanford d.school, Harvard, and MIT. What is design thinking, and why is it so popular and effective?

The overall goal of this design thinking course is to help you design better products, services, processes, strategies, spaces, architecture, and experiences. Design thinking helps you and your team develop practical and innovative solutions for your problems. It is a human-focused, prototype-driven, innovative design process. Through this course, you will develop a solid understanding of the fundamental phases and methods in design thinking, and you will learn how to implement your newfound knowledge in your professional work life. We will give you lots of examples; we will go into case studies, videos, and other useful material, all of which will help you dive further into design thinking.

This course contains a series of practical exercises that build on one another to create a complete design thinking project. The exercises are optional, but you’ll get invaluable hands-on experience with the methods you encounter in this course if you complete them, because they will teach you to take your first steps as a design thinking practitioner. What’s equally important is you can use your work as a case study for your portfolio to showcase your abilities to future employers! A portfolio is essential if you want to step into or move ahead in a career in the world of human-centered design.

Design thinking methods and strategies belong at every level of the design process. However, design thinking is not an exclusive property of designers—all great innovators in literature, art, music, science, engineering, and business have practiced it. What’s special about design thinking is that designers and designers’ work processes can help us systematically extract, teach, learn, and apply these human-centered techniques in solving problems in a creative and innovative way—in our designs, in our businesses, in our countries, and in our lives.

That means that design thinking is not only for designers but also for creative employees, freelancers, and business leaders. It’s for anyone who seeks to infuse an approach to innovation that is powerful, effective and broadly accessible, one that can be integrated into every level of an organization, product, or service so as to drive new alternatives for businesses and society.

All Literature

Please check the value and try again.