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

Tópicos da discussão O que é Interface? Evolução das Interfaces O que é Web 2.0 Design para Web 2.0

O que é Interface?

Evolução das Interfaces

O que é Web 2.0

Design para Web 2.0

0 que é Interface Gráfica? Se refere ao aplicativo gráfico que dá forma à interatividade entre o usuário e o meio eletrônico.

Se refere ao aplicativo gráfico que dá forma à interatividade entre o usuário e o meio eletrônico.

Interface: Ciberespaço Materializado 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.

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.

Douglas Engelbart Mapeamento de bits A informação no espaço físico bidimensional. Manipulação direta Podíamos manipular a informação no novo espaço Interface: O Início Doug Engelbart O Primeiro Mouse

Douglas Engelbart

Mapeamento de bits

A informação no espaço físico bidimensional.

Manipulação direta

Podíamos manipular a informação no novo espaço

Posições teóricas Marshall McLuhan A Aldeia Global O meio é a mensagem Os meios de comunicação como extensões do homem Para McLuhan, o homem modela as ferramentas que o modelam.

Marshall McLuhan

A Aldeia Global

O meio é a mensagem

Os meios de comunicação como extensões do homem

Revolução Digital 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. Posições teóricas Lúcia Santaella

Revolução Digital

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.

Inteligência Coletiva 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. É do equilíbrio entre a “cooperação” e a “competição” que surge a Inteligência Coletiva. Posições teóricas Pierre Lévy

Inteligência Coletiva

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.

É do equilíbrio entre a “cooperação” e a “competição” que surge a Inteligência Coletiva.

O que é Web 2.0? Web 2.0 é a internet viva. A internet feita de gente e não apenas de conteúdo. 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).

Web 2.0 é a internet viva. A internet feita de gente e não apenas de conteúdo.

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).

Depois de 2001 com a “Bolha Assassina” Conferência entre a O’Reilly Media e outras grandes empresas do ramo de internet. ( http://www.web2con.com/ ) Onde surgiu o termo?

Depois de 2001 com a “Bolha Assassina”

Conferência entre a O’Reilly Media e outras grandes empresas do ramo de internet. ( http://www.web2con.com/ )

Antes da Bolha A internet começou e se expandiu como um grande banco de dados. Se fazia internet da mesma maneira que se fazia Jornal, Revista e TV: Publicando conteúdo.

A internet começou e se expandiu como um grande banco de dados.

Se fazia internet da mesma maneira que se fazia Jornal, Revista e TV: Publicando conteúdo.

Evolução de novos sites

Long Tail ( A Cauda Longa ) A internet é uma vitrine infinita que favorece o surgimento de nichos. O comercio on-line se beneficia da venda dos itens que individualmente vendem pouco. “ A internet é o maior amplificador do boca-a-boca que já se viu ” (Chirs Anderson) Paradigmas da Web 2.0 Chirs Anderson

Long Tail ( A Cauda Longa )

A internet é uma vitrine infinita que favorece o surgimento de nichos.

O comercio on-line se beneficia da venda dos itens que individualmente vendem pouco.

“ A internet é o maior amplificador do boca-a-boca que já se viu ” (Chirs Anderson)

Conteúdo participativo Colaboração (Ex: Flirck , Wikipedia , YouTube ) Personalização (Ex: Google.com / ig e live.com ) Avaliação (Ex: Amazon , MercadoLivre ) Tagueamento (Ex: del . icio .us ) Paradigmas da Web 2.0

Conteúdo participativo

Colaboração (Ex: Flirck , Wikipedia , YouTube )

Personalização (Ex: Google.com / ig e live.com )

Avaliação (Ex: Amazon , MercadoLivre )

Tagueamento (Ex: del . icio .us )

Usuário flexível Assinatura de conteúdo (Ex: RSS) Comunidade ao invés de audiência (Ex: Orkut ) Confiança total no usuário Paradigmas da Web 2.0

Usuário flexível

Assinatura de conteúdo (Ex: RSS)

Comunidade ao invés de audiência (Ex: Orkut )

Confiança total no usuário

Softwares que ficam melhores na medida em que são usados Serviços ao invés de softwares de prateleira Beta constante Descentralização de arquivos Compatibilidade de dispositivos Sistemas abertos Paradigmas da Web 2.0

Softwares que ficam melhores na medida em que são usados

Serviços ao invés de softwares de prateleira

Beta constante

Descentralização de arquivos

Compatibilidade de dispositivos

Sistemas abertos

Marketing de Performance Só se paga pelos resultados Toda ação on-line deve ser interessante do ponto de vista do retorno sobre o investimento Na internet feita de gente, a publicidade passa a se dar no relacionamento entre pessoas da empresa e consumidores. Otimização para sites de busca (SEO) Marketing Viral Paradigmas da Web 2.0

Marketing de Performance

Só se paga pelos resultados

Toda ação on-line deve ser interessante do ponto de vista do retorno sobre o investimento

Na internet feita de gente, a publicidade passa a se dar no relacionamento entre pessoas da empresa e consumidores.

Otimização para sites de busca (SEO)

Marketing Viral

Experiência do Usuário Sites mais rápidos e simples Uso do Ajax (Asynchronous Javascript And XML) Novas formas de interatividade e liberdade Design para Web 2.0

Experiência do Usuário

Sites mais rápidos e simples

Uso do Ajax (Asynchronous Javascript And XML)

Novas formas de interatividade e liberdade

Arquitetura de Informação Levantamento e categorização Organização das informações pelo espaço e por tópicos de interesse do usuário. Arquitetura de participação Quando o usuário é quem faz o conteúdo do site Design para Web 2.0

Arquitetura de Informação

Levantamento e categorização

Organização das informações pelo espaço e por tópicos de interesse do usuário.

Arquitetura de participação

Quando o usuário é quem faz o conteúdo do site

Design para Web 2.0 WireFrame (Felipe Memória) Interface Final (Site TV Globo)

Design para Web 2.0 Apoio de Branding Concentram-se no design gráfico 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.

Apoio de Branding

Concentram-se no design gráfico

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.

Usabilidade “ 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 ”. Design para Web 2.0

Usabilidade

“ 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 ”.

Usabilidade Jakob Nielsen ( www.useit.com ) Ser fácil de aprender Ser eficiente na utilização Ser fácil de ser recordado Ter poucos erros Ser subjetivamente agradável Jakob Nielsen

Jakob Nielsen ( www.useit.com )

Ser fácil de aprender

Ser eficiente na utilização

Ser fácil de ser recordado

Ter poucos erros

Ser subjetivamente agradável

Usabilidade Usuários nunca estão errados O concorrente está a um clique de distância O ato de navegação implica saber onde se está, onde esteve e onde se pode ir O usuário deve chegar com facilidade no conteúdo (a boa interface é a que passa despercebida)

Usuários nunca estão errados

O concorrente está a um clique de distância

O ato de navegação implica saber onde se está, onde esteve e onde se pode ir

O usuário deve chegar com facilidade no conteúdo (a boa interface é a que passa despercebida)

Organização do conteúdo Buscadores Internos:

Buscadores Internos:

Organização do conteúdo Abas:

Abas:

. Algumas Convenções BREADCRUMB TRAILS Organização do conteúdo

BREADCRUMB TRAILS

Não seja invasivo EVITAR POP-UPS: Confunde usuários iniciantes e irrita os experientes

EVITAR POP-UPS: Confunde usuários iniciantes e irrita os experientes

A Filosofia na Web 2.0 Não tente cobrar Não tente fazer propaganda Não imponha regras Evite o tom “Oficial”

Não tente cobrar

Não tente fazer propaganda

Não imponha regras

Evite o tom “Oficial”

Em comum

Em comum

Em comum

Em comum

Em comum

Em comum

Em comum

Enfim, Obrigado! Leituras: Os meios de comunicação como extensões do homem - McLUHAN, Marshall Usability Engineering - Jakob NIELSEN Cultura da Interface - Steven Johnson Design para a Internet - Felipe Memória http://www.web2con.com http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html

Leituras:

Os meios de comunicação como extensões do homem - McLUHAN, Marshall

Usability Engineering - Jakob NIELSEN

Cultura da Interface - Steven Johnson

Design para a Internet - Felipe Memória

http://www.web2con.com

http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html