O documento discute estruturas de navegação, sitemaps e wireframes para planejamento de sites. Apresenta diferentes modelos de estrutura como hierárquicos, em faceta e emergentes. Explica como criar conceitos de navegação e sitemaps, com vocabulário visual e atributos de páginas.

1. Estruturas, Sitemaps
AI – aula 09
e Wireframes 1
quarta-feira, 5 de outubro de 11 1

2. Estruturas
Planejamento inicial do Sitemap
de Navegação 2
quarta-feira, 5 de outubro de 11 2

3. Arquitetura
Persuasiva
• Qual é a ação que você quer
que o usuário tome?
• Quem você está persuadindo
para tomar uma ação?
• O que a pessoa precisa para
sentir-se confiante para tomar
essa ação?
• VENDA + COMPRA
• PROCESSO + AÇÃO
3
quarta-feira, 5 de outubro de 11 3

4. Ações micro e macro rumo ao mesmo objetivo
Ações Macro
Início Clique Clique Clique Objetivo
Ações Micro
4
quarta-feira, 5 de outubro de 11 4

5. Conceito
de Navegação
• Objetivos de negócios;
• Objetivos do site;
• Concorrentes;
• Marca;
• Tipos de usuários;
• Objetivos dos usuários
e cenários
5
quarta-feira, 5 de outubro de 11 5

6. Qualidades de um bom conceito
• Ser fácil de lembrar;
• Ser envolvente
(deve cobrir a navegação de nível micro e macro
e prever futuras decisões de design);
• Estar alinhado com os objetivos de quem $ o produto;
• SATISFAZER ÀS EXPECTATIVAS DOS USUÁRIOS!!!
6
quarta-feira, 5 de outubro de 11 6

7. Passos para criar um conceito de navegação
• Revisar as informações coletadas durante a Análise: visão da empresa,
atributos da marca, características da concorrência, os objetivos do site
e – sobretudo – o perfil do usuário;
• Descrição de cenário: quais ações o usuário precisa realizar
p/satisfazer os objetivos do cliente?
• Brainstorming: Guiar o conceito a partir de um gênero (tema)
e/ou de metáforas p/explorar os diversos modelos de navegação possíveis;
• Desenhar um mapa conceitual: mostrar as relações
entre as funcionalidades e o conteúdo do site;
• Descrever o conceito em palavras de modo simples, fácil de lembrar.
7
quarta-feira, 5 de outubro de 11 7

8. Estruturas
de Informação
• Estruturas lineares;
• Teias;
• Hierarquias;
• Facetas;
• Estruturas emergentes.
8
quarta-feira, 5 de outubro de 11 8

9. Recapitulando modelos…
• Estruturas lineares: páginas dispostas em sequência. Não se pode chegar
a uma determinada página sem ter passado por uma página anterior.
Ex.: busca dirigida, formulários para cadastro;
• Teias: estrutura de páginas cujos nós são ligados sem níveis ou sequências.
A informação é ligada através de links e referências cruzadas sem início e fim
bem definidos. Ex.: My Space (os usuários criam livremente links tanto para
o conteúdo que criam quanto para as páginas de outros usuários do serviço);
• Estruturas hierárquicas: níveis de nós dispostos em relações pai-filho
(estrutura em árvore). Os filhos (ou galhos inferiores) herdam a designação
do pai e a estendem para o próximo subnível (categorias e subcategorias);
• Hierarquia múltipla: é quando um filho possui mais de um pai.
9
quarta-feira, 5 de outubro de 11 9

10. Facetas
• A localização de um item é dada pelas categorias
as quais esse item pertence.
Ex.: item 1 pertence às categorias A, B e C mas não à categoria D.
• Múltiplos pontos de acesso;
• Maior flexibilidade ao localizar informações (amplifica a busca);
• A posição de um objeto é dada pela categoria de valores a qual pertence
(≠ hierarquia de categorias subordinadas pai(s), filhos e irmãos).
10
quarta-feira, 5 de outubro de 11 10

11. Representação da navegação em facetas
cat. 1
cat. 3
cat. 2
11
quarta-feira, 5 de outubro de 11 11

12. Vamos ver se
vocês aprenderam?
• Vamos definir (quase)
os mesmos ítens (páginas,
categorias) para dois tipos
de navegação diferentes:
• Estruturas hierárquicas;
• Facetas.
12
quarta-feira, 5 de outubro de 11 12

13. Exemplo de estrutura hierárquica
• Rock
Lançamentos
Rock Clássico
Beatles
Abbey Road
Sgt. Pepper’s…
Pink Floyd
Dark Side of the Moon
Rock Experimental
Frank Zappa
We’re Only in it for the Money
Jazz from Hell
• Jazz
Bebop
Miles Davis
E.S.P.
Kind of Blue
Jazz Vocal
Ella Fitzgerald
Best Of Ella Fitzgerald & Louis Armstrong
13
quarta-feira, 5 de outubro de 11 13

14. Exemplo de estrutura em facetas
Faceta Valores
Estilo Rock
Rock Clássico
Rock Experimental
Jazz
Bebop
Jazz Vocal
Artista Louis Armstrong
Beatles
Miles Davis
Ella Fitzgerald
Pink Floyd
Frank Zappa
Título Abbey Road
Best of Ella Fitzgerald & Louis Armstrong
Dark Site of the Moon
E.S.P.
Jazz From Hell
Sgt. Pepper’s Lonely Hearts Club Band
We’re Only in it for the Money
Preço Abaixo de $10
$10-15
Acima de $15
14
quarta-feira, 5 de outubro de 11 14

15. Estruturas Emergentes
• Não são planejadas a priori: materializam-se espontaneamente;
• Não são criadas por uma pessoa, equipe ou evento
mas, sim, incrementalmente;
• Ao invés de um processo hierárquico e descendente (top-down)
com planejamento e estrutura de design, as arquiteturas emergentes
são formadas de maneira ascendente (bottom-up);
• Os elementos individuais (páginas e conteúdo)
unem-se e constroem-se em um sistema auto-organizado;
• São as estruturas que descrevem como a arquitetura do site é criada
ao invés do relacionamento entre as páginas.
15
quarta-feira, 5 de outubro de 11 15

16. Exemplos de Estruturas Emergentes
• Blogs;
• Wikipedia;
• Twitter;
• Facebook;
• Orkut;
• Delicious…
16
quarta-feira, 5 de outubro de 11 16

17. Esquemas
Organizacionais
• Alfabéticos;
• Cronológicos (idade, tempo,);
• Geográficos (continente, país,
região, estado, cidade, bairro);
• Por tópico (assunto);
• Por grupo (gestores,
professores, pais, filhos,
funcionários, etc.);
• Por tarefa.
17
quarta-feira, 5 de outubro de 11 17

18. Sitemaps Relação conteúdo x função
18
quarta-feira, 5 de outubro de 11 18

19. Vocabulário visual de um sitemap
Nó (página) Área
(agrupa páginas similares. Exige rótulo de texto)
Conectores:
Pilha de páginas – c/seta = sentido único;
(mesmo layout, mesma seção, conteúdo ≠) – s/seta = mão dupla;
– c/barra pequena: não é possível navegar p/cima.
Continuação Ponto de decisão
(permite parar o diagrama em uma página
(uma ação gera dois ou mais resultados)
e continuá-lo em outra)
19
quarta-feira, 5 de outubro de 11 19

20. Os símbolos não explicam tudo
• Esquemas de numeração: atribua letras para as seções
e números para as páginas. ex.: A1, A2, A3, A3.1, A3.2, A4…
• Rótulos: títulos das páginas. Procure ser conciso e óbvio.
Já dê o nome definitivo nesta etapa;
• Atributos de página: inclua nos ícones das páginas legendas
para atributos tais como PDF, pop-up, conteúdo dinâmico,
login, tipo, template, funcionalidades e características especiais;
• Notas e anotações: utilize breves notas explicativas
para exceções ou condições especiais;
• Escopo: mostre as páginas que estão dentro e fora do escopo para o projeto atual.
Isso ajuda a planejar mudanças posteriores e garante que o site seja escalável.
• Título e legenda: dê um título para o sitemap com data e número de versão. Crie uma legenda p/os símbolos.
20
quarta-feira, 5 de outubro de 11 20

21. 21
quarta-feira, 5 de outubro de 11 21

22. Wireframes Esqueletos das páginas
22
quarta-feira, 5 de outubro de 11 22

23. 23
quarta-feira, 5 de outubro de 11 23

24. 24
quarta-feira, 5 de outubro de 11 24

25. 25
quarta-feira, 5 de outubro de 11 25

26. 26
quarta-feira, 5 de outubro de 11 26