Upload
paula-ramos
View
2.202
Download
0
Embed Size (px)
DESCRIPTION
Projeto Experimental - Publicidade e Propaganda - Unochapecó 2010
Citation preview
UNIVERSIDADE COMUNITÁRIA DA REGIÃO DE CHAPECÓÁREA DE CIÊNCIAS SOCIAIS APLICADAS
CURSO DE COMUNICAÇÃO SOCIAL – HAB. EM PUBLICIDADE E PROPAGANDA
Paula Cristina RamosRicardo Pritsch
REESTRUTURAÇÃO DA ARQUITETURA DE INFORMAÇÃO E OTIMIZAÇÃO DO
CONTEÚDO PARA OS MOTORES DE BUSCA DA LOJA VIRTUAL DA
ABBOCCATO.
Chapecó – SC, 2010
PAULA CRISTINA RAMOSRICARDO PRITSCH
REESTRUTURAÇÃO DA ARQUITETURA DE INFORMAÇÃO E OTIMIZAÇÃO DO
CONTEÚDO PARA OS MOTORES DE BUSCA DA LOJA VIRTUAL DA
ABBOCCATO.
Relatório do Projeto Experimental em Comunicação apresentado à universidade Comunitária Regional de Chapecó – UNOCHAPECÓ como parte dos requisitos para obtenção do grau de Bacharel em Comunicação Social – Habilitação em Publicidade e Propaganda.
Orientador: Felipe Stanque Machado Junior
Chapecó – SC, maio de 2010.
DEDICATÓRIA
Dedicamos este projeto aos nossos pais Odilo e Salete Pritsch, Marli e
Paulo* Ramos. Que nos incentivaram e motivaram a concluir mais essa etapa de
nossas vidas.
* In Memorian
AGRADECIMENTOS
Inicialmente agradecemos à empresa Abboccato por disponibilizar as
informações necessárias para a execução deste projeto de estudo e principalmente
por acreditar na capacidade destes acadêmicos em realizar um projeto capaz de
suprir suas necessidades no ambiente online.
Às nossas famílias por nos apoiarem e participarem durante todos os dias de
nossas vidas e também durante nossa fase acadêmica. Agradecemos também ao
nosso professor orientador Felipe Stanque Machado Junior por acreditar e nos
mostrar novos caminhos para alcançar nossos objetivos.
Agradecemos a nós mesmos por nos suportarmos e nos apoiarmos em
todas as situações que surgiram durante todo o período de realização deste projeto,
sempre buscando soluções amigáveis a fim de resolver os problemas decorrentes.
RESUMO
Este projeto tem como foco a reestruturação e otimização para mecanismos de
busca do website institucional e o de vendas da Abboccato. A Abboccato é uma
indústria de cosméticos com quatro anos de existência e com sede na cidade de
Chapecó, onde também possui loja própria. Possui nove linhas de produtos a base
de agentes naturais.
Para a execução do projeto, foi feita uma análise heurística dos elementos da
navegação e uma outra análise dos elementos textuais para a parte de otimização.
Em seguida foram sugeridas melhorias na estrutura dos sites na forma de
wireframes a fim de propor uma melhor navegabilidade no site pelos internautas,
assim como sugestões no conteúdo com o propósito de facilitar a encontrabilidade
das páginas do site pelos buscadores e internautas.
PALAVRAS-CHAVE: Abboccato, Arquitetura de informação, Wireframe, Otimização
de sites, SEO.
ABSTRACT
This project focus is restructuring the interface and the search engine optimization to
the institutional and e-commerce Abboccato's websites. Abboccato is a cosmetics
industry with four years of existence, with headquarters in Chapecó, which also have
an own store. It has nine lines of products based on natural agents.
To implement the project, we conducted a heuristic analysis of the navigation
elements and other analysis to the text elements of optimization. Then, suggested
improvements to the structure of the sites like wireframes to propose a better
navigability on the site by Internet users even as suggestions on content for the
purpose of facilitating the findability of the website pages for search engines and
Internet users.
KEYWORDS: Abboccato, Information Architecture, Wireframe, Website Optimization,
SEO.
LISTA DE FIGURAS
Figura 1: Visibilidade do status do sistema - Loja virtual............................................30
Figura 2: Visibilidade do status do sistema - Loja virtual............................................30
Figura 3: Visibilidade do status do sistema - site institucional....................................31
Figura 4: Visibilidade do status do sistema - site institucional....................................32
Figura 5: Visibilidade do status do sistema - site institucional....................................33
Figura 6: Correspondência entre o sistema e o mundo real - Loja virtual..................34
Figura 7: Correspondência entre o sistema e o mundo real - site institucional..........35
Figura 8: Controle de Liberdade do usuário - Loja virtual...........................................36
Figura 9: Controle de Liberdade do usuário - site institucional...................................37
Figura 10: Consistência e padrões - Loja virtual.........................................................38
Figura 11: Consistência e padrões - Loja virtual.........................................................38
Figura 12: Consistência e padrões - Loja virtual.........................................................39
Figura 13: Consistência e padrões - Loja virtual.........................................................39
Figura 14: Consistência e padrões - Loja virtual.........................................................40
Figura 15: Consistência e padrões - Loja virtual.........................................................40
Figura 16: Consistência e padrões - Loja virtual.........................................................40
Figura 17: Consistência e padrões - Loja virtual.........................................................41
Figura 18: Consistência e padrões - site institucional.................................................42
Figura 19: Consistência e padrões - site institucional.................................................42
Figura 20: Consistência e padrões - site institucional.................................................43
Figura 21: Consistência e padrões - site institucional.................................................44
Figura 22: Prevenção de erros - Loja virtual...............................................................45
Figura 23: Prevenção de erros - Loja virtual...............................................................46
Figura 24: Prevenção de erros - site institucional.......................................................47
Figura 25: Prevenção de erros - site institucional.......................................................48
Figura 26: Reconhecimento em vez de memorização - Loja virtual...........................49
Figura 27: Reconhecimento em vez de memorização - Loja virtual...........................49
Figura 28: Reconhecimento em vez de memorização - Loja virtual...........................50
Figura 29: Design estético e minimalista - Loja virtual................................................52
Figura 30: Design estético e minimalista – Loja Virtual..............................................52
Figura 31: Ajudar os usuários a reconhecer, diagnosticar e se recuperar de erros -
Loja Virtual...................................................................................................................54
Figura 32: Ajudar os usuários a reconhecer, diagnosticar e se recuperar de erros -
Loja Virtual...................................................................................................................55
Figura 33: Ajudar os usuários a reconhecer, diagnosticar e se recuperar de erros -
Loja Virtual...................................................................................................................55
Figura 34: Ajudar os usuários a reconhecer, diagnosticar e se recuperar de erros -
site institucional...........................................................................................................56
Figura 35: Ajuda e documentação - Loja virtual..........................................................57
Figura 36: Ajuda e documentação - Loja virtual..........................................................57
Figura 37: Estrutura de Navegação............................................................................68
Figura 38: Wireframe - Página Inicial..........................................................................73
Figura 39: Wireframe - Categorias..............................................................................75
Figura 40: Wireframe - Página Produto......................................................................77
Figura 41: Wireframe - Carrinho de Compras.............................................................79
Figura 42: Wireframe - Página de Cadastro...............................................................81
Figura 43: Wireframe - Página de login......................................................................82
Figura 44: Wireframe - Página de Erro.......................................................................83
Figura 45: Wireframe - Página de Contato.................................................................84
Figura 46: Wireframe - Página Minha Conta...............................................................87
SUMÁRIO
1 INTRODUÇÃO........................................................................................................12
2 ABBOCCATO...........................................................................................................15
2.1 Briefing.............................................................................................................15
2.1.1 Histórico da Empresa...............................................................................15
2.1.2 Mercado do Produto.................................................................................15
2.1.3 Consumidor do Produto............................................................................16
2.1.4 Distribuição...............................................................................................16
2.1.5 Preços do Produto....................................................................................17
2.1.6 Razões de Compra do Produto................................................................17
2.1.7 Concorrência.............................................................................................18
2.1.8 Objetivos da Comunicação.......................................................................18
2.2 Diagnóstico.......................................................................................................19
2.3 Problema de Comunicação..............................................................................20
3 ENCONTRANDO PROBLEMAS.............................................................................23
3.1 Parâmetros de avaliação.................................................................................23
3.1.1 Heurísticas................................................................................................23
3.1.2 Otimização de sites..................................................................................25
3.2 Diagnóstico.......................................................................................................28
3.2.1 Análise Heurística.....................................................................................28
3.2.1.1 Visibilidade do status do sistema......................................................28
3.2.1.2 Correspondência entre o sistema e o mundo real............................33
3.2.1.3 Controle de Liberdade do usuário.....................................................35
3.2.1.4 Consistência e padrões.....................................................................37
3.2.1.5 Prevenção de erros...........................................................................44
3.2.1.6 Reconhecimento em vez de memorização.......................................48
3.2.1.7 Flexibilidade e eficiência de uso........................................................51
3.2.1.8 Design estético e minimalista............................................................51
3.2.1.9 Ajudar os usuários a reconhecer, diagnosticar e se recuperar de
erros................................................................................................................53
3.2.1.10 Ajuda e documentação....................................................................56
3.2.2 Análise de Otimização – SEO..................................................................58
4 ESTRATÉGIA DE COMUNICAÇÃO........................................................................60
4.1 Público alvo......................................................................................................60
4.2 Estratégias.......................................................................................................60
4.3 Objetivo de comunicação.................................................................................61
4.4 Justificativa.......................................................................................................61
5 PROPOSTA DE REFORMULAÇÃO.......................................................................65
6 REFORMULAÇÃO..................................................................................................68
6.1 Estrutura de navegação...................................................................................68
6.2 Wireframes.......................................................................................................69
6.3 Otimização do conteúdo – SEO.......................................................................89
6.3.1 Títulos das páginas...................................................................................90
6.3.2 Descrição das Páginas.............................................................................91
6.3.3 Palavras-chave.........................................................................................92
6.3.4 URL (Endereço da página).......................................................................93
6.3.5 tags de subtítulo (h1, h2, h3, h4, h5, h6)..................................................94
6.3.6 Descrição das imagens............................................................................95
6.3.7 Descrição de links.....................................................................................95
6.3.8 Arquivo Robots.txt.....................................................................................96
6.3.9 sitemap.xml...............................................................................................97
7 CONSIDERAÇÕES FINAIS..................................................................................100
8 REFERENCIA BIBLIOGRÁFICA...........................................................................103
9 APÊNDICES..........................................................................................................106
10 ANEXOS.............................................................................................................125
12
1 INTRODUÇÃO
Foi pensando no usuário que este trabalho foi desenvolvido. A criação dos
wireframes, a redação da rotulação, as estratégias de otimização, ferramentas essas
que ainda tem pouca inserção no mercado publicitário. Todos os passos foram
pensados e desenvolvidos estrategicamente para melhorar a visibilidade da
Abboccato no ambiente online assim melhorando a comunicação entre empresa e
cliente.
Para chegar a este resultado, foi necessário coletar diversas informações,
como levantamento de perfil do consumidor através de briefing, análise detalhada
dos sites atuais da Abboccato e comparação com lojas virtuais de reconhecimento
nacional.
As estratégias foram desenvolvidas a partir de premissas criadas por
profissionais de renome nas áreas de arquitetura de informação, design de
interfaces e otimização de sites para mecanismos de busca.
A apresentação de um projeto como este em um curso de publicidade e
propaganda é extremamente importante neste momento em que o meio digital tem
grande acensão. O surgimento de agências digitais muda a forma de trabalho
conhecida até hoje, onde os projetos para web eram (e muitos ainda são)
terceirizados.
Com isso a internet deixa de ser uma ferramenta monóloga e passa a ser
multi-interativa, onde uma empresa que desenvolve uma comunicação estratégica e
voltada ao relacionamento com seus consumidores sai na frente de seus
concorrentes. A interatividade proporcionada pela internet faz com que os websites
sejam apresentados aos internautas de maneira comunicativa, portanto o papel do
comunicador é essencial nesse meio, pois ele terá o conhecimento de como
executar alguma tarefa para o desenvolvimento de um projeto onde o conhecimento
do perfil do consumidor e noções de design de interfaces andam lado a lado.
Os estudos para o desenvolvimento do projeto tiveram início no mês de
fevereiro de 2010. A partir do momento em que o referencial teórico constituiu uma
base para a execução do proposto, foi possível dar continuidade ao projeto
13
começando pela construção da reestruturação através da criação de wireframes e
desenvolvimento das estratégias de otimização, tendo fim ao mês de maio do
mesmo ano.
Tendo como título Reestruturação da Arquitetura de Informação e a
otimização do conteúdo para os motores de busca da loja virtual da Abboccato, este
projeto experimental está apresentado da seguinte forma:
No primeiro capítulo será abordado o perfil do cliente assim como seu
histórico, mercado, consumidores, distribuição, valores, concorrência e objetivos de
comunicação.
Na sequência, no capítulo dois, são descritos os parâmetros utilizados para
avaliação dos sites e em seguida é exibido detalhadamente o diagnóstico pós
análise, o que norteou o desenvolvimento das estratégias para reestruturação e
otimização do site da Abboccato apresentadas no capítulo três.
Com base nos problemas diagnosticados nos capítulos anteriores, o capítulo
quatro será voltado para a proposta de reformulação e alteração estrutural.
Finalizando, o capítulo cinco apresenta a reformulação proposta nos objetivos.
Dessa forma pretende-se deixar o website apto para ser utilizado com
facilidade pelos clientes da Abboccato e com desempenho satisfatório quanto ao
volume de vendas.
14
2 ABBOCCATO
2.1 Briefing
2.1.1 Histórico da Empresa
A Abboccato é uma empresa de cosméticos com sede em Chapecó, seus
produtos são essencialmente sabonetes aromatizados, cremes hidratantes para o
corpo, completa linha de higiene e hidratação facial, cabelos e banho.
Inicialmente uma das sócias produzia sabonetes artesanais, com o aumento
das vendas e sucesso do produto surgiu a empresa Abboccato que já existe a
aproximadamente quatro anos e, atualmente, possui nove linhas de produtos
variados.
A Abboccato possui fábrica e loja matriz na cidade de Chapecó e está
iniciando um processo de franquias, sendo que a primeira franquia está localizada
em Florianópolis. A empresa tem diversos pontos de revenda de seus produtos em
todo o sul do Brasil.
2.1.2 Mercado do Produto
O consumo do produto depende de vários fatores como valor, qualidade,
potencial econômico do consumidor e principalmente gosto. Por conter produtos que
tem apresentação semelhante a de artesanais, ganha uma certa fatia do mercado,
mas em contraponto também perde, pois alguns consumidores preferem produtos
completamente industrializados.
15
Cosméticos são vendidos em todas as épocas do ano, mas segundo o
cliente há certa sazonalidade. Datas comemorativas como natal, dia das mães e dia
dos namorados geram grande crescimento nas vendas.
2.1.3 Consumidor do Produto
O perfil do consumidor não é bem definido, mas na grande maioria são
mulheres de todas as idades. Por possuir linha de cosméticos masculinos, estes
também podem ser considerados consumidores em potencial, mas se comparado ao
público feminino o número é bem reduzido.
Atualmente os maiores consumidores são de Chapecó, Florianópolis e
região, na grande maioria de classe média1. A perspectiva para o público da loja
virtual é na maioria jovem, por ter maior facilidade de acesso à internet.
2.1.4 Distribuição
O produto é vendido em duas lojas próprias, uma em Chapecó e outra em
Florianópolis. A abrangência é o Sul do Brasil, mas principalmente Santa Catarina e
Rio Grande do Sul.
Com a inserção dos produtos em loja virtual, a abrangência passa da região
sul para todo o Brasil. Através da Internet qualquer pessoa pode comprar, basta
efetuar um cadastro e informar seus dados pessoais. Os produtos serão vendidos
para todo o país e a entrega será via correios.
2.1.5 Preços do Produto
1 Dados fornecidos pelo cliente. Não existe pesquisa para confirmar os dados.
16
Os preços aplicados aos produtos são acessíveis, compatíveis aos produtos.
Se comparados aos preços da concorrência são competitivos. Geralmente estão um
pouco abaixo dos líderes de mercado.
2.1.6 Razões de Compra do Produto
• Alta qualidade do produto;
• Preço competitivo, reduzido em comparação aos líderes de mercado;
• Linha de produtos diferenciada, remetendo a cosméticos antigos com
ar de requinte;
• Produtos com base vegetal;
• Produto artesanal.
2.1.7 Concorrência
Os principais concorrentes são:
• Diretos: Natura (por seus produtos terem agentes naturais) e Body
Store (por trabalhar a linha artesanal)
• Indireto: O Boticário
Todos os concorrentes citados possuem lojas virtuais. Natura e O Boticário
tem grande visibilidade nacional, ótimo posicionamento de marca e os valores
variam conforme a linha e agentes utilizados. O cliente Abboccato está com os
valores mais competitivos entre os citados.
17
2.1.8 Objetivos da Comunicação
O cliente citou que, com uma boa loja virtual, com boa visibilidade na
Internet e com o nome sempre entre os primeiros em sites de busca, a expectativa é
sensibilizar o restante do país, assim gerando grande aumento nas vendas.
2.2 Diagnóstico
Através das informações coletadas no briefing, pode-se dizer que a empresa
Abboccato está em fase de crescimento e expansão mercadológica. Busca novas
formas de vender seus produtos, que possuem forte diferencial em relação aos
concorrentes, por serem feitos lembrando a forma artesanal, mas com requinte e
sofisticação remetendo a cosméticos europeus antigos com base vegetal. Os
produtos podem ser considerados únicos no mercado. Seus concorrentes mais
próximos são a Body Store, que também trabalha alguns de seus produtos na linha
artesanal, a Natura que trabalha vários produtos com agentes naturais, e O Boticário
que é uma das marcas mais lembradas no mercado nacional quando se trata de
cosméticos.
Atualmente seus produtos são conhecidos em maior parte na região Sul,
onde existem lojas e revendas em pontos fixos. A divulgação do produto se dá de
maneira pessoal, na forma de indicações por consumidores ou em sites/blogs de
avaliação de produtos. O cliente já trabalhou com mídias tradicionais, mas não
obteve o retorno esperado.
A loja virtual possibilita ampliar a quantidade de perfis de consumidores.
Desde que possua acesso à Internet, qualquer pessoa pode comprar. A partir dos
cadastros realizados no site, será possível traçar o novo perfil do consumidor (a
longo prazo). A expectativa é de que o público seja na maioria jovem/adulto (entre 15
e 45 anos) com hábito de navegar na Internet frequentemente.
18
O maior problema apontado pelo cliente na elaboração do briefing, foi a
dificuldade para encontrar a empresa e seus produtos no meio virtual por meio de
sites de busca. Quando foi questionado a navegação, o cliente relatou a dificuldade
de navegação na loja virtual durante o período de cadastramento dos produtos.
Sendo assim, se até mesmo o cliente que tem conhecimento das linhas de produtos
teve dificuldade para encontrar informações, o consumidor, que é leigo neste quesito
certamente encontrará grande dificuldade para encontrar os produtos/informações
que estava procurando, assim deixando de efetuar a compra.
Para que estes problemas sejam amenizados e solucionados deve-se criar
estratégias de SEO2 – Search Engine Optimization e nova estrutura de navegação a
partir de mudanças na Arquitetura de Informação.
2.3 Problema de Comunicação
O site institucional está no ar desde o mês de junho de 2008 e atualmente
possui informações institucionais e de produtos, notícias sobre cosméticos, linhas de
produtos, e também relacionadas diretamente à empresa.
O e-commerce começou a ser trabalhado no início de 2009, mas ainda não
está no ar. Pois os responsáveis pela atualização da loja virtual estão encontrando
dificuldades no cadastramento de produtos. Sendo que durante o manuseio no site
pelos funcionários para cadastrar os produtos, assim como durante a navegação na
loja virtual, foram percebidas diversas dificuldades de navegação e erros óbvios
devido à problemas na arquitetura de informação.
Os problemas de comunicação, tanto no site institucional e loja virtual, da
Abboccato são de encontrabilidade, onde são dificilmente encontrados nas buscas
online relacionadas aos produtos e serviços comercializados pela empresa, e a
usabilidade, sendo que eles mais parecem um labirinto virtual fazendo com que o
2 SEO – Search Engine Oprimization – ou traduzindo, otimização de websites para mecanismos de busca, são conjuntos de estratégias e técnicas que tem o objetivo de melhorar o posicionamento de um website nos mecanismos de busca em um resultado orgânico ou natural.
19
usuário perca muito tempo passeando pelo site onde ele deveria se comunicar e
interagir.
Partindo da premissa que, segundo um ditado popular do meio virtual, diz
“ou você é encontrado nos sites de busca ou você esta morto”, pode-se afirmar que
os sites da Abboccato possuem um grande problema de encontrabilidade3. Ou seja,
são bons exemplos de definição desse ditado, pois os sites não possuem uma
estrutura adequada para serem encontrados nos mecanismos de busca.
O usuário da internet não passa muito tempo procurando informações.
Geralmente, quando não encontra o que procura em um determinado site desiste ou
procura em outro. As ferramentas de busca estão a disposição. É certo que se ele
não encontrou a informação no primeiro site, dificilmente irá retornar ao mesmo por
sentir dificuldade de acesso. Além dos problemas com os buscadores, o site da
Abboccato possui problemas de usabilidade.
Usabilidade é um atributo de qualidade relacionado à facilidade de uso de algo. Mais especificamente, refere-se à rapidez com que os usuários podem aprender a usar alguma coisa, a eficiência deles ao usá-la, o quanto lembram daquilo seu grau de propensão a erros e o quanto gostam de utilizá-la. (NIELSEN E LORANGER, 2007, p.xvi).
Desta forma, para uma boa navegação do site mesmo um usuário com
pouca experiência deve conseguir navegar tranquilamente por ele e encontrar as
informações necessárias com facilidade. Se assim for, o site será considerado com
um alto grau de usabilidade.
A fim de solucionar os problemas citados, pode-se perguntar como é
possível reestruturar e otimizar o website da Abboccato para que tenha maior
encontrabilidade e usabilidade quando procurado e/ou navegado?
3 “a qualidade de ser localizável ou navegável ou, o grau em que o objeto é fácil de ser descoberto ou encontrado” (MORVILLE, 2005, p. 4)
20
3 ENCONTRANDO PROBLEMAS
Para desenvolver as estratégias de reformulação dos sites é necessário
conhecer os atuais problemas e como o site se comporta perante a navegação. Para
isso, é adequado a análise minuciosa de diversos detalhes de conteúdo e
navegação dos sites.
3.1 Parâmetros de avaliação
3.1.1 Heurísticas
Uma forma adequada de analisar sites e encontrar possíveis falhas é
realizar uma análise heurística4 baseado no modelo de Nielsen5 que consiste em dez
itens que auxiliam na formulação do projeto de um site. Sendo os itens heurísticos,
segundo Ledford (2008, p. 62):
• Visibilidade do status do sistema:
Esse princípio diz que o usuário deve sempre saber o que está acontecendo através de feedback fornecido regularmente pelo sistema.
• Correspondência entre o sistema e o mundo real:
De acordo com esse princípio, o sistema deve falar a língua do usuário. Isso significa que as palavras-chave, expressões e conceitos devem ser usados de uma forma que seja familiar ao usuário e que não sejam apenas jargões técnicos ou marqueteiros.
4 Heurística é um termo simples para o reconhecimento de um padrão e a capacidade de resolver um problema ou chegar a uma conclusão rápida e eficientemente consultando o que você já sabe sobre esse padrão específico. (LEDFORD, 2008, p. 61).
5 Jacob Nielsen é um cientista alemão da computação com Ph.D. em interação homem-máquina. Disponível em http://www.useit.com. Acesso em 03 abr. 2010.
21
• Controle de Liberdade do usuário:
Esse conceito diz que os usuários frequentemente fazem escolhas inadvertidas, que não representam realmente o que eles querem. Por esse motivo, é essencial haver a capacidade de se desfazer ou refazer uma ação. Um bom exemplo disso é a presença de botões de avançar e retroceder nos navegadores web.
• Consistência e padrões:
Cada vez que os usuários clicam em um botão ou veem uma palavra, eles não devem ter que se perguntar o que essa ação ou palavra significa. A consistência e os padrões aplicam-se tanto a linguagem quanto a ações e devem se manter previsíveis ao longo de toda a internet.
• Prevenção de erros:
Os usuários ficam frustados com erros. Por isso, você deve elaborar o seu site com a prevenção de erros em mente. Entretanto, se houver um ponto onde os usuários poderiam se deparar com um erro, é recomendável usar um sistema de confirmação.
• Reconhecimento em vez de memorização:
Não faça os usuários terem de se lembrar de coisas de uma tela ou caixa de diálogo para outra. Em vez disso, crie as suas páginas com instruções, ações e objetivos claramente visíveis. Se for absolutamente necessário criar um elemento que requeira instruções adicionais, faça com que essas instruções sejam de fácil acesso e marque-as claramente como instruções.
• Flexibilidade e eficiência de uso:
Esse princípio aplica-se tanto a usuários novatos quanto experientes. De acordo com esta regra, o seu site deve ser adequado a ambos os grupos de usuários através do fornecimento de ações personalizáveis.
• Design estético e minimalista:
Lembra do princípio KISS (keep it simple, stupid, ou 'mantenha a simplicidade idiota')? Bem, os seus usuários poderão não ser idiotas, mas eles ainda preferirão que você mantenha o seu site tão simples quanto possível. Se os seus produtos, serviços ou informações forem complicados
22
de localizar, você perderá visitantes bem rapidamente. Eles irão para outro site, onde seja fácil encontrar o que estão procurando.
• Ajudar os usuários a reconhecer, diagnosticar e se recuperar de erros:
Os usuários querem mensagens de erro que os ajudem a navegar e corrigir o erro o mais rápido possível. Certifique-se de que as mensagens de erro não sejam crípticas, e que forneçam instruções claras e fáceis de seguir.
• Ajuda e documentação:
É sempre melhor não ter de direcionar os usuários aos arquivos de ajuda e documentação. Mas haverá casos em que isso será necessário. Se for o caso para o seu site, certifique-se de que os seus arquivos de ajuda e documentação sejam fáceis de consultar e que sejam escritos em uma linguagem clara e inteligível.
3.1.2 Otimização de sites
Além das heurísticas também será analisado o conteúdo do site conforme os
passos de Gabriel (2009, p. 69 – 83) para o SEO sendo:
• URL (endereço da página):
Os buscadores dão importância às palavras-chave existentes no meio da URL da página. Desse modo, páginas que contêm a palavra-chave desejada em sua URL obtêm vantagem competitiva sobre as outras.
• Descrição da página (metatag description):
É usada por vários buscadores como a descrição da página para os usuários nos resultados de busca dos buscadores. Esse texto deve estimular o usuário a clicar e visitar a página. O tamanho máximo do texto na metatag description não deve passar de 150 caracteres, assim, o texto deve ser muito bem pensado e estruturado para conseguir passar a essência do conteúdo da página e simultaneamente atrair o interesse do usuário em visitá-la.
23
• Palavras-chave (keywords):
muitas pessoas colocam palavras-chave demais nessa metatag tentando aparecer em uma grande quantidade de buscas. Isso é inútil! Quanto mais palavras-chave na tag, menor o valor que cada palavra obtém. Tente colocar poucas palavras-chave na tag keywords, não passando de dez.Cada página do site tem um tema diferente e, consequentemente, palavras-chave diferentes. Desenvolva a metatag keywords especificadamente para cada página do site, considerando as palavras-chave de cada página de forma isolada. Alguns buscadores comparam as palavras-chave declaradas nessa tag com as palavras que encontram no conteúdo da página. O conteúdo da metatag keywords deve estar em sintonia com as palavras da página. Se forem divergentes, a página perde pontos no posicionamento.
• Título da página (title):
O texto do título da página e normalmente descreve o conteúdo da mesma. Exatamente por isso, os buscadores consideram o título muito importante e o usam como o texto que aparece no link dos resultados de busca orgânica. Essa tag é normalmente o primeiro item visualizado pelo visitante da página, pelo usuário dos buscadores e pelo próprio mecanismo de busca.
• tags de subtítulo (h1, h2, h3, h4, h5, h6):
Essas tags são usadas para breves descrições de diferentes blocos de conteúdos na página, que organizam os textos. A separação do conteúdo em blocos com subtítulos não apenas é útil para a otimização das buscas, mas também para facilitar a leitura do usuário, mantendo-o interessado naquele conteúdo.
• Propriedade Alt na tag <img>:
A propriedade alt é usada para descrever o conteúdo de elementos gráficos na página, como, por exemplo, imagens. Os mecanismos de busca registram os textos e links das páginas, mas não o conteúdo gráfico, que é registrado por meio da propriedade alt das tags de imagens.
• links Internos – âncoras e propriedades:
links internos são links entre páginas dentro de um mesmo website. Nos links internos é muito importante planejar os textos de âncora do link, que é o texto no qual o link aparece para ser clicado. Se o texto de âncora contiver uma palavra-chave importante da página de destino do link, isso melhora o link de reputação daquela página sobre o tema relacionado à palavra-chave.
24
• Arquivo Robots.txt:
O arquivo robots.txt deve ser colocado na raiz do site para controlar que tipo de sistema na web (inclusive buscadores) pode ou não visitar aquele site e seus diretórios para colher informações.
3.2 Diagnóstico
A usabilidade é essencial para uma boa navegação em websites, sendo que
antes de alguma reformulação pode ser necessária a aplicação de uma análise
heurística detalhada assim como executado nos sites da Abboccato. Com esses
dados é complacente trabalhar um projeto pensando no usuário, prevenindo
situações desconfortáveis durante a navegação.
Sobre a análise heurística do site institucional e de vendas da Abboccato é
possível fazer algumas observações:
3.2.1 Análise Heurística
As imagens apresentadas na análise heurística foram retiradas do site
institucional da Abboccato (http://www.abboccato.com.br/) e loja virtual
(http://www.isthmus.com.br/abboccato/).
3.2.1.1 Visibilidade do status do sistema
Verificou-se na loja virtual: Mesmo sendo o site pequeno, com poucas
categorias e produtos, o usuário pode facilmente se perder pela desorganização e
excesso de repetição das informações. Ou seja, a mesma informação é encontrada
25
várias vezes em lugares diferentes. Alguns links parecem não ter relação entre si
(Figura 1-1.1, Figura 2-1.1).
A colocação da tentativa de breadcrumb trail está invertida, causando a falsa
impressão de estar em outro local do site (Figura 1-1.2).
A utilização do link 'página inicial' pode gerar dupla interpretação, deixando o
usuário em dúvida do caminho a qual o link pode levar (Figura 1-1.3).
Ao efetuar o login no site, não aparece nenhuma informação de que o
usuário está logado no sistema (Figura 1-1.4).
Falta título nas páginas, que poderiam ajudar o usuário a se localizar com
mais facilidade no site, pois o título mostra a localização atual do usuário no site.
Isso também ajuda o internauta caso ele deseje utilizar os botões 'anterior' e
'próximo' do navegador que irá mostrar todo o histórico da navegação. Assim como
uma URL bem escrita, também auxilia neste sentido (Figura 1-1.5).
Figura 1: Visibilidade do status do sistema - Loja virtual
26
Verificou-se no site Institucional: As informações sobre as linhas de
produtos também se repetem, mas de forma organizada, podendo no menu ser
separadas por linhas ou por produtos, mas que também pode levar o usuário a se
perder no conteúdo (Figura 3, Figura 4).
Figura 2: Visibilidade do status do sistema - Loja virtual
Figura 3: Visibilidade do status do sistema - site institucional
27
Ao entrar para ler uma novidade, a paginação muda o termo para notícias
(Figura 5, item 1.8). Além da ordem natural estar invertida, onde o botão que deveria
direcionar para a próxima página está apontando para a página anterior e vice-
versa, exibindo o fluxo contrário do formulado pela experiência do usuário (Figura 5).
Faltam os títulos no navegador, que poderiam ajudar o usuário a se localizar
com mais facilidade no site, pois o título mostra a localização atual do usuário no
site. Isso também ajuda o internauta caso ele deseje utilizar os botões 'anterior' e
'próximo' do navegador que irá mostrar todo o histórico da navegação. Assim como
uma URL6 bem escrita, que também auxilia neste sentido. Ou seja, ao usuário ler
uma URL http://www.carrosusados.com.br/ford/mondeo/, facilita a memorização,
6 “URL: sigla de Uniform Resourse Locator, é o endereço de um site na Internet, baseado em um padrão universal. Exemplo: http://www.enochatos.com.br”. TORRES (2009, p. 394).
Figura 4: Visibilidade do status do sistema - site institucional
28
assim como a localização do usuário no site do que uma URL formada por códigos
como, por exemplo, http://www.carrosusados.com.br?marca=123&modelo=987
(Figura 5).
3.2.1.2 Correspondência entre o sistema e o mundo real
Averiguou-se no site e-commerce: No menu categorias os termos usados
(banho, cabelos e presentes) podem ter dupla interpretação, de forma que o
internauta possa enfrentar dificuldades para encontrar o produto que procura, assim
como o menu linhas é redundante sendo desnecessário (Figura 6-2.1).
A exibição dos produtos possui uma descrição repetitiva do nome da linha o
que gera um ruído desnecessário, principalmente na linha 'Spa House' em que o
nome da empresa aparece na frente de todos os produtos (Figura 6-2.2).
Figura 5: Visibilidade do status do sistema - site institucional
29
Averiguou-se no site Institucional: As descrições dos menus estão mais
fáceis para o usuário navegar se comparado ao da loja virtual, pois possuem melhor
definição de termos, sendo familiar ao usuário (Figura 7).
Figura 6: Correspondência entre o sistema e o mundo real - Loja virtual
30
3.2.1.3 Controle de Liberdade do usuário
Examinou-se na loja virtual: Em nenhuma página foi encontrado o botão
voltar, há somente o menu das categorias que é fixo, mas isso faz com que o
usuário volte ao início de cada categoria e não à última página visitada.
No momento de informar os dados da compra, além de faltarem links para
voltar ou avançar, o botão 'fechar pedido' (Figura 8-3.1) está mal posicionado, pois
está acima do formulário de compra podendo confundir o comprador com o botão
'atualizar total' (Figura 8-3.2), conforme orientação de leitura da página.
Figura 7: Correspondência entre o sistema e o mundo real - site institucional
31
Examinou-se no site Institucional: É inexistente o botão voltar nas
páginas. Sendo que o único elemento de navegação é existente apenas nas páginas
dos produtos que possuem um menu secundário no lado esquerdo do site,
facilitando a navegação dentro de uma categoria (Figura 9).
Figura 8: Controle de Liberdade do usuário - Loja virtual
Figura 9: Controle de Liberdade do usuário - site institucional
32
3.2.1.4 Consistência e padrões
Analisou-se na loja virtual: Novamente nos deparamos com o problema de
rotulação dos menus. A repetição de produtos e linhas causa nova confusão mental
a quem acessa. Não há padronização de cores entre as categorias de linhas e
produtos para facilitar a diferenciação entre elas e também facilitar a localização do
internauta no site (Figura 10, Figura 11).
Figura 10: Consistência e padrões - Loja virtual
33
É inexistente a padronização de layout entre as categorias de produtos
(Figura 12) e as páginas de cadastro (Figura 13, Figura 23), informação ao cliente
(Figura 17), contato (Figura 15), login (Figura 14) e página pessoal (Figura 16).
Figura 11: Consistência e padrões - Loja virtual
Figura 12: Consistência e padrões - Loja virtual
34
Figura 13: Consistência e padrões - Loja virtual
Figura 14: Consistência e padrões - Loja virtual
Figura 15: Consistência e padrões - Loja virtual
Figura 16: Consistência e padrões - Loja virtual
35
Analisou-se no site Institucional: Na página inicial há uma confusão entre
os termos notícias e novidades. Sendo que na página inicial o título da página está
como novidades. Ao acessar o link novidade, a paginação está intitulada como
'notícias', fugindo de uma padronização de rotulação. Além disso a organização da
paginação está invertida conforme o modelo mental exercido pela experiência do
usuário (Figura 5).
Também é deficiente a padronização de layout nas categorias de produtos
(Figura 18, Figura 19), assim como no link 'nossas linhas', sendo que cada linha está
estruturada de forma diferente: algumas possuem texto introdutório, outras possuem
links para os produtos (Figura 20, Figura 21), ressaltando que estas descrições
estão presentes, cada uma, somente em algumas categoria de linha.
Pela experiência do usuário, também falta um rodapé com informações
rápidas como de contato, por exemplo.
Figura 17: Consistência e padrões - Loja virtual
36
Figura 18: Consistência e padrões - site institucional
Figura 19: Consistência e padrões - site institucional
37
Figura 20: Consistência e padrões - site institucional
38
3.2.1.5 Prevenção de erros
Observou-se no site e-commerce: Em situações de prevenção de erros, o
site é deficiente de informações e orientações. Em campos que devem ser
preenchidos apenas com números, esta informação é inexistente conforme marcado
em vermelho na Figura 22 e Figura 23. Ao selecionar o campo de cadastro de
pessoa física, os campos destinados à pessoas jurídicas permanecem visíveis,
conforme marcados em azul na Figura 22, e vice-versa, porém desabilitado, o que
pode gerar dúvida quanto ao preenchimento do formulário em usuários menos
experientes. Assim como os campos de preenchimento obrigatório deveriam ser
informados na primeira tentativa de preenchimento dos formulários (Figura 23).
Figura 21: Consistência e padrões - site institucional
39
Figura 22: Prevenção de erros - Loja virtual
40
Observou-se no site Institucional: Mesmo possuindo texto introdutório de
orientação ao preenchimento dos campos do formulário de contato é possível o
usuário enviar a mensagem com os campos em branco. Como retorno ao internauta
aparece 'mensagem enviada com sucesso' (Figura 24, Figura 25). Isso poderá
causar dúvida sobre a confiabilidade do formulário pelo usuário.
Figura 23: Prevenção de erros - Loja virtual
41
Figura 24: Prevenção de erros - site institucional
Figura 25: Prevenção de erros - site institucional
42
3.2.1.6 Reconhecimento em vez de memorização
Constatou-se no site e-commerce: Faltam ícones e links padronizados
para paginação, página inicial, carrinho de compras, contato, etc. Elementos que o
usuário deve reconhecer para facilitar a navegação.
O único ícone existente no site é a logomarca da empresa a qual possui link
para a página inicial. Mas um usuário menos experiente pode não saber que aquela
imagem leva para a página inicial (Figura 26). Falta a descrição do link para informar
o usuário.
Ao exibir os produtos de determinada linha falta uma paginação completa,
mostrando a numeração das páginas e não apenas 'anterior' e 'próximo' (Figura 27).
Assim como mostrar a quantidade de produtos que tem e que estão sendo exibidos
(1 – 15 produtos de 57).
Figura 26: Reconhecimento em vez de memorização - Loja virtual
43
Inicialmente a busca é simples contendo apenas um campo onde são
digitadas as palavras a serem pesquisadas. Toda vez que o usuário pesquisa
alguma palavra no sistema de busca, a página de resultados oferece os resultados
encontrados e uma nova opção de pesquisa, sendo esta mais completa, dando a
opção de buscar por categorias, termos e preço (Figura 28).
Figura 27: Reconhecimento em vez de memorização - Loja virtual
Figura 28: Reconhecimento em vez de memorização - Loja virtual
44
Constatou-se no site Institucional: A quantidade de novidades mostradas
na página inicial é grande, a barra de rolagem se torna extensa.
A padronização de layout do site, também auxilia o reconhecimento pelo
usuário, sendo esse um fator faltante nos links dos produtos (Figura 18, Figura 21).
O mesmo problema apresentado no e-commerce se repete no institucional,
que é a falta da descrição do link para a página inicial na logomarca da Abboccato.
3.2.1.7 Flexibilidade e eficiência de uso
Verificou-se na loja virtual: O uso de formulários acessíveis onde o usuário
pode clicar na palavra para acessar o campo referente do formulário e exibir que
alguns campos possuem máscaras.
Verificou-se no site Institucional: O uso de formulários acessíveis onde o
usuário pode clicar na palavra para acessar o campo referente do formulário.
Ao exibir um produto, existe um menu ao lado esquerdo do produto exibindo
o resto dos produtos da categoria na qual pertence. Isso facilita a navegação do
internauta, sendo que ele não precisa voltar para a página anterior para acessar
outro produto da mesma categoria (Figura 9).
3.2.1.8 Design estético e minimalista
Analisou-se no site e-commerce: Ao iniciar a compra pelo site, o layout
muda e pode causar dúvida quanto aos botões e descrição passo-a-passo do
caminho a percorrer para efetuar a compra (Compara Figura 29 e Figura 30).
45
A paginação continua aparecendo mesmo não existindo mais itens a serem
exibidos quando o usuário esta dentro de uma categoria de produtos (Figura 30).
O link 'cadastro' continua visível mesmo quando o usuário está logado, e o
mesmo acontece quando o usuário não está logado com o link 'sair' (Figura 30).
Analisou-se no site Institucional: O link 'nossas linhas' do menu 'quem
somos' e os links do menu 'produtos' são ambíguos, a repetição é desnecessária e
Figura 29: Design estético e minimalista - Loja virtual
Figura 30: Design estético e minimalista – Loja Virtual
46
pode causar confusão ao internauta, já que ambos exibem os mesmos produtos,
mas com um layout diferenciado.
3.2.1.9 Ajudar os usuários a reconhecer, diagnosticar e se recuperar de erros
Observou-se na loja virtual: O site se comportou razoavelmente bem em
relação à situações de erro, pois nos formulários de cadastro, contato, newsletter e
login solicitou que fossem preenchidos os campos obrigatórios mesmo que somente
após o envio das informações com alguns campos em branco. O usuário é
informado de forma simples e não adequada, aparecendo apenas uma mensagem
em vermelho de 'obrigatório', caso o campo não tenha sido preenchido ou esteja
com seu preenchimento com informações erradas como no caso do número do CPF.
As mensagens de erro devem ser mais objetivas e esclarecedoras (Figura 31).
Figura 31: Ajudar os usuários a reconhecer, diagnosticar e se recuperar de erros - Loja Virtual
47
Ao passar do link 'carrinho', o botão 'comprar mais produtos' desaparece e
fica apenas o botão 'voltar para o carrinho'. Caso o usuário deseje voltar ao início do
site para efetuar mais compras ou desejar alguma outra informação, ele terá que
voltar para o carrinho de compras para depois voltar para a página inicial e começar
a sua busca novamente (Figura 32).
Mesmo possuindo páginas de erro personalizadas ela poderia manter o
padrão do site e ter um botão de voltar ou ir à página inicial. Assim como a
mensagem de erro que aparece poderia estar relacionada com o erro. Como por
exemplo o erro 4047 que ao invés de orientar o usuário que esta página não existe
ele mostra que o site está passando por uma instabilidade momentânea, o que não
é verdade. Pois quando o usuário digita uma URL inexistente como
http://www.abboccato.com.br/qualquercoisa/ o site deveria informar que se trata de
uma página inexistente (Figura 33).
7 Erro 404 (404 Error), é a resposta de uma requisição ao servidor dizendo que a página em questão não foi encontrada (File Not found). Disponível em http://www.brasilseo.com.br/geral/erro-404-a-pagina-nao-foi-encontrada. Acesso em 17 abr. 2010.
Figura 32: Ajudar os usuários a reconhecer, diagnosticar e se recuperar de erros - Loja Virtual
48
Observou-se no site Institucional: O formulário de contato é enviado e
mostra uma mensagem de envio realizado mesmo sem o preenchimento dos
campos (Figura 24, Figura 25).
Não tem páginas de erro padrão personalizadas. Possui padrão de erro 404
do provedor de hospedagem (página não encontrada) (Figura 34).
3.2.1.10 Ajuda e documentação
Examinou-se no site e-commerce: A rotulação e o posicionamento do link
de ajuda na página não estão adequados, o link 'como comprar', para um melhor
entendimento deveria estar com outro nome, como por exemplo: 'ajuda' (Figura 35).
Figura 34: Ajudar os usuários a reconhecer, diagnosticar e se recuperar de erros - site institucional
Figura 33: Ajudar os usuários a reconhecer, diagnosticar e se recuperar de erros - Loja Virtual
49
O link para a ajuda de 'como comprar' está presente somente na página
inicial e de categorias. Ao acessar a página de produtos individuais o menu de ajuda
desaparece. Justo quando ele teria mais utilidade (Figura 36).
No site Institucional: Não se aplica.
3.2.2 Análise de Otimização – SEO
Figura 35: Ajuda e documentação - Loja virtual
Figura 36: Ajuda e documentação - Loja virtual
50
Após análise de Otimização do site de vendas e institucional da Abboccato
foram feitas algumas considerações:
• Mapa do site: Ambos não possuem mapa do site. Nem para auxiliar os
usuários, nem para ajudar os motores de busca;
• Sistema de breadcrumb trail (migalhas de pão): Ambos não
possuem breadcrumb trail para auxiliar a navegação do internauta;
• URL (endereço da página): Ambos não possuem palavras-chave
relacionadas com o conteúdo;
• Descrição da Página (metatag description): A loja virtual possui
apenas uma descrição padrão para todas as páginas e no site
institucional não possui descrição alguma;
• Palavras-chave (keywords): Ambos não possuem a metatag de
palavras-chave no site.
• Título da página (title): Ambos não possuem um título relacionado ao
conteúdo da página;
• tags de subtítulo (h1, h2, h3, h4, h5, h6): Ambos não possuem
nenhuma informação nos blocos de conteúdo;
• Descrição nas imagens: Ambos não possuem nenhuma descrição no
conteúdo dos elementos de imagem;
• Descrição de links: Ambos não possuem descrição alguma dos links
internos do site;
• Arquivo Robots.txt: Ambos não possuem o arquivo robots.txt;
51
4 ESTRATÉGIA DE COMUNICAÇÃO
Esse planejamento propõe estratégias de marketing de busca e arquitetura
de informação com base nos dados coletados junto ao cliente Abboccato e análise
dos sites, fundamentado no referencial teórico do projeto anexo.
4.1 Público alvo
O Público alvo destas ações são os internautas em geral, já que, tendo boa
visibilidade na rede estará acessível a qualquer um. Não é possível definir um perfil
em específico, mas pode-se dizer que será direcionado à pessoas que tem interesse
em cosméticos, seja para uso próprio ou para presente. Isto é possível definir
através das palavras-chave.
O projeto deve contemplar diversos perfis de internautas, já que pode ser
acessado por um usuário com experiência mínima em internet e ao mesmo tempo
por um usuário que tenha grande conhecimento de navegação online.
4.2 Estratégias
Após avaliação do site de vendas e do institucional, foram determinadas
algumas tarefas que deverão ser apresentadas como proposta para o cliente. A
primeira coisa a ser feita será a unificação visual dos sites pois eles não possuem
similaridade e continuidade visual. Ao olhá-los separadamente, não se tem como
dizer que ambos são da mesma empresa devido a problemas de design visual, pois
cada site possui um padrão de layout, ou seja, não possuem similaridade.
52
4.3 Objetivo de comunicação
A reestruturação e a otimização dos sites da Abboccato tem como objetivo
aumentar a encontrabilidade do site, posicionar a empresa no meio online e
fortalecer a marca, tornando a Abboccato conhecida e consequentemente gerar
aumento no número das vendas.
4.4 Justificativa
Para justificar a unificação do site institucional com o de vendas, é possível
utilizar as teorias de design visual, como a lei de semelhança e proximidade da
Gestalt.
A igualdade de forma e de cor desperta também a tendência de se construir unidades, isto é, de estabelecer agrupamentos de partes semelhantes.Em condições iguais, os estímulos mais semelhantes entre si, seja por forma, cor, tamanho, peso, direção, e outros, terão maior tendencia a serem agrupados, a constituírem partes ou unidades. Em condições iguais, os estímulos originados por semelhança e por maior proximidade terão também maior tendência a serem agrupados, a constituírem unidades.Semelhança e proximidade são dois fatores que, além de concorrerem para a formação de unidades, concorrem também para promoverem a unificação do todo, daquilo que é visto, no sentido da harmonia, ordem e equilíbrio visual. (GOMES FILHO, 2004, p. 35).
Sob a visão da comunicação, unificar os sites auxiliará no posicionamento
da marca e da loja virtual, facilitará o acesso às informações institucionais e de
produtos. A unificação também ajudará na padronização de conteúdo e design
visual. Sendo que isso tornará o website mais adequado visualmente, facilitando a
sua navegação. Assim, certamente o usuário alcançará seus objetivos e ficará
satisfeito com a facilidade de efetuar uma compra ou buscar informações
institucionais.
Analisando a realidade mercadológica da Abboccato, é possível destacar
alguns benefícios da unificação dos sites e do planejamento de uma loja virtual.
53
A Internet, tendo como base Pinho (2000, p. 119), possui algumas van tagens
na publicidade online em relação a outros meios. Sendo a dirigibilidade, quando a
publicidade é voltada ao público-alvo. Rastreamento, pois os sites permitem rastrear
o modo como os usuários interagem com a marca. A acessibilidade, sendo que a
publicidade está disponível 24 horas por dia e sete dias da semana. Flexibilidade,
pois uma campanha pode ser lançada, atualizada ou cancelada imediatamente e,
por último a interatividade, que tem como envolver os usuários com a marca e
produto.
Na internet é possível a criação de estratégias de marketing direcionadas
para nichos de consumidores específicos. Isso faz com que a verba investida em
comunicação seja melhor aproveitada, pois pode se ter a certeza que vai atingir uma
grande parte do público-alvo.
A loja virtual leva o produto até o consumidor através da promoção de
vendas e oferece vantagens no preço, condições e promoções diferenciadas
voltadas exclusivamente para e-commerce. Assim como cada produto tem que
aparecer de uma forma visual agradável e, se possível estar relacionado ao gosto do
consumidor. Por exemplo, quando o usuário retorna ao site são exibidos os produtos
relacionados com os últimos produtos que o internauta acessou na visita anterior.
Geralmente, os produtos no meio online sofrem com o pouco tempo de
leitura, é apenas um olhar para o lado para mudar a intenção de compra. Sendo
assim, é importante que o produto apareça no lugar e na hora certa. Levando em
conta a possibilidade de se efetivar uma compra é de praticamente 100%, caso o
usuário esteja disposto a efetuar uma compra.
A venda nas lojas virtuais assim como de algumas lojas físicas são
efetuadas através do auto-serviço. Isso exige planejamento em ações promocionais
voltadas diretamente ao produto no próprio ponto-de-venda. Sendo assim, a
disposição e as informações das ações de merchandising no PDV8 devem ser
planejadas para que a sua execução passe a mensagem certa com o desígnio de
prender a atenção do consumidor fazendo com que ele, intencionalmente, efetue a
compra de determinado produto.
8 Leia-se PDV como abreviação de ponto-de-venda.
54
Neste sentido, a unificação dos sites tem grande importância tanto para a
empresa quanto para a comunicação online por ela oferecida. Através da unificação
é possível criar um canal de comunicação mais acessível e fácil de usar. Isso
possibilita que o marketing de relacionamento seja efetivo, já que, na internet é onde
o consumidor dispende de maior tempo de contato com a marca, ou seja, é onde ele
vai buscar todas as informações sobe a empresa, produto ou serviço.
55
5 PROPOSTA DE REFORMULAÇÃO
Com base nos problemas detalhados no diagnóstico, será proposta uma
alteração estrutural.
Tendo esta estrutura detalhada, é possível partir para outras formas de
organização do sistema informacional que não estão disponíveis nos websites em
questão. Segundo Agner, (2009, p. 97) a base da estrutura organizacional de um
website é a descrição de quatro sistemas interdependentes, os quais juntos compõe
a arquitetura de informação de um ambiente. São eles:
• Alteração do sistema de organização: “Determina como é
apresentada a organização e a categorização do conteúdo”;
• Alteração do sistema de rotulação: “Define signos verbais
(terminologia) e visuais para cada elemento informativo e de suporte à
navegação do usuário”;
• Alteração do sistema de navegação: “Especifica formas de se
mover através do espaço informacional”;
• Alteração do sistema de busca: “Determina as perguntas que o
usuário pode fazer e as respostas que irá obter no banco de dados”;
Assim como, seguindo os passos de Gabriel (2009) para o SEO, serão
alterados e desenvolvidos as seguintes informações textuais de conteúdo da loja
virtual:
• Construção dos mapas do site – serão elaborados dois tipo de
mapas de site. Um voltado ao usuário (que estará visível no site) e
outro voltado aos mecanismos de busca (enviado separadamente para
o buscador);
• Inserção de sistema de breadcrumb trail (migalhas de pão) – Tem a
função de demonstrar o caminho percorrido pelo usuário;
56
• Melhoria de URL – alterar para uma URL sem códigos e variáveis
dando importância ao uso de palavras-chave na sua construção. Isso
ajuda o site a ser encontrado pelo usuário uma pesquisa realizada nos
mecanismos de busca e também orienta os usuários dentro do site;
• Elaboração das descrições das páginas (metatag description) –
cria uma descrição para os mecanismos de pesquisa individual de cada
página do site, facilitando o site ser encontrado em uma busca;
• Palavras-chave (keywords) – indica aos buscadores quais as
palavras-chave relacionadas com o conteúdo da página;
• Título da página (title) – Trabalhar o título da página para descrever o
conteúdo da mesma;
• tags de subtítulo (h1, h2, h3, h4, h5, h6) – Usadas para breves
descrições de diferentes blocos de conteúdos na página, que
organizam os textos;
• Descrição nas imagens – descrever o conteúdo de elementos gráficos
do site;
• Descrição de links – descrever o conteúdo e local do link apontado;
• Arquivo Robots.txt – indica aos buscadores quais os diretórios ou
páginas que eles podem acessar;
57
6 REFORMULAÇÃO
6.1 Estrutura de navegação
O mapa de navegação foi elaborado pensando na estrutura organizacional
do site, servindo como base para a construção dos wireframes.
6.2 Wireframes
Figura 37: Estrutura de Navegação
58
Os wireframes foram desenvolvidos utilizando a ferramenta iPlotz9, que é
própria para o desenvolvimento de wireframes. O software permite que o projeto
seja construído com dimensões reais, e que durante a construção dos wireframes
seja verificado o comportamento da navegação através de simulação de códigos
HTML, próprios do software no navegador.
Para a concepção da estrutura organizacional dos wireframes foi tomado
como referência de estudo alguns sites de grandes lojas virtuais como Submarino,
Fnac, Dell, O Boticário, Natura e Americanas.
Página Inicial
A página inicial é a base estrutural para todo o restante do site. Nela são
dispostos elementos que estarão presentes em todas as outras telas do site, são
eles:
Topo (Figura 38 – 1)
Os elementos dispostos no topo estão posicionados baseados em
convenções, confirmadas por pesquisadores. Atendendo ao critério “reconhecimento
em vez de memorização”, solucionando o problema encontrado no item 3.2.1.6 da
análise heurística.
• Logomarca – posicionada no primeiro quadrante do site, deve ser o
primeiro elemento visto por quem navega, seguindo a orientação de
leitura ocidental (da esquerda para a direita, de cima para baixo).
• link para cadastro – deve estar visível, dentro do primeiro campo de
visão do usuário, deve convidar o usuário a se cadastrar. Caso o
usuário esteja logado, será substituído pelo link “Minha conta”,
atendendo melhor o critério "visibilidade do status do sistema" e
resolvendo o problemas do item 3.2.1.1 da análise heurística.
9 Disponível para download na página da empresa. http://iplotz.com/
59
• login – também deve estar dentro do primeiro campo de visão do
usuário e visível em todas as páginas do site para facilitar o acesso à
informações restritas. Quando o usuário já estiver logado, será
substituído pelo link "sair", atendendo ao critério "visibilidade do status
do sistema" e resolvendo o problema encontrado no item 3.2.1.1 da
análise heurística.
• Campo de busca com categorias – disponibiliza duas opções de
busca, facilitando assim a navegação do usuário. Está posicionado no
topo pois já se tornou convenção.
• Contato – Funciona como um link de contato rápido, está posicionado
à direita na página.
• Mapa do site – Também localizado no canto superior direito, tem como
objetivo auxiliar a navegação do site, expondo ele de forma simples ao
usuário.
• Dúvidas – link rápido para página de dúvidas mais frequentes.
• Carrinho de compras – como convenção, está localizado na direita do
topo.
Navegação Lateral Esquerda
• Menu categorias/linhas – Segundo Memória (Apud Bernard, 2005, p.
68) “A grande maioria dos usuários espera encontrar um menu com
links para páginas internas na esquerda das interfaces”. Neste caso,
para solucionar o problema de duplicidade de menus encontrado na
análise heurística. Dessa forma foi atendido o critério "visibilidade do
status do sistema" resolvendo o problema da seção 3.2.1.1, onde é
oferecido para o usuário duas formas de encontrar o produto, anulando
a dúvida gerada pelos dois menus do site atual. As informações variam
conforme a necessidade de comunicação. Atendendo aos critérios
"problemas de visibilidade do status do sistema", "correspondência
entre o sistema e o mundo real" e "design estético e minimalista",
60
resolvendo os problemas das seções 3.2.1.1, 3.2.1.2 e 3.2.1.8 da
análise heurística.
• Vale presente – está localizado logo abaixo do menu principal, é visto
na forma de banner com link para a compra dos vales.
• newsletter – Está localizada abaixo do banner de vale presente, é
apresentado de forma acessível através de formulário de
preenchimento rápido sem a necessidade de ir para outra tela.
Rodapé (Figura 38 – 2)
O rodapé apresenta elementos de acesso rápido. Segundo Memória (2005,
p. 73) “A navegação de rodapé, ou navegação redundante, é outra convenção de
interface já consagrada na internet. Além de poder repetir alguns links da navegação
global, é um espaço muito utilizado para informações”. Geralmente quando o usuário
busca informações sobre a empresa, ou questões mais burocráticas, procura direto
no rodapé. Atendendo ao critério "ajuda e documentação” resolvendo os problemas
por ele causado na seção 3.2.1.10 da análise heurística.
Os outros elementos da página são específicos para a página inicial:
• Menu superior horizontal – menu de acesso rápido aos produtos:
Lançamentos, Ofertas e Mais vendidos.
• Exibição dos produtos da categoria/aplicação de menu selecionada – os produtos estão dispostos em três colunas com
respiro entre elas. Junto aos produtos estão informações sobre os
mesmos, como descrição, valor e link para compra. Para facilitar a
navegação, é disponibilizado também paginação e informação de
quantos produtos estão disponíveis. Logo abaixo dos produtos está
localizado um botão para voltar ao topo da página, sem precisar utilizar
a barra de rolagem do navegador.
61
Figura 38: Wireframe - Página Inicial
62
Página de categorias
A página de categorias exibe os produtos após a ação do usuário, ao clicar
em algum link do menu da esquerda. Os itens são exibidos da mesma forma que na
página inicial, em três colunas e com as mesmas informações. Na parte superior da
página de categorias, logo abaixo do banner promocional, está localizada a
breadcrumb trail, atendendo aos critérios "visibilidade e status do sistema" e
"controle de liberdade do usuário", resolvendo assim os problemas apresentados
nas seções 3.2.1.1 e 3.2.1.3 em que supre a falta do botão voltar. Logo abaixo,
estão dispostos o título da categoria, um filtro de ordenação, a informação de
quantos produtos estão disponíveis e a paginação, que deve estar acessível apenas
quando há mais produtos a serem exibidos, atendendo assim aos critérios de
"reconhecimento em vez de memorização" e "design estético e minimalista" que
resolvem os problemas das seções 3.2.1.6 e 3.2.1.8 da análise heurística. A
ordenação, informação do número de produtos e paginação se repetem logo abaixo
da área de exibição dos produtos.
Uma nova área é inserida nesta página, abaixo da área de exibição dos
produtos encontram-se links para produtos/linhas relacionadas, dependendo de
onde o usuário clicou no menu para encontrar o produto. Nesta área os produtos
estão dispostos também em três colunas, mas somente uma linha, podendo ser
navegados através de rolagem horizontal.
63
Figura 39: Wireframe - Categorias
64
Página de produtos
A página de produtos exibe somente o produto selecionado, tendo grande
área de exibição. As informações são mais completas, com diversas fotos, além de o
produto poder ser avaliado, indicado para amigos, ser adicionado a uma lista de
presentes ou receber comentários dos usuários. O menu se adapta verticalmente ao
espaço disponível, sendo que ele exibe somente o título das categorias. Ao
selecionar alguma categoria, o menu se expande mostrando todos os produtos
cadastrados nela. Assim como na página de categorias, a breadcrumb está
posicionada acima da área de exibição e os produtos/linhas relacionados, estão
abaixo. O botão voltar ao topo também está disponível.
65
Figura 40: Wireframe - Página Produto
66
Página Carrinho de compras
A página de carrinho de compras perde as informações do lado esquerdo da
página, mantendo somente topo e rodapé. Ela informa o cliente sobre a compra a
ser realizada através de informações do produto, opção de cartão presente,
quantidade a ser comprada e valores. Além disso a página possui botões para
avançar ao próximo passo, salvar o carrinho e voltar ao site de vendas dando total
liberdade ao usuário. Durante o processo, o usuário é informado em qual passo ele
se encontra e quais ainda faltam para finalizar a compra. A breadcrumb também está
presente, no mesmo lugar para facilitar a navegação e informar o usuário sobre a
sua localização no site. Atendendo aos critérios "controle de liberdade do usuário”,
“design estético e minimalista” e “ajudar os usuários a reconhecer, diagnosticar e se
recuperar de erros”, resolvendo os problemas descritos nas seções 3.2.1.3, 3.2.1.8 e
3.2.1.9 da análise heurística.
67
Figura 41: Wireframe - Carrinho de Compras
68
Página de cadastro
A página de cadastro foi reformulada de forma a facilitar o entendimento do
preenchimento do cadastro. Foi inserida opção de seleção do tipo de pessoa, física
ou jurídica. Quando selecionado um dos tipos, o formulário muda, oferecendo
somente as opções válidas para ao tipo selecionado. Ícones com alerta de
preenchimento de campos obrigatórios e apenas números foram inseridos para
facilitar o processo, assim não sendo necessário o retrabalho ou desgaste do
usuário. Atendendo os critérios de “prevenção de erros” e “ajuda aos usuários a
reconhecer, diagnosticar e recuperar erros”, resolvendo os problemas por eles
descritos nas seções 3.2.1.5 e 3.2.1.9 da análise heurística.
69
Figura 42: Wireframe - Página de Cadastro
70
Página de login
A página de login não sofreu muitas alterações de informação, ela foi
adequada ao padrão visual das demais páginas e organizada de forma a facilitar o
acesso do usuário.
Figura 43: Wireframe - Página de login
71
Página de erro
A página de erro também foi adequada ao padrão das demais páginas,
perdendo as informações de menus e mantendo topo e rodapé. As mensagens são
personalizadas para cada tipo de erro cometido pelo usuário ou sistema. No
exemplo abaixo, é utilizado o erro 404, de página não encontrada, onde o site
oferece opções para o usuário encontrar o que procura. A página de erro atende ao
critério “ajuda aos usuários a reconhecer, diagnosticar e recuperar erros” resolvendo
o problema da seção 3.2.1.9 da análise heurística.
Figura 44: Wireframe - Página de Erro
72
Página de contato, fale conosco
A página de contato contém formulário para contato rápido, com informações
de preenchimento obrigatório, disponibiliza dados sobre a Abboccato como endereço
e CNPJ e um mapa de localização do centro administrativo. Atendendo ao critério
"ajuda aos usuários a reconhecer, diagnosticar e recuperar erros”, resolvendo o
problema por ele causado descrito na seção 3.2.1.9 da análise heurística.
Figura 45: Wireframe - Página de Contato
73
Página Mapa do site
A página do mapa do site pode ser acessada através do link no topo e
rodapé da página. Exibe todas as páginas disponíveis do site para os usuários
servindo como um menu rápido de acesso onde o usuário pode navegar por todas
as páginas do site sem precisar utilizar qualquer tipo de mecanismo de busca.
Neste wireframe, foi usado somente algumas aplicações e linhas de
produtos com o objetivo de exemplificar a construção do mapa do site.
74
Página Minha conta (Área administrativa)
A página pessoal exibe menu personalizado de acordo com as necessidade
de comunicação da Abboccato com o cliente. Ela disponibiliza informações e
serviços aos usuários cadastrados como reimpressão de boletos, acesso aos
pedidos, solicitação de trocas e devoluções, etc. O padrão utilizado é de topo e
rodapé, com menu na esquerda da página.
75
As demais páginas, não citadas neste projeto deverão ter o mesmo padrão
neste apresentado, com topo e rodapé, respeitando a área de informação conforme
a limitação do grid. Atendendo ao critério de "consistência e padrões", resolvendo o
problema da seção 3.2.1.4 da análise heurística.
Figura 46: Wireframe - Página Minha Conta
76
Mensagens de Prevenção de Erros
As mensagens de erro/prevenção de erro durante o preenchimento de
formulários devem ser exibidas ao usuário logo abaixo do campo que acabou de ser
preenchido com letras em vermelho para dar destaque. Atendendo os critérios de
"prevenção de erros”, “flexibilidade e eficiência de uso” e “ajuda aos usuários a
reconhecer, diagnosticar e recuperar erros”, resolvendo os problemas das seções
3.2.1.5, 3.2.1.7 e 3.2.1.9 da análise heurística.
Algumas mensagens são sugeridas:
Em casos de campos serem preenchidos em branco é interessante o uso de
mensagens como:
• Por favor informe o seu nome.
• Por favor informe seu endereço para correspondência.
Em casos de dados incompatíveis com os aceitos pelo sistema usar
mensagens como:
• O 'Nome' não está preenchido corretamente. Verifique e tente
novamente.
• O 'Número' não está preenchido corretamente. Verifique e tente
novamente.
Em casos específicos de preenchimento de dados usar mensagens do tipo:
• A senha que você digitou contém 5 caracteres. Para sua segurança, o
sistema exige uma senha de, no mínimo, 6 caracteres. Digite
novamente.
77
6.3 Otimização do conteúdo – SEO
Para a reformulação de SEO será feita uma divisão em 3 (três) níveis de
navegação do site, sendo o primeiro nível a página inicial, o segundo uma categoria
de produtos e o terceiro nível será a página do próprio produto. Sendo que, para a
página inicial será utilizado como exemplo a própria página inicial da Abboccato,
para a página das categorias será utilizada a linha 'banho' para exemplificar e na
página de produtos será usado o produto 'espuma de banho flor de lótus'. Essa
reformulação tem como principal objetivo melhorar a encontrabilidade da loja virtual
da Abboccato.
6.3.1 Títulos das páginas
Tendo como base Formaggio (2010, p. 43), o título da página deve
apresentar tudo o que aparece na página. E ele segue uma estrutura básica na sua
montagem sendo formado pela palavra-chave com uma chamada para ação mais a
marca. Atendendo ao critério “visibilidade e status do sistema”, resolvendo o
problema da seção 3.2.1.1 da análise heurística de otimização.
Por exemplo:
Título nível 1 (Página inicial)Abboccato - Linhas completas para cuidados da pele e dos cabelos, Cremes
hidratantes, sabonetes e muito mais.
Título nível 2 (Página das Categorias)Tudo para seu banho – Abboccato
Título nível 3 (Página do Produto)
78
Espuma de Banho Flor de Lótus Spa House 300ml – Abboccato
6.3.2 Descrição das Páginas
De acordo com Formaggio (2010, p. 46), A descrição da página apresenta
uma breve descrição da página que ajuda aos buscadores encontrar o site, assim
como contribui em nível informacional para que o usuário possa ter um feedback do
conteúdo de uma determinada página.
Por exemplo:
Descrição nível 1 (Página inicial)Linhas completas de cosméticos para tratamento da pele e dos cabelos.
Produtos para ambiente, artesanais, banho, cabelos, corpo, perfume, presentes e
rosto.
Descrição nível 2 (Página das Categorias)Linha completa de cosméticos para banho. Sabonete líquido, sabonete em
barra vegetal, gel, espuma, sais relaxantes e estimulantes.
Descrição nível 3 (Página do Produto)Espuma de Banho Flor de Lótus com aroma leve, floral e delicado, deixa o
banho suave e envolve o corpo em um perfume que atrai boas energias e estimula
os sentidos.
6.3.3 Palavras-chave
79
Conforme Formaggio (2010, p. 48), Mesmo com o desuso da metatag
keywords pelos grandes buscadores como o Google e o Yahoo, ela ainda deve ser
levada em considerações, pois ainda existem alguns buscadores regionais que a
utilizam e até mesmo para alguns buscadores baseados em diretórios.
As palavras-chave foram escolhidas de acordo com o conteúdo principal de
cada página em especifico. Sempre buscando palavras relacionadas ao assunto em
destaque.
Por exemplo:
Palavras-chave nível 1 (Página inicial)Aromas para ambiente, aromatizador, difusor de aromas, cosméticos,
cosméticos artesanais, espuma para banho, reparador de pontas, shampoo,
condicionador, hidratantes, hidratante corporal, óleo corporal, loção corporal,
máscara facial, sabonetes.
Palavras-chave nível 2 (Página das Categorias)Sabonete, sabonetes, sabonete líquido, sabonete vegetal, sabonete
aromático, gel, gel esfoliante, espuma de banho, sal de banho, sais de banho,
relaxante, estimulante.
Palavras-chave nível 3 (Página do Produto)Espuma de banho, flor de lótus, Espuma de banho flor de lótus, espuma de
banho aromática, espuma aromática, espuma de banheira, banho de espuma.
6.3.4 URL (Endereço da página)
Uma URL escrita com palavras-chave relacionadas com o assunto da página
e sem o uso exagerado de códigos na barra de endereço da página em questão,
além de ajudar os buscadores a encontrar as páginas do site em uma busca
80
realizada, também ajuda a memorização do link pelo usuário. Atendendo ao critério
“visibilidade e status do sistema”, resolvendo o problema da seção 3.2.1.1 da análise
heurística.
Por exemplo:
URL nível 1 (Página inicial)http://www.abboccato.com.br
URL nível 2 (Página das Categorias)http://www.abboccato.com.br/banho/
URL nível 3 (Página do Produto)http://www.abboccato.com.br/banho/spa-house/espuma-de-banho-flor-de-
lotus-300ml
6.3.5 tags de subtítulo (h1, h2, h3, h4, h5, h6)
Todos os títulos de produtos devem estar entre tags de subtítulo, seguindo
uma sequência lógica onde o título principal inicia no número 1 (um) e vai até o
número 6 (seis). Atendendo o critério “correspondência entre o sistema e o mundo
real”, resolvendo o problema da seção 3.2.1.2 da análise heurística.
Por exemplo:
Subtítulo nível 2 (Página das Categorias)<h1>Banho</h1>
<h2>Florest Day</h2>
<h2>Vita Oliva</h2>
81
Subtítulo nível 3 (Página do Produto)<h1>Espuma de Banho Flor de Lótus 300ml</h1>
<p>Descrição do produto</p>
6.3.6 Descrição das imagens
Segundo Formaggio (2010, p. 74) as imagens devem ter em seu nome e sua
descrição o mesmo conteúdo que ela representa. É bom levar em consideração a
categoria a que ela pertence. No caso de várias imagens para um mesmo produto, é
recomendável colocar em sequência numérica.
Por exemplo:
Descrição de uma imagem do nível 3 (Página do Produto)Nome da imagem: banho-flor-de-lotus-espuma-de-banho-300ml.jpg
Descrição da imagem: Espuma de Banho com aroma de Flor de Lótus
Exemplo do código HTML:
<img src=”banho-flor-de-lotus-espuma-de-banho-300ml.jpg” alt=”Espuma de Banho com aroma de Flor de Lótus” />
6.3.7 Descrição de links
A descrição dos links também é importante para o reconhecimento da página
nos mecanismos de busca. Assim o buscador ao ler um link sabe do que se trata e
se ele tem alguma relação com o conteúdo da página de destino. Da mesma forma o
usuário também saberá para onde o link está apontando.
82
URL do link: http://www.abboccato.com.br/banho/spa-house/espuma-de-
banho-flor-de-lotus-300ml
Título do link: Acesse o produto espuma de banho flor de lótus 300ml
Texo âncora: Flor de Lótus
Exemplo do código HTML:
<a href=”http://www.abboccato.com.br/banho/spa-house/espuma-de-banho-flor-de-lotus-300ml” title=”Acesse o produto espuma de banho flor de lótus 300ml”>Flor de Lótus</a>
6.3.8 Arquivo Robots.txt
Tendo como base Formaggio (2010, p. 98) o arquivo robots.txt avisa aos
buscadores como o Google e Yahoo quais são as páginas ou diretórios de site que o
administrador deseja que eles analisem ou não. Sendo que, por exemplo, não é
nada interessante que as páginas de um sistema de gerenciamento de conteúdo
sejam encontradas nos resultados de uma busca.
Estrutura do arquivo Robots.txt:
User-Agent serve para especificar quais os mecanismos de busca o site é
válido. No caso de usar o asterisco (*), diz que o site esta habilitado para todos os
buscadores.
Disallow diz aos buscadores quais os diretórios que não devem ser
indexados.
sitemap diz ao buscador o local onde o mapa do site esta.
83
Local do arquivo robots.txt: http://www.abboccato.com.br/robots.txt
Exemplo do arquivo robots.txt:
User-Agent: *Disallow: /admin/sitemap: http://www.abboccato.com.br/sitemap.xml
6.3.9 sitemap.xml
De acordo com Formaggio (2010, p. 104), o sitemap.xml é um arquivo que
fica dentro do site e informa apenas aos buscadores quais são as páginas do site.
Para uma melhor compreensão desse arquivo serão exibidas as funções de suas
variáveis.
Chamada padrão para a versão do arquivo XML usado junto com a
codificação utilizada: <?xml version="1.0" encoding="UTF-8"?>
urlset: responsável pelo encapsulamento do arquivo e a referência do seu
protocolo;
loc: URL da página;
lastmod: data da última cerificação da página;
changefreq: frequência com que a página é alterada;
priority: prioridade da página. Varia de 0.0, menor prioridade até 1.0, maior
prioridade.
Exemplo do arquivo sitemap.xml
<?xml version="1.0" encoding="UTF-8"?>
84
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url><loc>http://wwwabboccato.com.br/</loc><lastmod>2010-05-01</lastmod><changefreq>monthly</changefreq><priority>0.8</priority>
</url><url>
<loc>http://wwwabboccato.com.br/banho/</loc><lastmod>2010-05-01</lastmod><changefreq>monthly</changefreq><priority>1.0</priority>
</url><url>
<loc>http://wwwabboccato.com.br/spa-house/</loc><lastmod>2010-05-01</lastmod><changefreq>monthly</changefreq><priority>0.5</priority>
</url><url>
<loc>http://wwwabboccato.com.br/banho/spa-house/espuma-de-banho-flor-de-lotus-300ml</loc>
<lastmod>2010-05-01</lastmod><changefreq>monthly</changefreq><priority>0.5</priority>
</url>
[… demais páginas]
</urlset>
85
7 CONSIDERAÇÕES FINAIS
No início, imaginávamos todo este processo de uma forma, seguindo uma
série de passos pré definidos. Durante o desenvolvimento do trabalho, percebemos
que o universo era muito maior, que vários passos deveriam ser inseridos neste
percurso para que se alcançasse com êxito os objetivos apresentados. Ao fim desta
caminhada, podemos concluir que conseguimos atingir todos os objetivos propostos
desde o início deste projeto.
O conhecimento adquirido no desenvolvimento deste trabalho foi essencial
para a formação profissional. É necessário destacar a importância do planejamento
de websites por profissionais da comunicação, através de estudos sobre o perfil e
comportamento do usuário perante a navegação de sites e vice-versa. O
conhecimento apresentado neste projeto foi agregado através de muita leitura
principalmente de livros adquiridos pelos pesquisadores, pois a biblioteca da
Unochapecó ainda não disponibiliza de tais títulos, já que, o assunto proposto ainda
não é muito conhecido na região. Durante o curso de publicidade e propaganda
algumas pinceladas sobre o assunto, agregadas à cursos externos à universidade
delinearam o caminho para o desenvolvimento deste trabalho. O aporte teórico
oferecido por nosso orientador Felipe Stanque Machado Junior também foi de
grande valor para a construção da revisão teórica e aplicação do conhecimento
aliado a prática.
O planejamento de websites focados no usuário exige conhecimento de
conceitos aplicáveis para cada perfil, sendo estes adquiridos e formados pela
experiência de quem os analisa.
Neste caso específico, da Abboccato, a grande maioria dos problemas de
navegação, usabilidade e encontrabilidade foram encontrados através da análise
heurística de arquitetura de informação e SEO. Após relacionar os problemas
encontrados com as dificuldades apresentadas no briefing, pelo cliente, foi possível
pensar estratégias e planejar ações de melhorias nos sites em questão. Após dias
realizando a análise heurística dos sites foi possível diagnosticar minuciosamente
diversos problemas de navegação assim como de encontrabilidade nos mecanismos
86
de busca e principalmente dentro das próprias páginas dos sites. Logo após foi
desenvolvido um organograma com os conteúdos do website a fim de organiza-los e
distribui-los de forma coerente no novo projeto estrutural. E dessa forma foi possível
desenvolver os wireframes focados nos usuários a fim de solucionar os problemas
encontrados.
A partir da resolução dos problemas, o site terá maior visibilidade para a
empresa na internet por meios de busca realizadas pelos usuários. Assim como
suas páginas se tornarão navegáveis, facilitando o acesso e navegação do sites
pelos seus consumidores.
Este é um projeto pioneiro de planejamento e construção de estrutura de
website baseado em estratégias de usabilidade, navegabilidade com foco no usuário
e otimização para mecanismos de busca no curso de Publicidade e Propaganda da
Unochapecó. As constantes mudanças no mercado e comportamento do consumidor
exigem que as empresas de comunicação se adequem aos novos perfis de
empresas e consumidores que surgem a cada dia. Um dos principais objetivos
acadêmicos ao escolher o tema trabalhado é a importância da inserção de
profissionais especializados no desenvolvimento de interfaces com usabilidade e
marketing de busca junto às agências de publicidade, estúdios de design e
empresas de desenvolvimento web. Possibilitando assim a formação de
profissionais adeptos a este novo nicho mercadológico.
Esse trabalho foi uma grande experiência para a ampliação do nosso
conhecimento acerca dos assuntos relacionados a arquitetura de informação,
usabilidade, navegabilidade, estratégias de otimização e a importância da inserção
desses assuntos na publicidade e propaganda. Assim como a aplicação da análise
heurística foi uma novidade para nós, como pesquisadores. Dessa forma podemos
afirmar que este projeto foi apenas um passo inicial que separa a vida acadêmica da
profissional e esperamos que ele seja de grande valia para o cliente e, que se
implantado, atinja os objetivos de comunicação da Abboccato. Assim como se
espera que ele possa contribuir para acadêmicos de publicidade e propaganda,
estudantes que venham a abordar esse assunto em suas pesquisas e projetos tal
qual para nossos colegas profissionais.
87
8 REFERÊNCIA BIBLIOGRÁFICA
Livros:
AGNER, Luiz. Ergodesign e Arquitetura de Informação: trabalhando com o Usuário. 2ª edição. Rio de Janeiro. Quartet, 2009.
ANDERSON, Chris. A Cauda Longa. [Tradução Afonso Celso da Cuha Serra] 5ª
edição. Rio de Janeiro: Elsevier, 2006.
DMITRUK, Hilda Beatriz. Cadernos metodológicos : diretrizes do trabalho científico. 6ª edição. Chapecó: Argos, 2004.
FORMAGGIO, Erick Berltrami. SEO : otimização de site : aplicando técnicas de otimização de sites com uma abordagem prática. Rio de Janeiro: Brasport, 2010.
GABRIEL, Martha. SEM e SEO: Dominando o marketing de busca. São Paulo:
Novatec Editora, 2009.
GOMES FILHO, João. Gestalt do objeto : sistema de leitura visual da forma. 6
ed. São Paulo, SP : Escrituras, 2004.
KRUG, Steve. Não me faça pensar. 1ª edição. São Paulo: Market Books, 2001.
LEDFORD, Jerri L. SEO – Otimização para Mecanismos de Busca Bíblia. [Tradução Marcelo Santos] 1ª edição. Rio de Janeiro: Alta Books, 2008.
MEMÓRIA, Felipe. Design para a Internet: Projetando a experiência perfeita. 7ª
reimpressão. Rio de Janeiro: Elsevier, 2005.
MORVILLE, Peter. Ambient findability : what we find changes who we become. Sebastopol, CA: O'Reilly Media, 2005.
88
NIELSEN, Jacob. Projetando websites. 6ª reimpressão. Rio de Janeiro. Elsevier,
2000.
NIELSEN, Jacob; LORANGER, Hoa. Usabilidade na Web: Projetando websites com qualidade. 1ª edição. Rio de Janeiro: Elsevier, 2007.
RODRIGUES, Bruno. Webwriting: Pensando o texto para mídia digital. 2ª edição.
São Paulo: Berkeley Brasil, 2000.
SPYER, Juliano. Conectado: O que a Internet fez com você e o que você pode fazer com ela. Rio de Janeiro: Jorge Zahar Ed., 2007.
WEINBERG, David. A nova desordem digital. Rio de Janeiro: Elsevier, 2007.
Apostilas:
Otimização de sites para Mecanismos de Pesquisa (SEO) – Guia do Google para
Iniciantes. Disponível em: http://www.google.com/intl/pt-BR/webmasters/docs/guia-
otimizacao-para-mecanismos-de-pesquisa-pt-br.pdf.
Websites:
LEVI, Flávio. Mapas mentais como ferramenta de planejamento. Webinsider, 24 mar.
2009, Disponível em: http://webinsider.uol.com.br/2009/03/24/mapas-mentais-como-
ferramenta-de-planejamento/. Acesso em: 06 abr. 2010.
NIELSEN, Jacob. breadcrumb Navigation Increasingly Useful. 10 abr. 2007.
Disponível em: http://www.useit.com/alertbox/breadcrumbs.html. Acesso em: 06 abr.
2010.
REIS, Guilhermo. Porque as pessoas se perdem ao navegar em um site? 2006.
89
Disponível em: http://www.guilhermo.com/ai_biblioteca/artigo.asp?referencia=235
Acesso em: 15 set. 2009.
90
9 APÊNDICES
Orçamento
Qde Tempo ValorAnálise heurística site institucional 1 R$ 5.000,00Análise heurística loja virtual 1 R$ 5.000,00Planejamento de SEO 1 R$ 4.800,00Wireframes 10 R$ 15.000,00Valor total R$ 29.800,00Manutenção de SEO - 6 meses R$ 1.600,00/mês
91
Esboço – Links do site
92
Esboço – Wireframe Página de Categorias
93
Esboço – Wireframe Página Inicial
94
Esboço – Wireframe Página de Produtos
95
Esboço – Estrutura do Site
96
Esboço – Campos de Formulários
97
Esboço – Estrutura de Otimização
98
Mapa do Site Estrutural
99
Wireframe – Página Inicial
100
Wireframe – Página de Categorias
101
Wireframe – Página de Produtos
102
Wireframe – Página Carrinho de Compras
103
Wireframe – Página de Cadastro
104
Wireframe – Página de Contato
105
Wireframe – Página de login
106
Wireframe – Minha Página – Trocas e Devoluções
107
Wireframe – Página de Erro
108
Wireframe – Mapa do site
109
10 ANEXOS
Projeto Experimental I