Como Criar Fluxogramas e Sitegrama com Axure


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

u38

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.

objeto-pagina

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

objeto-conj-pagina

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.

objeto-link

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.

objeto-no-sem-pagina

Arquivo
Representa um arquivo disponibilizado para download.

objeto-arquivo

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

objeto-conj-arquivo

 

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.

objeto-ponto-de-continuacao

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.

objeto-conector

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.

objeto-seta

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.

objeto-seta-unidirecional

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.

objeto-evento-simultaneo

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

objeto-area     

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

objeto-area-interativa

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

objeto-chamada-de-subrotina

 

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.

objeto-subrotina

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.

objeto-ponto-de-decisao

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.

objeto-conector-condicionalobjeto-seta-condicional objeto-seta-unidirecional-condicional

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.

objeto-conjunto

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.

objeto-ramo-condicional

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.

objeto-seletor-condicional

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

objeto-area-condicional

 

Conexão

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

u42

 

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.

u121

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.





Artigos Relacionados


Designer de Interface pós graduado em Arquitetura da Informação. UI/UX Designer e Front-end Developer, atualmente atendo empresas como freelancer e sou colaborador em uma agência de comunicação onde desenvolvo interfaces criativas com foco na experiência do usuário. Organizador por natureza acredito que o caos é a matéria-prima necessária.

2 comentários em “Como Criar Fluxogramas e Sitegrama com Axure

  1. Rodrigo Alves 23 de julho de 2014 9:13

    amigo faça uma materia sobre aplicativos de organização de tempo

    um dos melhores da minha opnião é o trello.com

    =D

    • Robson Moulin 23 de julho de 2014 11:17

      Olá, Rodrigo bom preciso estudar sobre o assunto ainda não utilizei esses aplicativos. Obrigado pela dica, se eu tiver um tempinho posso investigar um pouco.

Deixe o seu comentário

Seu endereço de email não será publicado.

Você pode usar HTML tags e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>