Sobre criação de diagramas de fluxo para design de interação e UX.

1. diagrama
de fluxo
rodrigo@gonzatto.com
rodrigo gonzatto
gonzatto.com
fluxograma

2. • Fluxograma
ou diagrama do
fl
ux
o
• Muito utilizado para:
discriminar etapas de atividades
estados de sistemas
fl
uxos de tarefa
s
• Simpli
fi
cação da complexidade
que permite ver uma totalidade
com dimensão temporal (os
fl
uxos possíveis)
Diagramar fluxos
https://www.lucidchart.com/pages/pt/o-que-e-um-
fl
uxograma

4. Início Fim

5. Estado/
Etapa
Estado/
Etapa
Estado/
Etapa
Estado/
Etapa
Estado/
Etapa

6. Fluxos
Fluxos Fluxos Fluxos Fluxos
Fluxos
Fluxos

7. Decisão

8. diagrama com
representação
e
objeto
representado

9. diagrama com
representação
e
objeto
representado

12. exemplo de
fl
uxograma de anúncio de jogos
em um site de troca de jogos

13. wire
fl
ow
(
fl
uxo + wireframe)

14. Modelos de Navegação
• Macro para Micro
• Entrada e Saída
• Linear
• Rizomático

15. Modelo de Navegação:
Macro para Micro
Modelo de navegação em árvore

17. Modelo de Navegação
em Entrada e Saída

19. Modelo de Navegação
Linear

22. Modelo de Navegação
Rizomátíca

24. Vocabulário Visual
para Arquitetura de
Informação

25. Vocabulário Visual
VisualVocabulary de Jesse James Garrett
página/ documento (e suas pilhas)
dois tipos de estrutura (árvore, a esquerda)
Setas indicam o caminho que o usuário
está propenso a seguir.A crossbar
indica operações irreversíveis.
ponto de decisão
exemplo de área

26. Vocabulário Visual
VisualVocabulary de Jesse James Garrett
página/ documento (e suas pilhas)

27. Vocabulário Visual
VisualVocabulary de Jesse James Garrett
dois tipos de estrutura (árvore, a esquerda)

28. Vocabulário Visual
VisualVocabulary de Jesse James Garrett
Setas indicam o caminho que o usuário
está propenso a seguir.A crossbar
indica operações irreversíveis.

29. Vocabulário Visual
VisualVocabulary de Jesse James Garrett
exemplo de área

30. Vocabulário Visual
VisualVocabulary de Jesse James Garrett
ponto de decisão