Skip to content
GreenTomato Academy
  • About Us
    • About GreenTomato Academy
    • Our Trainers
    • UX Portfolio Review & Career Coaching
  • Course and Training
    • All Courses
    • UX Research
      • UX Research for Beginner
      • UX Design with Prototyping and Usability Testing
      • UX Writing Workshop
    • UX/UI Design
      • Introduction to UX/UI Design
      • Intermediate UX/UI Design with Figma
      • Certificate in Full-Stack UX/UI Design
      • HTML & CSS Basics for Designers
    • Software Development
      • Low-Code and No-Code Mobile App Development
      • Serverless iOS Mobile App Development with Google Firebase
      • Introduction to Manual Software Testing
    • Digital Marketing
      • Online Store Entrepreneurship
      • Video Marketing and Production
      • Mobile App UX Design Taster Workshop
    • Course Calendar
  • Online Learning Platform
  • Article
  • Contact
  • 中文 (香港)
Site Search
UX UI Design

WTF Is More Important than You Imagine in UX…

  • July 9, 2020August 20, 2020
  • by GreenTomato Editor
UX design user flowchat

When it comes to designing digital products, UX design is unquestionably one of the essential process for developing better products.

Of the many stages of the UX design process, defining the end-users’ goals, actions, and expectations via user flowchart is a crucial step in determining the functions and features of the product from the perspective of a user (remember User-Centered Design?).

Just imagine a potential customer trying to purchase a product from an online store and is required to register for a user account even though the user beliefs it will be a one-time purchase. The additional and unnecessary steps it will require the user to set up the account before he/she can proceed to purchase the item may very well drive the customer away.

For that reason, defining What’s the Flow (abbreviated as WTF in the title) from a user’s perspective, figuring out a step by-step user flow before any actual UI design is created will ensure that the product being developed will offer the right functions for the right users at the right time.

User flows are:

  • a series of steps a user takes to achieve a meaningful goal
  • used to communicate the intended flow of a user through various pages and actions in an app or website
  • visual diagrams with description of what happens at each step

Benefits of Drawing User Flow Chart

  1. Ease of Presentation and Communication
    Provide a step-by-step view of how the interface is intended to work (e.g. purchase, log in, sign up, etc.). Allowing product owner or teammates to visualize the user flow in the most efficient form.
UX design user flowchat
Visualizing the user login flow, making steps easy to understand
  1. Evaluate Task Flow for Improvement
    Enhance the ease of flow by evaluating and eliminating unnecessary steps, thereby improving efficiency of the interface and enhancing user conversion rate (e.g. registering an account or purchasing a product).
UX design user flowchat
Validating an email address and password can be done in one step
  1. Create an Intuitive Interface for Users
    Helps to identify weaknesses in the user flow and see what options are available to help user accomplish a task innately and without wasting time.
UX design user flowchat
Should login fail be directed to a Reset Password page? Or is there another appropriate option?

Stages of User Flow Chart Development

Stages of User Flow Chart Development
  1. User Stories: Short and simple descriptions of a feature told from the perspective of the product user
  2. Task flow: A single flow that focuses on how users perform a specific task
  3. Wire flow: Convey the page-to-page sequence with individual page layout
  4. User flow: Convey all the pathways with process and individual page layout

Elements of a User Flow Chart

Each node in the flowchart is represented by different shapes, and each shape indicates a particular process:

Elements of a User Flow Chart
Most used elements of a flow chat

Best Practices for Creating Flow Chart

  1. Use Even Sizes and Spacing
    Consider making all flowchart symbols the same height and width (does not apply to symbols that is intentionally smaller). Try to maintain even spacing both horizontally and vertically between symbols.
UX design user flowchat
  1. Consistent Flow Direction
    Flowchart should be top-to-bottom or left-to-right (or right-to-left for RTL languages). Avoid mixing top-to-bottom and left-to-right flows in the same flowchart.
UX design user flowchat
  1. Consistent Branch Direction for Decision Symbol
    Use consistent flow direction for the “Yes” (e.g. right from the Decision symbols) and “No” (e.g. bottom from the Decision symbols) condition.
Consistent Branch Direction for Decision Symbol
  1. Merge Flow Lines to Simplified Visual
    A page may often have more than one subsequent flow line. Improve readability by merging flow lines so that they convey a sense of hierarchy and sequence.
Merge Flow Lines to Simplified Visual
  1. Use Sub-flows or Connector Nodes
    If the user flow is running exceedingly off the page because it’s too long, use a Sub-flow or Connector Nodes (labeled circles) that serve as jump points from one part of the process to another.
Use Sub-flows or Connector Nodes
  1. Use Colors Wisely
    Using too many colors can be noisy and may distract your reader. Use colors to help reader identify and group resources, and highlight important user actions.
Use Colors Wisely
  1. Avoid Confusion in User Flow
    Avoid any confusions by using hop-lines or rounded corner connectors to links between screens and actions.
Avoid Confusion in User Flow
Hop-line
Avoid Confusion in User Flow
Rounded corner connectors
  1. Include Symbol Legend
    Include a flowchart key to describe the meaning of symbols, shapes and colors if you use more than the usual basic ones (process, terminator, decision, document).
Include Symbol Legend

There are many online tools available for designing user flowcharts.  Furthermore, most of them support remote collaborative feature to encourage team collaboration or allow for client/team co-creation.  The following are a few examples of online tools which provides a decent amount of features for creating user flowchart at no-cost to get you started.

  1. Draw.io
UX design user flowchat
  1. FlowMapp.com
UX design user flowchat
  1. Lucidchart.com
UX design user flowchat

This post was inspired by Alexander Handley’s article from Medium.com and references has been taken from it.   Visit course section to check out our Certificate in Business Design course. This course enables you to upgrade your UX skills by learning the practical concept and technique of UX design and designing user flowcharts.

Related Workshop and Course:

  • UX Design with Prototyping and Usability Testing
  • Introduction to UX/UI Design with Adobe XD

facebookShare on Facebook
Minimum Viable Product (MVP) by Hong Kong Movie
【Business Value Creation 101】Revolutionize Your Business with Business Design

Related articles

Is Becoming a Full-Stack Designer…
ux writing
The Essential of UX Writing,…
Business Design Certificate in Business Design Greentomato Academy UX Design UI Design Wireframe Prototype Adobe XD
【Business Value Creation 101】Revolutionize Your…
界面設計師 必需知道「扁平化設計」和「實感設計」的微妙關係
好多人都話識UX,其實你又識唔識?

 

Full-stack UX UI Design
Figma Design Certificate in Business Design Greentomato Academy UX Design UI Design Wireframe Prototype Adobe XD
HTML5 CSS3 GreenTomato Academy
online shop, online shopping, entrepreneurship
Introduction to UX UI Design
UX UI Prototyping Design Usability Testing GreenTomato Academy
Greentomato Academy Firebase course ios training

Search Course


ABOUT

COURSE

ARTICLE

CONTACT

TOP

Policies

Privacy StatementRefund PolicyInstallment PlanBad Weather ArrangementContact Us
Connect with Us
InstagramFacebookLinkedinMediumHSBC VisionGo

Courses

UX Research
UX Research for BeginnerUX Design with Prototyping and Usability TestingUX Writing Workshop
UX/UI Design
Introduction to UX/UI DesignIntermediate UX/UI Design with FigmaCertificate in Full-Stack UX/UI DesignHTML & CSS Basics for Designers
Software Development
Low-Code & No-Code Mobile App DevelopmentServerless iOS Mobile App Development with Google FirebaseIntroduction to Manual Software Testing
Others
Online Store EntrepreneurshipMobile App UX Design Taster WorkshopUX Portfolio Review

Find Us

Email
[email protected]

WhatsApp
67135239

Address
20/F., Harbourside HQ, 8 Lam Chak Street, Kowloon Bay, Hong Kong.

Hours
Monday to Friday: 10:00AM – 7:00PM
Saturday: 10:00AM – 2:00PM

Copyright © 2022 GreenTomato Academy
  • Instagram
  • Facebook
  • Linkedin
  • Medium