Multiplexado

No texto passado escrevi uma introdução sobre o Vocabulário Visual de Jesse James Garrett. Pela leitura somente textual, fica um pouco difícil de acompanhar as coisas. Então, resolvi desenhar.

Comecei a elaborar um diagrama de um sistema hipotético de Fórum. É um sistema igualzinho a esses que temos espalhados na Web. A escolha desse tipo de sistema foi proposital. Com a descrição de uma estrutura de sistema já conhecida por todos, podemos nos focar no entendimento da notação, esquecendo um pouquinho a necessidade de entender um novo tipo de sistema.

Atenção: Sobre o diagrama abaixo, vale alertar que observações em vermelho não fazem parte da Notação de Garrett. Foram colocadas nesse exemplo para fins de orientação.

Apresentando um exemplo de diagrama
Escopo:
a) Apresentar interfaces envolvidas no processo de autenticação.
b) Apresentar suporte aos perfis de acesso "Usuário padrão" e "Usuário moderador"

Desenho:

(Clique na imagem para abrir com mais detalhe)
Update: Agradecimentos a Felipe Vaz por indicar correção no ponto de entrada da área de fluxo de Autenticação. ;)

Simplesmente olhando a estrutura, já dá para ter uma noção do que se trata. Reparem que as formas por si só são muito intuitivas. Resumindo: Ler e entender é muito fácil =).

Desenhar um diagrama também não é nenhum bicho de sete cabeças. Vamos percorrer as observações em vermelho para adicionar alguns comentários sobre as formas utilizadas no desenho.

Obs.A):
Iniciamos o desenho com um ponto de conexão. Esse tipo de ligação é muito útil para criar atalhos entre diversas áreas do diagrama. Com isso não precisamos manter todo desenho em única página gigante. Bacana, não?

No caso específico do nosso fórum, esse ponto de conexão será chamado posteriormente para implementar a função de "Sair do fórum", a ser colocada mais para frente nas telas onde o usuário estará autenticado. "Sair do fórum" chamará este ponto de conexão, permitindo que o usuário volte para a tela de entrada da aplicação.

Obs.B):
Este é um tipo de conector especial. É o conector barrado. Esse tipo de desenho indica que o fluxo de navegação entre um ponto e outro não permite volta. A única direção permitida é a indicada na seta.

Em nosso caso, um usuário autenticado que selecione a opção "Sair do fórum" não poderá mais voltar telas na interface. A única maneira de prosseguir será "logar" novamente para ganhar uma nova permissão do sistema de segurança.

Obs.C):
Este é o elemento página. É representado por um retângulo simples, contendo em seu interior uma identificação textual. É o elemento fundamental do Diagrama de Garrett (e também da arquitetura web como um todo).

No fórum, implementa a página de entrada. Esta página contem informações para os usuários que ainda não estão identificados no sistema.

Obs.D):
Este é o conector simples. Esse tipo de conector indica um fluxo preferencial de navegação entre os objetos que estão conectados. A direcionalidade estabelecida pela seta indica uma maior tendência de movimentação em um determinado sentido. Mas o usuário poderá fazer um fluxo contrário ao estabelecido pela seta sem problemas.

Obs.E):
Esse elemento - essa espécie de retângulo com os cantos amassados - é um dos recursos mais poderosos da notação. É chamado de área de fluxo, e permite representar rotinas mais complexas de maneira simplificada, detalhando essa complexidade em separado.

Em nosso caso, colocamos as funções de autenticação dentro da área de fluxo. O detalhamento da área de fluxo será explicado pelas demais observações dessa sequência.

Obs.F):
O ramo condicional é utilizado quando um sistema possui vários caminhos, e o usuário poderá trilhar um e somente um deles, dependendo da condição descrita na nota de rodapé em anexo.

Para a nossa aplicação, serão dois os perfis de acesso: um para usuário padrão e outro para moderador. Dependendo da informação retornada pelo sistema de autenticação, o usuário seguirá por um dos ramos dessa árvore.

Obs.G):
Mais uma vez fiz o uso de um ponto de conexão para o detalhamento posterior dos perfis de acesso do fórum. Esse conector direcionará o usuário para uma sequência de telas que ainda não estão explícitas nessa versão do diagrama.

Obs.H):
Temos uma estrutura bem parecida com um ponto de conexão, mas essa é um pouco mais especializada: Este é um ponto de entrada para uma área de fluxo.

As áreas de fluxo necessitam de ter uma entrada e saída bem definidas para que possam ser livremente reutilizadas. Repare que o ponto de entrada se liga diretamente na interface "Login", e não simplesmente no arame da referência do fluxo.

Obs.I):
Interface de login, onde o usuário digitará seu e-mail e sua senha como chaves de autenticação. Apesar de já sabermos dessa informação, os campos que irão compor a identificação do usuário não são importantes na notação de Garrett. O objetivo é detalhar os fluxos de navegação entre as interfaces, e não detalhar os campos. Isso é preocupação futura.

Obs.:J):
Este é um ponto de decisão. De acordo com a regra textual que descreve o ponto na nota de rodapé, a navegação tomará uma das saídas especificadas.

Em nosso caso específico, se as informações de logon forem corretas, o usuário receberá uma mensagem de sucesso na autenticação. Caso contrário, receberá uma mensagem de descrição do erro ocorrido. Note que não é objetivo do diagrama descrever mensagens, mas sim alertar para a necessidade de tratamento desse tipo de feedback ao usuário.

Obs.K):
Esse arame em volta define uma área comum. Ela serve para abraçar interfaces que tenham algum tipo de atributo comum. Para o nosso forum, descreve que aquilo deverá aparecer como uma mensagem na tela. Você pode criar esses novos padrões de acordo com a necessidade do seu projeto.

Obs.L):
Olha o ponto de saída aí. Ele define o momento onde saímos de uma área de fluxo para voltar para o fluxo principal do sistema.

Obs.M):
Essas são as notas de rodapé que dão apoio à descrições textuais dos elementos. Aqui podem ser colocadas observações diversas sobre os elementos desenhados. As notas são utilizadas também para implementar as regras das estruturas de decisão que a notação permite.

Finalizando..

Conforme o retorno de interesse que vocês demonstrarem pelo assunto, detalharei esse sistema de fórum hipotético para apresentar mais recursos da notação. Como esse é um ponto muito específico dos recursos que temos para aprimorar a Experiência do Usuário, o feedback fica como um termômetro para que eu possa escrever mais sobre o assunto (ou não). =)

Para os que já usam a notação, caso encontrem alguma correção a ser feita no desenho, por favor entrem em contato. Terei prazer de corrigir e de apontar as contribuições. Quem sabe até arrumo alguém para desenvolver esses diagramas comigo, para testarmos a capacidade de uso dessa técnica para o trabalho em equipe ;).

Muito obrigado pela atenção, espero que esse material seja útil para vocês.

Esse vai chover no molhado para muitos que passam por aqui. Para quem está envolvido de alguma forma com a disciplina da Arquitetura de Informação, o Vocabulário Visual de Jesse James Garrett não é novidade. Ele foi criado em 2000, e a sua última atualização até a edição desse texto data de março de 2002. Muitas pedras rolaram e mesmo assim,o vocabulário continua firme, forte e cada vez mais popular.

Update:


Sequência desse texto escrita nesse mesmo site - Exemplo prático do uso do Vocabulário Visual de Jesse Garrett.
Não deixe de acompanhar a continuação =).

Vamos aos tópicos:

1. O Vocabulário de Garrett é uma técnica interessante que cria um padrão para algo que nós fazemos o tempo todo: o desenho de diagramas de navegação.

O pulo do gato aconteceu quando Garrett separou e padronizou algumas formas básicas para representar elementos que compõem um ambiente navegável.

Páginas, arquivos, conectores, pilhas, estruturas de decisão e outras coisas mais poderiam ser representados de maneira simples e fácil de entender. Gerentes, designers, programadores, arquitetos, responsáveis por conteúdo e demais pessoas envolvidas em um projeto conseguem ler um diagrama desse tipo sem dificuldade.

2. Notação poderosa, flexível e versátil

As formas do vocabulário de Garrett são de utilização muito genérica, permitindo a descrição de sistemas de informação de qualquer tipo, em qualquer plataforma.

A comunidade está utilizando os padrões de Garrett para especificar interfaces de sites, portais, sistemas corporativos, sistemas transacionais e outros tipos de projetos.

3. Capacidade de refinamento gradual de funcionalidades

Nas fases iniciais dos projetos, muitas vezes não possuímos todas as informações que precisamos para a construção e detalhamento das coisas como um todo.

A notação de Garrett possui alguns recursos que permitem que, ao longo do levantamento dos requisitos do projeto, o diagrama seja expandido e detalhado sem a necessidade de ser reescrito. Isso é um diferencial muito desejado para quem trabalha em ciclos de desenvolvimento iterativos (essa é a palavra - iterativos sem o "n" mesmo).

4. Independência de ferramenta de criação - possibilidade de desenho apenas com lápis e papel

A notação original do Garrett não faz uso de cores e oferece boa leitura e distinção entre os itens que a compõem. Conforme você se vai se habituando com a linguagem, passa a usá-la em esboços no papel mesmo, em tempo real - seja em reuniões de equipe ou no seu caderno de anotações na visita ao cliente.

Para converter essas anotações para formato digital, também é moleza. Garrett ainda colocou diversos templates e stencils para um grande número de ferramentas de edição. Esses modelos contém as formas básicas pré-desenhadas e prontas para uso em qualquer das ferramentas listadas.

5. Suporte à conectores e seletores condicionais

Essa facilidade a permite a aplicação de condições lógicas no desenho dos diagramas. Com isso, pode-se descrever a navegação entre as interfaces principais e também contemplar os fluxos negativos de navegação. Todos sabemos que um bom projeto deve realizar sempre o correto tratamento de erros, exceções e contextos adversos que o usuário poderá enfrentar durante a operação.

Além disso, esse recurso permite também diferenciar a navegação em projetos com múltiplos perfis de acesso. A totalidade da lógica desenhada num diagrama com essa notação será aproveitada pelas equipes de desenvolvimento do projeto na hora de integrá-lo com fontes de informação diversas (bases de dados, sistemas de gerenciamento de conteúdo, webservices, etc).

6. Benefícios indiretos

Entre outros benefícios, o diagrama de Garrett ajuda a minimizar o problema do aparecimento de interfaces não-previstas na fase de desenvolvimento. Ou seja: muitas vezes, quando os programadores recebem o trabalho, acabam identificando a ausência de telas. Isso pode causar interrupções no ritmo de desenvolvimento e atrasos nas entregas, pois a equipe de desenvolvimento precisa aguardar a prototipação e desenho das telas que surgiram inesperadamente.

A visão proporcionada pela evolução do diagrama ajuda a equipe inteira a evitar erros de dimensionamento de projetos, que são muito comuns em construções mais complexas.

Chamando a continuação...

Não dá para esgotar por aqui o assunto do vocabulário de Garrett. No próximo texto, colocarei alguns exemplos gráficos de situações comuns de projeto, adaptados a nossa realidade "Brasil". A idéia é apresentar uma alternativa aos exemplos "gringos" e não mascarar a potencialidade do vocabulário com a apresentação de exemplos simples demais.

Enquanto isso não fica pronto, seguem alguns links sobre o assunto:

Vocabulário visual mantido por Jesse James Garrett

Entrevista com Garrett feita três anos após o lançamento do vocabulário

Versão do Vocabulário traduzida para o Português, feita por Livia Labate e Laura Lessa

Até o próximo! =)

Obs.: O próximo chegou em Exemplo prático do uso do Vocabulário Visual de Jesse Garrett.

Como puderam perceber, foram dois meses corridos sem atualização do site. O motivo é de comemorar! Estive me preparando para viver uma experiência muito maior do que qualquer outra - a paternidade. Nesse dia 04/05/06 7:35hs, veio ao mundo meu primeiro filho. Chama-se Mateus, é lindo, saudável e muito amado por todos! =)

Hoje voltei para a atividade profissional. Tenho certeza que toda essa felicidade será refletida de maneira positiva em todos os aspectos da minha vida. Entre trocas de fraldas, chorinhos de madrugada, banhos e acalentos no bebê, voltarei a escrever com um pouco mais de frequência. =)

Este texto quebra um padrão em relação aos outros por ser muito pessoal. Mas já que falamos de "experiência" na linha de título do site, não vejo motivos para não compartilhar essa alegria com vocês.

Abraços, nos vemos nos próximos textos!