Aula 9 interfaces- graduação Design

1,181 views

Published on

PPT de aula reunindo questões de interface, telas e arquitetura de informação com apoio de conteúdo desenvolvido por Luciana Cattony.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,181
On SlideShare
0
From Embeds
0
Number of Embeds
53
Actions
Shares
0
Downloads
65
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Aula 9 interfaces- graduação Design

  1. 1. Pa4, unisinos, design Interfaces, telas e arquitetura de informação
  2. 2. relacionamento <proposon> mútuo vivo
  3. 3. canvas representação
  4. 4. telas
  5. 5. mídias Tv Rádio Jornal Revista Web Tv Rádio Jornal Revista Web
  6. 6. informações
  7. 7. Remidiação como característica de uma genealogia de mídias Afiliação entre mídias (mais que evolução em só sentido) Remidiação das práticas materiais e arranjos sociais
  8. 8. Dependência, Contexto, Reforma TV, Impresso... “ fala” através das interfaces Da lacuna a intra-remidiação
  9. 9. Imediação e hipermediação nas interfaces Busca por transparência / mídia “original” Excitação da interface/ reconhecimento do meio Tensionamento pelos observáveis e 3 facetas
  10. 10. A hipermediação na web se relaciona com a evolução do computação e de aspectos do design. Interface humano-computador: arquivamento, montagem, devaneio, playfullness
  11. 11. Segundo Manovitch, a tela ou interface do computador é aquela que “separa dois espaços absolutamente diferentes e que de alguma maneira coexistem”. Quem ou o que são esses espaços?
  12. 12. “ Interfacear ou atender simultaneamente a dois ou mais pólos de um sistema de informações implica em, de um lado, cumprir com os procedimentos contidos no pólo inanimado, mas planejado e pré-definido do sistema , e de outro lado, atender a demanda de expectativas previsíveis por parte do indivíduo usuário e solicitante.” (Freitas, p. 188)
  13. 13. “ Oferecer possibilidade de uso, com linguagens decodificáveis a um ou mais indivíduos usuários pode ser considerado o principal desafio de uma interface” (Freitas, p. 189) A função da metáfora fica bem clara conforme a conclusão de Steven Johnson, que diz que ela ajuda a imaginar o que é informado, propiciando a visão do todo em uma única tela (Gosciola, 2003, 92).
  14. 14. Outros exemplos de metáforas nos ícones e Remidiação: video players
  15. 15. Telas-interfaces-mídias
  16. 16. <ul><li>Com a hipermídia, a discussão passaria a ser o surgimento, desenvolvimento e transformação das interfaces que permitem comunicação e uso por imersão . (Freitas, p. 195) </li></ul>Telas-interfaces-mídias
  17. 17. Oops
  18. 18. Numa analogia entre o design na relação humana no campo do “real”, em termos de passagens entre ambientes, o autor afirma que no ciberespaço, “[o]s elementos ali presentes , quando permitem a movimentação de sua estrutura, apresentam um quadro hierárquico de movimentação com diferentes graus de permissividade”. (p. 189)
  19. 19. <ul><li>A idéia de ambientação como repetição de elementos de cenário ou de sonoridade nas telas que não devem se restringir ao seu próprio espaço. Devem sim, dar indicações que cada uma é uma continuidade física, em representação, da outra, permitindo que se visualize a continuidade do ambiente a cada tela para promover maior empatia do usuário. (idem, p.98) </li></ul>
  20. 21. Para o planejamento de uma interface, “deve-se levar em consideração o histórico das experiências” vivenciadas do indivíduo que se pretende sensibilizar, podendo-se, então, projetar um conjunto de elementos estimulantes em um sistema específico de informações, objetivando-se sua interpretação unívoca e previamente determinada ” (p. 191)
  21. 23. No início, havia 2 escolas de AI: - Design estrutural da informação (vocabulários controlados e taxonomias). ´ Fonte: Luciana Cattony – plantabaixa.wordpress.com - Desenho de wireframes e mapas do site.
  22. 24. <ul><li>1. O design estrutural de ambientes de informação </li></ul><ul><li>compartilhados </li></ul><ul><li>2. A arte e a ciência da organização e categorização de </li></ul><ul><li>sites, intranets, comunidades online e softwares para </li></ul><ul><li>proporcionar usabilidade e “encontrabilidade” </li></ul><ul><li>3. Uma comunidade de prática emergente focada em levar </li></ul><ul><li>princípios de design e arquitetura ao ambiente digital </li></ul>Segundo o Instituto de Arquitetura de Informação: Fonte: Luciana Cattony – plantabaixa.wordpress.com
  23. 25. Fonte: Luciana Cattony – plantabaixa.wordpress.com
  24. 26. Luciana Cattony. Arquiteta de Informação da Gerdau. Para mim arquitetura de informação é fazer o complexo se tornar algo simples . É entender as necessidades do cliente, do seu negócio e traduzí-las em ambientes amigáveis e intuitivos para o usuário. Costumo dizer que o arquiteto de informação é como se fosse um intérprete entre o cliente e o usuário, já que ele contribui significativamente para que a comunicação e o intercâmbio / compartilhamento de informações e experiências entre esses dois lados sejam feitos de maneira eficaz. Fonte: Luciana Cattony – plantabaixa.wordpress.com
  25. 27. Visão da disciplina Mercado, concorrentes, necessidades do negócio, restrições tecnológicas, financeiras etc. Quem são, suas necessidades, hábitos, maneiras de navegar, expectativas etc. O que o site tem a oferecer, como será criado o conteúdo etc. Fonte: Luciana Cattony – plantabaixa.wordpress.com
  26. 28. <ul><li>Encurtar o tempo de construção </li></ul><ul><li>Tornar a manutenção mais simples </li></ul><ul><li>Tornar a busca por informações mais rápida </li></ul><ul><li>Simplificar tarefas e processos </li></ul><ul><li>Diminuir a necessidade de treinamentos </li></ul><ul><li>Agregar valor às marcas </li></ul><ul><li>Criar experiências de uso memoráveis </li></ul>Arquitetura de Informação – Objetivos Fonte: Luciana Cattony – plantabaixa.wordpress.com
  27. 29. Entregáveis O que é arquitetura de informação? Atividades e entregáveis Fonte: Luciana Cattony – plantabaixa.wordpress.com
  28. 30. Resgate e levantamento de informações Recebimento da demanda Benchmarking Fonte: Luciana Cattony – plantabaixa.wordpress.com
  29. 31. Inventário / análise de conteúdo Avaliação de maturidade Avaliação Heurística Estatísticas Fonte: Luciana Cattony – plantabaixa.wordpress.com
  30. 32. Pesquisas quantitativas / qualitativas Entrevistas com usuários Personas Imagem personas: Adaptivepath Focus Group Fonte: Luciana Cattony – plantabaixa.wordpress.com
  31. 33. Testes de usabilidade <ul><ul><li>Card Sorting </li></ul></ul>Imagens: TRY – Consultoria e pesquisa <ul><ul><li>Estudo etnográfico </li></ul></ul>Mapa do site Fonte: Luciana Cattony – plantabaixa.wordpress.com
  32. 34. Protótipos em papel http://www.nngroup.com/reports/prototyping/video_stills.html Fonte: Luciana Cattony – plantabaixa.wordpress.com
  33. 35. Desenvolvimento de wireframes Fonte: Luciana Cattony – plantabaixa.wordpress.com
  34. 36. Wireframes x Layouts Fonte: Luciana Cattony – plantabaixa.wordpress.com
  35. 37. Wireframes x Layouts Fonte: Luciana Cattony – plantabaixa.wordpress.com
  36. 38. Acompanhamento do desenvolvimento Fonte: Luciana Cattony – plantabaixa.wordpress.com
  37. 39. <ul><li>Hierarquia da informação </li></ul><ul><li>As informações devem ter pesos diferentes. Foque naquilo que é mais importante e respeite uma hierarquia de informação. </li></ul>Fonte: Luciana Cattony – plantabaixa.wordpress.com
  38. 40. <ul><li>Apresentação da informação </li></ul><ul><li>Existem maneiras visuais e mais amigáveis para se transmitir uma informação. </li></ul>Fonte: Luciana Cattony – plantabaixa.wordpress.com
  39. 41. <ul><li>Apresentação da informação </li></ul><ul><li>Existem maneiras visuais e mais amigáveis para se transmitir uma informação. </li></ul>Fonte: Luciana Cattony – plantabaixa.wordpress.com Fonte: Luciana Cattony – plantabaixa.wordpress.com
  40. 42. <ul><li>Apresentação da informação </li></ul><ul><li>Existem maneiras visuais e mais amigáveis para se transmitir uma informação. </li></ul>Fonte: Luciana Cattony – plantabaixa.wordpress.com
  41. 43. <ul><li>Formulários </li></ul><ul><li>Dependendo do caso, é melhor fazer o usuário dar vários passos do que oferecer uma rolagem gigante . </li></ul>Fonte: Luciana Cattony – plantabaixa.wordpress.com
  42. 44. <ul><li>Homogeneidade Comunicativa </li></ul><ul><li>Padronização estética e de navegação para reforçar a marca e a apreensão cognitiva. </li></ul>Seção cama, mesa e banho Seção informática
  43. 45. <ul><li>Mundialização </li></ul><ul><li>Utilização de códigos, ícones e signos reconhecidos internacionalmente e específicos de diferentes usuários facilitam o entendimento. </li></ul>Fonte: Luciana Cattony – plantabaixa.wordpress.com
  44. 46. <ul><li>Navegação assertiva </li></ul><ul><li>Informações simples, diretas, distribuídas estrategicamente e links representativos para o usuário alcançar facilmente seus objetivos. </li></ul>Fonte: Luciana Cattony – plantabaixa.wordpress.com
  45. 47. <ul><li>Ajuda ao usuário </li></ul><ul><li>Informações complementares, em local visível, que auxiliam a navegação e o cumprimento dos objetivos do usuário. </li></ul>Fonte: Luciana Cattony – plantabaixa.wordpress.com
  46. 48. <ul><li>Feedback </li></ul><ul><li>Opção para que o usuário se manifeste, fazendo-o sentir parte importante do processo. </li></ul>Site BP– Área de Imprensa Fonte: Luciana Cattony – plantabaixa.wordpress.com

×