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?

  • Paulo Villela

    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

  • Mark de Souza Costa

    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

  • http://ricsblog.wordpress.com/ rics

    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.

  • Pingback: Silici0 :: Blog » Documentação, diagramas e fluxogramas()

  • Moisés Ribeir

    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.

  • Diego

    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.

  • http://fatorw.com/ Walmar Andrade

    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 é?

  • http://www.pinceladasdaweb.com.br/blog/ Pedro Rogério

    Seu blog não é o único que utiliza application/xhtml+xml, eu também utilizo no meu!!!

  • Ambev

    è rpz paraçe que só poraqui tem esse tal desse OPML ;}

  • Nandico

    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!! =).

  • http://www.camilo87.com Camilo

    Em relação ao processo será muito bom poder acompanhar.

    Só acho sacanagem o desperdício de um layout tão legal como esse de agora.

  • http://edysegura.com Edy Segura

    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.