A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Vocabulário Visual para construção de Sitegramas e Fluxos de Navegação

Apresentações semelhantes


Apresentação em tema: "Vocabulário Visual para construção de Sitegramas e Fluxos de Navegação"— Transcrição da apresentação:

1 Vocabulário Visual para construção de Sitegramas e Fluxos de Navegação
Guilhermo Reis - Novembro/2002

2 Índice Importância da Modelagem Características de um modelo gráfico
Ferramenta de Modelagem Vocabulário visual Sitegrama Definição de árvore e fluxograma Público-Alvo do sitegrama A ferramenta de desenho de sitegrama Instalação Desenhando o sitegrama Símbolos do vocabulário visual do sitegrama Gerando os relatórios

3 Importância da modelagem
O trabalho de Arquitetura de Informação, como o de um analista de sistema, deve produzir um modelo do sistema a ser construído. Modelos são construídos por três motivos básicos: Para focalizar características importantes do sistema deixando de lado as menos importantes Para discutir alterações e correções nos requisitos do usuário a baixo custo e mínimo risco Para confirmar que entendemos o ambiente do usuário e o documenta-lo de tal maneira que os projetistas de sistemas e programadores possam construir o sistema Para prognosticar o comportamento do sistema Para construir modelos diversas ferramentas podem ser utilizadas: modelos narrativos, modelos de protótipos, modelos gráficos e outros. Este documento se preocupa apenas com modelos gráficos.

4 Características de um modelo gráfico
Deve ser prioritariamente gráfico, com o adequado detalhamento textual de apoio Uma figura bem escolhida consegue englobar uma imensa quantidade de informações de forma concisa e compacta (“uma figura vale por mil palavras”). Assim em um modelo gráfico um ou mais gráficos devem ser o principal documento para compreender o sistema; documentos textuais devem ser usados apenas como material de referência. Deve permitir que o sistema possa ser visualizado de forma subdividida e hierárquica Sistemas grandes e complexos são difíceis de serem representados em uma única folha de papel e mesmo que fosse a grande quantidade de detalhes que se teria num único documento dificultaria a sua compreensão. Assim, um bom modelo gráfico deve permitir uma visão top-down onde são apresentados os principais componentes de alto nível do sistema e depois cada um deles é detalhado em níveis mais baixos. Deve ter redundância mínima Um modelo se altera muito durante um projeto. Até se obter o desenho final várias mudanças são feitas no modelo. Além disso um modelo deve ser constantemente atualizado durante a vida do sistema, registrando as modificações que forem feitas. Para minimizar este trabalho de atualização é importante que o sistema tenha redundância mínima, para que as mudanças sejam feitas num único local e não por todo o modelo. Deve ser transparente para o leitor O modelo deve ser fácil de ler de tal forma que o leitor não precise pensar que esta olhando para a representação de um sistema em vez do próprio sistema. Isto nem sempre é fácil e muitas vezes requer alguma educação e prática do leitor em lhe ensinar o vocabulário visual do modelo gráfico.

5 Ferramentas de modelagem
Um modelo gráfico para ser construído utiliza uma ferramenta de modelagem. Ferramentas de modelagens gráficas são basicamente um conjunto de símbolos gráficos, cada qual representando um conceito relevante ao sistema; e regras definindo quando e como utilizar cada um dos símbolos. Este conjunto de símbolos e regras formam o vocabulário visual da ferramenta de modelagem. Alguns exemplos de ferramentas de modelagem: diagramas de fluxos de dados, diagramas de entidade-relacionamento, fluxogramas, diagramas HIPO, diagramas de transição de estado, árvores de decisão, etc.

6 Vocabulário visual Um vocabulário visual deve atender os seguintes requisitos básicos: Simplicidade dos símbolos: O vocabulário deve ser simples o suficiente para que os diagramas possam ser facilmente desenhados à mão, permitindo que o analista possa produzir esboços sem ferramentas auxiliares de desenho (régua, compasso, esquadro, régua geométrica, softwares de desenho, etc). Assim, os elementos do vocabulário devem ser distintos entre si, de forma que um desenho feito de forma descuidada não comprometa a clareza do diagrama. Independente da ferramenta: O vocabulário deve ser projetado de forma a não requerer ferramentas especializadas (software de desenho) para a construção de diagramas. O vocabulário não deve favorecer nenhuma em particular - ao contrário, deve permitir aos analistas o uso das ferramentas com as quais estejam mais acostumados. Pequeno e contido em si próprio: O quantidade total de elementos de um vocabulário deve ser mantida a menor possível e cada símbolo deve expressar um conceito simples e forte. Assim, o vocabulário pode ser aprendido e utilizado rapidamente por todo seu público. Os diagramas construídos podem ser complexos, mas seu modo de expressão deve ser simples.

7 Definição do sitegrama
Um sitegrama é um diagrama que representa a organização hierárquica e o fluxo de navegação de um website. O objetivo do sitegrama é representar a macroestrutura do website com nível de detalhe suficiente para que os membros da equipe possam entender completamente o funcionamento do website. Para representar a organização hierárquica, o sitegrama se utiliza de diagramas em árvore. Para representar o fluxo de navegação, o sitegrama se utiliza de fluxogramas indicando como ocorrem as transições entre as páginas do site. O vocabulário visual usado para o sitegrama se baseia no vocabulário visual desenvolvido por J. J. Garrett (http://www.jjj.net/ia/visvocab/)para descrição de arquitetura de Informação e design de interação.

8 Público Alvo do sitegrama
Vários públicos utilizam o sitegrama para entender a organização e ter uma visão geral do site, porém cada um deles com propósitos diferentes: Arquitetos de Informação: usam para organizar as informações e especificar cada página do site. Diretores de Arte: usam para definir o número de telas únicas (telas-tipo) e ter para desenhar o sistema de navegação do website. Redatores e produtores de conteúdo: usam para definir os requisitos de conteúdos do website. Programadores e Analistas: usam para definir os requisitos técnicos do projeto.

9 Diagramas de Árvore Diagrama de árvores é uma forma gráfica de representar organizações hierárquica. Uma árvore é definida como um conjunto finito de nós com as seguintes características: Existe um nó especial chamado raiz (normalmente representa a Home-Page do site) Os demais nós são particionados em estruturas disjuntas, separadas, de árvores, denominadas sub-árvores. Como são estruturas disjuntas, um nó não aparecerá em mais de uma sub-árvore. Nós filhos são definidos como as raízes das sub-árvores de um nó, e este nó é o pai delas Nós irmãos são os nós filhos que apresentam o mesmo pai Nível de um nó é a sua distância da raiz da árvore (no sitegrama representa o nível que esta página tem no menu de navegação do site) No caso do sitegrama cada nó representa uma página ou um item no menu do site.

10 Fluxogramas Fluxograma é uma forma gráfica de representar atividades que devem ser executadas em seqüência, como em um processo. Um fluxograma é basicamente composto por símbolos que representam atividades (normalmente retângulos), símbolos que representam decisões (normalmente losangos) e símbolos que representam a seqüência de execução das atividades (normalmente setas). No caso do sitegrama os símbolos atividades representam as páginas do site, como os nós do diagrama de árvore. Os símbolos decisões representam as decisões do sistema para escolher qual página apresentar. Os símbolos de seqüência representam a passagem de uma tela para outra.

11 A ferramenta de desenho do sitegrama
A ferramenta para desenho de sitegrama é o Microsoft Visio com um um template e um stencil customizados. Facilidades da ferramenta: Biblioteca com todos os símbolos do vocabulário visual Formulário para a descrição completa de cada nó com campos customizáveis Exportação para Power Point Relatório em Excel descrevendo todo o sitegrama É requisito para usar esta ferramenta de desenho de sitegrama conhecer o Microsoft Visio. Este documento não se propõe a ensinar a utilizar o Microsoft Visio.

12 Instalação A ferramenta de desenho do sitegrama é composta por dois arquivos: Sitegrama.vss: Stencil com a biblioteca dos símbolos do vocabulário visual. Sitegrama.vst: Template para o desenho do sitegrama. Para utilizar esta ferramenta criar um diretório chamado “Arquitetura de Informação dentro do diretório Visio/Solutions * e copiar os dois arquivos acima para este diretório. *O nome do diretório Solutions pode variar dependendo da língua do Visio.

13 Desenhando os símbolos
O desenho do sitegrama começa com o desenho dos símbolos. Isto é feito arrastando os símbolos do Stencil para a página. Clique com o botão esquerdo do mouse no símbolo ... … Arraste o símbolo até a página do desenho ... … Solte o elemento na posição desejada.

14 Lista dos símbolos do Vocabulário Visual
O vocabulário visual para desenho do sitegrama é composto por 23 símbolos diferentes, cada um representando um conceito diferente do sitegrama. Alguns destes símbolos representam páginas, por isto são considerados nós no diagrama de árvore do sitegrama. Os demais são símbolos de fluxo, necessários para indicar a navegação do usuário e os pontos de decisão do sistema. Apenas os símbolos nós são apresentados no relatório em Excel do sitegrama. Símbolos nós Página Home-Page Conjunto de Páginas Formulário Link Nó sem página Símbolos de fluxo Ponto de Continuação Conector Seta Seta Unidirecional Eventos Simultâneos Área Área Interativa Chamada de Sub- Rotina Sub-Rotina Ponto de Decisão Conector Condicional Seta Condicional Seta Unidirecional e Condicional Caminho Condicional Seletor Condicional Cluster Área Condicional

15 Identificando os nós Após serem desenhados, os símbolos que forem nós no sitegrama devem ser identificados para que suas propriedades sejam apresentadas no relatório em Excel do sitegrama. Para fazer isto basta preencher o formulário Custom Properties onde devem ser escritas suas propriedades. O formulário Custom Properties pode ser acessado de duas maneiras: com um duplo clique no símbolo ou acessando o atalho “Propriedades” com um clique com botão direito no símbolo. Atalho “Propriedades” do botão direito do mouse Formulário Custom Properties

16 Propriedade Nome O valor da propriedade Nome é o termo que aparece no desenho do nó.

17 Propriedades dos nós

18 Propriedades dos nós - continuação

19 Visualização das propriedades dos nós
O formulário Custom Properties pode ser customizado para apresentar ou esconder qualquer uma das propriedades dos nós. Isto simplifica o formulário, escondendo-se as propriedades que não serão preenchidas ou que são calculadas automaticamente (Ex: Nível no Menu, Bread Crumb, Closing Links). Para fazer esta customização acesse o formulário Visualizar Custom Properties (no atalho Visualizar Propriedades no botão direito do mouse) e selecione as propriedades que devem ser apresentadas. As propriedades que não estiverem selecionadas estarão escondidas. Atenção: Mesmo que uma propriedade esteja escontida, seu valor é impresso no relatório em Excel do sitegrama. Atalho “Visualizar Propriedades” do botão direito do mouse Formulário Visualizar Custom Properties

20 Trocando o desenho do nó
Como visto existem 6 tipos de nós. É possível trocar o desenho do nó depois que ele foi arrastado do stencil. Este recurso facilita o trabalho da analista que não precisa apagar o nó e arrastar outro símbolo do stencil perdendo o que foi preenchido no formulário Propriedades. Para trocar o desenho do nó clique com o botão direito e selecione o desenho desejado: Página, Home-Page, Conjunto de Páginas, Formulário ou Nó sem Página. Escolhe o desenho no atalho do botão direito do mouse ... … e o nó muda seu desenho e o seu tipo

21 Cópia Vinculada Durante o desenho de um sitegrama é comum que a mesma página seja desenhada em várias folhas. Isto normalmente ocorre ao se detalhar a estrutura abaixo de uma página. Assim, é necessário que todos os nós que representam a mesma página estejam vinculados, de forma que ao alterar um deles todos os demais se alterem automaticamente. Isto é feito através do comando Cópia Vinculada. Ao executar comando Cópia Vinculada em um nó, é criada uma cópia vinculada do mesmo. Todas as alterações feitas no nó original são automaticamente refletidas em todas suas cópias vinculadas. As cópias vinculadas não podem ser editadas. Cópia Vinculada do nó Mesma página Nó original

22 Cópia Vinculada Para fazer uma cópia vinculada de um nó basta clicar com o botão direito no nó e selecionar o comando Cópia Vinculada. Não existe limite para o número de cópias vinculadas de um mesmo nó. Após feita a cópia, o nó vinculado pode ser copiado para outra página com um simples Copy & Paste. No desenho do nó original é automaticamente acrescentada uma reticências ( … ) indicando que este nó possui cópias vinculadas. Nos nós vinculados é acrescentado além do nome o número da página onde esta o nó original. Quando o nó vinculado é apagado, se o nó original não tiver mais nenhuma cópia vinculada as reticências são automaticamente retiradas. Nó original Nó original e sua cópia vinculada Cópia Vinculada do nó Comando “Cópia Vinculada” do botão direito do mouse

23 Cópia Vinculada A cópia vinculada também pode ser feita pelo formulário Propriedades. Através deste formulário é possível vincular um nó a qualquer outro do sitegrama. Para isto acesse o formulário Propriedades do nó, marque o check-box Vincular com outro Shape e selecione no drop-list o nó original (no drop-list aparece o nome de todos os nós do mesmo tipo existentes no sitegrama e uma indicação em qual página o nó está). É possível desvincular um nó desmarcando o check-box Vincular com outro shape no formulário Propriedades. Vinculando um nó a outro através do formulário Propriedades

24 Nó Página Conta Corrente Exemplo
Representa a unidade básica de experiência do usuário na Web, a página. Trata-se de uma unidade de representação, não de implementação. Ou seja, uma página no diagrama pode conter vários arquivos HTMLs (como por exemplo em uma estrutura de frame). Página Exemplo Representação no Sitegrama Visão do usuário no browser Conta Corrente

25 Home-Page Home-Page Genérica Exemplo
Todo sitegrama precisa ter pelo menos uma página Home-Page. Possui as mesmas funções do nó página e além disso tem a função de indicar ao sistema os nós por onde deve começar a gerar o relatório em Excel do sitegrama. Apesar do símbolo da Home-Page ter o mesmo desenho de uma página deve ser usado este símbolo específico porque ele possui propriedades especiais que indicam ao relatório que este nó é uma Home-Page. Home-Page Exemplo Representação no Sitegrama Visão do usuário no browser Home-Page Genérica

26 Conjunto de Páginas Notícia Exemplo
Representa um grupo de páginas com funcionalidades idênticas cujas propriedades navegacionais são indiferentes à macroestrutura do site . Conjunto de Páginas Exemplo Representação no Sitegrama Visão do usuário no browser Notícia

27 Formulário Conta Poupança Exemplo
Representa um formulário. Utilizar em sites informativos para indicar quais páginas devem ser desenvolvidas por programadores e quais devem ser desenvolvidas por redatores. Em sites transacionais pode ser utilizado o símbolo de página ao invés do de formulário para facilitar a leitura. Formulário Exemplo Representação no Sitegrama Visão do usuário no browser Conta Poupança

28 Link Representa os links que levam o usuário de uma sub-árvore da estrutura de navegação do site para outra sub-árvore. Normalmente estes links estão no sistema de navegação do site. Um exemplo são as categorias iniciadas no Yahoo. Link Home > Business and Economy > Business to Business > Computers Home > Computers and Internet @ Business to Business

29 Exemplo de Link Exemplo
Item “Seu Parceiro em Momentos Especiais” no menu da página “Soluções para Você”. Link Exemplo Representação no Sitegrama Visão do usuário no browser Home Soluções para você Seu Parceiro em Momento Especiais Facilidades para seu dia-a-dia Seguros para sua tranquilidade Banco Real dedicado Portal Brasil> Pessoas > Soluções para Você Portal Brasil> Pessoas > Seu Parceiro em Momentos Especiais Seu Parceiro em Momentos Especiais

30 Nó sem Página Representa itens da estrutura de navegação do site que não possuem páginas associadas. Normalmente são itens pais de menus pull-down ou pull-up. Nó sem Página Exemplo Representação no Sitegrama Visão do usuário no browser

31 Conector Representa o relacionamento entre os nós do sitegrama, normalmente apresentando uma organização hierarquica. Esta organização hierarquica irá compor a estrutura de navegação principal do site. Não se deve representar relacionamentos do tipo cross content com conectores para não poluir o diagrama. Conector Exemplo Representação no Sitegrama Visão do usuário no browser

32 Conector Para desenhar o conector arraste o seu símbolo do stencil para a página e conecte suas extremidades nos pontos de conecção dos nós. Conector Conectando a primeira extremidade no ponto de conecção do nó. Conectando a segunda extremidade no ponto de conecção do nó Arrastando o conector para a página Conector desenhado

33 Conector Para facilitar o desenho, os símbolos Página, Conjunto de Páginas, Formulário, Link e Nó sem Página possuem um conector associado. O desenho da linha deste conector pode ser alterado com o menu do botão direito do mouse. Conector Usando o conector associado Arrasta o conector até o local desejado e ... … e solta para desenhar a conecção Conector Conector central e Conector lateral Conector Central Conector Lateral

34 Conector Os conectores também podem ser rotulados, mas o uso destes rótulos deve ser limitado a casos em que a ação feita pelo usuário precisa ser clarificada. Se os rótulos se tornarem longos ou difíceis e começarem a poluir o diagrama, conduza o leitor a uma nota de rodapé ou apendice. Para rotular um conector basta dar um duplo clique escrever seu rótulo. Apenas os conectores desenhados com o símbolo Conector do stencil podem ser rotulados. Os conectores associados aos símbolos que são nós não podem ser rotulados. Conector Rótulo supérfluo Rótulo útil Referência a apêndice ou nota de rodapé Duplo clique para escrever o rótulo

35 Seta Representa um fluxo entre dois nós de um sitegrama mostrando o direcionamento que o usuário deverá seguir quando se move no sistema para completar uma determinada tarefa. Estas setas não são indicação de mão única, e sim a indicação do fluxo principal para completar a tarefa. O usuário não é proibido de mover-se na direção oposta. Usa-se o termo downstream e upstream para nos referirmos aos nós respectivamente antes e depois do movimento. Seta Nó upstream Nó downstream Exemplo Representação no Sitegrama Visão do usuário no browser

36 Seta unidirecional Exemplo
Representa um fluxo entre dois nós de um sitegrama onde o movimento reverso (movimento upstream) é proibido. Isto é comum em casos em que uma ação irreversível ocorreu, como quando uma transação é efetivada. Seta Unidirecional Exemplo Representação no Sitegrama Visão do usuário no browser

37 Eventos Simultâneos Exemplo
Representa um fluxo em que uma ação do usuário gera eventos múltiplos e simultâneos. Um exemplo é abrir uma janela pop-up ao mesmo tempo que uma página é carregada na janela principal. Como as setas, os eventos simultâneos são direcionais. Os elementos upstream conectam-se ao lado curvo e os elementos downstream conectam-se ao lado plano. Eventos Simultâneos Exemplo Representação no Sitegrama Visão do usuário no browser Pagar

38 Pontos de Continuação Exemplo
Representa que o fluxo continua em uma outra folha do sitegrama. É comum que o desenho completo de um sitegrama 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. A orientação dos colchetes (horizontal ou vertical) não tem significado; a escolha é uma questão de preferência estética. Pode ser feita cópia vinculada nos Pontos de Continuação como com os nós. Isto deve ser feito para que o relatório em Excel do sitegrama continue indicando as páginas que seguem pelo Ponto de Continuação. Ponto de Continuação Exemplo Representação no Sitegrama

39 Área Representa um grupo de nós que compartilham os mesmos atributos em comum. 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. O símbolo Área serve apenas para encapsular e identificar um grupo de nós. Por isto os conectores e setas não apontam para os símbolos Área e sim para os nós nele contido. Área Exemplo Representação no Sitegrama Visão do usuário no browser

40 Área Interativa Á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. Este símbolo deve ser usado para não se repetir o desenho da mesma estrutura para cada produto. O símbolo Área Interativa serve apenas para encapsular e identificar um grupo de nós. Por isto os conectores e setas não apontam para os símbolos Área Interativa e sim para os nós nele contido. O uso deste símbolo não repete diversas vezes no relatório, a estrutura nele contida. Assim, caso o sitegrama deva ser exaustivo (representar exatamente toda a estrutura do site), este símbolo não deve ser utilizado. Área Interativa

41 Sub-rotina e Chamada de 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. São necessários dois símbolos para representar este fluxo reutilizável: o símbolo Sub-rotina, que encapsula o fluxo em si, e o símbolo Chamada de Sub-rotina, que serve como marcador para o fluxo em todos os contextos em que ele é repetido no projeto. A Sub-rotina ainda requer ainda dois tipos especiais de Pontos de Continuação: a Entrada de Sub-rotina e a Saída de Sub-rotina. Estes símbolos são colocados fora do símbolo da Sub-rotina. Sub-rotina Chamada de Sub-rotina

42 Sub-rotina e Chamada de Sub-rotina
Exemplo Representação no Sitegrama Chamada de Sub-rotina

43 Conceitos básicos sobre os símbolos condicionais
É freqüente, principalmente em sistemas transacionais, arquiteturas de informação e design que são reformatados dinamicamente enquanto o usuário navega pelo sistema. Esta reformatação é representada através do uso de lógica condicional. A lógica condicional deste vocabulário visual usa o seguinte modelo condicional: O sistema registra um ou mais atributos (Ex: tipo de usuário, status de login, data, etc.) Cada atributo tem valores (Ex: data = “31/10/2002”) A associação de um atributo com um valor em particular é chamado de condição Condições são avaliadas pelo sistema para determinar se são verdadeiras Em uma arquitetura estática, todos os caminhos (links, botões, etc.) são apresentados a todos os usuários em todas as circunstâncias e cada caminho leva sempre ao mesmo resultado. Em uma arquitetura dinâmica, o sistema decide quais caminhos e resultados são apresentados, baseado na avaliação de uma ou mais condições.

44 Ponto de Decisão Exemplo
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. Setas devem ser usados junto com os Pontos de Decisão para clarificar quais são os nós upstream e downstream a partir do ponto de decisão. Ponto de Decisão Exemplo Representação no Sitegrama Visão do usuário no browser Valor da operação está correto ? Botão OK Sim Não

45 Conector Condicional, Seta Condicional e Seta Unidirecional 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. Seta condicional Seta unidirecional condicional Exemplo Representação no Sitegrama Visão do usuário no browser Botão Alterar Frete Loja com mais de um operador logístico cadastrado Loja com apenas um operador logístico cadastrado

46 Caminho condicional Caminho 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. A diferença entre este símbolo e o Ponto de Decisão é o momento em que o sistema toma a decisão. No Ponto de Decisão é apresentado um único caminho ao usuário, e depois que ele clica neste caminho, o sistema decide qual deve ser a próxima página. Assim quando o usuário clica no caminho ele não sabe antecipadamente qual será a próxima página. No Caminho Condicional o sistema, ao carregar a página, escolhe um entre os possíveis caminhos e o apresenta para o usuário. Quando o usuário clica no caminho ele sabe qual será a próxima tela. Assim como conectores e setas condicionais, um Caminho Condicional pode prover o usuário com nenhum caminho (um resultado nulo). A diferença é que no Caminho Condicional um resultado nulo pode não ser permitido. Indique se o Caminho Condicional permite um resultado nulo com notas sobre o símbolo (por exemplo notas de rodapé ou apêndices). Caminho Condicional

47 Caminho Condicional Exemplo Caminho Condicional
Representação no Sitegrama Visão do usuário no browser Link Alterar Cadastro Link Alterar Cadastro Home-Page com o usuário logado Home-Page sem o usuário logado

48 Seletor 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. Assim como no Caminho Condicional, o sistema toma a decisão antes de apresentar a página para o usuário. Todos os possíveis caminhos são avaliados e aqueles que atenderem a todos os requisitos são apresentados. Como no Caminho Condicional, um Seletor Condicional pode retornar um resultado nulo. O exemplo mais comum de Seletor Condicional é na página de resultado de uma ferramenta de busca. O sistema avalia quais são as páginas que atendem ao critério de busca entrado pelo usuário e as apresenta. Os caminhos downstream levam às páginas de conteúdo indexadas pela ferramenta. Seletor Condicional

49 Seletor Condicional Exemplo Seletor Condicional
Representação no Sitegrama A página A pode apresentar link para a página B, C, para ambas ou para nenhuma delas conforme o resultado da condição 1

50 Cluster Representa uma possível resposta de um conjunto de opções, onde, nesta resposta deve ser apresentado mais de um caminho. Este símbolo pode aparecer downstream a partir de um Caminho Condicional ou de um Seletor Condicional. Por exemplo, a estrutura abaixo funciona basicamente como um Caminho Condicional, mas por uma condição estamos apresentado mais de um caminho para o usuário. Então se o atributo que sendo avaliado for igual a x, o usuário vê na página A apenas o caminho para a página B. Mas se o atributo tem valor y, o usuário vê na página A caminhos para as páginas C e D. Cluster

51 Área 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. Um exemplo são as situações que envolvem permissões de acesso, como por exemplo quando um login válido ou uma conexão criptografada (SSL) é necessária. Área Condicional

52 Relatórios A ferramenta de sitegrama gera dois tipos de relatórios:
Export Sitegrama Power Point (necessário ter o Microsoft Power Point instalado) Gera um arquivo em Power Point com todas as páginas do desenho. Pode ser usado para enviar uma cópia do sitegrama para pessoas que não possuem o Microsoft Visio. Relatório Sitegrama (necessário ter o Microsoft Excel instalado) Gera uma planilha em Excel descrevendo todas as páginas do sitegrama. Na primeira coluna desta planilha está o nome de todos os nós identados segundo a hierarquia do sitegrama. Nas demais colunas é apresentado o valor de todas as propriedades do nó (os valores preenchidos através do formulário Propriedades). Os nós são incluídos no relatório seguindo os conectores e as setas do sitegrama. Para gerar este relatório é necessário que o desenho do sitegrama tenha pelo menos um nó Home-Page. Para gerar os relatórios o stencil do sitegrama precisa estar carregado. Ambos os relatórios podem ser gerados acessando o comando Tools > Macro > Sitegrama > Relatórios

53 Bibliografia Garrett, J., A visual vocabulary for describing information architecture and interaction design, JJG.NET, Avaliable from Word Wide Web: <URL:http://www.jjg.net/ia/visvocab/ > Moraes, C., Estrutura de Dados e Algoritmos, Berkeley, 2001 Pressman, R., Engenharia de Software, Makron, 1995 Resenfeld, L. & Morville, P., Information Architecture for the World Wide Web, O’ Reilly, Yourdon, E., Análise Estruturada Moderna, Campus, 1990


Carregar ppt "Vocabulário Visual para construção de Sitegramas e Fluxos de Navegação"

Apresentações semelhantes


Anúncios Google