Information architecture deliverables: Page flows (with pictures)
It’s good to know what information architecture deliverables you can expect on a project. Whether you’re working on a website, intranet, or another content management system implementation or redesign, there’s a few usual suspects for information architecture deliverables:
Card sorting
Content model or metadata model
Page flows
This article looks at page flows.
Different types of flows
While researching this article, I came across various terminology for various kinds of flows on websites. There’s user journeys, user flows, task flows, and page flows (among other terms). I found the investigation interesting, so here is what I discovered. I’ll list articles at the end of this post, for reference.
User journeys: User journeys show you how a persona goes through a certain process in their life. This is a process that your company wants to illustrate and detail, so that you can solve various problems in this process, create products to aid this process, or just know more about what this persona is experiencing.
Task flows: A task flow details the happy path through a website or product. It’s more than just the user’s point of view and could actions by other roles.
User flows: A user flow details how a user starts on a specific task, the steps they go through to complete this task, and the decision points and variables. This process would be from the user or persona point of view.
Page flows: Page flows illustrate the links between pages on a site, from a site structure perspective. It ensures there are no dead ends for these major activities or tasks that need to happen.
Wireflows: A combination of wireframes and the task flow or user flow.
Page flows
Let’s start talking about page flows!
Why would you use page flows?
When I want to explore the connections between pages on a website, after I make a site map but before I create wireframes, I would make page flow diagrams. I would use page flows when the client and I need discuss how the content will flow.
Often clients have questions about how pages will be linked together and how the site will flow. When looking at a site map, it’s a very two dimensional model of a site. A site map doesn’t show links between pages across the breadth of a site. However, these are typically the more complex questions that clients ask about. Page flows can answer these questions for more important tasks.
I would also use page flows to ensure I have uncovered all design requirements for certain pages or for the site as a whole.
What do page flows show?
Again, page flows illustrate the links between pages on a site, from a site structure perspective. They ensure there are no dead ends for these major activities or tasks that need to happen. Typically page flows are based around user task to ensure the users can go through the tasks on the site. These page flows don’t take into account everything the user could do (because then you’d have a bunch of squiggly lines connecting pages!). These flows take into account the best path.
I would say that these diagrams are focused around the pages on the site, the links between the pages. They don’t detail the specific UI elements on a page (that’s what a wireframe would do).
A page flow diagram would show:
The task being explored
How a user comes into the site or page
The navigation through a site
The decision points which would carry the user to one page or another
The happy path through the content
The terminating page
The different types of page you will need on a site
How do you make page flows?
The easiest way for me to make page flows would be in a tool like Miro or Mural. There are enough design elements in this tool to provide enough communication and collaboration.
What do you need to start page flows?
I need the user tasks, or scenarios, and the site map to start the page flows.
How do you know if page flows are “right”?
Often, enough possibilities of the “happy path” have been exhausted. Also, clients might start asking what something looks like on the page. At that point I know they’re ready to move on.
Who should review page flows?
The core team, plus any key stakeholders, should review the page flows.
What do you do once page flows are done?
I move on to the wireframes.
Do you need to keep updating the page flows?
I most likely wouldn’t keep updating the page flows unless there was a significant change to the design and we needed to assess the impact of that change.
Do you need “real” content in page flows?
Page flows should only show placeholder boxes and don’t need to show any real content.
Page table example
Example 1
Here’s an example exploring how a user would navigate from the home page to the application system. We can see the different types of pages needed, some decision points, as well as the handoff from the website to another system.
Example 2
In this example, I worked on a healthcare website where we needed to ensure users could find hospital directions and visitor information. Visitor information was particularly important during the pandemic when hospital visits were restricted.
References
Here are the references I used in writing this article.