Adobe DITA World
Stay current with the latest in tech comm
Keep current with the latest trends in technical communication by subscribing to the I'd Rather Be Writing newsletter. 4,500+ subscribers

Stitcher radio

Search results

Adobe DITA World

More complex user process maps in documentation systems

by Tom Johnson on Jun 3, 2016
categories: 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.

Background

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?

Stay current with the latest in tech comm
Keep current with the latest trends in technical communication by subscribing to the I'd Rather Be Writing newsletter. 4,500+ subscribers

follow us in feedly