1

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.

enter image description here

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

enter image description here

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.

enter image description here

5
  • 1
    The second option seems better, but for me the possible sources of confusion wouldn't be in the organisation of the squares and circles, but rather on things like the lines and points. What the difference between the dashed line and the full line? Why the connecting point between the "pin page" and the line is empty, others are full and the the ones on "View" and "Click on Visual Search" don't have a point at all. Also, considering the different origins, I'm not really able to imagine what "Visual Search" means. Nov 4 '20 at 15:21
  • @ArthurBoni Hi Arthur, thanks for the comment. I added a 3rd version that provides better visual cues and was wondering if you could give me some feedback on this. This feature is so confusing and I feel like my graphs only make it worse lol
    – Cezara H
    Nov 18 '20 at 14:38
  • Ah yes, it's much clearer :) I'm not a Pinterest user, so just to be clear: this functionality searches for similar images based on other images / part of other images, right? In any case, having all these ways to do the same thing really is strange. To add to this point, "View" is a rather generic text for that button. Am I not already "viewing" the image? When I save, do I save the whole image, the post or the part of the image I have currently framed? Nov 18 '20 at 17:43
  • Yes! It's very strange!! Just to clarify, this is the current interface of the app, I am looking to simplify this entire process. What's worse, you'd think 'view' would bring the image up on its own but in reality it kickstarts the Visual Search feature. All around messy.
    – Cezara H
    Nov 19 '20 at 13:28
  • Yeah, it's a but messy. I just don't understand what the "visual search" is yet, sorry. You re-frame the image and then perform a search that will return images that are similar to that re-frame (like framing that trash bin would look for images of trash bins)? What is happening in the third image with the roses? Are those results or previous searches? Nov 20 '20 at 15:28
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!

1
  • Hey, thank you for the answer! I have gone back and revised a visual version instead to provide better clarity that 'View' represents a button and the other interactions a user can perform to open the Visual Search feature. It's a confusing feature so it's hard to create a good process flow.
    – Cezara H
    Nov 18 '20 at 14:46
1

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.

0

(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!

1
  • That's great, thank you. I read through the other answers but yours is clearer on what the problem is with the graphs.
    – Cezara H
    Nov 17 '20 at 14:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.