Man sketches in a notebook

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.

Description

Schedule Time & Gather Materials

Clock Icon

Schedule Time:

  • Time Needed: ~ 8 hours (Mobile Site)
Gather Materials

Gather Materials:

  • Presentation Software (Axure, Visio, Omnigraffle, PowerPoint, Keynote, etc.)

Carry Out This Method

  1. Identify the task you will illustrate. 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.
  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.
  3. Create a second page view depicting the result of a user action on the first page.
  4. Using a color, 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.
  5. Continue creating page views and drawing arrows from each interactive item to the new page view until you have finished illustrating the complete task. This is called the Happy Path.
  6. Return to the start page and imagine actions that would take the user off the Happy Path. Use a different color than the Happy Path arrows to illustrate these paths.
  7. Create page views that display the results of those actions.
  8. 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.

Try These Tips

  • Some organizations may also describe wireflows as mockups, prototypes, or Wireframes. Make sure you understand organizational terminology.
  • Wireflows can be used to communicate functionality to both business and development groups.

Explore More Resources

Shipping & Delivery

Vestibulum curae torquent diam diam commodo parturient penatibus nunc dui adipiscing convallis bulum parturient suspendisse parturient a.Parturient in parturient scelerisque nibh lectus quam a natoque adipiscing a vestibulum hendrerit et pharetra fames.Consequat net

Vestibulum parturient suspendisse parturient a.Parturient in parturient scelerisque nibh lectus quam a natoque adipiscing a vestibulum hendrerit et pharetra fames.Consequat netus.

Scelerisque adipiscing bibendum sem vestibulum et in a a a purus lectus faucibus lobortis tincidunt purus lectus nisl class eros.Condimentum a et ullamcorper dictumst mus et tristique elementum nam inceptos hac vestibulum amet elit