e-biz group brazil web design - arquitetura de informação sitegrama vocabulário visual para...

e-Biz Group BrazilWeb Design - Arquitetura de Informação

SitegramaSitegrama

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

Guilhermo Reis - [email protected]

Novembro/2002

ABN AMRO e-Biz Group Brazil

Web Design - Arquitetura de Informação

2

ÍndiceÍndiceImportâ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 modelagemImportância da modelagemO 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áficoCaracterí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 modelagemFerramentas de modelagemUm 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 visualVocabulário visualUm 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 sitegramaDefinição do sitegramaUm 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 sitegramaPúblico Alvo do sitegramaVá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 ÁrvoreDiagramas de ÁrvoreDiagrama 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.A

B E F

C D G H

J K

I

N ó pa i de C e D

N ós filhos de BS ub-árvores

N íve l 0

N íve l 1

N íve l 2

N íve l 3



10

FluxogramasFluxogramasFluxograma é 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.

E ntradade dados

C on firm ação S ucessoD ados

co rre tos?

BotãoOK

Sim

Não

S enhaco rre ta

?

BotãoOK

Não

M enu

BotãoCancelar

BotãoCancelar

S im

Páginas

D ecisão

F luxo



11

A ferramenta de desenho do sitegramaA ferramenta de desenho do sitegramaA 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çãoInstalaçãoA 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ímbolosDesenhando os símbolosO 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 VisualLista dos símbolos do Vocabulário VisualO 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ósIdentificando os nósApó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 NomePropriedade NomeO valor da propriedade Nome é o termo que aparece no desenho do nó.



17

Propriedades dos nósPropriedades dos nósPropriedade Definição Visível Observações sobre o preenchimento

Nome Nome da página. Trata-se do seu rótulo de identificação. Utilizar o nome que a página terá na estrutura de navegação do site.

Sim - Caso o Nome seja uma sugestão colocá-lo entre parenteses- Se não existe nenhuma sugestão aceitável para o nome, colocar uma frase que explicando o significado desejado- Nos Conjuntos de Página colocar o nome no singular (Ex: Notícia)

Descrição Descrição sobre a página. Resume a função da página no website.

Sim - Nos Links indicar para qual página o link aponta

Cross Content Indicação dos cross contents da página.

Apenas para nós do tipo Página, Conjunto de Páginas e Formulários

Wireframe Indica o wireframe associado a página


- Usar os mesmos nomes dos wireframes do documento "Especificação de Wireframes" do projeto.

Nível no Menu Indica em que nível do menu a página está.

Não - Se for igual a 0 o nó é tratado como Home-Page. Se for igual a -1 o nível no menu é calculado automaticamente no relatório.

Bread Crumb Indica o bread crumb da página. Não Se não estiver preenchido, será calculado automaticamente no relatório.

Closing Links Indica o closing links da página. Não Se não estiver preenchido, será calculado automaticamente no relatório.

Tipo Indica o tipo de nó. Propriedade de uso do sistema. NÃO EDITAR ESTE CAMPO !

Não NÃO EDITAR ESTE CAMPO !

Periodicidade de Atualização Indica a freqüência de atualização do conteúdo.


- Usar termos como diária, semanal, quinzenal, mensal, eventual, etc.

Observações Observações gerais sobre o conteúdo.

Sim



18

Propriedades dos nós - continuaçãoPropriedades dos nós - continuaçãoPropriedade Definição Visível Observações sobre o preenchimento

Revisão do Conteúdo Indica se o conteúdo necessita de revisão


- Usar os termos: "Não precisa de revisão", "Revisar" e "Conteúdo Novo"

Arquivo da Página Contém o endereço e nome do arquivo da página

Não - Este campo é preenchido pela equipe de programadores

Arquivo do Include Contém o endereço e nome do arquivo do include


Arquivo do Menu Contém o nome do arquivo de menu que deve ser usado na página.


Arquivo do Closing links Contém o nome do arquivo do closing link que deve ser usado na página


Qtd Páginas Indica a quantidade de páginas associada ao nó.


- Para Home-Pege, Página e Formulário a quantidade é 1- Para Conjunto de Páginas colocar uma estimativa de quantas páginas existirão no conjunto- Para Link, Nó sem página e Ponto de Continuação a quantidade é 0

Acesso Indica se o usuário precisa estar logado ou não para acessar a página.


Pode ter os seguintes valores:- Público: a página pode ser acessada por usuário anônimo- Logado: a página só pode ser acessado por usuário logado- Restrito a clientes do Banco: o usuário precisa estar logado e ser cliente do Banco



19

Visualização das propriedades dos nósVisualização das propriedades dos nósO 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ó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 VinculadaCópia VinculadaDurante 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.

O verview

H om e-P age

P rodu tosS erviçosF a le C onosco

P rodutos

P rodu tos[pág . 1 ]

P rodu tos pa raP essoas

P rodu tos pa raE m presas

Mesma página

Nó original

Cópia Vinculada do nó



22

Cópia VinculadaCópia VinculadaPara 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 vinculada Cópia Vinculada do nó

Nó original



23

Cópia VinculadaCópia VinculadaA 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áginaNó PáginaRepresenta 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

ContaCorrente

Exemplo

Representação no Sitegrama Visão do usuário no browser



25

Home-PageHome-PageTodo 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


Home-PageGenérica



26

Conjunto de PáginasConjunto de PáginasRepresenta 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




27

FormulárioFormulárioRepresenta 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




28

LinkLinkRepresenta 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 com @ no Yahoo.

Link

Home > Computers and Internet Home > Business and Economy > Business to Business > Computers

@ Business to Business@ Business to Business



29

Exemplo de LinkExemplo de LinkItem “Seu Parceiro em Momentos Especiais” no menu da página

“Soluções para Você”.Link

Home

Soluçõespara você

Seu Parceiro emMomento Especiais

Facilidadespara seu dia-a-dia

Seguros para sua tranquilidade

Banco Realdedicado

Seu Parceiro emMomento Especiais

Portal Brasil> Pessoas > Soluções para Você

Portal Brasil> Pessoas > Seu Parceiro em Momentos Especiais

Seu Parceiro em Seu Parceiro em Momentos EspeciaisMomentos Especiais

ExemploRepresentação no Sitegrama Visão do usuário no browser



30

Nó sem PáginaNó sem PáginaRepresenta 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ó semPágina

H om e-P age

A O rgan ização

A O rgan ização

O rganogram a H is tó rico M issão /V isão /V a lo res




31

ConectorConectorRepresenta 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

H om e-P ageP essoas

S o luçõespa ra V ocê

E m prés tim o eF inanc iam en to

C on taC orren te




32

ConectorConectorPara 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

ConectorConectorPara 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

ConectorArrasta o conector atéo local desejado e ...

… e solta para desenhar a conecção

ConectorCentral

ConectorLateral

Usando o conector associado

Conector central e Conector lateral



34

ConectorConectorOs 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

SetaSetaRepresenta 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


Nó upstream Nó downstream

E sco lha E ndereçoO rigem e D es tino

C on firm açãodos E ndereços

M apa doTra je to



36

Seta unidirecionalSeta unidirecionalRepresenta 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


C on ta te -nosTe la de sucesso



37

Eventos SimultâneosEventos SimultâneosRepresenta 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


F orm as deP agam ento

Pagar

A guardandoS ta tus

R ea l P ague

Pagar



38

Pontos de ContinuaçãoPontos de ContinuaçãoRepresenta 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

ExemploRepresentação no Sitegrama

D eta lhe doP rodu to

C arrinho C heck-ou t

C heck-ou t[pág . 1 ]

E sco lha doE ndereço

F orm a deP agam ento



39

ÁreaÁreaRepresenta 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


H PV e ja em

um C lique

E sco lha E ndereçoO rigem e D es tino

C on firm açãodos E ndereços

M apa doTra je to

M onte seu Tra je toAbrir em janela pop-up



40

Área InterativaÁrea InterativaRepresenta 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-rotinaSub-rotina e Chamada de Sub-rotinaRepresenta 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 deSub-rotina



42

Sub-rotina e Chamada de Sub-rotinaSub-rotina e Chamada de Sub-rotina

Sub-rotina

Chamada deSub-rotina


S ub-ro tina Log in

In íc ioLog in

F imLog in

Te la deLog in

U suárioe S enhaC orre tos

?

Botão OKNão

Sim

U suárioLogado

?

Sim

Não

C arrinho

Log in

BotãoFinalizar Com pra

C arrinho

H om e-P ageQ ua liV illas

Log in

LinkSua QualiConta

Q ua liC on ta

S ub-ro tina

S aída dasub-ro tina

E ntrada dasub-ro tina

C ham ada desub-ro tina



43

Conceitos básicos sobre os símbolos condicionaisConceitos 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ãoPonto de DecisãoRepresenta 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


E ntradade D ados

V a lo rda operaçãoes tá co rre to

?

C on firm açãoBotão OK Sim

Não

Valorda operaçãoestá correto

?

Botão OK Sim

Não



45

Conector Condicional, Seta Condicional eConector Condicional, Seta Condicional eSeta Unidirecional CondicionalSeta 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.


Conector condicional

Seta condicional

Seta unidirecionalcondicional

E sco lha daF orm a de P agam en to

A lte ra rF re te

BotãoA lterar Frete

(aparece se a loja possuim ais que um operadorlogístico cadastrado)

BotãoConfirm ar

Loja com mais de um operador logístico cadastrado

Loja com apenas um operador logístico cadastrado

Botão Alterar Frete



46

Caminho condicionalCaminho condicionalRepresenta 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 CondicionalCaminho CondicionalCaminho Condicional


H om e-P ageQ ua liV illas

C adas tre -se

U suárioLogado ?

A lte ra rC adas tro

Não Sim

Home-Page com o usuário logado

Home-Page sem o usuário logado

Link Alterar CadastroLink Alterar Cadastro



48

Seletor CondicionalSeletor Condicional

Seletor CondicionalRepresenta 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


Seletor CondicionalSeletor Condicional

Seletor Condicional

A

B C

1

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

ClusterClusterRepresenta 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

A

B

C D

yx



51

Área CondicionalÁrea CondicionalRepresenta 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

C onecção segura (h ttps )

E rro deS egurança



52

RelatóriosRelatóriosA 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

BibliografiaBibliografia•Garrett, J., A visual vocabulary for describing information architecture and interaction

design, JJG.NET, 2002. 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, 1998

•Yourdon, E., Análise Estruturada Moderna, Campus, 1990

e-biz group brazil web design - arquitetura de informação sitegrama vocabulário visual para...

Documents