<?xml version="1.0" encoding="utf-8"?>

Wireflow organization and usage

Wireflow organization and usage Bad Practice
Wireflow organization and usage Best Practice

The classic use case for wireflows is to document the journey of a user working through a common task on the product — for example, adding a song to a playlist.

Simple wireframes show the screens available to users at each step in the workflow. Arrows connect specific UI components that users interact with — for example, tap a button or a link — with wireframes that show what happens as a result of the interaction. Wireframes in the flow don't need to show separate pages. Very often, the page stays the same but the content changes, reflecting feedback to users' actions (a ticked checkbox or a popup menu).

You can also use wireflows to document complex workflows of desktop and web apps. No need to show a full-screen wireframe for each step — creating wireframes for the portion of the screen that changes will provide enough context.

Can you use wireflows for documenting task flows in traditional static websites? It works for mobile but might not be the best idea when it comes to desktop websites — when wireframes show different big pages, it's easy to lose the context of the user flow.

Improve your UX & Product skills with interactive courses that actually work