User Flow - How to visualise that multiple actions result in the same outcome?

Question

This is for a Pinterest mobile interface case study. I am looking to redesign the Visual Search feature and, to visualise how unnecessarily complex the feature is, I tried to design a User Flow showing that there are 4 different ways to access the feature - on the same page.

It feels a bit cluttered and I am not sure it is sending the right information.

So I attempted another structure that is a bit more linear? But again, I am not sure if it's effective information.

Do you have any suggestions or feedback on how to improve this user flow? The goal is not for me to understand the flow, but for those I would show the flow to.

EDIT: After reading through the comments I thought I would create a visual flowchart.

Answer 1

Before attempting to answer, what is the meaning of the action "View"? Aren't "View" and being on the Pin Page the same thing? Or are you using "View" to refer to staying on the pin page without performing any action and scrolling into the suggested results?

As for the flows, you are essentially showing 2 different behaviours. On the first one, as a user I won't be able to either "click on the photo", "zoom in" or "click on Visual Search Button" if I'm on the "View" step but I'm assuming that the user can perform any of those 4 actions (if you cound "View" as an action) at any given time from the Pin Page, right? If that's the case the 2nd flow would be the right one, not only because it's clearer to read but mainly because it's the more accurate.

That said, I find defining the "View" step a crucial step to clarify the content since, at least for me, it's not clear what that step or action means.

Hope that was helpful!

Answer 2

Visual Language

Before attempting any diagram of this sort, you have to carefully consider and define the visual language to be used.

Your first graph has 6 different graphical "tokens" (4 different box types, 2 different line types), where the second has 9 (!) (5 different box types and 4 different line types).

It's confusing.

So I'd recommend reducing the alphabet - use the same graphics for every page and unless critical - same arrow styles.

State or Process Centred?

Your's is a graph diagram - it has nodes and edges between them. Such diagrams can communicate a host of 'concepts', which can be assigned to nodes or edges, and may include:

• Process;
• state;
• dependencies;
• contribution;
• control flow;
• agents.

Your's depict state (the pages) and process (the actions), and these are assigned to nodes and edges respectively, but figuring this out was not instant.

In your diagram, in order to label actions you have used boxes on the edges. Despite the style variation, it is hard to tell whether your diagram is:

• Process centred (node are for process)
• State centred (nodes are for state)

Initially, one can easily confused the box Zoom In with another state and you need to verb to infer this is an action that relates to the edge.

You will probably make the diagram clearer by simply putting these labels next to the edges, not as boxes on the edges.

---

That should at least get you started, if you submit a 3rd revision we can iterate from there. It would also help if you explain the 'View' rounded rectangle.

Answer 3

(Pardon for adding an answer here I do not have enough reputation to add a comment.)

Agree with Izhaki that both diagrams do not appear clear to the viewer. With consideration on the situation you described, you are showing users a flow diagram based on state centered diagram showing multiple process flows, i.e. too many reducdencies for the user in the process to move from Pin Page to Visual Search.

Option 2 would be a better way to present the diagram in this case, but you should standardise the boxes and arrows, just 2 box types (one for the views/state and the other for the actions) and one arrow type (since all arrows are the same indicating process actions only) so that visually it's very clear to the audience.

Hope this helps!