O Design de Interfaces na Web 2.0 Lauro Teixeira Coordenador de Programação TV TEM Bauru Pós-Graduação em Comunicação FAAC...
Tópicos da discussão <ul><li>O que é Interface? </li></ul><ul><li>Evolução das Interfaces </li></ul><ul><li>O que é Web 2....
0 que é Interface Gráfica? <ul><li>Se refere ao aplicativo gráfico que dá forma à interatividade entre o usuário e o meio ...
Interface: Ciberespaço Materializado <ul><li>Para que a mágica da revolução digital ocorra, um sistema digital deve repres...
<ul><li>Douglas Engelbart </li></ul><ul><li>Mapeamento de bits </li></ul><ul><ul><li>A informação no espaço físico bidimen...
Posições teóricas <ul><li>Marshall McLuhan </li></ul><ul><ul><li>A Aldeia Global </li></ul></ul><ul><ul><li>O meio é a men...
<ul><li>Revolução Digital </li></ul><ul><li>A revolução que estamos atravessando é psíquica, cultural e socialmente muito ...
<ul><li>Inteligência Coletiva </li></ul><ul><li>Caracteriza-se por um novo tipo pensamento sustentado por conexões sociais...
O que é Web 2.0? <ul><li>Web 2.0 é a internet viva. A internet feita de gente e não apenas de conteúdo. </li></ul><ul><li>...
<ul><li>Depois de 2001 com a “Bolha Assassina” </li></ul><ul><li>Conferência entre a O’Reilly Media e outras grandes empre...
Antes da Bolha <ul><li>A internet começou e se expandiu como um grande banco de dados. </li></ul><ul><li>Se fazia internet...
Evolução de novos sites
<ul><li>Long Tail ( A Cauda Longa ) </li></ul><ul><ul><li>A internet é uma vitrine infinita que favorece o surgimento de n...
<ul><li>Conteúdo participativo </li></ul><ul><ul><li>Colaboração (Ex:  Flirck ,  Wikipedia ,  YouTube ) </li></ul></ul><ul...
<ul><li>Usuário flexível </li></ul><ul><ul><li>Assinatura de conteúdo (Ex: RSS) </li></ul></ul><ul><ul><li>Comunidade ao i...
<ul><li>Softwares que ficam melhores na medida em que são usados </li></ul><ul><ul><li>Serviços ao invés de softwares de p...
<ul><li>Marketing de Performance </li></ul><ul><ul><li>Só se paga pelos resultados </li></ul></ul><ul><ul><li>Toda ação on...
<ul><li>Experiência do Usuário </li></ul><ul><ul><li>Sites mais rápidos e simples </li></ul></ul><ul><ul><li>Uso do Ajax  ...
<ul><li>Arquitetura de Informação </li></ul><ul><ul><li>Levantamento e categorização </li></ul></ul><ul><ul><li>Organizaçã...
Design para Web 2.0 WireFrame  (Felipe Memória) Interface Final  (Site TV Globo)
Design para Web 2.0 <ul><li>Apoio de Branding </li></ul><ul><ul><li>Concentram-se no design gráfico </li></ul></ul><ul><ul...
<ul><li>Usabilidade </li></ul><ul><ul><li>“ Usabilidade está diretamente ligada ao diálogo na interface. É a capacidade do...
Usabilidade <ul><li>Jakob Nielsen ( www.useit.com ) </li></ul><ul><ul><li>Ser fácil de aprender  </li></ul></ul><ul><ul><l...
Usabilidade <ul><li>Usuários nunca estão errados </li></ul><ul><li>O concorrente está a um clique de distância </li></ul><...
Organização do conteúdo <ul><li>Buscadores Internos: </li></ul>
Organização do conteúdo <ul><li>Abas: </li></ul>
. Algumas Convenções <ul><li>BREADCRUMB TRAILS </li></ul>Organização do conteúdo
Não seja invasivo <ul><li>EVITAR POP-UPS: Confunde usuários iniciantes e irrita os experientes </li></ul>
A Filosofia na Web 2.0 <ul><li>Não tente cobrar </li></ul><ul><li>Não tente fazer propaganda </li></ul><ul><li>Não imponha...
Em comum
Em comum
Em comum
Em comum
Em comum
Em comum
Em comum
Enfim, Obrigado! <ul><li>Leituras: </li></ul><ul><ul><li>Os meios de comunicação como extensões do homem -  McLUHAN, Marsh...
Upcoming SlideShare
Loading in …5
×

O Design de Interfaces na Web 2.0

3,089 views
2,942 views

Published on

Palestra proferida na Faculdade Fênix na ocasião da I Semana do Marketing

Published in: Business

O Design de Interfaces na Web 2.0

  1. 1. O Design de Interfaces na Web 2.0 Lauro Teixeira Coordenador de Programação TV TEM Bauru Pós-Graduação em Comunicação FAAC/Unesp
  2. 2. Tópicos da discussão <ul><li>O que é Interface? </li></ul><ul><li>Evolução das Interfaces </li></ul><ul><li>O que é Web 2.0 </li></ul><ul><li>Design para Web 2.0 </li></ul>
  3. 3. 0 que é Interface Gráfica? <ul><li>Se refere ao aplicativo gráfico que dá forma à interatividade entre o usuário e o meio eletrônico. </li></ul>
  4. 4. Interface: Ciberespaço Materializado <ul><li>Para que a mágica da revolução digital ocorra, um sistema digital deve representar-se a si mesmo ao usuário, numa linguagem que este compreenda. </li></ul>
  5. 5. <ul><li>Douglas Engelbart </li></ul><ul><li>Mapeamento de bits </li></ul><ul><ul><li>A informação no espaço físico bidimensional. </li></ul></ul><ul><li>Manipulação direta </li></ul><ul><ul><li>Podíamos manipular a informação no novo espaço </li></ul></ul>Interface: O Início Doug Engelbart O Primeiro Mouse
  6. 6. Posições teóricas <ul><li>Marshall McLuhan </li></ul><ul><ul><li>A Aldeia Global </li></ul></ul><ul><ul><li>O meio é a mensagem </li></ul></ul><ul><ul><li>Os meios de comunicação como extensões do homem </li></ul></ul>Para McLuhan, o homem modela as ferramentas que o modelam.
  7. 7. <ul><li>Revolução Digital </li></ul><ul><li>A revolução que estamos atravessando é psíquica, cultural e socialmente muito mais profunda do que foi a invenção do alfabeto, do que foi também a revolução provocada pela invenção de Gutenberg. A revolução digital é tão vasta a ponto de atingir proporções antropológicas importantes, comparada à revolução neolítica. </li></ul>Posições teóricas Lúcia Santaella
  8. 8. <ul><li>Inteligência Coletiva </li></ul><ul><li>Caracteriza-se por um novo tipo pensamento sustentado por conexões sociais que são viáveis através da utilização das redes abertas na Internet. </li></ul><ul><li>É do equilíbrio entre a “cooperação” e a “competição” que surge a Inteligência Coletiva. </li></ul>Posições teóricas Pierre Lévy
  9. 9. O que é Web 2.0? <ul><li>Web 2.0 é a internet viva. A internet feita de gente e não apenas de conteúdo. </li></ul><ul><li>Na segunda geração da internet os sites são apenas “plataformas de conteúdo participativo em fluxo” e o foco está na “movimentação de pessoas” (comunidades). </li></ul>
  10. 10. <ul><li>Depois de 2001 com a “Bolha Assassina” </li></ul><ul><li>Conferência entre a O’Reilly Media e outras grandes empresas do ramo de internet. ( http://www.web2con.com/ ) </li></ul>Onde surgiu o termo?
  11. 11. Antes da Bolha <ul><li>A internet começou e se expandiu como um grande banco de dados. </li></ul><ul><li>Se fazia internet da mesma maneira que se fazia Jornal, Revista e TV: Publicando conteúdo. </li></ul>
  12. 12. Evolução de novos sites
  13. 13. <ul><li>Long Tail ( A Cauda Longa ) </li></ul><ul><ul><li>A internet é uma vitrine infinita que favorece o surgimento de nichos. </li></ul></ul><ul><ul><li>O comercio on-line se beneficia da venda dos itens que individualmente vendem pouco. </li></ul></ul><ul><ul><li>“ A internet é o maior amplificador do boca-a-boca que já se viu ” (Chirs Anderson) </li></ul></ul>Paradigmas da Web 2.0 Chirs Anderson
  14. 14. <ul><li>Conteúdo participativo </li></ul><ul><ul><li>Colaboração (Ex: Flirck , Wikipedia , YouTube ) </li></ul></ul><ul><ul><li>Personalização (Ex: Google.com / ig e live.com ) </li></ul></ul><ul><ul><li>Avaliação (Ex: Amazon , MercadoLivre ) </li></ul></ul><ul><ul><li>Tagueamento (Ex: del . icio .us ) </li></ul></ul>Paradigmas da Web 2.0
  15. 15. <ul><li>Usuário flexível </li></ul><ul><ul><li>Assinatura de conteúdo (Ex: RSS) </li></ul></ul><ul><ul><li>Comunidade ao invés de audiência (Ex: Orkut ) </li></ul></ul><ul><ul><li>Confiança total no usuário </li></ul></ul>Paradigmas da Web 2.0
  16. 16. <ul><li>Softwares que ficam melhores na medida em que são usados </li></ul><ul><ul><li>Serviços ao invés de softwares de prateleira </li></ul></ul><ul><ul><li>Beta constante </li></ul></ul><ul><ul><li>Descentralização de arquivos </li></ul></ul><ul><ul><li>Compatibilidade de dispositivos </li></ul></ul><ul><ul><li>Sistemas abertos </li></ul></ul>Paradigmas da Web 2.0
  17. 17. <ul><li>Marketing de Performance </li></ul><ul><ul><li>Só se paga pelos resultados </li></ul></ul><ul><ul><li>Toda ação on-line deve ser interessante do ponto de vista do retorno sobre o investimento </li></ul></ul><ul><ul><li>Na internet feita de gente, a publicidade passa a se dar no relacionamento entre pessoas da empresa e consumidores. </li></ul></ul><ul><ul><li>Otimização para sites de busca (SEO) </li></ul></ul><ul><ul><li>Marketing Viral </li></ul></ul>Paradigmas da Web 2.0
  18. 18. <ul><li>Experiência do Usuário </li></ul><ul><ul><li>Sites mais rápidos e simples </li></ul></ul><ul><ul><li>Uso do Ajax (Asynchronous Javascript And XML) </li></ul></ul><ul><ul><li>Novas formas de interatividade e liberdade </li></ul></ul>Design para Web 2.0
  19. 19. <ul><li>Arquitetura de Informação </li></ul><ul><ul><li>Levantamento e categorização </li></ul></ul><ul><ul><li>Organização das informações pelo espaço e por tópicos de interesse do usuário. </li></ul></ul><ul><ul><li>Arquitetura de participação </li></ul></ul><ul><ul><ul><li>Quando o usuário é quem faz o conteúdo do site </li></ul></ul></ul>Design para Web 2.0
  20. 20. Design para Web 2.0 WireFrame (Felipe Memória) Interface Final (Site TV Globo)
  21. 21. Design para Web 2.0 <ul><li>Apoio de Branding </li></ul><ul><ul><li>Concentram-se no design gráfico </li></ul></ul><ul><ul><li>São responsáveis pela comunicação da mensagem a ser exibida, refletindo os atributos da marca e sua personalidade, além das características emocionais a que o produto deve estar associado. </li></ul></ul>
  22. 22. <ul><li>Usabilidade </li></ul><ul><ul><li>“ Usabilidade está diretamente ligada ao diálogo na interface. É a capacidade do software em permitir que o usuário alcance suas metas de interação com o sistema ”. </li></ul></ul>Design para Web 2.0
  23. 23. Usabilidade <ul><li>Jakob Nielsen ( www.useit.com ) </li></ul><ul><ul><li>Ser fácil de aprender </li></ul></ul><ul><ul><li>Ser eficiente na utilização </li></ul></ul><ul><ul><li>Ser fácil de ser recordado </li></ul></ul><ul><ul><li>Ter poucos erros </li></ul></ul><ul><ul><li>Ser subjetivamente agradável </li></ul></ul>Jakob Nielsen
  24. 24. Usabilidade <ul><li>Usuários nunca estão errados </li></ul><ul><li>O concorrente está a um clique de distância </li></ul><ul><li>O ato de navegação implica saber onde se está, onde esteve e onde se pode ir </li></ul><ul><li>O usuário deve chegar com facilidade no conteúdo (a boa interface é a que passa despercebida) </li></ul>
  25. 25. Organização do conteúdo <ul><li>Buscadores Internos: </li></ul>
  26. 26. Organização do conteúdo <ul><li>Abas: </li></ul>
  27. 27. . Algumas Convenções <ul><li>BREADCRUMB TRAILS </li></ul>Organização do conteúdo
  28. 28. Não seja invasivo <ul><li>EVITAR POP-UPS: Confunde usuários iniciantes e irrita os experientes </li></ul>
  29. 29. A Filosofia na Web 2.0 <ul><li>Não tente cobrar </li></ul><ul><li>Não tente fazer propaganda </li></ul><ul><li>Não imponha regras </li></ul><ul><li>Evite o tom “Oficial” </li></ul>
  30. 30. Em comum
  31. 31. Em comum
  32. 32. Em comum
  33. 33. Em comum
  34. 34. Em comum
  35. 35. Em comum
  36. 36. Em comum
  37. 37. Enfim, Obrigado! <ul><li>Leituras: </li></ul><ul><ul><li>Os meios de comunicação como extensões do homem - McLUHAN, Marshall </li></ul></ul><ul><ul><li>Usability Engineering - Jakob NIELSEN </li></ul></ul><ul><ul><li>Cultura da Interface - Steven Johnson </li></ul></ul><ul><ul><li>Design para a Internet - Felipe Memória </li></ul></ul><ul><ul><li>http://www.web2con.com </li></ul></ul><ul><ul><li>http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html </li></ul></ul>

×