| title | categories | keywords | description | image | sidebar | |
|---|---|---|---|---|---|---|
More complex user process maps in documentation systems |
|
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. |
sidebar_visualcommunication |
- TOC {:toc}
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.
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:
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.
{% include ads.html %}
Here's a JS Fiddle for this code:
<script async src="http://jsfiddle.net/tomjoht/nuvcqbu5/embed/"></script>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?