Adobe FrameMaker

Get new posts delivered straight to your inbox.

Subscriber count: 4,300

Stitcher radio

Adobe FrameMaker

More complex user process maps in documentation systems

Jun 3, 2016 • visual-communication

For more complex user process maps, you can group the associated topics into larger collections. When users click a workflow step, you can show them all the relevant topics within that collection. This approach accommodates a more complex user process workflow.


In my previous post, I outlined a method for showing linear workflows, and pointed users to this example.

Linear workflows work fine for simple processes that have a clear number of steps (especially when the steps are just a few, like the example I showed).

But what happens if you have a process that is more complicated? What happens if you have about 10-20 different topics users need to read or do to complete a process, and the steps don’t all follow a linear order? What happens if steps are required, others are optional, and others are just informational?

Note I’m still talking about processes, with a beginning and end. I’m not talking about general principles for organizing content, which is a much broader topic. Additionally, I’m focusing on processes within documentation for end-users, not processes that detail user journeys for customer UX design thinking, or processes that help efficiency engineers improve systems.

Adding Complexity

Let’s expand the sample workflow with some more associated topics. Let’s say that there are approximately 9 topics to be aware of in this process. Not all topics have to be completed in a specific order.

Rather than stacking these up into 9 workflow boxes, I’ll break them up into three general groups:

  • Get started
  • Build your widgets
  • Publish your app

I created an example of how to build this workflow map here:

Complex user map sample -- click the workflow squares to see more details. Each square opens a modal that shows all associated topics in that collection.

This example users modals from Bootstrap to pop up information boxes that contain the various topic groupings. You could design each box more attractively, even adding background images into each one and such. But this simple implementation shows the general idea.

Here’s a JS Fiddle for this code:

Ultimately this is still a linear workflow, but I’ve extracted out the steps into larger groups. Each group can have a combination of required and optional steps, along with other informational topics. This kind of map is probably more realistic, though it’s not as straightforward as the simple linear workflow.

I’ve never run across this kind of web design on any actual site, so users might find it strange. Still, I would gladly welcome this kind of process map in documentation. What do you think?

follow us in feedly

Get new posts delivered straight to your inbox.

Subscriber count: 4,300

About Tom Johnson

Tom Johnson

I'm a technical writer based in the California San Francisco Bay area. Topics I write about on this blog include the following technical communication topics: Swagger, agile, trends, learning, plain language, quick reference guides, tech comm careers, and certificate programs. I'm interested in information design, API documentation, visual communication, information architecture and findability, and more. If you're a professional or aspiring technical writer, be sure to subscribe to email updates using the form above. You can learn more about me here. You can also contact me with questions.