Fluxograma de navegação do Revolução Etc

Estou programando um redesign do meu site. Sim, novamente. O objetivo principal de eu ter criado este site foi por puro experimentalismo e para documentá-los. Por isso eu sempre estou fazendo testes por aqui, e muitas vezes eles nem sempre são perceptíveis visualmente. Quantos de você sabem por exemplo que meu site é um dos pouquíssimos (senão único) em application/xhtml+xml? A diferença é que o site cresceu tanto e eu nunca esperava estar beirando na casa dos 5000 assinantes de feeds e certos experimentalismos acabam gerando muita conversa. Mas seja paciente, please!

E o melhor que eu posso fazer é continuar meus experimentalismos. Por isso, vou escrever uma série de textos narrando passo a passo meus procedimentos para o redesign do meu próprio site. Espero que goste! Veja abaixo como ficou o fluxograma!

Fluxograma de navegação

Fluxograma na veia!

O primeiro passo é, adivinhe se puder, o fluxograma! Desde que comecei a fazer fluxograma de qualquer coisa que vou desenvolver e planejar, ele é sempre um dos primeiros passos! Eu sempre começo pelo inventário de conteúdo, mas como é um redesign , o conteúdo está basicamente pronto, pouca coisa vai mudar. Para fazer este fluxograma eu utilizei o diagrama de Garrett (você pode ler mais sobre ele no Instituto de Arquitetura da Informação, no site do Nandico e no site do Walmar, um vocabulário visual, ou seja, um conjunto de símbolos usado para descrever o fluxo da experiência do usuário em um site. Ele tem o objetivo de ser simples e de ajudar os envolvidos no projeto a ter uma visão geral do que precisa ser feito.

Landing pages

Vou comentar algumas características que tenho certeza que você iria me perguntar de qualquer forma. A primeira delas é a “landing page”, que trata-se da página de um artigo alterada por programação (um plugin do WordPress chamado Landing sites) quando o usuário chega até o meu site vindo de algum mecanismo de busca. A url dessa página é exatamente a mesma se você acessá-la de dentro do meu site, ou de qualquer outro lugar que não seja um mecanismo de busca. Como ela realmente é diferente em alguns trechos, ou seja, existem elementos que a torna diferente, eu a representei como tendo uma origem distinta para justificar sua representação. Alguém aqui já representou isso em um fluxograma? O que acham?

Outra consideração, é a página de erro 404 que todos costumam se esquecer dela. Eu também quis representar a origem com que o usuário chega até ela (sempre por uma url inexistente) para justificar sua representação. Você pode perceber que um blog é realmente simples, mas sentar para planejá-lo é muito interessante. Não só um blog, mas qualquer site por menor que ele seja, procure representar visualmente usando o diagrama de Garrett para ver se você realmente sabe de todos os detalhes que tem pela frente. Críticas e sugestões?

12 thoughts on “Fluxograma de navegação do Revolução Etc”

  1. henrique,
    Essas dicas serão interessantes, pois ainda que totalmente leigo no assunto, tenho procurado aprender o máximo para melhorar os meus blogs.
    abs

  2. Somente alguns pontos:

    – Sei que você está começando o fluxograma. De qualquer forma, não esqueça de colocar as outras possíveis páginas de entrada do usuário.

    – Falta adicionar páginas de erros na hora de inserir um novo comentário ou de entrar em contato (caso aconteça algum erro).

    – Falta descrever (afe, acho essa parte muito chata) o fluxo de navegação entre as páginas, ou melhor, o estilo de navegação ou disposição do conteúdo (não estou lembrado de todas os tipos agora, mas se quiser depois posso comentar em detalhes os estilos de navegação).

    Saudações,

    Mark Costa

  3. Muito bom. Esses diagramas facilitam mesmo a vida, mas me diga uma coisa, que programa você utilizou pra desenhá-los? Até hoje só encontrei o MS Visio, mas é muito caro. Não tenho grana pra tudo isso.

  4. Pingback: Silici0 :: Blog » Documentação, diagramas e fluxogramas
  5. Legal Henrique!

    Os diagramas são realmente muito úteis. É fundamental entendermos a sintaxe deles, pra que possamos disseminar ainda mais esse conhecimento.

    Falando ao Rics: tem stencil do diagrama disponível até pro OpenOffice Draw (programa vetorial que vem no pacote do OpenOffice). Eu já usei ele e é muito prático, os elementos tem até conectores – como o Visio – o que facilita muito o trabalho na hora de montar o diagrama.

  6. Faltou humildade no teu primeiro parágrafo. Óbvio que existem outros sites xhtml, poderia enumerálos mas não é o caso.
    Teu layout está bom, os experimentos ajudam outras pessoas e essa é uma idéia legal.

    Parabéns pelo teu trabalho, mas seja mais humilde na próxima.

  7. Muito bom, Henrique. A gente vê que, mesmo em um simples blog, há o que ser documentado. Me diz uma coisa: essa notação de ter as ligações em um cinza mais claro é uma convenção sua não é?

  8. Opa, show de bola =). Aqui no trabalho fizemos uma pequena adaptação do Diagrama de Garrett para planejamento de sistemas também (não só sites). Acabou que o vocabulário se incorporou no processo da empresa e hoje nenhum projeto fica sem esse documento. Valeu!! =).

  9. Oi Henrique, muito legal poder acompanha a reestruturação do blog. Você está me ajudando muito na minha formação profissional e acadêmica. Obrigado.

    Qual foi o software que você usou para fazer o fluxograma?
    t+ e parabéns pelo seu excelente blog.

Leave a Reply

Your email address will not be published. Required fields are marked *