Fluxograma de Interação/Navegação

Este documento costuma ser chamado de Fluxograma de Interação quando se trata de produtos ou dispositivos móveis e Fluxograma de Navegação quando se trata de websites. Ambos demonstram as etapas de execução de uma determinada tarefa. Cada etapa pode representar uma tela, uma página, uma opção de menu. É preciso deixar bem claro o que está sendo representado através de uma legenda.

O mais comum é as caixas representarem páginas de um website e as linhas são links ou botões. É possível escrever na linha para indicar o texto do link.

O fluxograma serve para definir e avaliar sequências interativas e seus possíveis desvios e desdobramentos. O objetivo do diagrama é visualizar se a sequência faz sentido para o usuário. Também serve como referência para requisitos de desenvolvimento, especificando que telas serão necessárias.

É possível num mesmo fluxograma demonstrar mais de uma tarefa, porém, o limite é curto. Um fluxograma com setas indo pra cá e para lá pode deixar o leitor do diagrama perdido facilmente. Quando o projeto atende a muitas tarefas, é melhor fazer um fluxograma para cada tarefa. Uma boa estratégia de leitura é colocar as primeiras etapas no topo superior esquerdo e descer até o canto inferior direito. 

Exemplo de fluxograma de tarefa:

Para evitar a ambiguidade na intepretação destes diagramas, Jesse James Garret criou o Vocabulário Visual, considerado um padrão de mercado. Veja um tutorial completo. Abaixo uma paródia feita por Fernando Aquino utilizando a notação estritamente.

Existem representações mais elaboradas de trabalhar com fluxogramas de interação como o Diagrama Sequencial e Swimlanes.

Programas para fazer fluxogramas: