What's the equivalent to a 'visual site map' or a 'product flow'

Question

Basically, if user flows and task flows outline forms of interaction between screens (by tree flows or single linear flows), what is the mapping of all screens (and interactions) that exist in the product? A site map?

I've often found site maps are more under the realm of information architecture, so they might not necessarily include interactions or visual fidelity?

Is creating this mapping useless due to its ambiguity? Task flows serve to outline how a user would perform a task, site maps (as a method for information architecture) are based upon user's mental models, so is there any reason to construct a 'product flow'?

Answer 1

Wireflow?

You may be looking to create something like a "Wireflow" as described on this Nielsen Norman article?

Summary: Wireflows are a combination of wireframes and flowcharts. They can document workflow and screen designs when there are few pages that change dynamically.

As noted in the article, this model is intended to illustrate complex interactions, where you can indicate the specific UI component where a user will take action, and the result.

Answer 2

It would be a site-map, or an application-map. It's not used to study a specific task, but rather to see all the screens across the product and hierarchy (like an inventory) so you don't run wild and loose track of them.

Ask yourself what are you trying the accomplish with the deliverable. Sitemaps can be adjusted to that need, or be useless. A quick google search will also reveals many people confused what is what. The truth is, depends on what your goal is.

Depending on where you work, IA can be limited to sitemaps or extend to all types of user flows and task flows. What matters is what is needed for the product, not so much who does what.

Answer 3

It seems like you might be describing a Design Pattern Library, where each state and behavior of every UI component is documented, along with its description and usage. The purpose of the library would be to keep track of the patterns used and for consistency in design.

A site map isn't based on the user's mental model, it's a diagram showing an overview of the hierarchy of screens/pages and how they are connected.

I've not encountered the term "product flow" before but it sounds like an interactive prototype with annotations. The use of this document depends on its purpose: As design documentation, design specs for the developers or to communicate how a product works.