Filter and highlight items in a complex workflow

Question

The application for which I'm the UI designer includes a "workflow canvas" showing an overview of a process.

This is a workflow of 3 tasks:

Complex process can occur, where there are 20 tasks or more. For that number of tasks, the workflow view becomes cumbersome and overview is lost, so we want to implement better navigation, searching and filtering in this view (e.g. on all tasks assigned to the same user).

What is a best practice for doing this?

It is not possible to simplify the process any further, or to break it up in multiple parts. It's a canvas, so users can drag tasks around to nicely arrange them (or let an automated function do this).

Answer 1

Consider Google Maps or Wikimapia. They have large map area and many objects there. You could use similar way to build interaction and layout.

Some points to consider:

• Maximize working area with collapsing elements, like menu area, etc.
• Provide tools for quick access to objects. You could use an interactive list of objects which is linked with the objects on view
• Use filters and tools which are appropriate to users's tasks
• Combine collapsed and expanded state of the objects. Expanded ones are for assigned tasks (they are more actual for a user)
• Use pan and zoom tools if possible
• Use scaled down full view picture for location and navigation help

Expanded/Collapsed view

More details on this technique is pictured:

This technique is used in electronic circuits design software, where you could "pack" some part of a circuit into subcircuit. This subcircuits allow to transform complex circuit to more simple one and designer can focus on a part which is currently being designed.

This allows to track own tasks in detailed view and keep tracking on the entire flow. Collapsed tasks don't distract attention, but helps to form the whole picture.

Answer 2

Building on Alexey's answer... you may want to take a look at Prezi's interface.

Instead of managing a "workflow", the user are managing the flow of their presentation. You can drag around the canvas to pan. As you click onto a given item on the left hand list (slides in Prezi's case), you zoom into the object.

Say you want to filter by name or something... I would recommend you zoom out to show the full view and highlight the tasks matching the filter criteria either by expanding them or dimming out the non-matching ones.

The standard double click to zoom into an area will be helpful.

Hope that helps.