Interface homem computador - Aula06 - logo design e arquitetura da informação

415 visualizações

Publicada em

1 sem 2016 - CEULJI ULBRA
Prof. Maigon Pontuschka

Publicada em: Design
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
415
No SlideShare
0
A partir de incorporações
0
Número de incorporações
151
Ações
Compartilhamentos
0
Downloads
16
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • 2
  • Interface homem computador - Aula06 - logo design e arquitetura da informação

    1. 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. 2 Logotipos
    3. 3. XEROX
    4. 4. 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
    5. 5. 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
    6. 6. O que os arquitetos da informação fazem? Antes Depois
    7. 7. 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”.
    8. 8. 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
    9. 9. O que é arquitetura? Resultado do planejamento e construção de edifícios
    10. 10. Liberty Square Fantasyland Tomorrow land Frontierland Adventureland Main Street USA
    11. 11. Arquitetura de sistemas
    12. 12. Arquitetura de software
    13. 13. Arquiterura de redes
    14. 14. 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
    15. 15. LOGO LINKS PRIMÁRIOS PESQUISA LINKS SECUNDÁRIOS IMAGENS (CONTEÚDO) INFO (CONTEÚDO)
    16. 16. Arquitetura da informação
    17. 17. 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?
    18. 18. 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
    19. 19. 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?
    20. 20. 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
    21. 21. 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)
    22. 22. 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
    23. 23. 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
    24. 24. 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
    25. 25. 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
    26. 26. 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
    27. 27. MÃOS À OBRA • Recriar site da organização para a qual fizemos a análise heurística
    28. 28. GASTE 5 MINUTOS OLHANDO OUTROS SITES DE ORGANIZAÇÕES SEMELHANTES AO QUE VOCÊ ESTÁ TRABALHANDO E OBSERVE SUAS ESTRUTURAS
    29. 29. 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á?

    ×