Our AI writing assistant, WriteUp, can assist you in easily writing any text. Click here to experience its capabilities.
Wireflows: A UX Deliverable for Workflows and Apps
Summary
Wireflows are a combination of wireframes and flowcharts used to document workflow and screen design for dynamic mobile, desktop and web apps. They are useful because they can represent the dynamic changes on one or few pages inside an app, and can also be used as a collaboration and ideation technique for teams to think through user workflows and tasks and to ideate screen designs. Wireflows can be used for static websites, but can be too large and lose context. They are a useful and learnable deliverable for UX professionals.
Q&As
What is a wireflow?
A wireflow is a combination of wireframes and flowcharts that can document workflow and screen designs when there are few pages that change dynamically.
What are the advantages of wireflows compared to wireframes and flowcharts?
The advantages of wireflows compared to wireframes and flowcharts are that they are easily learnable by those who’ve seen wireframes and flowcharts before, and they have enough advantages to overcome the inertia that otherwise favors familiar formats.
How are wireflows typically used to document mobile apps?
Wireflows are typically used to document mobile apps by showing a wireframe for a full mobile-screen design at each step in the flowchart.
What types of digital products are suited to be specified as wireflows?
Types of digital products suited to be specified as wireflows include ecommerce products, complex creative or technical applications, and webapps and mobile apps with few overall pages that change content or layout dynamically.
How can wireflows be used as a collaboration and ideation tool?
Wireflows can be used as a collaboration and ideation tool by having team members ideate and write down task flows, discussing options, and sketching each step in a wireflow style to visualize potential options and document ideas that the team agrees on.
AI Comments
👍 This article provides an incredibly comprehensive overview of wireflows, their uses, and the advantages of using them over traditional wireframes and flowcharts.
👎 This article is overly technical and may be difficult for readers who are not already familiar with UX terminology and concepts.
AI Discussion
Me: It's about wireflows, which are a combination of wireframes and flowcharts. They can document workflows and screen designs when there are few pages that change dynamically. It explains why wireflows are needed and how they are useful for documenting mobile apps, desktop products, and websites with dynamic content.
Friend: Interesting. What are the implications of this article?
Me: Well, this article suggests that wireflows can be a better deliverable for documenting complex apps than just wireframes or flowcharts alone. It can help stakeholders better understand the design process and the different interactions users can have with the product. It can also be useful for collaborative ideation between team members, as it allows them to quickly sketch ideas and focus on the interactions. Finally, it can help designers communicate the important feedback that the system presents to users after they interact with the page.
Action items
- Research other UX deliverables and how they can be used to document complex workflows and user tasks.
- Practice sketching wireflows to document user tasks and workflows.
- Attend a UX conference or training course to learn more about wireflows and other UX deliverables.
Technical terms
- Wireframes
- A visual representation of a website or application, typically used to show page-level layout ideas.
- Flowcharts
- A diagram that shows the steps in a process.
- Deliverables
- A product or service that is produced as a result of a process.
- Application Design
- The process of designing software applications.
- Workflow
- A sequence of connected tasks that make up a process.
- Low-Fidelity
- A design that is not highly detailed or polished.
- AJAX
- A web development technique used to create interactive web applications.
- Usability Heuristics
- A set of guidelines for designing user-friendly interfaces.
- Static Pages
- Web pages that do not change content or layout dynamically.
- Ecommerce
- The buying and selling of goods and services online.
- Creative or Technical Applications
- Applications that require creative or technical skills to use.
- Agile
- A software development methodology that emphasizes collaboration and flexibility.
- Parallel Design
- A design process in which multiple designers work on the same project simultaneously.