Como Criar Fluxogramas e Sitegrama com Axure

Conhecemos o Axure na maioria das vezes como um software para prototipar wireframes de interfaces, mas esta ferramenta também possuí uma ótima função que é permitir desenhos de fluxogramas. Com essa funcionalidade podemos descartar o uso do Visio da Microsoft que é uma ferramenta que tem por padrão esta funcionalidade e utilizarmos apenas o Axure para o nossos projetos.

O fluxograma ou digrama de fluxo é fundamental em arquitetura da informação, ao desenhar o fluxo das telas e a relação que cada uma tem com a outra se torna muito mais fácil tanto para exibir esses dados a outras pessoas envolvidas no projeto como para mapear todas as funcionalidades e facilitar no processo de construção dos protótipos.

“Fluxograma é uma forma gráfica de representar atividades que devem ser executadas em seqüência, como em um processo. “

No site do Axure na sessão “learn” você pode conferir os manuais onde ira te ajudar a criar os fluxos na ferramenta (http://www.axure.com/learn/flow-diagrams).

Objetos de Fluxo

Os objetos para desenho do diagrama você encontra na sua biblioteca de widgets. Esses objetos se diferenciam dos objetos tradicionais para os wireframes pois eles contém pontos conectores nas extremidades para poder fazer a relação. Cada objeto tem sua funcionalidade em um fluxo

Abaixo segue cada simbolo detalhadamente para você criar fluxogramas corretamente.

Símbolos nós

Para ficar mais claro irei explicar cada um dos objetos que compõem o fluxograma.

Página
Representa a unidade básica de experiência do usuário na Web,  a página.

Conjunto de Páginas
Representa um grupo de páginas com funcionalidades idênticas cujas propriedades navegacionais são indiferentes à macroestrutura do website.

Link
Representa os links que levam o usuário de uma sub-árvore para outra dentro estrutura de navegação do website, ou os links que levam a outros websites (links externos). São utilizados para representar links do sistema de navegação.

Nó sem página
Representa itens da estrutura de navegação que não possuem páginas associadas. Normalmente são itens pais de menus pull-down ou pull-up.

Arquivo
Representa um arquivo disponibilizado para download.

Conjunto de Arquivos
Representa um grupo de arquivos disponibilizado para download com funcionalidades idênticas.

Símbolos de fluxo

Ponto de Continuação
Representa que o fluxo continua em uma outra folha do desenho. É comum que o desenho completo do modelo de um website não caiba em uma única folha de papel. Com o Ponto de Continuação é feita a transição de uma folha para outra, mostrando a continuidade de uma seta ou conector.

Conector
Representa um relacionamento hierárquico entre dois nós no sitegrama. O conjunto destes relacionamentos hierárquicos compõe a estrutura de navegação principal do website.

Seta
Representa um fluxo entre dois nós mostrando o direcionamento que o usuário deverá seguir quando se move no website para completar uma transação.

Seta Unidirecional
Representa um fluxo entre dois nós onde o movimento reverso (movimento upstream) é proibido. Isso é comum em casos em que uma ação irreversível ocorreu, como quando um dado é gravado no banco de dados.

Eventos Simultâneos
Representa um fluxo em que uma ação do usuário gera múltiplos eventos simultâneos. Um exemplo é abrir uma janela pop-up ao mesmo tempo que uma página é carregada na janela principal.

Área
Representa um grupo de nós que compartilham os mesmos atributos. Por exemplo, pode ser um grupo de páginas e formulários que aparece em uma janela pop-up ou que precisam ter o mesmo tratamento de design.

Área Interativa
Representa um grupo de nós que formam uma estrutura básica funcionalmente idêntica que será repetida várias vezes no sitegrama. Por exemplo, em um catálogo de produtos no qual cada produto tem o mesmo conjunto de páginas associadas a ele. Esse símbolo deve ser usado para não se repetir o desenho da mesma estrutura para cada produto.

Chamada de Sub-Rotina
Chamada de Sub-rotina, serve como marcador para o fluxo em todos os contextos em que ele é repetido no projeto.

Sub-Rotina
Representa um fluxo reutilizável, uma série de passos que aparecem repetidamente em contextos diferentes por todo o projeto. Um exemplo é o procedimento de login de um site, que pode ser chamado de diversos pontos e normalmente, após executado, vai a página seguinte do fluxo.

Ponto de Decisão
Representa uma decisão de seguir por um entre vários fluxos mutuamente exclusivos dependendo da ação do usuário. O exemplo mais comum é o tratamento de erros de um formulário.

Conector Condicional, Seta Condicional, Seta Unidirecional e Condicional
Representa uma decisão de apresentar ou não um caminho (link, botão, etc.) dependendo da avaliação de determinadas condições. Por exemplo, uma página contendo informações sensíveis que apenas funcionários devem ter acesso. A condição neste caso é o tipo de usuário (empregado). Se a condição é verdadeira, o caminho é disponibilizado. Caso negativo, o caminho não existe.

Conjunto
Representa uma possível resposta de um conjunto de opções na qual deve ser apresentado mais de um caminho. Este símbolo pode aparecer downstream a partir de um Ramo Condicional ou de um Seletor Condicional.

Ramo Condicional
Representa uma decisão de apresentar um entre vários caminhos (link, botão, etc.) mutuamente exclusivos dependendo da avaliação de determinadas condições. O nó upstream é conectado a um dos vértices do triângulo e os nós downstream são conectados ao lado oposto.

Seletor Condicional
Representa uma decisão de apresentar um ou mais caminhos (link, botão, etc..) de um conjunto de possíveis caminhos que não são mutuamente exclusivos. Qualquer um dos caminhos que preencha os requisitos necessários é apresentado ao usuário. O nó upstream é conectado ao lado menor do trapézio e os nós downstream são conectados ao lado maior.

Área Condicional
Representa uma ou mais condições que se aplicam a um grupo de páginas. Ao contrário dos outros tipos de áreas, as áreas condicionais são associadas com um resultado, que é gerado se as condições não são atendidas.

Conexão

Para fazer as conexões você clica no ícone como mostra a imagem abaixo

Páginas para o Fluxograma

Não é necessário criar as páginas mas elas fazem com que seu projeto fique mais organizado então vale a pena relacionar seu fluxo para cada página.

Conclusão

Os Fluxogramas são simples de serem criados e muito importantes, e ao utilizar o Axure você exclui a necessidade de outras ferramentas para realizar esta etapa no processo de arquitetura da informação, basta ter em mente as funções relacionadas a cada objeto.

O nível de dificuldade será relacionada ao esquema de telas e funcionalidades do projeto apenas.