Governança de TI - Aula01 Apresentação da disciplina
Interface homem computador - Aula06 - logo design e arquitetura da informação
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
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
10.
11.
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
13.
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
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)
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
30.
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
33.
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
36.
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
38.
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á?