What are Wireflows?
Wireflows, a hybrid of Wireframes and flow charts, are used primarily by mobile UX designers to document user workflows and complex interactions. Wireflows are low-fidelity representations of complete views (or pages) linked to other views by an arrow emerging from a button or other UI component and pointing at the resulting dynamic change represented as a page view.
Wireflows can demonstrate the steps a user takes to complete a task with greater clarity than flow charts can. The primary purpose of wireflows is to communicate functionality to stakeholders and team members, encourage ideation, and stimulate “What-if” thinking about task flows.
What do you need to create a Wireflow?
TIME
MATERIALS
How do you create a Wireflow?
Step 1: Identify the task
This will ideally be a task you expect to be common, a particularly complex task, or a task with potentially confusing or cumbersome interactive aspects.
Step 2: Create a page view of the first step in that task
This may be an existing wireframe with enough detail that interactive elements are clear; if such wireframes do not exist, you will need to draw wireframes from scratch on paper or in software like Illustrator.
Step 3: Create a second page view
This should depict the result of a user action on the first page.
Step 4: Link the interactive elements to second page
Using a colour, circle or highlight the interactive element on your first page that the user would have clicked on to get to the second page. Then, draw an arrow from that element and connect it to the new page view.
Step 5: Continue creating page views
Draw arrows from each interactive item to the new page view until you have finished illustrating the main flow. This main flow is called the Happy Path.
Step 6: Create the wrong paths
Return to the first page and imagine actions that would take the user off the Happy Path. Use a different colour than the Happy Path arrows to illustrate these paths then create page views that display the results of those actions.
Step 7: Create the alternative paths
Now imagine alternative ways to complete the task. Go back to Step 1 and create page views that describe alternative paths. Use a third color to illustrate these.
Tips for great Wireflows
