24

How do you layout screen flows?

over 3 years ago from

How do you layout screen flows with different states and variables?

Do you now any particular tool that helps lay out and structure screen flows for different scenarios? (User is logged in, User is not logged in but comes from google results, User is invited, User is invited and has permissions to invite, User has to confirm email, User is trusted and does not need email confirmation etc)

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

Any ideias? Thanks!

19 comments

  • Emir BukvaEmir Bukva, over 3 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
  • Luis La TorreLuis La Torre, over 3 years ago

    this is my style. lulato-flow

    9 points
  • Przemyslaw Baraniak, over 3 years ago

    Hi, I have described my workflow here: SQUID & Sketch — The Ultimate Guide to User Flows Creation - Prototypr.io

    Hope this will be useful for you. I use the Sketch library created by myself - it is now called SQUID.

    2 points
  • Jonard TirolJonard Tirol, over 3 years ago

    I use Draw.io for really rough sketches and screen flows.

    1 point
    • Dan W, over 3 years ago

      Same, works great for flowcharts and keeps everything synced up with my team via google drive.

      0 points
  • Tim Kjær LangeTim Kjær Lange, over 3 years ago

    If your aim is to explain logic in your application I would recommend using a flowchart with mockups, like this:

    flowchart * Medium just used as an example, I don't work for them ;)

    I agree, Sketch is not fast for flowcharting, it's not created for that purpose. Use apps like Omnigraffle or Axure instead. They both allow you to drag and connect noodles and boxes in a very efficient way.

    1 point
  • Harper Lieblich, over 3 years ago

    In the same vein as Lan Belic, I've been using this Sketch library to do user flows: http://uxmisfit.com/squid/

    1 point
  • Lan BelicLan Belic, over 3 years ago

    https://medium.com/@lanbelic/interaction-flow-kit-75a8876a3a4

    Maybe this kit will help with that :)

    1 point
  • Luca Benazzi, over 3 years ago

    You can also check UX map: ux-map.com Currently it works with Axure RP, a version for Sketch is on the way (updates to follow on the social media channels).

    0 points
  • Alexandru NăstaseAlexandru Năstase, over 3 years ago

    To be honest I use Google Draw it's easy to use you don't need a specific app to use it and it's collaborative

    0 points