UNIVERSIDADE COMUNITÁRIA DA REGIÃO DE CHAPECÓ
              ÁREA DE CIÊNCIAS SOCIAIS APLICADAS
CURSO DE COMUNICAÇÃO SOCIAL...
PAULA CRISTINA RAMOS
                      RICARDO PRITSCH




REESTRUTURAÇÃO DA ARQUITETURA DE INFORMAÇÃO E OTIMIZAÇÃO DO...
DEDICATÓRIA




         Dedicamos este projeto aos nossos pais Odilo e Salete Pritsch, Marli e
Paulo* Ramos. Que nos ince...
AGRADECIMENTOS




       Inicialmente agradecemos à empresa Abboccato por disponibilizar as
informações necessárias para ...
RESUMO




Este projeto tem como foco a reestruturação e otimização para mecanismos de
busca do website institucional e o ...
ABSTRACT




This project focus is restructuring the interface and the search engine optimization to
the institutional and...
LISTA DE FIGURAS


Figura 1: Visibilidade do status do sistema - Loja virtual............................................3...
Figura 31: Ajudar os usuários a reconhecer, diagnosticar e se recuperar de erros -
Loja Virtual..............................
SUMÁRIO


1 INTRODUÇÃO.......................................................................................................
3.2.2 Análise de Otimização – SEO..................................................................58
4 ESTRATÉGIA DE COMU...
12

1 INTRODUÇÃO




           Foi pensando no usuário que este trabalho foi desenvolvido. A criação dos
wireframes, a re...
13

começando pela construção da reestruturação através da criação de wireframes e
desenvolvimento das estratégias de otim...
14

2 ABBOCCATO




2.1 Briefing




2.1.1 Histórico da Empresa




        A Abboccato é uma empresa de cosméticos com se...
15

         Cosméticos são vendidos em todas as épocas do ano, mas segundo o
cliente há certa sazonalidade. Datas comemor...
16



        Os preços aplicados aos produtos são acessíveis, compatíveis aos produtos.
Se comparados aos preços da conco...
17

2.1.8 Objetivos da Comunicação




       O cliente citou que, com uma boa loja virtual, com boa visibilidade na
Inter...
18

        O maior problema apontado pelo cliente na elaboração do briefing, foi a
dificuldade para encontrar a empresa e...
19

usuário perca muito tempo passeando pelo site onde ele deveria se comunicar e
interagir.
         Partindo da premissa...
20

3 ENCONTRANDO PROBLEMAS




        Para desenvolver as estratégias de reformulação dos sites é necessário
conhecer os...
21

•   Controle de Liberdade do usuário:


                  Esse conceito diz que os usuários frequentemente fazem escol...
22

                    de localizar, você perderá visitantes bem rapidamente. Eles irão para outro
                    si...
23

•   Palavras-chave (keywords):


                   muitas pessoas colocam palavras-chave demais nessa metatag tentand...
24



   •   Arquivo Robots.txt:


                      O arquivo robots.txt deve ser colocado na raiz do site para contr...
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).
      ...
26




               Figura 2: Visibilidade do status do sistema - Loja virtual




       Verificou-se no site Instituci...
27




                 Figura 4: Visibilidade do status do sistema - site institucional




        Ao entrar para ler um...
28

assim como a localização do usuário no site do que uma URL formada por códigos
como,     por   exemplo,      http://ww...
29




                Figura 6: Correspondência entre o sistema e o mundo real -
                Loja virtual




       ...
30




                 Figura 7: Correspondência entre o sistema e o mundo real -
                 site institucional



...
31




               Figura 8: Controle de Liberdade do usuário - Loja virtual




       Examinou-se no site Institucion...
32




3.2.1.4         Consistência e padrões




          Analisou-se na loja virtual: Novamente nos deparamos com o pro...
33




                Figura 11: Consistência e padrões - Loja virtual




        É inexistente a padronização de layout...
34




   Figura 13: Consistência e padrões - Loja virtual




  Figura 14: Consistência e padrões - Loja virtual




Figu...
35




                Figura 17: Consistência e padrões - Loja virtual




        Analisou-se no site Institucional: Na ...
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




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




3.2.1.5         Prevenção de erros




...
39




Figura 22: Prevenção de erros - Loja virtual
40




                Figura 23: Prevenção de erros - Loja virtual




        Observou-se no site Institucional: Mesmo p...
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 ...
43




               Figura 27: Reconhecimento em vez de memorização - Loja
               virtual




       Inicialment...
44



          Constatou-se no site Institucional: A quantidade de novidades mostradas
na página inicial é grande, a barr...
45




                  Figura 29: Design estético e minimalista - Loja virtual




       A paginação continua aparecend...
46

pode causar confusão ao internauta, já que ambos exibem os mesmos produtos,
mas com um layout diferenciado.




3.2.1....
47



         Ao passar do link 'carrinho', o botão 'comprar mais produtos' desaparece e
fica apenas o botão 'voltar para...
48




                Figura 33: Ajudar os usuários a reconhecer, diagnosticar e se
                recuperar de erros - ...
49




                Figura 35: Ajuda e documentação - Loja virtual



        O link para a ajuda de 'como comprar' est...
50

       Após análise de Otimização do site de vendas e institucional da Abboccato
foram feitas algumas considerações:

...
51

4 ESTRATÉGIA DE COMUNICAÇÃO




       Esse planejamento propõe estratégias de marketing de busca e arquitetura
de inf...
52

4.3 Objetivo de comunicação




           A reestruturação e a otimização dos sites da Abboccato tem como objetivo
au...
53

        A Internet, tendo como base Pinho (2000, p. 119), possui algumas vantagens
na publicidade online em relação a ...
54

        Neste sentido, a unificação dos sites tem grande importância tanto para a
empresa quanto para a comunicação on...
55

5 PROPOSTA DE REFORMULAÇÃO




           Com base nos problemas detalhados no diagnóstico, será proposta uma
alteraçã...
56

•   Melhoria de URL – alterar para uma URL sem códigos e variáveis
    dando importância ao uso de palavras-chave na s...
57

6 REFORMULAÇÃO




6.1 Estrutura de navegação




         O mapa de navegação foi elaborado pensando na estrutura org...
58

         Os wireframes foram desenvolvidos utilizando a ferramenta iPlotz 9, que é
própria para o desenvolvimento de w...
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...
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.
       ...
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 alg...
63




Figura 39: Wireframe - Categorias
64

       Página de produtos


       A página de produtos exibe somente o produto selecionado, tendo grande
área de exib...
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
...
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
preen...
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 ...
71

        Página de erro


        A página de erro também foi adequada ao padrão das demais páginas,
perdendo as inform...
72

         Página de contato, fale conosco


         A página de contato contém formulário para contato rápido, com inf...
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ág...
74



       Página Minha conta (Área administrativa)


       A página pessoal exibe menu personalizado de acordo com as ...
75




Figura 46: Wireframe - Página Minha Conta




         As demais páginas, não citadas neste projeto deverão ter o m...
76

        Mensagens de Prevenção de Erros


        As mensagens de erro/prevenção de erro durante o preenchimento de
fo...
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
na...
78

         Espuma de Banho Flor de Lótus Spa House 300ml – Abboccato




6.3.2 Descrição das Páginas




         De aco...
79

        Conforme Formaggio (2010, p. 48), Mesmo com o desuso da metatag
keywords pelos grandes buscadores como o Googl...
80

realizada, também ajuda a memorização do link pelo usuário. Atendendo ao critério
“visibilidade e status do sistema”, ...
81

       Subtítulo nível 3 (Página do Produto)
       <h1>Espuma de Banho Flor de Lótus 300ml</h1>
       <p>Descrição d...
82



       URL do link: http://www.abboccato.com.br/banho/spa-house/espuma-de-
banho-flor-de-lotus-300ml


       Título...
83

        Local do arquivo robots.txt: http://www.abboccato.com.br/robots.txt


        Exemplo do arquivo robots.txt:

...
84

     <urlset
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">


     <url>
         <loc>http://wwwabboccato.com.b...
85

7 CONSIDERAÇÕES FINAIS




        No início, imaginávamos todo este processo de uma forma, seguindo uma
série de pass...
Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato
Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato
Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato
Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato
Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato
Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato
Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato
Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato
Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato
Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato
Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato
Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato
Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato
Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato
Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato
Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato
Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato
Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato
Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato
Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato
Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato
Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato
Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato
Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato
Upcoming SlideShare
Loading in …5
×

Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato

2,690 views
2,555 views

Published on

Projeto Experimental - Publicidade e Propaganda - Unochapecó 2010

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,690
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
33
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Reestruturação da arquitetura de informação e a otimização do conteúdo para os motores de busca da loja virtual da Abboccato

  1. 1. 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 Ramos Ricardo 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
  2. 2. PAULA CRISTINA RAMOS RICARDO 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.
  3. 3. 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
  4. 4. 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.
  5. 5. 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.
  6. 6. 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.
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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.
  13. 13. 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.
  14. 14. 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.
  15. 15. 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.
  16. 16. 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.
  17. 17. 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.
  18. 18. 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 encontrabilidade 3. 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)
  19. 19. 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ística 4 baseado no modelo de Nielsen 5 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.
  20. 20. 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
  21. 21. 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.
  22. 22. 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.
  23. 23. 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
  24. 24. 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
  25. 25. 26 Figura 2: Visibilidade do status do sistema - Loja virtual 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 3: Visibilidade do status do sistema - site institucional
  26. 26. 27 Figura 4: Visibilidade do status do sistema - site institucional 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).
  27. 27. 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). Figura 5: Visibilidade do status do sistema - site institucional 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).
  28. 28. 29 Figura 6: Correspondência entre o sistema e o mundo real - Loja virtual 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).
  29. 29. 30 Figura 7: Correspondência entre o sistema e o mundo real - site institucional 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.
  30. 30. 31 Figura 8: Controle de Liberdade do usuário - Loja virtual 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 9: Controle de Liberdade do usuário - site institucional
  31. 31. 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
  32. 32. 33 Figura 11: Consistência e padrões - Loja virtual É 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 12: Consistência e padrões - Loja virtual
  33. 33. 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
  34. 34. 35 Figura 17: Consistência e padrões - Loja virtual 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.
  35. 35. 36 Figura 18: Consistência e padrões - site institucional Figura 19: Consistência e padrões - site institucional
  36. 36. 37 Figura 20: Consistência e padrões - site institucional
  37. 37. 38 Figura 21: Consistência e padrões - site institucional 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).
  38. 38. 39 Figura 22: Prevenção de erros - Loja virtual
  39. 39. 40 Figura 23: Prevenção de erros - Loja virtual 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.
  40. 40. 41 Figura 24: Prevenção de erros - site institucional Figura 25: Prevenção de erros - site institucional
  41. 41. 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. Figura 26: Reconhecimento em vez de memorização - Loja virtual 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).
  42. 42. 43 Figura 27: Reconhecimento em vez de memorização - Loja virtual 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 28: Reconhecimento em vez de memorização - Loja virtual
  43. 43. 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).
  44. 44. 45 Figura 29: Design estético e minimalista - Loja virtual 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). Figura 30: Design estético e minimalista – Loja Virtual 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
  45. 45. 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
  46. 46. 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). Figura 32: Ajudar os usuários a reconhecer, diagnosticar e se recuperar de erros - Loja Virtual 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.
  47. 47. 48 Figura 33: Ajudar os usuários a reconhecer, diagnosticar e se recuperar de erros - Loja Virtual 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). Figura 34: Ajudar os usuários a reconhecer, diagnosticar e se recuperar de erros - site institucional 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).
  48. 48. 49 Figura 35: Ajuda e documentação - Loja virtual 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). Figura 36: Ajuda e documentação - Loja virtual No site Institucional: Não se aplica. 3.2.2 Análise de Otimização – SEO
  49. 49. 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;
  50. 50. 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.
  51. 51. 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.
  52. 52. 53 A Internet, tendo como base Pinho (2000, p. 119), possui algumas vantagens 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 PDV 8 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.
  53. 53. 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.
  54. 54. 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;
  55. 55. 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;
  56. 56. 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. Figura 37: Estrutura de Navegação 6.2 Wireframes
  57. 57. 58 Os wireframes foram desenvolvidos utilizando a ferramenta iPlotz 9, 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/
  58. 58. 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",
  59. 59. 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.
  60. 60. 61 Figura 38: Wireframe - Página Inicial
  61. 61. 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.
  62. 62. 63 Figura 39: Wireframe - Categorias
  63. 63. 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.
  64. 64. 65 Figura 40: Wireframe - Página Produto
  65. 65. 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.
  66. 66. 67 Figura 41: Wireframe - Carrinho de Compras
  67. 67. 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.
  68. 68. 69 Figura 42: Wireframe - Página de Cadastro
  69. 69. 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
  70. 70. 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
  71. 71. 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
  72. 72. 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.
  73. 73. 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.
  74. 74. 75 Figura 46: Wireframe - Página Minha Conta 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.
  75. 75. 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.
  76. 76. 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)
  77. 77. 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
  78. 78. 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
  79. 79. 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>
  80. 80. 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.
  81. 81. 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.
  82. 82. 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"?>
  83. 83. 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>
  84. 84. 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

×