e-biz group brazil web design - arquitetura de informação sitegrama vocabulário visual para...
TRANSCRIPT
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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.
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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.
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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.
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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.
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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.
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informaçã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.
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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.
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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.
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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.
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
16
Propriedade NomePropriedade NomeO valor da propriedade Nome é o termo que aparece no desenho do nó.
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
Apenas para nós do tipo Página, Conjunto de Páginas e Formulários
- 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.
Apenas para nós do tipo Página, Conjunto de Páginas e Formulários
- Usar termos como diária, semanal, quinzenal, mensal, eventual, etc.
Observações Observações gerais sobre o conteúdo.
Sim
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
Apenas para nós do tipo Página, Conjunto de Páginas e Formulários
- 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
Não - Este campo é preenchido pela equipe de programadores
Arquivo do Menu Contém o nome do arquivo de menu que deve ser usado na página.
Não - Este campo é preenchido pela equipe de programadores
Arquivo do Closing links Contém o nome do arquivo do closing link que deve ser usado na página
Não - Este campo é preenchido pela equipe de programadores
Qtd Páginas Indica a quantidade de páginas associada ao nó.
Apenas para nós do tipo Página, Conjunto de Páginas e Formulários
- 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.
Apenas para nós do tipo Página, Conjunto de Páginas e Formulários
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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ó
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
Representação no Sitegrama Visão do usuário no browser
Home-PageGenérica
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
Representação no Sitegrama Visão do usuário no browser
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
Representação no Sitegrama Visão do usuário no browser
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ExemploRepresentação no Sitegrama Visão do usuário no browser
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ExemploRepresentação no Sitegrama Visão do usuário no browser
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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é
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
Representação no Sitegrama Visão do usuário no browser
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ExemploRepresentação no Sitegrama Visão do usuário no browser
C on ta te -nosTe la de sucesso
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ExemploRepresentação no Sitegrama Visão do usuário no browser
F orm as deP agam ento
Pagar
A guardandoS ta tus
R ea l P ague
Pagar
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ExemploRepresentação no Sitegrama Visão do usuário no browser
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
42
Sub-rotina e Chamada de Sub-rotinaSub-rotina e Chamada de Sub-rotina
Sub-rotina
Chamada deSub-rotina
ExemploRepresentação no Sitegrama
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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.
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ExemploRepresentação no Sitegrama Visão do usuário no browser
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informaçã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.
ExemploRepresentação no Sitegrama Visão do usuário no browser
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
47
Caminho CondicionalCaminho CondicionalCaminho Condicional
ExemploRepresentação no Sitegrama Visão do usuário no browser
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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.
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
49
ExemploRepresentação no Sitegrama
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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
ABN AMRO e-Biz Group Brazil
Web Design - Arquitetura de Informação
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