Schedule Time & Gather Materials
- Time Needed: ~ 8 hours (Mobile Site)
- Presentation Software (Axure, Visio, Omnigraffle, PowerPoint, Keynote, etc.)
Carry Out This Method
- 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.
- 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.
- Create a second page view depicting the result of a user action on the first page.
- 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.
- 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.
- 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.
- Create page views that display the results of those actions.
- 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
Explore More Resources
- Nielsen Norman Group: Wireflows: A UX Deliverable for Workflows and Apps
- UX Kits: UI Wireflows
- Matthew Goddard: [UX Technique] Wireflows Diagram