• Emir BukvaEmir Bukva, over 4 years ago

    How do you layout screen flows…

    The first stage usually looks like this:

    First stage

    That’s just to get my mind thinking about the problem. Once I’m ready to to get more specific, and consider variations and alternatives, it starts looking a bit tidier. What I’m doing is a tad more elaborate variant of Ryan Singer’s "shorthand"

    Sketching the flow

    If I need to get feedback from others, or present to the team a plan for what we’re doing, I’ll clean that up even further and make it legible for folks using Illustrator (though I imagine Sketch, OmniGraffle, and many other tools might serve you just fine. I once did this in Google Drawing, not that I’d recommend that):

    Presentable flow diagram

    At times, I might do a wireframes that will (literally) cover the corresponding boxes (pages/screens) in that flow diagram if the in-page interactions are complex or if I’m divvying up the work with other designers. Other times, I’ll skip the wireframing and go from the flow diagram to full-fidelity mockups:

    Mockups in a flow

    … with different states and variables? Do you now any particular tool that helps lay out and structure screen flows for different scenarios?

    I find it tough to communicate to others 1) the flow and 2) all the states of each piece of the flow at the same time effectively. I’ve found it more effective when the flow diagram communicated primarily, well, the flow, annotating varying states as a secondary thing. I usually lean on diagramming the happy path in the flow, and then noting down below each screen that it exists in a couple of different states, showing those states if space allows. You might create two or more flow diagrams of the same flow, one showing the "happy path," and another the same set of screens but in different states. Usually, I find that only a couple of paths through the flow are important enough to diagram explicitly.

    I’ve found this to be effective inside small, agile product teams that are tackling novel problems. Everyone’s environment is different and, of course, your mileage may vary.

    Doing this in Sketch takes so long to draw paths and make it presentable and in the end its not very useful to experiment and consider different flows, while changing the steps etc

    Personally, I don’t see all that much value in fussing with arrows and connecting lines once things are mocked up in Sketch. By the time full-fidelity mockups arrive, the team members are usually already aligned and have hashed out the common use cases and internalized happy paths and edge-cases. You’re right, connecting mockups with arrows is time consuming and it can get in a way of experimentation and speed of generating different ideas. Doing that is so much easier with my Rotring 500 and 2B leads ;)

    12 points