Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Hipermídias_Design Gráfico_UNISINOS_aula2

609 views

Published on

Slides da segunda aula do módulo de Hipermídias, Mídias Audiovisuais e Novas Mídias da Especialização em Design Gráfico da Unisinos - turma 2011

Published in: Design
  • Be the first to comment

Hipermídias_Design Gráfico_UNISINOS_aula2

  1. 1. ESCOLA DE DESIGNUNISINOSESPECIALIZAÇÃO EMDESIGN GRÁFICOHipermídia, Mídias Audiovisuais e Novas Mídias[aula 2] – gustavo fischer
  2. 2. calculam e armazenam.Computadores, contém dados.através deSoftwares são organizáveis em redes. Internet conecta redes de
  3. 3. Cultura da Interface+ Cultura do software
  4. 4.  Sistema que faz a mediação de um usuário solicitante com um sistema pré- programado que busca atendar as demandas do primeiro. Duas áreas gostam de lidar muito com a interface: Design + estudos de HCI (Human-computer Interface) Quando temos o Windows e cia, falamos de interfaces gráficas digitais.
  5. 5.  Criada em 1991 por Tim-Berners LeeLee propôs a criação de um espaço hipertextual global e aberto, no qual qualquer informação pudesse ser acessada através de um único Universal Document Identifier (Identificador Universal de Documentos). Nem tudo que é Internet, é web. A web fez pela Internet o que o Windows fez pelo computador, tornou a interface “amigável”.
  6. 6. Os softwares chamadosnavegadores, permitem que seacesse os documentos HTMLque universalizam a forma de“recepção” do conteúdo que sedesejasse fazer circular pelaInternet.Textos, imagens, sons,vídeos começam aaparecer nas interfacesgráficas digitais da web.O usuário ao requisitar umapágina, faz um “pedido” aoservidor que a disponibilize.
  7. 7.  Heterogeneidade Metamorfose Potencialidade Conectividade Cartografia
  8. 8. Heterogeneidade  o hipertexto é composto de diferentes nós que podem ser acessados por diferentes caminhos.  Todos os caminhos podem levar à sua marca.  OU talvez não necessariamente no lugar que você queria que as pessoas chegassem ao pensar na sua marca.
  9. 9. Metamorfose O hipertexto está em constante transformação Desde a “cor” do link visitado até a organização dos conteúdos.
  10. 10. Potencialidade  o usuário tem a possibilidade de recriar o hipertexto no momento de seu uso
  11. 11. Cartografia  o hipertexto deve oferecer recursos para a orientação flexível entre os caminhos possíveis.
  12. 12. (hiper) –texto> (mídia) Hipermídia une os conceitos de não- linearidade(não-linear), hipertexto, interface e multimídia numa só linguagem. Traduzida erroneamente como mero suporte, hipermídia não se configura só como meio de transmissão de mensagens, e sim como uma linguagem com características próprias, com sua própria gramática. Hipermídia, diferentemente de multimídia, não é a mera reunião dos meios existentes, e sim a fusão desses meios a partir
  13. 13. Ainda... Assim, hipermídia estende a noção de texto para outras linguagens, abarcando não apenas imagens, mas também sons e audiovisuais. Existe a possibilidade, portanto, de construirmos um documento que dê um acesso não-linear – promovido pelos links – entre conteúdos de diferentes linguagens (sonora, audiovisual, textual, visual), fazendo com que um link que tem como âncora um texto acione um vídeo, uma imagem carregue uma trilha musical e assim por diante. No âmbito da web, a hipermídia emerge como componente importantíssimo.
  14. 14. (mais uma definição) “o conjunto de meios que permite acesso simultâneo a textos, imagens e sons de modo interativo e não linear, possibilitando fazer links entre elementos de mídia, controlar a própria navegação e, até, extrair textos, imagens e sons cuja seqüência constituirá uma versão pessoal desenvolvida pelo usuário”. Vicente Gosciola (Roteiro para as Novas Mídias, 2003)
  15. 15. Hibridismo A hipermídia mistura diferentes tipos de linguagens http://postvisual.com/theuninvited/en/Características da hipermídia
  16. 16. Não-linearidade  o usuário não precisa seguir uma seqüência pré-determinada
  17. 17. Interatividade  o usuário deve ter papel ativo na fruição da hipermídia.
  18. 18. Navegabilidade o usuário deve ter liberdade para ir aonde quiser, encontrar seu rumo ou se perder
  19. 19. Exemplos de hipermídia “dentro efora” da Internet/web: Y-Dreams
  20. 20. (hiper) Texto -> Mídia (remidiação) - Substituição, evolução, conviv ência.
  21. 21.  web é o lado mídia Se a da Internet, o lado hiper lembra que nossa “leitura” aciona dados em rede e cria uma experiência que não é só “estilo mídia” nem só “estilo banco de dados” sob o comando de softwares.
  22. 22. dados + software +web(mídia) +______ =Internet
  23. 23. Web 2.0 Ao usar a máquina, ela nos usa. É um processo, não uma nova versão. Estrutura integrada de funcionalidades e conteúdo, criando serviços. Publicação (inserção), visualização (representação), compartilhamento (indexação) das informações.
  24. 24. Como ver o princípio em ação Sites que nasceram sob idéia de publicação, visualização e compartilhamento:
  25. 25. Mas tem muito mais: Go2web20.net Feed My App
  26. 26. Sites que funcionam comoorganizadores de conteúdo que vemde outros lugares NetVibes (www.netvibes.com) NetVibes da Agência Digital AG2
  27. 27. Mash-Ups> A + B = C Sites que organizam conteúdo possuem uma espécie de DNA (API)a) Usa-se um DNA a favor de um objetivo específico: ver Mashup awardsb) Ao reunir dois DNAs diferentes, forma-se um terceiro “SER”: Wonderwall e Boulevard of Broken Dreams
  28. 28. Exemplos: Diaroogle (1 API) Skate Spotter
  29. 29. Algumas conclusões:1. Decisões estratégicas reúnem dados+mídia2. Mutação permanente. Interfaces previstas, mas não previsíveis.3. Informação embutível/distribuível para muitos lugares (igual e diferente ao mesmo tempo).4. Vida pessoal e vida das marcas cada vez mais diluídas uma na outra?
  30. 30. O sujeito deixa marcas. O lado máquina [banco de dados + software] nos mede, mensura, percebe nossos passos e comportamentos. O lado mídia nos oferece ambientes para nos inserirmos em processos gregários, desenvolvermos estratégias identitárias, CONSTRUÍRMOS RELACIONAMENTO.
  31. 31. Social Network Sites (SNS) Serviços baseados na web que permitem aos indivíduos três possibilidades básicas: construção de um perfil público ou semi-público; articulação de uma lista de outros usuários/membros do mesmo serviço com os quais o indivíduo compartilha algum tipo de ligação e visualização e visitação tanto da sua lista de conexões com como das feitas por outros membros pertencentes ao mesmo serviço. A natureza e nomenclatura dessas conexões varia de site para site. Boyd e Ellison (2007)
  32. 32. Internet é: Máquina + Mídia +Ambiente de relacionamento
  33. 33. Internet Web Web 2.0Banco de Dados Ambiente de Mídia Relacionamento
  34. 34. Resumão:Para projetar experiências com a web, precisamos considerar: Suas três facetas (dados, mídia, relacionamento) Aceitar e usar as características do hipertexto e da hipermídia Pensar em combinar os “DNAs” disponíveis
  35. 35. Interfaces, telas,UX e arquiteturade informação
  36. 36. User Experience Design A definição para User Experience por exemplo, pode partir da idéia daquilo que engloba todos aspectos que um usuário tem por experiência direta em um produto digital, seja um website, seja um software/aplicativo, incluindo a forma, lógicas operativas (comportamento) e conteúdo do produto
  37. 37. Ao acrescentar o termo Design àexpressão, tem-se uma abordagemampliada, uma vez que compreendeuma visão multidisciplinar e holísticapara o design de interfaces deusuários em produtos digitais.Essa visão integra as áreas dedesign de interação, designindustrial, arquitetura dainformação, design de interfacevisual e design centrado no usuárioassegurando coerência econsistência através de todas as
  38. 38. Vamos voltar às interfaces.
  39. 39. SEGUNDO MANOVITCH, A TELA OUINTERFACE DO COMPUTADOR ÉAQUELA QUE “SEPARA DOISESPAÇOSABSOLUTAMENTEDIFERENTES E QUE DEALGUMA MANEIRACOEXISTEM”.
  40. 40. “INTERFACEAR OU ATENDERSIMULTANEAMENTE A DOIS OU MAISPÓLOS DE UM SISTEMA DE INFORMAÇÕESIMPLICA EM, DE UM LADO, CUMPRIR COMOS PROCEDIMENTOS CONTIDOS NO PÓLOINANIMADO, MAS PLANEJADO E PRÉ-DEFINIDO DO SISTEMA, E DE OUTROLADO, ATENDER A DEMANDA DEEXPECTATIVAS PREVISÍVEIS POR PARTEDO INDIVÍDUO USUÁRIO E SOLICITANTE.”(FREITAS, P. 188)
  41. 41. POSSIBILIDADE DE USO,COM LINGUAGENSDECODIFICÁVEIS A UMOU MAIS INDIVÍDUOSUSUÁRIOS PODE SERCONSIDERADO OPRINCIPAL DESAFIO DE A função da metáfora ficaUMA INTERFACE” bem clara conforme(FREITAS, a conclusão de Steven Johnson, que diz que ela ajuda aP. 189) imaginar o que é informado, propiciando a visão do todo em uma única tela (Gosciola, 2003, 92).
  42. 42. Outros exemplos demetáforas nos ícones eRemidiação: vídeo players
  43. 43.  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) Telas-interfaces-mídias
  44. 44. Oops
  45. 45. HUMANA NO CAMPO DO“REAL”, EM TERMOS DEPASSAGENS ENTREAMBIENTES, O AUTORAFIRMA QUE NOCIBERESPAÇO, “[O]SELEMENTOS ALIPRESENTES, QUANDOPERMITEM AMOVIMENTAÇÃO DE SUAESTRUTURA, APRESENTAM UM QUADROHIERÁRQUICO DEMOVIMENTAÇÃO COMDIFERENTES GRAUS DEPERMISSIVIDADE”.
  46. 46. A idéia de ambientação como repetição deelementos de cenário ou de sonoridade nastelas que não devem se restringir ao seupróprio espaço. Devem sim, dar indicaçõesque cada uma é uma continuidade física, emrepresentação, da outra, permitindo que se continuidade dovisualize aambiente a cada tela parapromover maior empatia do usuário.(idem, p.98)
  47. 47. PARA O PLANEJAMENTO DE UMAINTERFACE, “DEVE-SE LEVAR EMCONSIDERAÇÃO O HISTÓRICO DASEXPERIÊNCIAS” VIVENCIADAS DO INDIVÍDUOQUE SE PRETENDE SENSIBILIZAR, PODENDO-SE, ENTÃO, PROJETAR UM CONJUNTO DEELEMENTOS ESTIMULANTES EM UM SISTEMAESPECÍFICO DE INFORMAÇÕES, OBJETIVANDO-SE SUA INTERPRETAÇÃO UNÍVOCA EPREVIAMENTE DETERMINADA” (P. 191)
  48. 48. website um website – também entendido com site - trata-se de um conjunto de webpages (Jackson, 1997) que tenham um conceito que as articule (uma marca comercial, uma universidade, um evento, uma agremiação esportiva, uma banda de rock, uma associação, etc), que as reúna em uma mesma arquitetura, na qual as diferentes páginas web estão inseridas com alguma hierarquia diante do usuário.
  49. 49. Tipos de site  Dificuldade de criar as fronteiras entre forma-conteúdo  (ver webby awards)  (ver Wikipédia)
  50. 50. Mais relevantesBlog, portal, e-commerce, site derede social, media-sharing[inserção-visualização-compartilhamento], hotsite,buscadores, wiki.
  51. 51. No início, havia 2 escolas de AI:- Desenho de - Design estrutural dawireframes e informação (vocabuláriosmapas do site. controlados e taxonomias). Fonte: Luciana Cattony – plantabaixa.wordpress.com
  52. 52. Fonte: Luciana Cattony – plantabaixa.wordpress.com
  53. 53. Para mim arquitetura de informação é fazer ocomplexo se tornar algo simples. É entender asnecessidades do cliente, do seu negócio e traduzí-lasem ambientes amigáveis e intuitivos para o usuário.Costumo dizer que o arquiteto de informação é comose fosse um intérprete entre o cliente e o usuário, jáque ele contribui significativamente para que acomunicação e o intercâmbio / compartilhamento deinformações e experiências entre esses dois ladossejam feitos de maneira eficaz. Luciana Cattony. Arquiteta de Informação da W3Haus Fonte: Luciana Cattony – plantabaixa.wordpress.com
  54. 54. Visão da disciplina Mercado, concorrentes, necessidades do negócio, restrições tecnológicas, financeiras etc.Quem são, O que osuas site tem anecessidades, oferecer, chábitos, omo serámaneiras criado ode navegar, conteúdoexpectativas etc.etc.Fonte: Luciana Cattony – plantabaixa.wordpress.com
  55. 55. Arquitetura de Informação – Objetivos • Encurtar o tempo de construção • Tornar a manutenção mais simples • Tornar a busca por informações mais rápida • Simplificar tarefas e processos • Diminuir a necessidade de treinamentos • Agregar valor às marcas • Criar experiências de uso memoráveisFonte: Luciana Cattony – plantabaixa.wordpress.com
  56. 56. EntregáveisAtividades e entregáveis Fonte: que é arquitetura de informação? O Luciana Cattony – plantabaixa.wordpress.com
  57. 57. Recebimento da demanda Resgate e levantamento de informações BenchmarkingFonte: Luciana Cattony – plantabaixa.wordpress.com
  58. 58. Inventário / análise de conteúdo Avaliação Heurística Estatísticas Fonte: Luciana Cattony – plantabaixa.wordpress.com
  59. 59. 1.Visibilidade de Status do Sistema Isso significa que você precisa se certificar de que a interfacesempre informe ao usuário o que está acontecendo, ouseja, todas as ações precisam de feedback instantâneo paraorientá-lo.2.Relacionamento entre a interface do sistema e o mundo realOu não usar palavras de sistema, que não fazem sentido prousuário. Toda a comunicação do sistema precisa sercontextualizada ao usuário, e ser coerente com o chamadomodelo mental do usuário.3. Liberdade e controlo do usuárioFacilite as “saídas de emergência” para o usuário, permitindodesfazer ou refazer a ação no sistema e retornar ao pontoanterior, quando estiver perdido ou em situações inesperadas.
  60. 60. 4. ConsistênciaFale a mesma língua o tempo todo, e nunca identifique umamesma ação com ícones ou palavras diferentes. Trate coisassimilares, da mesma maneira, facilitando a identificação dousuário.5. Prevenção de errosNa tradução livre das palavras do próprio Nielsen “Aindamelhor que uma boa mensagem de erro é um designcuidadoso que possa prevenir esses erros”. Porexemplo, ações definitivas, como deleções ou solicitaçõespodem vir acompanhadas de um checkbox ou umamensagem de confirmação.6. Reconhecimento ao invés de lembrançaEvite acionar a memória do usuário o tempo inteiro, fazendocom que cada ação precise ser revista mentalmente antes deser executada. Permita que a interface ofereça ajudacontextual, e informações capazes de orientar as ações do
  61. 61. 7. Flexibilidade e eficiência de usoO sistema precisa ser fácil para usuários leigos, mas flexível obastante para se tornar ágil à usuários avançados. Essa flexibilidadepode ser conseguida com a permissão de teclas de atalhos, porexemplo. No caso de websites, uso de máscaras e navegação comtab em formulários são outros exemplos.8. Estética e design minimalista Evite que os textos e o design fale mais do que o usuário necessitasaber. Os “diálogos” do sistema precisam ser simples, diretos enaturais, presentes nos momentos em que são necessários.9. Ajude os usuários a reconhecer, diagnosticar e sanar errosAs mensagens de erro do sistema devem possuir uma redaçãosimples e clara que ao invés de intimidar o usuário com o erro, indiqueuma saída construtiva ou possível solução.10. Ajuda e documentaçãoUm bom design deveria evitar ao máximo à necessidade de ajuda nautilização do sistema. Ainda assim, um bom conjunto dedocumentação e ajuda deve ser utilizado para orientar o usuário em
  62. 62. Pesquisas quantitativas / qualitativas Focus Group Entrevistascom usuários PersonasFonte: Luciana Cattony – plantabaixa.wordpress.com Imagem personas: Adaptivepath
  63. 63. Mapa do site Card Sorting Estudo etnográfico Testes de usabilidade Fonte: Luciana Cattony – plantabaixa.wordpress.comImagens: TRY – Consultoria e pesquisa
  64. 64. Eye-tracking http://workvalue.net/wordpress/?p=197 http://issuu.com/duduloureiro/docs/entrevis tawebdesign_eyetracking_jun2009
  65. 65. HEATMAPS
  66. 66. Protótipos em papel Fonte: Luciana Cattony – plantabaixa.wordpress.comhttp://www.nngroup.com/reports/prototyping/video_stills.html
  67. 67. Wireframes x Layouts Fonte: Luciana Cattony – plantabaixa.wordpress.com
  68. 68. Wireframes x Layouts Fonte: Luciana Cattony – plantabaixa.wordpress.com
  69. 69. Acompanhamento do desenvolvimento Fonte: Luciana Cattony – plantabaixa.wordpress.com
  70. 70.  Divida o espaço em colunas e linhas – elas ajudam a estabelecer proporção, regularid ade, estrutura e ritmo ao seu layout. Não precisam ter um tamanho fixo, mas é bom que sejam proporcionais entre si e com relação à área útil total. (Rahdfarer, DWD2)
  71. 71. FERRAMENTA ONLINEPARA FAZER WIREFRAMES:BALSAMIQ
  72. 72. ATIVIDADE PRÁTICA:DESENVOLVIMENTO DESITEMAP + WIREFRAMES

×