Best way to create user flows


#1

Hi,

I am making user flows like this

I have been struggling with the process to create them and to communicate with the client.

For now I created a page in axure with snapshots and arrows.
Is there a way to make the arrows snap to objects? Guess that is difficult, but at the moment I need to check all arrows when something changes, and that is a hell of a job.

When I generate files to send to the client the image or its resolution is too small. (I tried the word documentation, or export the flow as images or publish to preview)
It is necessary to be able to zoom in and pan across the flow. Now when I zoom in, it is all blurred.

Anyone any experience in creating user flows, that are easy to maintain and good to provide to the client?

Thanks in advance,
Sara


#2

I’ve not used snapshots much, but I like the concept. The bigger issue for me is that panning and zooming large screen flows in the browser is so difficult and klunky, so I use other tools like Miro which work much better for this.

Yes, you can use the Connector Tool to easily create arrow lines connecting any widgets, including snapshots. As you move the widgets around the connector lines stay connected–and you can reflow them by right-clicking on a connector line. You can create custom styles for these, including various arowheads, colors, line weights, dashes, etc. in the STYLE pane and Style Manager (including the default Connector style.) More info here: https://docs.axure.com/axure-rp/reference/flow-connectors/#docsNav

Bonus : If you right click on your snapshot (or any widget) and select “Edit Connector Points” you can move them around, add/remove points, etc. --including moving a connector point “inside” the widget–such as right on a button in the snapshot’s reference page–very handy.

I have noticed if you just drag in a snapshot widget, double-click it and set the reference page, then resize the snapshot widget it gets blurry–just like trying to scale up an image. But, if you size the snapshot widget to the full size of your “screens” (The contents of your pages and/or reference screen size), then double-click to set the reference page, they are sharp.

This reminds me of an old technique I came up with back in the RP5 or RP6 days before snapshot widgets…I totally forgot about this… I basically created this manually by taking a screenshot of a prototype page and loading that image in a “screen flowchart” page. Then I created a dynamic panel from that image, and added a state above it–and in that state I would drag in a page from the outline (creating a flowchart box which auto-links to that page.) Then I would create an OnContextMenu or OnDoubleClick event to “bring This to front” then “set state of This to next, wrap”. …All of this made for a “poor man’s zoom” to easily swap between the box and full size screen view.

You should be able to do the same thing with a snapshot. Create a full size snapshot, assign a reference page, create a dynamic panel from that, duplicate State1 to State2, then resize the snapshot in State1 to a thumbnail size. Then assign an event–other than OnClick (like OnContextMenu for a right-click, or even OnSwipeUp) to set the dynamic panel’s state to “Next, wrap”. If you want to override the “click to link to the reference page” you should be able to use the OnMouseDown event. Once you get this working the way you want, you can just duplicate this dynamic panel (Copy-Paste or Ctrl+Drag) and double-click the snapshot widget in each state to link to another page. …Then add your connector lines.

If I find time soon I’ll try this out in RP8 and RP9 and post a demo. This could make snapshots useful for me and my team. :thinking: