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

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

E-Biz Group Brazil Web Design - Arquitetura de Informação Sitegrama Vocabulário Visual para construção de Sitegramas e Fluxos de Navegação Guilhermo Reis.

Apresentações semelhantes


Apresentação em tema: "E-Biz Group Brazil Web Design - Arquitetura de Informação Sitegrama Vocabulário Visual para construção de Sitegramas e Fluxos de Navegação Guilhermo Reis."— Transcrição da apresentação:

1 e-Biz Group Brazil Web Design - Arquitetura de Informação Sitegrama Vocabulário Visual para construção de Sitegramas e Fluxos de Navegação Guilhermo Reis - Novembro/2002

2 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 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 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 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 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 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 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 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 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 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 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 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 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informaçã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 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 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 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 10Fluxogramas 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 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 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 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 12Instalaçã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 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 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 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 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 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 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 mouseFormulário Custom Properties

16 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 16 Propriedade Nome O valor da propriedade Nome é o termo que aparece no desenho do nó.

17 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 17 Propriedades dos nós

18 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 18 Propriedades dos nós - continuação

19 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informaçã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 mouseFormulário Visualizar Custom Properties

20 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 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 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 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. Mesma página Nó original Cópia Vinculada do nó

22 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 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. Comando Cópia Vinculada do botão direito do mouse Nó original e sua cópia vinculadaCópia Vinculada do nó Nó original

23 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 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 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 24 Nó Página 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 Conta Corrente Exemplo Representação no SitegramaVisão do usuário no browser

25 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 25Home-Page 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 SitegramaVisão do usuário no browser Home-Page Genérica

26 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 26 Conjunto de Páginas Representa um grupo de páginas com funcionalidades idênticas cujas propriedades navegacionais são indiferentes à macroestrutura do site. Conjunto de Páginas Notícia Exemplo Representação no SitegramaVisão do usuário no browser

27 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 27Formulário 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 Conta Poupança Exemplo Representação no SitegramaVisão do usuário no browser

28 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 28Link 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 > Computers and Internet Home > Business and Economy > Business to Business > Business to Business

29 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 29 Exemplo de Link Item Seu Parceiro em Momentos Especiais no menu da página Soluções para Você. Link Home Soluções para você Seu Parceiro em Momento Especiais Facilidades para seu dia-a-dia Seguros para sua tranquilidade Banco Real dedicado Seu Parceiro em Momento Especiais Portal Brasil> Pessoas > Soluções para Você Portal Brasil> Pessoas > Seu Parceiro em Momentos Especiais Seu Parceiro em Momentos Especiais Exemplo Representação no SitegramaVisão do usuário no browser

30 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 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 SitegramaVisão do usuário no browser

31 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 31Conector 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 SitegramaVisão do usuário no browser

32 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 32Conector 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 Arrastando o conector para a página Conectando a primeira extremidade no ponto de conecção do nó. Conectando a segunda extremidade no ponto de conecção do nó Conector desenhado

33 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 33Conector 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 Arrasta o conector até o local desejado e... … e solta para desenhar a conecção Conector Central Conector Lateral Usando o conector associado Conector central e Conector lateral

34 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 34Conector 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 Duplo clique para escrever o rótulo Rótulo supérfluo Rótulo útil Referência a apêndice ou nota de rodapé

35 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 35Seta 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 Exemplo Representação no SitegramaVisão do usuário no browser Nó upstreamNó downstream

36 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 36 Seta unidirecional 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 SitegramaVisão do usuário no browser

37 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 37 Eventos Simultâneos 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 SitegramaVisão do usuário no browser Pagar

38 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 38 Pontos de Continuação 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 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 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 SitegramaVisão do usuário no browser

40 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 40 Á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 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 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 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 42 Sub-rotina e Chamada de Sub-rotina Sub-rotina Chamada de Sub-rotina Exemplo Representação no Sitegrama

43 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 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 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 44 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. 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 SitegramaVisão do usuário no browser Valor da operação está correto ? Botão OKSim Não

45 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informaçã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. Exemplo Representação no SitegramaVisão do usuário no browser Conector condicional Seta condicional Seta unidirecional condicional Loja com mais de um operador logístico cadastrado Loja com apenas um operador logístico cadastrado Botão Alterar Frete

46 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 46 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 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 47 Caminho Condicional Exemplo Representação no SitegramaVisão do usuário no browser Home-Page com o usuário logado Home-Page sem o usuário logado Link Alterar Cadastro

48 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 48 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.

49 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 49 Exemplo Representação no Sitegrama Seletor Condicional 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 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 50Cluster 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 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 51 Á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 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 52Relató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 ABN AMRO e-Biz Group Brazil Web Design - Arquitetura de Informação 53Bibliografia Garrett, J., A visual vocabulary for describing information architecture and interaction design, JJG.NET, Avaliable from Word Wide Web: 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, 1998 Yourdon, E., Análise Estruturada Moderna, Campus, 1990


Carregar ppt "E-Biz Group Brazil Web Design - Arquitetura de Informação Sitegrama Vocabulário Visual para construção de Sitegramas e Fluxos de Navegação Guilhermo Reis."

Apresentações semelhantes


Anúncios Google