Back
Decor-dark

Understanding Product Design & UX User Flows

2035 words Read time 10:07

User Flow, also called UX, Wire, UI or IX flows, forms an elemental part of how users interact with your virtual product. Be it software or website; user flow helps to visualize the complete path that a user follows across a situation. It is a mix of traditional flow charts with visual elements. Hence, not only it is easy for the designer to frame his work from a visual perspective but also for the clients and higher authorities to understand the concept.

Introduction

In product design terms, flows depict the movement of user responses or actions in respect to a product. This movement is not just any movement but continuous and relational to the product structure. Another outlook of product design flow is that flow is variable. There are multiple dynamics to any action. So, in correspondence to actions, there are also various factors associated with user flow.

User flows are purely focused on task accomplishment by the user and all the probable associated alternative paths to action. What benefit does it have? Focusing on the user path lets know about the activities performed by the user. In commerce, it is vital for a business model to concentrate on how to expand its presence and generate revenue. Both of these things are factored to the user experience. How a user, be it a potential customer or an existing loyal consumer, what they do or how they interact with the product is what makes or breaks the deal. For successful business intent, companies want users to have an engaging but controlled interaction with the product. Be it the Instagram app on your phone or any website that Google takes you to after consulting search queries. All have a particular objective. It could be a lead generation for email marketing, creating awareness, or persuading to buy.

With a specific target in mind, user flow help for simple processing of solution and its validation for completion. User flows take care of two things – paths and result. They evaluate the path taken by the user if it is right or wrong. Could it be any shorter? Could it be more effective in any way? User flow helps designers answer such questions.

Characteristics

One thing to note however is that user flows may not be linear. It strictly does not have constant unidirectional progress and might somewhat branch out consisting of nodes and loops portraying all possible interactions with the product. This tendency reflects the various conditions in which a user might get access to the product. Also, in user flows there is no emphasis on the feelings of the user when interacting with the product. This aspect of user flows differs from user journey maps. It is, in the sense that journey maps take into consideration the feelings of the user while being instrumental for creating solutions.

On the other hand, flows have a forte in plotting approach to existing solutions. They visualize flow through to the solution. Let’s talk in examples.

Consider an e-commerce android or iOS app in development. User journey maps will help to think about the features (cart, buy, sell) to provide in an app while user flows will assist in designing the procedure to perform the specific task like buying or selling on the app. It will have a visualized form of the steps that a user has to enact to complete the task. For our considered scenario of buying, user flow will have the picturized steps of going from opening the app, searching for an item, going to the item page, selecting the buy button, setting the payment method and final check out.

User flows not only aid in the design sphere, but also in terms of 'explaining aspect' of the idea to the client. The flowchart structure is straightforward to grasp for any layman, thus adding to its pro package.

The process is straightforward. User flows consists of low-fidelity prototypes, that is devoid of visual detail. This method helps put the focus on creating smoothest flows for users in mind to accomplish both user and business goals. The success of a website or an app depends on the effectiveness of the flow model to meet the needs of user and business. A user flow model should balance these two objectives of user and company for any business to be successful.

So, now we know about user flows; what they are, what they do and how they differ from journey maps./

Let us concentrate on the ‘design’ of product design user flows.

Flows for users

As the name suggests, the creation of product design user flows starts with the user. The flowchart is user-centric. Before starting to work on user flows, a designer needs to have a comprehension of the role of a user. They have to understand the motivation and needs of the user along with that of the business objectives. Understanding the role of user helps designers create user goals. In addition to the impact of roles, there’s one more thing to consider. It is about how the user comes to the product or termed simply as ‘entry points.’ Entry points and goals have significant relationships with each other. So, it is necessary to consider how a user comes to the product/website. It could be direct traffic, paid advertisements, organic search, social media, referral sites, or even e-mail marketing. Different entry points have different user behaviors. Hence, all factors considered you can expect different user flow diagrams with the varying user and business objectives.

Designing a user flow

For planning user flow, we need to use the actual behaviors of users. Basing a design on expected or assumed user responses and thinking does not work. A designer has to know what any user who gets their hands on the product thinks and does with it. So, the first step to design are the objectives. There are two objectives or goals one need to take care of while working out a user flow.

User objective. These are the user needs; needs that the user wants to fulfill. Things like buying, chatting with friends, reading news, or reservation for dinner.

Business objective. These are the things that you want the user to do. A company would be into selling items or providing a service.

A clear idea about the objective helps in making an efficient user flow.

Creating flow outline

Before creating the flow, a designer needs to create a flow outline. Flow outline helps to get a rough impression of the flow structure. It is always a good practice to start with an outline to avoid a large number of corrections in the actual flowchart. Apart for tidying up corrections, outlines also help maintain focus on the key themes of the user experience when performing a particular task.

The key themes are nothing but:

• User roles. What kind of users/personas are accessing the product?

• Objectives. What do the user and the business intend to achieve with the product?

• Entry points. How does the user gain access to the product?

A note here. It is suggested to build a workflow around content. Working around content provides a more accurate assessment of steps (or pages) required for the complete user experience in achieving the task.

Here are some methods for building workflow outlines:

• Writing-first approach

The writing-first approach helps to build a common understanding of product structure, i.e., in a website, it aids in understanding what each page serves to do.

You start with questions about what to do followed by action description in square brackets.

Ex. For creating an account on a website

The writing-first method involves statements or questions followed by action responses. As a result, it becomes quite lengthy and more laborious for faster deduction. For a quicker process, you can use the shorthand approach.

• Shorthand approach

While the writing-first method has statement-action pairs following each other, the shorthand approach is a bit graphical. A line separates the step having statement or question at top and action at the bottom. The following step (statement-action pair) has an arrow connecting it to the preceding step.

It might seem redundant, but let me put it out there. Keep track of the entry points. The motivation of customer changes but the needs of the customer stay the same. This change in motivation is because of that fact that any product on the web gets accessed through different means, i.e. access as direct traffic, referrals, organic searches. Let’s simplify with an example.

Suppose you are looking to buy a smart TV.

Case 1:

1. You search the term ‘smart TV’ on a search engine (say Google)

. You look at various TV reviews

3. Then, you finally decide on one and click on the buy link

4. Fill all the address and payment details and checkout

Case 2:

1. You go to Sony’s official page

2. Search for a TV, select the one you like and click on buy

3. Then, fill all the address and payment details and checkout

In the first case, you were only looking for a smart TV regardless of brand. In the second case, however, you were specific about getting a Sony TV.

For both cases, the motivations are different, so the entry points are different. The entry point of users is not something a designer can skim or skip over while creating the workflow structure.

Sketching and prototyping flow

After setting up the basic structure, we move towards the user perspective. The transformation of user flow structure into low-fidelity sketches or mock-ups shows how the user will view them when they go live. Sketching and prototyping are the closest to the actual product design user flow before the final structure gets finalized. It is unique in the sense that the designer gets to see how the potential users will view the product flow.

It gives the complete idea of a product flow which is vital. Why? That's because it helps test idea with users. Any design process is about correction and iteration. A product flow prototype aids in getting the users on-board with the design and reveal the potential improvements. Prototyping before flow helps evaluate the alignment of ideas and designs to match both the user and business objective.

There are some elements that still we haven’t discussed. Up until now, we talked about product flows with single goals. But, what about multiple objective user flows? For more than one objective, there is Stacked User Flow. Stacked User Flows help achieve multiple goals. Another aspect of designing user flow is communication. Communication with users helps to get a clearer picture of their perceptions, usage patterns, and preferences. This insight helps to put or reduce the emphasis on elements based on the feedbacks.

There will be transitions in user experience. For a strong user flow, the key is to lessen these transitions and frictions. The more shifts you can eliminate, the better. The thing is, negative transitions (ex. going back to the homepage from an article) have much more impact than positive transitions (ex. Seeing a thank you after purchase). So, positive or negative, a designer needs to ensure their design are as much friction-free as possible. Last but not least, every element needs testing. Layout, content, value proposition, product info, call to action, all need thorough and repeated testing to find frictions and help understand users better in the view of being able to provide a seamless product user flow.

Share this article

C

Reach out