O que é?
Loja virtual e Comunidade Social Loja virtual de camisetas atrelada a uma comunidade para discussões de idéias políticas, ...
Interface, hoje
 
Conteúdo
Estampas! “ Estampa” é o conjunto de: - preço - descrição - nome - árvores a serem plantadas - valor a ser doado - ilustra...
Comunidade “Camisa Social” Comunidade inserida na loja. Conjunto de blogs e fóruns, sobre política, meio ambiente e questõ...
Usuário e Carrinho de Compras Conta do usuário: - histórico de pedidos - histórico de doações - dados pessoais Carrinho de...
Textos e mais textos “ A Marca”, contando tudo sobre a Politik “ Notícias” (ou “Novidades”) sobre a loja, produtos e comun...
Tarefas
Usuários Compra de camisetas Participação na Comunidade “Camisa Social” e nas notícias da loja Comentários
Funcionários do site Administração (ou seja, alteração, inclusão e exclusão): - de estampas - dos blogs - de notícias - de...
SEO – Otimização para sistemas de busca
Título, meta tags, alts, etc Título do site: “POLITIK – Vista seus ideais – “ + seção (por exemplo: “A marca”, “Comunidad...
Meta Robots e robots.txt: configurar o arquivo corretamente e indicar na “meta robots” para não indexar a página do carri...
Guidelines W3C Utilizar as recomendações do W3C para a criação do site Tableless CSS em arquivo separado ALT das imagens
Cadastrar onde for possível Além do Google e Yahoo cadastrar em outros sites de busca Utilizar algum serviço que faça isso...
 
Pay Per Click e Ferramentas - Google: Ad Words, Ferramentas para Webmasters e toolbar - Yahoo: Search Marketing e Site Exp...
 
Sitemaps! Mapa do site em formato XML para o Google
Fácil de usar = fácil de achar Usabilidade, acessibilidade e consistência ajudam a achar o site mais facilmente “ Google é...
Acessibilidade
Guidelines do W3C Seguir as recomendações do W3C para XHTML, Tableless, CSS, alt nas imagens, <strong>, <h1>, etc
Validadores Não são a solução, mas já são um caminho W3C (CSS e XHTML) e DaSilva (Acessibilidade)
Link “Ir para o conteúdo” Inserir em todas as páginas um link com um atalho para o conteúdo principal da página
Usabilidade
Lojas virtuais Não inventar: seguir o padrão já estabelecido na web para lojas virtuais Utilizar o Carrinho de compras
Busca inteligente Utilizar sistema de tags e classes para classificação das estampas, facilitando a busca Tags viram palav...
Ajuda Utilizar sistema de ajuda que abra o conteúdo referente a página a qual o usuário estiver acessando
Mapa do site Sempre útil.
Portabilidade
Tableless + CSS, sempre! Não custa repetir. Recomendações do W3C! Passar pelos validadores deles. Testar no maior número d...
CSS “mutante” CSS específico para cada tipo de dispositivo (browser, celular, impressão, etc).
Site para celular Avaliar a criação de um site separado para celular (com o conteúdo da &quot;Camisa Social”, principalmen...
Consistência e Convenção
Consistência Visual Utilizar a idéia de boxes em todo o site Mesma formatação de título Mesma linha visual para a Comunida...
Convenção Seguir convenção de desenho de interface (logomarca no canto superior esquerdo, busca no canto superior direito,...
Colaboração
Participação Fórum para os usuários. Deixar comentar tudo o que for possível, com o mínimo de censura possível (dentro dos...
Integração com outros serviços 2.0 Digg, del.icio.us, RSS, Orkut (comunidades), widgets, etc
Próximos passos
Mão na massa - implementação Rever o código HTML da página que existe hoje e implementar as mudanças vistas na apresentaçã...
Referências
Apresentação &quot;Como tornar seu site atraente&quot; Horário Soares http://www.slideshare.net/horacio.soares/como-tornar...
AddMe http://www.addme.com Amazon http://www.amazon.com Correios http://www.correios.com.br DaSilva http://www.dasilva.org...
Obrigado
of 48

Politik - Mudanças para deixar o site "atraente"

Alterações para deixar o site "atraente". Trabalho da discplina Design de Interfaces Interativas II, da Pós em Webdesign da UniverCidade - Rio de Janeiro, ministrada pelo professor Robson Santos.
Published on: Mar 4, 2016
Published in: Technology      
Source: www.slideshare.net


Transcripts - Politik - Mudanças para deixar o site "atraente"

  • 2. O que é?
  • 3. Loja virtual e Comunidade Social Loja virtual de camisetas atrelada a uma comunidade para discussões de idéias políticas, sociais e/ou ambientais Cada venda de camiseta gera uma contrapartida social e ambiental definida pelos usuários (escolhendo um projeto de uma lista determinada pela loja)
  • 4. Interface, hoje
  • 6. Conteúdo
  • 7. Estampas! “ Estampa” é o conjunto de: - preço - descrição - nome - árvores a serem plantadas - valor a ser doado - ilustração (a própria estampa) - fotos de modelos Comentários das estampas feitos pelos usuários também fazem parte
  • 8. Comunidade “Camisa Social” Comunidade inserida na loja. Conjunto de blogs e fóruns, sobre política, meio ambiente e questões sociais (sociedade e cidadania) Comentários para os usuários cadastrados Posts nos blogs somente por colaboradores da Politik Lista de projetos disponíveis para receber os recursos (o usuário escolhe para quem doar) Acompanhamento dos projetos
  • 9. Usuário e Carrinho de Compras Conta do usuário: - histórico de pedidos - histórico de doações - dados pessoais Carrinho de compras (padrão)
  • 10. Textos e mais textos “ A Marca”, contando tudo sobre a Politik “ Notícias” (ou “Novidades”) sobre a loja, produtos e comunidade. Comentários para os cadastrados “ Ajuda”, “FAQ” e “Política de Privacidade”
  • 11. Tarefas
  • 12. Usuários Compra de camisetas Participação na Comunidade “Camisa Social” e nas notícias da loja Comentários
  • 13. Funcionários do site Administração (ou seja, alteração, inclusão e exclusão): - de estampas - dos blogs - de notícias - de pedidos - de projetos - dos comentários (blogs, estampas, notícias e projetos) - de textos gerais (“Ajuda”, “Política de Privacidade”, “FAQ” e “A Marca”)
  • 14. SEO – Otimização para sistemas de busca
  • 15. Título, meta tags, alts, etc Título do site: “POLITIK – Vista seus ideais – “ + seção (por exemplo: “A marca”, “Comunidade Camisa Social”, etc) Meta description para home: “Loja virtual de camisetas e comunidade para discussões de idéias políticas, sociais e/ou ambientais.” Meta description personalizada para cada seção do site (inclusive na página do produto). Meta keywords: politik, camisetas, camiseta, camisas, camisa, protesto, política, ativismo, revolta, social, ambiente e comunidade
  • 16. Meta Robots e robots.txt: configurar o arquivo corretamente e indicar na “meta robots” para não indexar a página do carrinho de compras (informação dinâmica).
  • 17. Guidelines W3C Utilizar as recomendações do W3C para a criação do site Tableless CSS em arquivo separado ALT das imagens
  • 18. Cadastrar onde for possível Além do Google e Yahoo cadastrar em outros sites de busca Utilizar algum serviço que faça isso automaticamente (AddMe ou iNeedHits, por exemplo)
  • 20. Pay Per Click e Ferramentas - Google: Ad Words, Ferramentas para Webmasters e toolbar - Yahoo: Search Marketing e Site Explorer
  • 22. Sitemaps! Mapa do site em formato XML para o Google
  • 23. Fácil de usar = fácil de achar Usabilidade, acessibilidade e consistência ajudam a achar o site mais facilmente “ Google é o usuário cego mais rico do mundo”
  • 24. Acessibilidade
  • 25. Guidelines do W3C Seguir as recomendações do W3C para XHTML, Tableless, CSS, alt nas imagens, <strong>, <h1>, etc
  • 26. Validadores Não são a solução, mas já são um caminho W3C (CSS e XHTML) e DaSilva (Acessibilidade)
  • 27. Link “Ir para o conteúdo” Inserir em todas as páginas um link com um atalho para o conteúdo principal da página
  • 28. Usabilidade
  • 29. Lojas virtuais Não inventar: seguir o padrão já estabelecido na web para lojas virtuais Utilizar o Carrinho de compras
  • 30. Busca inteligente Utilizar sistema de tags e classes para classificação das estampas, facilitando a busca Tags viram palavras chaves para search engines (meta keywords) Sugerir palavras parecidas (baseadas nas tags)
  • 31. Ajuda Utilizar sistema de ajuda que abra o conteúdo referente a página a qual o usuário estiver acessando
  • 32. Mapa do site Sempre útil.
  • 33. Portabilidade
  • 34. Tableless + CSS, sempre! Não custa repetir. Recomendações do W3C! Passar pelos validadores deles. Testar no maior número de browsers e sistemas possíveis.
  • 35. CSS “mutante” CSS específico para cada tipo de dispositivo (browser, celular, impressão, etc).
  • 36. Site para celular Avaliar a criação de um site separado para celular (com o conteúdo da &quot;Camisa Social”, principalmente)
  • 37. Consistência e Convenção
  • 38. Consistência Visual Utilizar a idéia de boxes em todo o site Mesma formatação de título Mesma linha visual para a Comunidade “Camisa Social” (logicamente com algumas características particulares)
  • 39. Convenção Seguir convenção de desenho de interface (logomarca no canto superior esquerdo, busca no canto superior direito, navegação global na parte superior com links na horizontal e navegação de rodapé)
  • 40. Colaboração
  • 41. Participação Fórum para os usuários. Deixar comentar tudo o que for possível, com o mínimo de censura possível (dentro dos limites do bom senso, obviamente) Concursos sazonais para criação de estampas pelos usuários
  • 42. Integração com outros serviços 2.0 Digg, del.icio.us, RSS, Orkut (comunidades), widgets, etc
  • 43. Próximos passos
  • 44. Mão na massa - implementação Rever o código HTML da página que existe hoje e implementar as mudanças vistas na apresentação Passar pelos validadores (W3C e Da Silva) Avaliação por checklist – guidelines W3C Avaliação de usabilidade por tarefas SEO
  • 45. Referências
  • 46. Apresentação &quot;Como tornar seu site atraente&quot; Horário Soares http://www.slideshare.net/horacio.soares/como-tornar-seu-site-atraente Apresentação &quot;Elegância e Simplicidade&quot; Robson Santos http://www.slideshare.net/robsonsantos/elegncia-e-simplicidade Apresentação &quot;Entrega de Conteúdo para internet móvel&quot; Robson Santos http://www.slideshare.net/robsonsantos/entrega-de-contedo-para-internet-mvel/ Capítulo 4 da dissertação de mestrado &quot;Otimização de websites para mecanismos de busca na Internet: uma contribuição do Ergodesign.&quot; Patrick Scripilliti
  • 47. AddMe http://www.addme.com Amazon http://www.amazon.com Correios http://www.correios.com.br DaSilva http://www.dasilva.org.br del.icio.us http://del.icio.us Digg http://www.digg.com Firefox http://www.firefox.com Google http://www.google.com.br iNeedHits http://www.ineddhits.com Internet Explorer http://www.microsoft.com/brasil/windows/ie/default.mspx Ponto Frio http://www.pontofrio.com.br Submarino http://www.submarino.com.br Yahoo http://www.yahoo.com.br W3C http://www.w3c.org
  • 48. Obrigado

Related Documents