O documento discute os principais conceitos de arquitetura de informação e design de experiência do usuário, incluindo: (1) esquemas de organização como alfabético, cronológico e por assunto; (2) estruturas de organização como hierarquia e hipertexto; (3) rotulagem de conteúdo; e (4) elementos da experiência do usuário como arquitetura da informação e design da informação.

1. Sitemap
A Beleza da Informação Organizada
Alexandre Horbach - Nós Lab - Março de 2012

2. 1. Arquitetura de Informação
• O design estrutural de ambientes de informação
compartilhada;
• A combinação de organização, rotulação, busca e sistemas de
navegação dentro de websites e intranets;
• A arte e ciência de moldar produtos de informação e
experiências a fim de apoiar a usabilidade e a
encontrabilidade;
• Uma emergente disciplina e comunidade focada em trazer
princípios de design e arquitetura para o ambiente digital.

3. O que é UX Design?
User Experience Design
A criação e sincronização dos elementos que afetam
a experiência dos usuários com uma empresa em
particular, com a intenção de influenciar suas
percepções e comportamentos.
Tocar Ouvir Cheirar Interagir
Pessoas
Interfaces digitais

4. Trabalho invisível
Interface
Arquitetura de Informação

5. Sistemas complexos
Metas de negócio, verba,
política, cultura, tecnologia,
Contexto recursos, restrições
Conteúdo Usuários
Documentos, tipos de Público, tarefas, necessidades,
informação, volume, estrutura comportamento de busca por
existente informação, experiência

6. Necessidades e comportamentos do usuário
• Muitas vezes não sabem o que
Usuário faz uma procuram;
pergunta
• Mudam de ideia em relação ao que
estão procurando;
Mágica • Não encontram o que estavam
procurando, mas se satisfazem com
uma parte da informação.
Usuário recebe a
resposta

7. Necessidades e comportamentos do usuário
Pergunta 5
Pergunta 3
Pensamento
Pensamento
Pensamento
Pensamento
Pergunta 2
Pergunta 4
Pergunta 1
Saída

8. Desafios de organizar a informação
Volume
1992
Internet
Tempo
3.000 BC

9. Desafios de organizar a informação
• Ambiguidade
• Heterogeneidade
• Diferentes perspectivas
• Políticas internas

10. Esquemas de organização
Exatos Ambíguos
• Alfabético • Assunto
• Cronológico • Tarefa
• Geográfico • Público
• Metafórico
• Híbrido

11. Alfabético

12. Alfabético

13. Cronológico
Cronológico

14. Cronológico

15. Geográfico

16. Geográfico

17. Assunto

18. Assunto

19. Tarefa

20. Tarefa

21. Público

22. Público

23. Metáfora

24. Híbrido

25. Híbrido

26. Estruturas de organização
Hierarquia
Plantas
Flores Árvores
Anuais Perenes Coníferas Caducifólias

27. Estruturas de organização
Hierarquia - Estreita e profunda

28. Estruturas de organização
Hierarquia - Ampla e rasa

29. Estruturas de organização
Modelo de banco de dados
A B
Nome: João da Silva Nome: Maria Cunha
Rua: Independência, 334 Rua: Alberto Bins, 766
Cidade: Porto Alegre Cidade: Porto Alegre
Estado: Rio Grande do Sul Estado: Rio Grande do Sul
CEP: 90078-000 CEP: 90045-001
Telefone: (51) 3331.3142 Telefone: (51) 3331.3142

30. Estruturas de organização
Hipertexto

31. Estruturas de organização
Classificação social

32. Rotulando
• Estreite o âmbito sempre que puder;
• Use rótulos que são familiares a maior
parte dos usuários.
• Desenvolva sistemas consistentes de
rótulos, não rótulos;

33. Rotulando
Consistência
• Estilo • Granularidade
Pontuação, caixa alta/baixa Utilizar rótulos que são
aproximadamente iguais em sua
especificidade
• Apresentação
Aplicação coerente de fontes,
tamanhos de fonte, cores, espaços,
• Abrangência
agrupamentos Deixar claro o âmbito, evitar lacunas
no sistema de rotulação
• Sintaxe
Utilizar uma única abordagem • Público
sintática. Ex.: "Ver mais", "Veja mais",
Utilizar termos que o seu público
"Quer saber mais?"
entende.

34. Rotulando
Fontes de rótulos
•O seu próprio site
• Sites concorrentes
• Vocabulário controlado e thesaurus
• Card sorting

35. Os Elementos da Experiência do Usuário
Concreto
Superfície
Esqueleto
Estrutura
Escopo
Estratégia
Abstrato

36. Os Elementos da Experiência do Usuário
Concreto
Superfície
Esqueleto
Estrutura
Escopo
Necessidades do usuário
Objetivos do site
Abstrato

37. Os Elementos da Experiência do Usuário
Concreto
Superfície
Esqueleto
Estrutura
Especificações Funcionais
Requisitos de Conteúdo
Necessidades do usuário
Objetivos do site
Abstrato

38. Os Elementos da Experiência do Usuário
Concreto
Superfície
Esqueleto
Arquitetura de Informação
Especificações Funcionais
Requisitos de Conteúdo
Necessidades do usuário
Objetivos do site
Abstrato

39. Os Elementos da Experiência do Usuário
Concreto
Superfície
Design da Informação
Arquitetura de Informação
Especificações Funcionais
Requisitos de Conteúdo
Necessidades do usuário
Objetivos do site
Abstrato

40. Os Elementos da Experiência do Usuário
Concreto
Design Visual
Design da Informação
Arquitetura de Informação
Especificações Funcionais
Requisitos de Conteúdo
Necessidades do usuário
Objetivos do site
Abstrato

41. Processo e Entregáveis
AI UI Branding
• Inventário • Wireframes • Direção de
de conteúdo arte
• Protótipo
• Modelos Navegável • Replicação
conceituais de telas
• Guideline
• Fluxogramas
• Sitemap

42. Processo e Entregáveis
Front-end Back-end
e
o

43. Inventário de conteúdo

44. Modelos conceituais

45. Fluxogramas
Meritest - Fluxograma Principais Funcionalidades
Esqueci a
Login
senha
Usuário preencheu
corretamente?
Não
Sim
Página
Inicial
Opções são
apresentadas de acordo
com o perfil do usuário
Meus Solicitar Saldo de Meus
Usuários Financeiro Taxonomias Classes Questões Testes Candidatos Gerentes
Royalties Créditos Questões Dados
Criar Demanda Incluir
Demandas Criar Teste Testes
Demanda Pendente Questão
Demanda fica
disponível para o
autor selecionado Autor cria a questão
que fica pendente de
aprovação Adicionar Teste
Questões
Questões Pendente
Executar
Questão Teste
Questão
Pendente
Pendente Questão fica
de Revisão
disponível
para o
revisor
selecionado Gerente Legenda
encaminha
questão para Teste
Candidato Disponível Página Ponto de Decisão
Pilha de Páginas Ramo Condicional
Resultado fica
disponível para Seções disponíveis para o perfil Operador
visualização do
Responder Gerente Seções disponíveis para o perfil Autor / Revisor
Aprovar Reprovar Teste
Enviar Seções disponíveis para o perfil Empresa
Questão Questão
Aprovar Devolver Questão
Questão Questão para Seções disponíveis para o perfil Gerente
Revisão
Seções disponíveis para o perfil Candidato
Questão fica com
Vocabulário Visual: (Jesse James Garrett, 2002)
status aprovada http://iainstitute.org/pt/translations/000332.html

46. Jesse James Garrett
Um vocabulário
visual para descrever
a arquitetura de
informação e design
de interação.
Diagramas são ferramentas
essenciais para comunicar a
arquitetura de informação
em times de
desenvolvimento web.

47. Vocabulário visual
• Gerentes de projeto
os utilizam para obter um sentido geral do escopo e forma do projeto.
• Geradores de conteúdo
os utilizam para direcionar os requerimentos de conteúdo.
• Designers visuais e de Interface
os utilizam para contar quantos designs de página únicos devem ser produzidos e ter uma
noção inicial da navegação e requerimentos para interface destes designs.
• Tecnólogos
os utilizam para derivar requerimentos funcionais
• Arquitetos de Informação e Designers de Interação
os utilizam para desenvolver navegação detalhada e requerimentos de interface para
cada página.

48. Vocabulário visual
• Ser compatível com um quadro negro/branco
• Ser independente de ferramentas
• Ser pequeno e enxuto

49. Vocabulário visual
O diagrama foca na macroestrutura, mostrando somente o detalhe
necessário para que os membros do time tenham a "visão geral".
A tarefa do arquiteto é determinar o nível apropriado de
detalhamento para atingir este objetivo.
O detalhe específico no nível de páginas, ou microetrutura, é
detalhado em outros documentos que o arquiteto não é
necessariamente o responsável por desenvolver.
Quando descrever arquitetura de informação, o diagrama deve
enfatizar a estrutura conceitual e organização de conteúdo.
O objetivo do diagrama não é prover uma especificação minuciosa
da navegação. Detalhes de interface não devem aparecer no
diagrama.

50. 2. Desenhando o sitemap
Diagrama de arquitetura

51. Páginas, arquivos e conjuntos
Pilha de Pilha de
Página Documento
páginas documentos

52. Conectores
A
B C D Estrutura de árvore simples
E F G H
D A F
A mesma estrutura,
H B diagramada de maneira
diferente
G C E

53. Setas
Seta indica movimento
Movimento contrário não é
permitido

54. Áreas condicionais

55. Pontos de continuidade
continua de:
A A
D
continua
B C para: E F
D

57. Numeração
A
Página
Inicial
B C D E
Quem Produtos Blog Ajuda
Somos

58. Numeração
A
Página
Inicial
B C D E
Quem Produtos Blog Ajuda
Somos
B.1
Missão,
Visão e
Valores
B.2
Estrutura

59. Numeração
A
Página
Inicial
B C D E
Quem Produtos Blog Ajuda
Somos
B.1
Missão,
Visão e
Valores
B.1.1 B.1.2 B.1.3
MIssão Visão Valores
B.2
Estrutura

60. Arquivo para dowload
A
Página
Inicial
B C D E
Quem Produtos Blog Ajuda
Somos
B.1
Missão,
Visão e
Valores
B.1.1 B.1.2 B.1.3
MIssão Visão Valores
B.2
Estrutura
campan
ha.pdf

61. Pilha de páginas
A
Página
Inicial
B C D E
Quem Produtos Blog Ajuda
Somos
B.1 D.1.X
Missão, Categoria
Visão e
Valores
B.1.1 B.1.2 B.1.3 D.1.X
MIssão Visão Valores Post
B.2
Estrutura
campan
ha.pdf

62. Agrupador de conteúdo
A
Página
Inicial
B C D E
Quem Produtos Blog Ajuda
Somos
B.1 D.1.X
Missão, Categoria
Visão e
Valores
C.1
Canecas
B.1.1 B.1.2 B.1.3 D.1.X
MIssão Visão Valores Post
B.2
Estrutura
C.1.X
Detalhe de
Produto
campanha C.2
.pdf Camisetas
C.2.X
Detalhe de
Produto
C.3
Cadernos
C.3.X
Detalhe de
Produto

63. Ponto de continuidade
A
Página
Inicial
A
B C D E
Quem Produtos Blog Ajuda
Somos
B.1 D.1.X
Missão, Categoria
Visão e
Valores
C.1
Canecas
B.1.1 B.1.2 B.1.3 D.1.X
MIssão Visão Valores Post
B.2
Estrutura
C.1.X
Detalhe de
Produto
campanha C.2
.pdf Camisetas
C.2.X
Detalhe de
Produto
C.3
Cadernos
C.3.X
Detalhe de
Produto

64. Ícones
A
F
Fale
Conosco

65. Área Condicional
A
F G
Fale Minha Área
Conosco
G.1
Editar meu
dados
B.2
Minhas
compras
USUÁRIO LOGADO

66. Cross-link
A
F G
Fale Minha Área
Conosco
G.1
Editar meu
dados
B.2
Minhas
compras
USUÁRIO LOGADO

67. Link externo
A
F G Link externo
Fale Minha Área Twitter
Conosco
G.1
Editar meu
dados
B.2
Minhas
compras
USUÁRIO LOGADO

68. Legenda
A
F G Link externo
Fale Minha Área Twitter
Conosco
G.1
Editar meu
dados
B.2
Minhas
compras
USUÁRIO LOGADO
Legenda
Seção Link estrutural
Pilha de seções Cross-link
Agrupador de seções Seção possui
formulário
Link Externo Arquivo para download
Seções disponíveis apenas
para o usuário logado

69. A
Página
Inicial
B C D E F G Link externo
Quem Produtos Blog Ajuda Fale Minha Área Twitter
Somos Conosco
B.1 D.1.X G.1
Missão, C.1 Categoria Editar meu
Visão e Canecas dados
Valores
B.1.1 B.1.2 B.1.3 D.1.X
MIssão Visão Valores C.1.X Post
B.2 Detalhe de B.2
Estrutura Produto Minhas
compras
C.2 USUÁRIO LOGADO
campanha Camisetas
.pdf
C.2.X
Detalhe de
Produto Legenda
Seção Link estrutural
C.3
Cadernos Pilha de seções Cross-link
Agrupador de seções Seção possui
formulário
C.3.X
Detalhe de
Produto Link Externo Arquivo para download
Seções disponíveis apenas
para o usuário logado

70. B C D E F.1
Usuários Financeiro Taxonomias Permissões Questõ
B.X C.1 D.X E.1
Usuário Royalties Taxonomia Classes
B.X.1 B.X.2 C.1.X C.1.1 C.1.4 D.X.1 D.X.2 E.1.X E.1.1
Alterar Usuário Excluir Royalty Inserir Royalty Extrato de Alterar Excluir Classe Inserir Classe
Usuário Royalties Taxonomia Taxonomia
B.1 D.1
Incluir Usuário Adicionar
Taxonomia
C.1.X.1 E.1.X.1
Alterar Royalty Alterar Classe
C.1.X.2 E.1.X.2
Excluir Royalty Excluir Classe
C.2
Contas a Pagar
E.2
Tipos de
Usuário
C.2.X
Conta a Pagar E.2.X E.2.1
Tipos de Incluir Tipo de
Usuário Usuário
C.2.X.1 C.2.X.2 C.2.X.3
Alterar Conta a Excluir Conta a Efetuar
Pagar Pagar Pagamento
C.2.1
Inserir Conta a E.2.X.1
Pagar Alterar Tipo de
Usuário
C.2.2
Gerar Ordens E.2.X.2
de Pagamento Excluir Tipo de
de Royalties Usuário
C.3
Créditos
C.3.X C.3.1 C.3.2 C.3.3
Crédito Inserir Crédito Saldo de Preços dos
Créditos Créditos
C.3.3.X
C.3.X.1 Preço dos
Alterar Crédito Créditos
C.3.3.X.1 C.3.3.X.2
Alterar Preço Excluir Preço
de Crédito de Crédito
C.3.X.2 C.3.3.1
Excluir Crédito Incluir Preço
de Crédito
OPERADOR