O uso do vocabulário visual em fluxos de interação

Para o profissional de design os fluxogramas não são apenas uma forma de desenhar um processo de trabalho, mas também servem para explicitar todos os caminhos a serem percorridos e mapear todos os cenários de interação e exceções.

Esta tarefa é importante pois através de um fluxograma bem desenhado conseguimos avaliar e identificar os erros que podem existir nesse processo de navegação e a partir disso propor melhorias.

Assim como é importante para alinhar e apresentar o conteúdo a todos os stakeholders, aqui no Pagbank costumamos fazer assim, principalmente quando vamos falar sobre alguma navegação mais complexa, pois auxilia na apresentação e entendimento de todos, também validamos se estamos atingindo todos os requisitos necessários para trazer as respostas que queremos aos nossos usuários e atender aos bons princípios da heurística em dar feedbacks claros, concisos, caminhos de idas e voltas entre todo o restante das boas práticas para obtermos com êxito o resultado que esperamos.

Quando é recomendado?

Não há uma ocasião única, mas habitualmente realizamos na concepção do projeto e durante o processo de construção do visual design pode ser feito alguns ajustes ao nos depararmos com impossibilidades técnicas ou até mesmo novos insights. Também atualizamos ou refazemos ao pegar um fluxo de trabalho novo que já esta em produção.

Como fazer um userflow?Existem dois formatos principais de diagramas que podemos utilizar para construir um fluxograma.

Um destes formatos é comumente usado desde os primórdios da programação por analistas e desenvolvedores de sistemas, que é o diagrama de fluxo de dados.

Esse diagrama serve para mostrar o processo de um sistema e o fluxo de informações. Outro diagrama conhecido é o UML que é utilizado por estes profissionais e que também incorporamos a arquitetura da informação.

Mas a melhor forma de diagramar um fluxograma para design de interação foi construído por Jesse James Garrett (pesquisador, desenvolvedor e criador do Ajax: Javascript e XML). Este diagrama criado é o mais recomendado, porque com ele conseguimos exemplificar todas as variações de interação possíveis e fazer com que a diagramação fique mais concisa e quando isso acontece melhoramos a leitura e facilitamos a assimilação das informações para quem for visualizá-las.

Significados do vocabulário visual para o design de interação

Páginas, arquivos e conjuntos

O retângulo é usado para interpretarmos páginas de navegação e o símbolo de página interpretamos arquivos como download etc. O conjunto de páginas e de arquivos são para agrupamentos a serem abertos e que são idênticos.

Conectores e setas

Linhas retas sem conectores em setas são usadas para diagramas simples como um sitemap por exemplo, independente da orientação do digrama como horizontal ou vertical.

Setas indicativas são para determinar a direção, ligando de onde vem a informação para onde vai. Utilizamos a linha reta chamada crossbar no lado oposto da seta para indicar caminhos de mão única que simbolizam uma ação irreversível.

Conjunto concorrente

Interpretamos com o semi círculo quando uma ação pode abrir múltiplos caminhos como uma página e um arquivo de download por exemplo.

Pontos de continuidade

Em fluxos muitas vezes temos ligações com demais fluxos de um aplicativo ou site como por exemplo “fazer login” ou “cadastro” que já estão mas que para não termos que mencionar o funcionamento dele completo e assim aumentar nosso diagrama desnecessariamente, podemos usar estes pontos de continuidade que puxam o que queremos detalhar após este fluxo já pré existente.

O mesmo acontece quando queremos desmembrar o fluxo em dois para caber melhor na página que estamos diagramando.

Áreas e áreas interativas

Utilizamos o retângulo de bordas arredondadas para identificar um conjunto de páginas em comum, como por exemplo um pop up.

O mesmo retângulo quando empilhado usamos para representar um conjunto de páginas que possui a mesma estrutura de páginas internas como, por exemplo, uma página de produto dentro de um ecommerce.

Áreas de fluxos e referências

Agrupamos páginas que pertencem a um fluxo dentro da estrutura para utilizar como referência este fluxo conforme exemplo a esquerda, sem precisar voltar a detalhar todo o processo novamente.

Condicionais e pontos de decisão

O losango é utilizado para descrevermos pontos de decisão do sistema, são perguntas internas do sistema como “usuário possível login?” para detalhar na sequência os caminhos para “sim” e “não” respondendo à pergunta.

Como o espaço de um losango é complicado em inserir informações internamente nele, podemos usar um número ou uma letra entre parênteses para então usarmos a legenda do lado de fora da forma geométrica. Isto faz com que não necessitamos aumentar a forma para inserir o texto dentro ou diminuir a fonte do texto para caber.

Setas e conectores condicionais

Setas e conectores tracejados são utilizados quando o caminho pode ou não ser exibido ao usuário. Por exemplo em intranets quando algumas páginas são só exibidas quando o usuário tem permissão de acesso.

Ramos condicionais

O símbolo de triângulo é usado quando há um caminho mútuo para exibir ao usuário.

Seletores condicionais

O símbolo de trapézio funciona para vários caminhos que não são mutuamente exclusivos, mas qualquer número de caminhos pode satisfazer ao usuário.

Por exemplo um resultado de busca.

Conjuntos

Depois de uma condição lógica podemos apresentar um conjunto de informações aos usuários e por isso representamos com um círculo.

Por exemplo se a resposta for uma só ou múltima.

Áreas condicionais

Quando alguma condição é aplicada para um conjunto de páginas específicas usamos o retângulo com bordas arredondadas tracejado, por exemplo quando é um acesso a uma área logada.

Boas práticas para montar um fluxograma

Seja o mais sucinto possível

Simplificar seu diagrama faz com que você traduza a lógica mais fácil possível para as pessoas absorverem.

Menos é mais!

Uma tela grande ou muitas páginas de fluxo torna a leitura complexa, podemos tentar simplificar ao máximo.

Manter um mesmo padrão de orientação visual

Importante diagramar o fluxo colocando tópicos semelhantes na mesma orientação visual, exemplo, uma condição lógica colocamos as respostas de não e sim para o mesmo lado das demais. Porque com isso fica de fácil e rápida associação ao leitor pois quando olhar para a mesma direção vai entender onde fica cada resposta positiva e negativa. Os fluxos de exceção também ficam mais fáceis de serem reconhecidos.

Utilizar telas do layout em tamanho reduzido

Quando utilizamos a tela do layout para representar as páginas que estamos associando ao fluxo, fica mais fácil de entender qual página estamos nos referindo e facilita o entendimento.

Utilizar ferramentas colaborativas

Quando fazemos os fluxos em ferramentas que permitem múltiplos acessos podemos criar o fluxo com demais pessoas, assim como permitir que demais integrantes do time façam suas recomendações diretamente no fluxo.

Dedico esse artigo em homenagem ao Roberto, analista de sistemas aposentado e meu pai, a quem devo o que sou, pois não apenas me ensinou sobre a vida e me preparou para ela, como me ensinou lógica de programação e fluxos de interação.