The following was translated and edited by the Mockplus team, a faster and easier prototyping tool, for learning and communication purposes only.



User experience has a long list of technical terms and deliverables. When looking at UX job descriptions online, the list of such terms is even more comprehensive. And, over time and over time as they evolve, many of them even have overlapping definitions. So, I think it’s time to reorganize and redefine these terms and deliverables to make them easier for designers, Web/app developers, and users alike to understand.

Break it

Task flow and user flow are user experience terms that have been heard for years. Although I tried to search for their “official” authoritative definitions through Google searches, it turns out that many existing UX glossaries do not centrally define them.

Nonetheless, such “flows” describe the “movement” of the Web or software. Designers need to think about how to design and guide users through a website or software. Creating such web pages or software “streams” can help designers think and anticipate what is likely to happen to users before or after viewing a page, and focus on the important parts. And, in addition, as a first step toward creating a working prototype, the design of such “flows” can help developers understand how software or web pages behave in alternate states.

The flow chart



A flowchart is a sequence diagram showing the actions or behaviors of people or things in a complex system or activity. When applied to software or Web design, it represents a sequential diagram that shows the user a series of page activities or behaviors.

Task flow and user flow



Task flows and user flows are not entirely different. Because they are all designed to help the user accomplish a task with minimal resistance. They all help you think through design issues before you develop specific software or web features. If you want to make it easier and more specific to distinguish them, you can also define them as follows:

Task flow

A task flow is a single process that all users go through to achieve a particular action, and all users go through similar processes, such as web pages or software registration. A task flow is a single process with no branches.

The user flow

The user flow is the software or web page execution path that the user follows. It can be viewed as a mini-journey for users as they browse software or web pages. User flows do not have to be linear and can branch. By defining or designing software or web paths, you can identify possible transitions and improvements to optimize the user experience.

User flows can be as simple as helping design the “red path” of a web page or software — the main path of a web page or software. User flows can also become extremely complex when more related conditions and requirements are involved and added. In summary, user flows can help designers and developers effectively break down complex processes prior to product development, leading to greater understanding and productivity.

Morgan Brown once said:

“User flow design can bring more results for users and businesses.”

Page flow chart



37 signals, a world-renowned software company, used to shorthand user flows and identified them as having the following shortcomings:

User flows are sometimes difficult to interpret and communicate during the design process.

* Mapping out the process details can be very time consuming.

* And as interface design changes, flow design quickly falls out of place.

While user flows and “flows” like page flowcharts have their drawbacks, you can try them out in real Web or software. As a quick way to get started with Web or software design, they can meet your design needs with limited time.



Moreover, as design requirements continue to change, some prototyping tools, such as Mockplus, provide professional page flowcharts for designers to present and communicate their design ideas. Designers can generate the required Web or software page flow chart with one click, and set its color, background and connection lines according to the design needs, add page remarks and export as pictures, etc. It can help designers greatly improve the efficiency of design and communication.

Wireflows



For years, I have created flow charts to demonstrate and communicate interaction design in the Web or software. And to include more design scenarios, these flowcharts have evolved into “flow” designs that include wireframes. The Nielsen Norman Group has recently come up with a new term to describe the deliverables of such user experiences: Wireflows.

The Nielsen Norman Group defines Wireflows as follows:

Wireflows is a wireframing style page layout format that uses a simplified flow chart to show various interaction designs for the Web or software.

Wireframes are not enough. Because wireframes often show only the page layout or static content of the Web or software, they do not include any dynamic interaction. Flowcharts capture the details of Web or software interactions, but ignore the application scenarios that might occur. Wireflow helps designers store complex interaction designs and show the changing content and layout of those interaction designs.

Wireflow elements

* Entrance and exit

* Steps: such as user actions, system actions, and alternate paths

* Connections: indicates the required paths and possible different processes

* Decision point: The user must choose from two or more options.

Conclusion:

Understanding and anticipating the possible application scenarios of these “flows” can effectively optimize the design experience. Any of the “flows” described above can help designers better present and communicate design ideas, thereby improving collaboration.

resources

Here are some resources you can use to speed up UX workflow design:

Toolkit Resources



*FREEBIE — Flowchart kit for Sketch

Flowchart kit from Designer Greg Dlubacz

This is a well-crafted Sketch flowchart kit that helps you create simple and intuitive sitemaps quickly and easily. All contained elements, including arrows, are editable and customizable.



*Flowchart Kit Sketch Resource

— Flowchart kit from Designer Arthur Guillermin Hazan

This is a flowchart kit that shows the design of interactions between web interfaces. You can easily add elements like arrows and ICONS to your interface, customize your interface, and even create more accurate sitemaps with the help of it.



*User Flow Diagram Template

— User flow chart template from Jarosław Ceborski

This user flow chart template helps you create beautiful and eye-catching diagrams easily. All the squares and arrows included are Sketch symbols that are easy to use directly.

*13+ Productive UX Flowchart Templates

A UX flowchart from the Template.net web page

Plugin resources for Sketch



* the Sketch plugin – AEFlowchart

AEFlowcharts plugin from Marko Tadic

Sketch provides a variety of plug-ins to help designers with common Web or software flowcharts. After a brief look at these plug-ins, I found that AEFlowcharts is the most easy-to-use of them all.

By Naema Baskanderi

Original address: https://uxplanet.org/ux-glossary-task-flows-user-flows-flowcharts-and-some-new-ish-stuff-2321044d837d