Wireframes are most useful when documenting websites (or other digital products) with many discrete, relatively static pages or screens, where clicking a link or button will typically navigate to a completely different page. Wireframes are a great way of showing layout, but they don't describe interaction well, and they are especially poor at documenting the layout of digital products that have a lot of dynamic content, such as mobile apps or webapps. However, we do like wireflows because (1) they are easily learnable by those who’ve seen wireframes and flowcharts before, and (2) wireflows have enough advantages to overcome the inertia that otherwise favors familiar formats.
#WORKFLOWY COLORS HOW TO#
Usually it’s bad to introduce a new specification format because many stakeholders won’t know how to interpret it. Why We Need Something New: Flowcharts and Wireframes Don't Document Complex Apps Well Many designs for ecommerce shopping carts and checkout pages are suited to be specified as wireflows. However, wireflows are not merely limited to documenting mobile apps and websites - they can also be used for desktop products, typically by showing a portion of a screen or webpage that changes based on user interactions. Because of the relatively small size of mobile screens, actual page designs (i.e., wireframes) could easily replace abstract symbols in flowcharts.
#WORKFLOWY COLORS FULL#
Wireflows emerged as a common practice among teams designing mobile apps, where each step in the flowchart is represented by a wireframe for a full mobile-screen design. While wireflows can be created in high fidelity for the purposes of communicating detailed design specifications, they are just as useful as lower-fidelity documents to discuss and communicate interaction design and user workflows. The use of screen designs, rather than abstract flowchart symbols, keeps focus on the product with which users will be interacting. This low-fidelity wireflow shows a simple user task.
Wireflows as a Deliverable for Workflowsĭefinition: Wireflows are a design-specification format that combines wireframe-style page layout designs with a simplified flowchart-like way of representing interactions. However, for UX use, they lack the page context - an aspect which strongly impacts the user experience.
Flowcharts are used describe both back-end processes and user task flows (as seen in this example). A wireframe of a web page conveys layout ideas, content, and page-level design for websites and apps that have few, mostly static pages, but is not as useful in communicating heavily dynamic process flows. In the last few years, an alternative deliverable called wireflow has emerged as a solution to these issues, used to show designs in the context of common user tasks. However, despite the fact that both of these deliverables remain in common use among UX professionals, there are situations in which they are suboptimal tools for communicating design ideas, particularly when documenting mobile, desktop, or web apps that don't have many unique pages, but instead feature a few core pages which change content (or layout) dynamically based on user interaction. In the UX field, wireframes are a common deliverable to show page-level layout ideas, whereas flowcharts are useful for documenting complex workflows and user tasks.
0 kommentar(er)
