O Design de Interfaces na Web 2.0

Lauro Teixeira – [email protected] 1

O Design de Interfaces na Web 2.0

Lauro TeixeiraCoordenador 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


0 que é Interface Gráfica?

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


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


Posições teóricas

Marshall McLuhan

• A Aldeia Global• O meio é a mensagem• Os meios de

comunicação comoextensões do homem

Para McLuhan, o homem modela as ferramentas

que o modelam.


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.


Lúcia Santaella


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.


Pierre Lévy


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


• 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?

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.


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


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


http://www.flickr.com/

http://www.wikipedia.org/

http://www.youtube.com/

http://www.google.com.br/ig



http://www.live.com/

http://www.amazon.com/

http://www.mercadolivre.com.br/

http://del.icio.us/

http://del.icio.us/

http://del.icio.us/

http://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


http://www.orkut.com/


• 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



• 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


• 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


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.


• 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

• 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

http://www.useit.com/


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)


Organização do conteúdo

• Buscadores Internos:



• Abas:


. Algumas Convenções

• BREADCRUMB TRAILS



Não seja invasivo

• 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”


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

http://www.web2con.com/

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

Business

O Design de Interfaces na Web 2.0