1 sem 2016 - CEULJI ULBRA Prof. Maigon Pontuschka

1. Interface
Homem-Computador
Aula 06 – Logo design e Arquitetura da
Informação
PROF. MAIGON NACIB PONTUSCHKA
maigonp@gmail.com
1° Semestre 2016
Conteúdo de Arquitetura da Informação traduzido de
Introduction to Information Architecture
de Mike Crabb, Robert Gordon University

2. 2
Logotipos

4. XEROX

9. Aula de hoje
• Introdução ao problema do “information overload”
• O que é arquitetura?
• Arquitetura no contexto da informática
• Usuários, contexto e conteúdo
• Projetando a arquitetura da informação
Wireframes
Mockups
Protótipos
• Criando a arquitetura da informação

12. Usabilidade não é apenas o usuário
conseguir usar o produto!
• Cinco atributos da usabilidade de Nielsen
1. Facilidade de aprendizagem
2. Eficiência de uso
3. Facilidade de memorização
4. Baixa taxa de erros
5. Satisfação subjetiva

14. O que os arquitetos da informação fazem?
Antes Depois

15. Quem é o arquiteto da informação
• “Indivíduo que organiza padrões inerentes aos dados, transformando
o que é complexo em algo claro.
• Uma pessoa que “cria a estrutura ou o mapa de determinada
informação, dde modo a possibilitar a outras que criem o seu
caminho pessoal em direção ao conhecimento.”
• “A.I. é a profissão emergente do século XXI cujo escopo é formado
por necessidades atuais focalizadas na clareza, na compreensão
humana e na ciência da organização da informação”.

16. ARQUITETURA DA INFORMAÇÃO
OBJEIVO
• Organizar grandes volumes de informação de modo que
usuários tenham acesso à informação de forma fácil e
eficiente

17. O que é arquitetura?
Resultado do
planejamento e
construção de
edifícios

19. Liberty Square
Fantasyland
Tomorrow
land
Frontierland
Adventureland
Main Street
USA

20. Arquitetura de sistemas

21. Arquitetura de software

22. Arquiterura de redes

23. Arquitetura da informação
• O design estrutural de
ambientes de informação
compartilhados
• Combinação de organização,
titulação, pesquisa e sistema
de navegação nos sites web e
intranets

24. LOGO LINKS PRIMÁRIOS PESQUISA
LINKS SECUNDÁRIOS IMAGENS (CONTEÚDO) INFO (CONTEÚDO)

25. Arquitetura da informação

26. USUÁRIOS
• Entender os usuários
• Quem são? Demografia?
• Que informação eles querem do seu sistema?
• Qual a resposta certa para uma necessidade de informação?
• Todas as respostas possíveis?
• Como se comportam?
• Existem tipos diferentes de comportamento?
• Eles ficam satisfeitos ou frustrados?

27. CONTEXTO
• Todas as páginas web/apps existem em um
contexto
• Parte do contexto:
• Necessidades do negócio
• O que o sistema de informação deve fazer?
• Missão e objetivos e estratégia da organização

28. CONTEÚDO
• Qualquer coisa que um usuário queira encontrar
• Artigos
• Links externos/fontes
• Outras mídias (vídeos/imagens/etc.)
• Preocupações sobre conteúdo
• Direitos autorais
• Formatos, metadados, estrutura
De que vale uma interface com
boa usabilidade, se o usuário
não acha a informação que
procura?

29. PROJETANDO A ARQUITETURA DA
INFORMAÇÃO
• WIREFRAME
Esquetes básicos da estrutura, layout e componentes de
um site. Primeiro passo do processo de design
• MOCKUP
Foca mais no design visual de um site, mais próximo do
produto final
• PROTÓTIPO
Layout semifuncional implementado em HTML e CSS

31. WIREFRAME é uma representação de baixa
fidelidade de um design
• Deve mostrar
• Os principais grupos de conteúdo (O QUÊ)
• A estrutura da informação (ONDE)
• Descrição da reação esperada com relação à
interface (COMO)

32. CONTEÚDO DO WIREFRAME
• Elementos estruturais da interface
• Cabeçalhos, navegação, conteúdo principal, barras
laterais
• Layout dos elementos estruturais
• Posição, tamanho
• Tipos de conteúdo que serão apresentados
• Texto, Imagens,Video

34. MOCKUP- Representação de baixa/média
fidelidade de um design
• Deve aperfeiçoar oWireframe e mostrar
• Que cores serão usadas
• Que fontes serão usadas
• Não deve mostrar
• Conteúdo específico do site

35. MOCKUP- Representação de baixa/média
fidelidade de um design
• Um bom Mockup deve:
• Representar a estrutura da informação
• Visualizar o conteúdo do site e
• Demonstrar a funcionalidade do site de modo estático

37. Um PROTÓTIPO é uma representação de
média/alta fidelidade do site
• Um protótipo deve permitir ao usuário
• Experienciar o conteúdo e interações com a interface
• Testar as principais interações de modo que seja semelhante ao
produto final

39. USO Forma
WIREFRAME
Documentação, comunicação
rápida
Rabiscos, esquetes, representação
em preto e branco
MOCKUP
Obter feedback, aprovação das
partes interessadas
Visualização estática
PROTÓTIPO
Teste do usuário, estrutura básica
para o desenvolvimento
Interativo

40. MÃOS À OBRA
• Recriar site da organização para a qual fizemos a
análise heurística

41. GASTE 5 MINUTOS OLHANDO OUTROS SITES
DE ORGANIZAÇÕES SEMELHANTES AO QUE
VOCÊ ESTÁ TRABALHANDO E OBSERVE SUAS
ESTRUTURAS

42. PERGUNTAS IMPORTANTES
1. Qual é a principal coisa que chama a sua atenção quando
você visita o site?
2. Que informação você esperaria ver no site que ESTÁ lá?
3. Que informação você esperaria ver no site que NÃO está
lá?
4. Que páginas estão presentes no site? (Home, contato,
etc)
5. Pense sobre a página principal. Que conteúdo está lá?