O que é?
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)
Interface, hoje
Conteúdo
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
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 projetosdisponíveis para receberos recursos (o usuárioescolhe para quem doar)
Acompanhamentodos projetos
Usuário e Carrinhode Compras
Conta do usuário:
- histórico de pedidos- histórico de doações- dados pessoais
Carrinho de compras (padrão)
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”
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 pedidos- de projetos- dos comentários (blogs, estampas, notícias e projetos)- de textos gerais (“Ajuda”, “Política de Privacidade”, “FAQ” e “A Marca”)
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”, “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
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).
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 automaticamente (AddMe ou iNeedHits, por exemplo)
Pay Per Click e Ferramentas
- Google: Ad Words, Ferramentas para Webmasters e toolbar
- Yahoo: Search Marketing e Site Explorer
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 é o usuário cego mais rico do mundo”
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 palavras chaves para search engines (meta keywords)
Sugerir palavras parecidas (baseadas nas tags)
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 de browsers e sistemas possíveis.
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 "Camisa Social”, principalmente)
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 Comunidade “Camisa Social” (logicamente com algumas características particulares)
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é)
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 limites do bom senso, obviamente)
Concursos sazonais para criação de estampas pelos usuários
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ção
Passar pelos validadores (W3C e Da Silva)
Avaliação por checklist – guidelines W3C
Avaliação de usabilidade por tarefas
SEO
Referências
Apresentação "Como tornar seu site atraente"Horário Soareshttp://www.slideshare.net/horacio.soares/como-tornar-seu-site-atraente
Apresentação "Elegância e Simplicidade"Robson Santoshttp://www.slideshare.net/robsonsantos/elegncia-e-simplicidade
Apresentação "Entrega de Conteúdo para internet móvel"Robson Santoshttp://www.slideshare.net/robsonsantos/entrega-de-contedo-para-internet-mvel/
Capítulo 4 da dissertação de mestrado "Otimização de websites para mecanismos de busca na Internet: uma contribuição do Ergodesign."Patrick Scripilliti
AddMehttp://www.addme.com
Amazonhttp://www.amazon.com
Correioshttp://www.correios.com.br
DaSilvahttp://www.dasilva.org.br
del.icio.ushttp://del.icio.us
Digghttp://www.digg.com
Firefoxhttp://www.firefox.com
Googlehttp://www.google.com.br
iNeedHitshttp://www.ineddhits.com
Internet Explorerhttp://www.microsoft.com/brasil/windows/ie/default.mspx
Ponto Friohttp://www.pontofrio.com.br
Submarinohttp://www.submarino.com.br
Yahoohttp://www.yahoo.com.br
W3Chttp://www.w3c.org
Obrigado
Top Related