Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de...

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 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 18: Consistência e padrões - site institucional.................................................42




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


Loja Virtual...................................................................................................................55


Loja Virtual...................................................................................................................55


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


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


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



34





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.


36

Figura 18: Consistência e padrões - site institucional


37


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


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



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.


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


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


• 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


• 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

Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de...

Design

Transcript of Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de...