Sitegrama e Fluxo das Transações

Transcrição

1 Sitegrama e Fluxo das Transações Guilhermo Reis 2 Definição Sitegrama Diagrama que representa a organização hierárquica de um website. Contém todas as páginas de conteúdo e a entrada de todas as transações. Para representar a hierárquica utiliza diagramas em árvore. Fluxo das Transações Diagrama que representa o modelo de interação do usuário com as transações do website. Contém todas as páginas das transações, incluindo mensagens de erro e sucesso. Para representar o modelo de interação utiliza de fluxogramas indicando como ocorrem as transições entre as páginas. 1

2 3 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 separadas de árvores, denominadas sub-árvores. Como são estruturas separadas 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ó, que é o pai deles. Nós irmãos são os nós filhos que possuem o mesmo pai. Nível de um nó é a sua distância em relação a raiz da árvore. A Raiz Nível 0 Nó pai de E e F B C D Nível 1 E F G H I Nível 2 Nós filhos de B J K Nível 3 Sub-árvores 4 Fluxogramas Fluxograma é uma forma gráfica de representar atividades que devem ser executadas em seqüência, como em um processo. Um fluxograma é composto por símbolos que representam atividades (normalmente retângulos), símbolos que representam decisões (normalmente losangos) e símbolos que representam o fluxo, a seqüência de execução das atividades (normalmente setas). No fluxo das transações os símbolos atividades (retângulos) representam as páginas do website, 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 e os símbolos de seqüência representam a passagem de uma página para outra. Menu Fluxo Cancelar Cancelar Dados Senha Formulário corretos Sim Confirmação válida Sim Sucesso OK OK?? Decisão Páginas 2

3 6 Vocabulário visual para Sitegramas e Fluxo das Transações O vocabulário visual para desenho do sitegrama é composto por 23 símbolos diferentes, cada um deles representando um conceito diferente. Alguns destes símbolos representam páginas, por isto são 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. Símbolos nós Símbolos de fluxo Página Conjunto de Páginas Link Nó sem página Arquivo Conjunto de Arquivos 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 Esse vocabulário visual é baseado no vocabulário desenvolvido por GARRETT (2002), destinado a descrever projetos de Arquitetura de Informação e Design de Interação. Em seu website ( existe uma descrição completa desse vocabulário e biblioteca dos símbolos para diversas ferramentas como o Microsoft Visio, Microsoft Power Point, Adobe InDesign e outras. 7 Página 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. Uma página ao ser implementada pode ser formada por vários arquivos HTMLs (como por exemplo em uma estrutura de frame), mas é representada com um único símbolo de página no diagrama. Últimas Atualizações 3

4 8 Conjunto de Páginas Conjunto de Páginas Representa um grupo de páginas com funcionalidades idênticas cujas propriedades navegacionais são indiferentes à macroestrutura do website. Referência 9 Arquivo Arquivo Representa um arquivo disponibilizado para download. Download do Programa IRFP2005 (Versão em dois discos) IRPF2005v1.0.exe IRPF2005v1.0.W02 4

5 10 Conjunto de Arquivos Conjunto de Arquivo Representa um grupo de arquivos disponibilizado para download com funcionalidades idênticas. Edições anteriores Edições anteriores (exe) Edições anteriores (zip) Edições anteriores (pdf) 11 Link Link Yahoo Diretórios Representa os links que levam o usuário de uma sub-árvore para outra dentro estrutura de navegação do website, ou os links que levam a outros websites (links externos). São utilizados para representar links do sistema de navegação. Um exemplo são as categorias iniciadas no Yahoo. Informática Informática Artes e Cultura Artes Ciência da Computação Gráfica Comunicação e Redes Arquitetura Arte Circense Artes de Artes Visuais Arte Pública Link Artes Digitais@ Artesanato Artes Digitais Artes de Cultura > Artes Visuais > Artes Digitais 5

6 12 Nó sem Página Nó sem Página Representa itens da estrutura de navegação que não possuem páginas associadas. Normalmente são itens pais de menus pull-down ou pull-up. Produtos Jovens Mulheres Homens Crianças Sinta-se Bem Banho / Sabonetes Cabelos Cuidados para o corpo Desodorante Maquiagem Perfume Proteção Solar Tratamento Facial 13 Conector Conector Representa um relacionamento hierárquico entre dois nós no sitegrama. O conjunto destes relacionamentos hierárquicos compõe a estrutura de navegação principal do website. represente outros tipos de relacionamentos (Ex: cross contents) com os conectores para não poluir o diagrama. Home-Page Últimas Atualizações Meus Artigos e Apresentações Biblioteca 6

7 14 Seta Seta Representa um fluxo entre dois nós mostrando o direcionamento que o usuário deverá seguir quando se move no website para completar uma transação. Essas 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. Nó upstream Nó downstream Digita Endereço Confirma Endereço Mapa das ruas 15 Seta Unidirecional Seta Unidirecional Representa um fluxo entre dois nós onde o movimento reverso (movimento upstream) é proibido. Isso é comum em casos em que uma ação irreversível ocorreu, como quando um dado é gravado no banco de dados. Formulário Entre em Contato Sucesso Mensagem Enviada 7

8 16 Ponto de Continuação Ponto de Continuação Representa que o fluxo continua em uma outra folha do desenho. É comum que o desenho completo do modelo de um website 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. Detalhe do Produto Carrinho Check-out Check-out [pág. 1] Escolha do Endereço Forma de Pagamento 17 Eventos Simultâneos Eventos Simultâneos Representa um fluxo em que uma ação do usuário gera múltiplos eventos 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. Windows Media Player 10 Download Fazer Download Fazer Download MP10Setup.exe (janela de download) Agradecimento Download 8

9 18 Área Área Representa um grupo de nós que compartilham os mesmos atributos. 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 isso os conectores e setas não apontam para os símbolos Área e sim para os nós nele contido. Home-Page Janela Pop-up Janela Pop-up Abra sua conta (conta pessoal) Abra sua conta (conta empresa) 19 Á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. Esse símbolo deve ser usado para não se repetir o desenho da mesma estrutura para cada produto. O símbolo Área Interativa, assim como o símbolo Área, serve apenas para encapsular e identificar um grupo de nós. Por isso os conectores e setas não apontam para os símbolos Área Interativa e sim para os nós nele contido. 9

10 20 Sub-rotina e Chamada de Sub-rotina Sub-rotina 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 Subrotina, 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. 21 Sub-rotina e Chamada de Sub-rotina Sub-rotina Sub-rotina Login Sub-rotina Chamada de Sub-rotina Login Início Usuário logado? Sim Carrinho de Compras Home-Page Entrada da Sub-rotina Tela de Login OK Usuário e senha correto? Sim Saída da Sub-rotina Login Fim Finalizar Compra Login Digitar Endereço Chamada da Sub-rotina Link Acompanhar Pedidos Login Acompanhamento de Pedidos 10

11 22 Símbolos Condicionais Conceitos básicos É freqüente, principalmente em sites transacionais, modelos de interação que são formatados dinamicamente enquanto o usuário navega pelo sistema. Essa formatação é representada através do uso de lógica condicional. A lógica condicional desse 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 comparaçã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. 23 Ponto de Decisão 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. Formulário Inserir Nova Referência OK OK Campos preenchidos corretamente? Campos preenchidos corretamente? Sim Sim Sucesso Referência Inserida 11

12 Conector Condicional, Seta Condicional e Seta Unidirecional Condicional 24 Conector condicional Seta condicional 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. Lista dos Tópicos Link Apagar (Mostrar apenas nos tópicos postados pelo usuário) Lista dos Tópicos Alterada Tópico não foi postado pelo usuário. possui o link Apagar Tópico foi postado pelo usuário. Possui o link Apagar 25 Ramo Condicional Ramo 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 esse 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 Ramo 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 Ramo Condicional pode prover o usuário com nenhum caminho (um resultado nulo). A diferença é que no Ramo Condicional um resultado nulo pode não ser permitido. Indique se o Ramo Condicional permite um resultado nulo na descrição do símbolo. 12

13 26 Ramo Condicional Ramo Condicional de uso do símbolo Ramo Condicional: Links participar e sair da Comunidade nas páginas de comunidades do Orkut. Home-Page da Comunidade Link participar Link sair da comunidade Usuário já faz parte da comunidade? Sim Participar Sair da Comunidade Comunidade que o usuário não faz parte Comunidade que o usuário faz parte 27 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 Ramo 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 Ramo 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. 13

14 28 Conjunto Conjunto Representa uma possível resposta de um conjunto de opções na qual deve ser apresentado mais de um caminho. Este símbolo pode aparecer downstream a partir de um Ramo Condicional ou de um Seletor Condicional. Por exemplo, a estrutura abaixo funciona basicamente como um Ramo Condicional, mas por uma condição estamos apresentado mais de um caminho para o usuário. Então se o atributo que está sendo avaliado for igual a x, o usuário vê na página A apenas o link para a página B. Mas se o atributo tem valor y, o usuário vê na página A links para as páginas C e D. A x y B C D 29 Á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. Conecção segura (https) Erro de Segurança 14

15 30 Overview Autor: Guilhermo Reis GUILHERMOcom_Sitegrama.vsd - pág. 1 de 4 Projeto: GUILHERMO.com Site: GUILHERMO.com Última Atualização: 18/07/05 Home-Page [pág. 2] Seções para consulta e inclusão das referências Seções institucionais Sistema de Bsuca Biblioteca [pág. 2] Últimas Atualizações [pág. 2] Meus Artigos e Apresentações [pág. 2] Inserir Nova Referência [pág. 3] Quem é Guilhermo [pág. 2] Entre em contato [pág. 3] Resultado da Busca [pág. 2] 31 Seções de Conteúdo Autor: Guilhermo Reis GUILHERMOcom_Sitegrama.vsd - pág. 2 de 4 Projeto: GUILHERMO.com Site: GUILHERMO.com Última Atualização: 26/10/06 Home-Page OK da caixa de busca Seções para consulta e inclusão das referências Seções institucionais Sistema de Bsuca Biblioteca Últimas Atualizações Meus Artigos e Apresentações Inserir Nova Referência [pág. 2] Quem é Guilhermo Entre em contato [pág. 2] Resultado da Busca Envie para Envie para Envie para um amigo um amigo um amigo Biblioteca (Versão para impressão) Últimas Atualizações Meus Artigos e Apresentações Referência [pág. 1] (Versão para impressão) (Versão para impressão) Assunto Envie para um amigo Assunto (Versão para impressão) Referência Referência Envie para um amigo Referência (Versão para impressão) 15

16 32 Formulários Autor: Guilhermo Reis GUILHERMOcom_Sitegrama.vsd - pág. 3 de 4 Projeto: GUILHERMO.com Site: GUILHERMO.com Última Atualização: 18/07/05 Inserir Nova Referência Cancelar Home-Page [pág. 1] Entre em contato Cancelar Home-Page [pág. 1] OK OK Campos obrigatórios estão preenchidos corretamente? Campos obrigatórios estão preenchidos corretamente? Sim Sim Inserir Nova Referência (Sucesso) Entre em contato (Sucesso) 33 Sub-Rotinas Autor: Guilhermo Reis GUILHERMOcom_Sitegrama.vsd - pág. 4 de 4 Projeto: GUILHERMO.com Site: GUILHERMO.com Última Atualização: 18/07/05 Início Envie para um amigo Envie para um amigo Cancelar OK Campos obrigatórios estão preenchidos corretamente? Sim Envie para um amigo (Sucesso) Voltar Fim 16

17 34 Planilha de Descrição do Sitegrama e Fluxo das Transações Planilha de Descrição do Sitegrama e Fluxo das Transações Projeto: GUILHERMO.com Autor: Guilhermo Reis Site: GUILHERMO.com Descrição: Sitegrama e fluxo de navegação do website GUILHERMO.com - versão 1.0 Data do relatório: 26/05/ :55 Nível 0 Nível 1 Nível 2 Nível 3 Descrição Wireframe Cross Content Observações Página Inicial Página principal do website. Contém Home-Page Sem cross content áreas de destaques das principais seções: - Últimas Atualizações - Meus Artigos e Apresentações - Biblioteca. Página Inicial Biblioteca Contém todas as referências cadastradas no website. Na página de entrada dessa seção é apresentada uma lista alfabética de todos os assuntos. Página Inicial Biblioteca Biblioteca (Versão para impressão) Versão para impressão da página Biblioteca. Página Inicial Biblioteca Assunto Contém a listagem de todas as referências do assunto escolhido ordenadas alfabeticamente pelo título. Página Inicial Biblioteca Assunto Assunto (Versão para impressão) Versão para impressão da página Assunto. Página Inicial Referência Contém a descrição completa de uma referencia. Página Inicial Referência Referência (Versão para impressão) Versão para impressão da página Referência. Página Inicial Últimas Atualizações Contém as últimas 20 referências incluidas na Biblioteca ordenadas cronologicamente pela data de cadastro da mais recente para a mais antiga. Listagem Assuntos Listagem Assuntos - (imp) Sem cross content Sem cross content. Listagem Referências Links para os outros assuntos das referências listadas na página. Listagem Referências Sem cross content. (imp) Referência Sem cross content. Abrir em janela pop-up. Abrir em janela pop-up. Referência (imp) Sem cross content. Abrir em janela pop-up. Listagem Referências Links para os assuntos das referências listadas na página. 17