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:

enter image description here

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).

  • 1
    Can user zoom in/out on the canvas? Commented Feb 18, 2014 at 19:08
  • Currently, that's not possible. Same holds for navigating the canvas with a small pane (like for example adobe illustrator)
    – t.hendr
    Commented Feb 20, 2014 at 8:18

2 Answers 2


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

enter image description here

Expanded/Collapsed view

More details on this technique is pictured:
enter image description here

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.

  • +1 for the expanded/collapsed view, didn't think of that before. Do you have a specific app in mind that employs this sort of functionality?
    – t.hendr
    Commented Feb 20, 2014 at 10:08
  • @t.hendr, cannot remember an example from diagraming software (except mind-mapping tools), still I've provided an example from close field. Look at Collapsed/expanded section in the answer. Commented Feb 20, 2014 at 11:43

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.