Issuu on Google+

ARQUITETURA DA INFORMAÇÃO

WEBSITE DE MERCEARIA TRABALHO COORDENADO PELO PROFESSOR CARLOS JOSÉ


ANDERSON LIMA

BRUNA CLAUDIA

SOLIMAR CORREIA

equipe

ALEXANDRE YAMAMOTO

SUMÁRIO 04

Objetivos/Metas

06

Lista de Objetivos/Metas

08

Experiência do Usuário

09

Público-Alvo

10

Personas+Cenários

16

Análise Competitiva

28

Tabela Comparativa

30

Conteúdo do Site

31

Conteúdo Estático

32

Conteúdo Dinâmico

33

Função e Transação

34

Card-sorting

36

Mapa do Site

38

Fluxo de Navegação

40

Inventário de Conteúdo

41

Conclusão


E

objetivos

OBJETIVOS/METAS

struturar um website que tenha um visual simples, prático e que possua as ferramentas que os usuários precisam, mostrando a missão de uma mercearia do século XXI, com um blog e principalmente com interação com as redes sociais como Facebook, Twitter, Foursquare e Instagram. Esta interação deverá ser feita com uma logística e arquiterura de eventos e promoções da própria empresa (departamento de marketing e/ou RH). Estes artifícios promocionais foram encontrados em 20% das concorrentes pesquisadas e apenas 30% possuiam interação com apenas o Facebook. Todos os websites das concorrentes possuem poucas visitas e baixo retorno de já-visitantes ou acesso de novos visitantes.

8.9%

de todos os sites do mundo usam o WordPress como CMS.

A curto prazo, o objetivo e meta é de garantir que a missão e conceito de uma mercearia do século XXI seja dissiminado e construir uma rede de clientes com as redes sociais, tendo curtidas na página do Facebook da empresa, seguidores no Twitter e no Instagram e divulgar informações do local no mapa do Foursquare. Isto é possível criando uma página estática com texto objetivo sobre a missão e conceito. E a integração com as mídias sociais é feita com o cadastramento da empresa nas respectivas redes. A longo prazo o objetivo e meta é de ganhar mais adeptos das redes sociais e trazer mais retorno ao website usando artifícios promocionais. Garantir que o website alcance um pagerank 5 ou 6 no Google executando um bom SEO já no início e conforme evolução do website.

4

79%

Esta é a colocação do Brasil no ranking mundial 2012 em participação e uso das redes sociais.

das empresas no mundo inteiro usam pelo menos uma mídia social como ferramenta corporativa.

5


LISTA DE OBJETIVOS/METAS Construção do website por um CMS, o WordPress

Um website estático é muito simples e monótono. Geralmente sites assim são corporativos e não possuem um objetivo forte que vá além do conhecimento e razão da empresa. Servem como um “cartão de visita digital”. Um website dinâmico já trabalha com conteúdo renovável, o que atrai mais visitantes e gera maior interesse e tempo de permanência. Para melhor trabalhar com um website dinâmico é se utilizando de um CMS, e o mais conceituado, atualizado e utilizado hoje em dia, é o WordPress, por isso a escolha..

Preencher conteúdo do website

Construir um website e seu layout apenas não basta. Antes de finalizar o site é preciso preencher com conteúdo, ou ninguém que visitará o website irá permanecer por mais de poucos segundos. O conteúdo é o que vai dar a vida ao projeto.

Criar a página do Facebook da empresa

O Facebook é a principal mídia social. Quase todo mundo possui um perfil nesta rede e com base na pesquisa feita pelo www.gestordemarketing.com, no Brasil há mais de 50 milhões de usuários ativos e destes, 59% acessam seus perfis diariamente. Todos os dias há 1.6 bilhões de curtidas, 160 milhões de postagens e 460 milhões de uploads de fotos. Um fato interessante é que 87% dos 50 milhões são usuários entre 18 à 55 anos, idade do público-alvo da nossa pesquisa.

Criar uma conta do Twitter da empresa

Assim como o Facebook, o Twitter é uma rede social ativa e com muitos usuários no mundo e no Brasil. A grande vantagem do uso desta rede se dá a grande capacidade de disseminar conteúdo.

Criar uma conta do Instagram da empresa

Com a compra do Instagram pelo Facebook, esta rede social mais focada em fotos e imagens é uma grande oportunidade de repassar conteúdo gráfico pelas redes sociais em geral ou apenas para seus seguidores. Como uma mercearia trabalha com muitos produtos alimentícios e há uma imensa comunidade de “food lovers” no instagram, é mais um nicho a ser explorado e com excelente potencial de divulgação e retorno.

Criar uma conta do Foursquare da empresa

Uma conta no Foursquare ajudaria não somente e divulgar a localidade e informações gerais da empresa, mas também quantas pessoas desta rede já visitaram o local.

6

Linkar as redes sociais no website

Após estabelecer uma conta da empresa nas mídias sociais citadas e ter o website preenchido com conteúdo e finalizado, é hora de fazer o link entre as redes e o website. Não somente incluir ícones das redes sociais na homepage, mas incluir as APIs que elas disponibilizam ao web developer. Exemplo: no blog, incluir um botão de curtir do Facebook em cada postagem, assim como o botão de retweet e assim vai. Outro exemplo seria usar o sistema de comentários do Facebook e de agilizar cadastramento de clientes/parceiros usando o login do Facebook ou Twitter.

Gerenciamento de Marketing

Ter um cadastro nas redes sociais e um website apenas não basta. Precisa haver uma maneira de fazer com que os antigos e novos clientes/visitantes tenham um incentivo em compartilhar conteúdo e retornar ao website e às redes. E não há melhor método do que criar uma logística de promoções e marketing. Isto é algo que deve ser trabalhado dentro dos limites da empresa, mas que deve ser constante. Criar um artigo no blog sobre uma promoção de um sorteio de uma caixa de produtos importados com vínculo nas redes iria gerar um imenso tráfego de visita e de compartilhamento, transformando um baixo investimento em um grande retorno e muitos acessos. Afinal, o intuito dos acesso ao website não é acumular estatística apenas, mas isto indica que a marca da empresa está ficando famosa, e isto é excelente.

Garantir um bom SEO para ter um melhor pagerank no Google

A princípio, toda a estratégia citada só começa a dar um retorno com a publicidade gerada pelos atuais e antigos clientes e frequentadores do comércio. Para gerar um tráfego de novo visitantes, entretanto, é preciso trabalhar com o SEO (search engine optimization), estratégia usada para otimizar o desempenho do seu site em websites de busca, como o Google, o principal. Isto é feito basicamente com a organização e elementos chaves que os “crawlers” e “bots” do Google se utilizam para classificar seu pagerank no mesmo. Parece fácil, mas o resultado só surte efeito com o passar do tempo, pois a tecnologia de inteligência artificial do Google ajuda a determinar qual website vale a pena a aparecer na primeira página de resultados de pesquisa com determinados termos de busca. É uma ferramenta IMPORTANTÍSSIMA hoje em dia, mas muito negligenciada por muitos e que só traz frutos depois de um longo prazo trabalhando de uma maneira organizada.

Manter as redes sociais ativas

Concluindo os objetivos acima, tudo o que resta é garantir que a equipe formada pela empresa para cuidar do conteúdo do website e das redes sociais mantenham uma atualização constante. Novamente, o importante desta estratégia é a divulgação da marca e da empresa, e não estatísticas (a princípio). Portanto, quanto mais visitas, melhor.

7


EXPERIÊNCIA DO USUÁRIO

P

ara abrir este tópico, constatamos através de uma pesquisa de campo que a maior parte dos clientes de mercearias são de poder aquisitivo mais elevado, entre as classes A e B. Alguns outros frequentadores da classe C são “visitantes”, indo uma vez ou outra ao estabelecimento. Como as “novas” mercearias trabalham em geral com produtos importados e quase sempre com preços mais altos, o foco está voltado em quem possui um poder aquisitivo mais elevado. De acordo com a pesquisa realizada com frequentadores e clientes de mercearias, 100% deles possuem uma conta ou perfil no Facebook. 70% possuem um perfil no Twitter, 100% possuem um smartphone com acesso à internet e destes, 70% usam o Instagram e 90% deles usam o Foursquare. Nenhum deles visitam regularmente o website da mercearia na qual são clientes e a resposta do motivo foram quase todas as mesmas: não há atrativos no website ou participação ativa nas redes sociais e promoções.

59% Esta é a porcentagem de retorno diário dos 50 milhões de usuários brasileiros ativos do Facebook ao website da rede social. Destes, 17 milhões acessam através de um dispositivo móvel. Hoje é essencial usar o Facebook como uma ferramenta corporativa.

8

Outra experiência negativa com os atuais websites de mercearias, é que alguns deles foram completamente projetados na tecnologia Flash e não possuem uma versão mobile, impossibilitando a visita do mesmo por um iDevice (iPhone, iPad, iPod Touch) ou mesmo atrapalhando a navegação de quem possui um dispositivo móvel Android.

PÚBLICO-ALVO Pessoas com médio/alto poder aquisitivo

Homens e mulheres entre 18 ~ 55 anos

Pessoas com conhecimento tecnológico

Público ativo nas redes sociais

80% dos que já visitaram alguma vez o website da mercearia na qual costuma frequentar, reclamam do visual e da falta de conteúdo. 70% dos entrevistados gostariam de ver promoções no “News Feed” no perfil do Facebook deles e 80% retornariam ao site se houvesse algum atrativo/conteúdo dinâmico (blog). No geral, a pesquisa mostrou que não somente os usuários não retornam como sequer visitam os websites dos estabelecimentos. E os que chegaram a visitar, reclamaram do design (visual e interatividade) ou da falta de participação com as redes sociais.

É IMPORTANTE TER UMA VERSÃO DO SEU WEBSITE PARA DISPOSITIVOS MÓVEIS O acesso à internet através de dispositivos móveis está cada vez mais massificado. Segundo a Teleco, no Brasil existem cerca de 60 milhões de aparelhos celulares com tecnologia 3G. Se você ficar de fora desta, seu website perderá uma grande parcela de possíveis visitas justamente por não ter uma versão apropriada para esses dispositivos. Flash por exemplo é bom abandonar. Adote o HTML 5 pois além de ser o novo padrão, é compatível em qualquer plataforma, desktop ou mobile.

UTILIZE AS MÍDIAS SOCIAIS A SEU FAVOR

9


PERSONAS+CENÁRIOS

TEREZA MELO

WALTER MAGALHÃES

CAROL YU

E

ntrevistamos algumas pessoas e destas, 10 foram selecionadas pois são frequentadores ativos das “novas” mercearias. Através delas que definimos o perfil do público-alvo e através delas também que foi possível estabelecer as necessidades, demandas e dificuldades existentes em relação aos websites das mercearias nas quais são clientes e ainda mais, os objetivos e metas também foram mais claros após executarmos as pilhas de entrevistas. O eixo da arquitetura da informacão se apóia na pesquisa de personas, portanto, se não há este levantamento, é praticamente impossível dar continuidade em um projeto de website que visa basicamente atender as necessidades dos visitantes. Mesmo o público-alvo sendo pessoas de um poder aquisitivo mais elevado, eles não descartam promoções. E quando os mesmos se referem às promoções, não necessariamente querem um preço mais baixo. Muitas vezes procuram por pacotes de produtos em certas épocas do ano, como uma cesta de produtos importados na época do natal, ou um vinho importado da Itália mais uma caixa de chocolates suíços no dias dos namorados. Quase todos, na verdade, 80% gostariam de encontrar estas promoções circulando pelo Facebook deles. Muitos gostariam até de uma interatividade mais avançada, como um aplicativo de smartphone (iOS e/ou Android) que possibilitasse realizar compras on-demand (o que não é o caso da nossa pesquisa de campo, mas foi interessante saber). Conforme será visto a seguir, a maior deficiência dos websites das mercearias de acordo com este levantamento, são: desorganização, falta de conteúdo, sem atrativos (promoções), programação visual precária e falta de praticidade na navegação.

10

IDADE: ESTADO CIVIL: ESCOLARIDADE: PROFISSÃO: RENDA MENSAL: FILHOS: BEBE: FUMA: CLASSE: HOBBIE: SMARTPHONE: TABLET: COMPUTADOR: FACEBOOK: TWIT TER: INSTAGRAM: FOURSQUARE:

30 Solteira Superior Completo Advogada R$5.500 0 Sim Sim B Sair com os amigos iPhone 4S iPad 2 Notebook Sim Não Sim Sim

IDADE: ESTADO CIVIL: ESCOLARIDADE: PROFISSÃO: RENDA MENSAL: FILHOS: BEBE: FUMA: CLASSE: HOBBIE: SMARTPHONE: TABLET: COMPUTADOR: FACEBOOK: TWIT TER: INSTAGRAM: FOURSQUARE:

35 Casado Superior Completo Gerente R$12.500 2 Sim Não A Games iPhone 5 iPad 4 Desktop e Notebook Sim Sim Não Sim

IDADE: ESTADO CIVIL: ESCOLARIDADE: PROFISSÃO: RENDA MENSAL: FILHOS: BEBE: FUMA: CLASSE: HOBBIE: SMARTPHONE: TABLET: COMPUTADOR: FACEBOOK: TWIT TER: INSTAGRAM: FOURSQUARE:

28 Casada Superior Completo Projetista R$4.300 1 Socialmente Não B Viajar Galaxy S3 iPad 3 Notebook Sim Sim Sim Sim

O que gostaria de encontrar num site de mercearia?  Promoções e frete grátis.

O que gostaria de encontrar num site de mercearia?  Promoções, novidades, delivery, cardápio do dia.

O que gostaria de encontrar num site de mercearia?  Promoções e vendas online.

Visita o website da mercearia que frequenta? Não, pois o site é desorganizado, e não é direto.

Visita o website da mercearia que frequenta? Não, pois não gosta do visual do site.

Visita o website da mercearia que frequenta? Não, pois não há atrativo nenhum no site.

11


VICTOR FERRAZ

IDADE: ESTADO CIVIL: ESCOLARIDADE: PROFISSÃO: RENDA MENSAL: FILHOS: BEBE: FUMA: CLASSE: HOBBIE: SMARTPHONE: TABLET: COMPUTADOR: FACEBOOK: TWITTER: INSTAGRAM: FOURSQUARE:

25 Solteiro Superior Completo Web Designer R$6.000 ~ 8.000 0 Sim Sim B Games e Baladas iPhone 5 iPad 4 Desktop e Notebook Sim Sim Sim Sim

FLÁVIA QUEIROZ

IDADE: ESTADO CIVIL: ESCOLARIDADE: PROFISSÃO: RENDA MENSAL: FILHOS: BEBE: FUMA: CLASSE: HOBBIE: SMARTPHONE: TABLET: COMPUTADOR: FACEBOOK: TWIT TER: INSTAGRAM: FOURSQUARE:

36 Divorciada Superior Completo Bióloga R$10.000 1 Socialmente Não A Tocar gaita iPhone 4 iPad 3 Notebook Sim Não Sim Não

RONALDO NAKAMURA

IDADE: ESTADO CIVIL: ESCOLARIDADE: PROFISSÃO: RENDA MENSAL: FILHOS: BEBE: FUMA: CLASSE: HOBBIE: SMARTPHONE: TABLET: COMPUTADOR: FACEBOOK: TWIT TER: INSTAGRAM: FOURSQUARE:

55 Casado Superior Completo Chef R$14.000 4 Socialmente Não A Culinária iPhone 5 iPad 3 Desktop e Notebook Sim Sim Não Sim

WAGNER DE OLIVEIRA

IDADE: ESTADO CIVIL: ESCOLARIDADE: PROFISSÃO: RENDA MENSAL: FILHOS: BEBE: FUMA: CLASSE: HOBBIE: SMARTPHONE: TABLET: COMPUTADOR: FACEBOOK: TWIT TER: INSTAGRAM: FOURSQUARE:

28 Casado Superior Completo Game Designer R$7.800 0 Não Não B Games e Viajar Galaxy S3 iPad 4 Desktop e Notebook Sim Sim Sim Sim

O que gostaria de encontrar num site de mercearia?  Novidades e promoções.

O que gostaria de encontrar num site de mercearia?  Promoções.

O que gostaria de encontrar num site de mercearia?  Delivery.

O que gostaria de encontrar num site de mercearia?  Promoções, delivery, novidades.

Visita o website da mercearia que frequenta? Não, pois não há conteúdo no website.

Visita o website da mercearia que frequenta? Não, pois não é prático e nunca encontra o que quer.

Visita o website da mercearia que frequenta? Somente para pegar o número de telefone.

Visita o website da mercearia que frequenta? Não. Não há promoções e não tem conteúdo.

12

13


JULIANE VASCONCELOS

FERNANDO TODESCHINI

PEDRO LUIZ

CENÁRIO 1 Pedro Luiz, 19 anos, residente em Boa Viagem - PE, às vésperas de seu aniversário, decide procurar um lugar descontraído e diferente de um simples barzinho para comemorar com os amigos, em uma busca pela internet através de seu smartphone o garoto se depara com algumas opções, porém, os websites que ele encontrou não possuiam uma versão mobile, impossibilitando então o nosso querido jovem de descobrir a programação e o telefone do local.

CENÁRIO 2 IDADE: ESTADO CIVIL: ESCOLARIDADE: PROFISSÃO: RENDA MENSAL: FILHOS: BEBE: FUMA: CLASSE: HOBBIE: SMARTPHONE: TABLET: COMPUTADOR: FACEBOOK: TWITTER: INSTAGRAM: FOURSQUARE:

31 Casada Superior Completo Pastora R$6.000 2 Não Não B Compras Galaxy S2 iPad 2 Desktop e Notebook Sim Sim Não Sim

IDADE: ESTADO CIVIL: ESCOLARIDADE: PROFISSÃO: RENDA MENSAL: FILHOS: BEBE: FUMA: CLASSE: HOBBIE: SMARTPHONE: TABLET: COMPUTADOR: FACEBOOK: TWIT TER: INSTAGRAM: FOURSQUARE:

34 Casado Superior Completo Empresário R$18.000 ~ 25.000 2 Sim Não A Viajar e Futebol iPhone 5 iPad 4 Desktop e Notebook Sim Não Sim Sim

IDADE: ESTADO CIVIL: ESCOLARIDADE: PROFISSÃO: RENDA MENSAL: FILHOS: BEBE: FUMA: CLASSE: HOBBIE: SMARTPHONE: TABLET: COMPUTADOR: FACEBOOK: TWIT TER: INSTAGRAM: FOURSQUARE:

19 Solteiro Superior Incompleto Estagiário R$1.200 0 Sim Não A Games, tocar violão Galaxy S3 iPad 3 Desktop e Notebook Sim Sim Sim Sim

O que gostaria de encontrar num site de mercearia?  Promoções e vendas online.

O que gostaria de encontrar num site de mercearia?  Indiferente

O que gostaria de encontrar num site de mercearia?  Promoções, novidades, frete grátis, delivery.

Visita o website da mercearia que frequenta? Não. Muito desorganizado e não há conteúdo.

Visita o website da mercearia que frequenta? Não, pois não tem interesse no mesmo.

Visita o website da mercearia que frequenta? Não, pois não há interesse e o website é “feio”.

14

Carol Yu navega pelo seu Facebook e procura a página de uma mercearia, onde há um tempo atrás havia ido com uns amigos, infelizmente não encontra nada referente e decide procurar diretamente pelo website. Após algum tempo ela o encontra e começa então a navegar pelo cardápio e carta de vinhos do site. Ao lembrar do vinho maravilhoso que havia comprado naquele dia, começou a pesquisar por ele, mas como a carta de vinhos era grande e ela queria um específico, deu uma olhada geral na página a procura de uma barra de pesquisa, mas para sua infelicidade, não havia nenhuma. Irritada, Carol decide fechar a página e ir a um supermercado comprar o vinho.

CENÁRIO 3 Ronaldo Nakamura decidiu procurar no website de sua mercearia favorita uma receita diferente, fazer ele mesmo e apreciar com sua esposa. Ao abrir a página, Ronaldo se deparou com uma tipografia manuscrita, com letras pequenas, que o impossibilitavam de encontrar até mesmo o menu/cardápio, devido seu problema de visão (hipermetropia) devido a idade.

15


P

ara compreender e suprir melhor as necessidades e as exigências do público-alvo, é preciso também fazer uma análise das empresas concorrentes e seus respectivos websites: como foram projetados, programação visual e outros fatores que influenciam na boa ou má experiência de navegação do usuário. Escolhemos 10 empresas do mesmo segmento e área de atuação com o intuito de apresentar seus pontos positivos e negativos em função do feedback obtido das entrevistas com frequentadores e clientes de mercearias. A princípio foi executada uma análise individual de cada website e dada uma respectiva pontuação pessoal do grupo em relação à experiência de uso obtida durante o andamento dessa arquitetura de informação. Os quesitos escolhidos foram a programação visual, praticidade, conteúdo e o nível de interação com as mídias socias que o website oferece ao usuário. No final apresentaremos uma tabela e um infográfico comparativo com o intuito de acentuar as maiores deficiências, para que estas não sejam reproduzidas no website a ser elaborado. A principal finalidade da análise competitiva é de perceber falhas comuns e extraordinárias cometidas muitas vezes por profissionais da área, mas que justamente não executaram uma pesquisa no campo de atuação da contratante.

16

análise

ANÁLISE COMPETITIVA

3

PONTUAÇÃO MÉDIA

DROGHERIA HTML COM FLASH, ACESSO LENTO E SEM DESIGN ELABORADO, MENUS CONFUSOS E SEM INTERATIVIDADE COM AS REDES SOCIAIS.

E

sta mercearia se localiza na Itália e seu website é feito em HTML com algumas animações em Flash. Tem um acesso lento e não possui um design elaborado. O menu é uma mesclagem de um menu horizontal com menu vertical, ocupando muito espaço do layout e que poderia ser simplificado por um menu do estilo “drop down”. Além destes fatores, não possui nenhuma conectividade com as redes sociais como Facebook.

URL: http://www.drogheria.com/ita/index.html

PROGRAMAÇÃO VISUAL

PRATICIDADE

CONTEÚDO

MÍDIAS SOCIAIS

17


3

PONTUAÇÃO MÉDIA

L’ÉPICERIE

4

PONTUAÇÃO MÉDIA

MERCEARIA CAMPOS

ELABORADO EM HTML, ACESSO RÁPIDO, MAS VISUAL MAL ELABORADO. MENUS COM TIPOGRAFIA MANUSCRITA E INTERATIVIDADE COM O FACEBOOK.

WEBSITE EM FLASH, PRÁTICO MAS PRECÁRIA PROGRAMAÇÃO VISUAL. MENUS POR GRAVURAS E SEM INTEGRAÇÃO COM AS REDES SOCIAIS.

E

L

URL: http://www.lepicerie.com.br/

URL: http://www.merceariacampos.com.br/

sta mercearia está instalada em São Paulo - SP e até o início da pesquisa, estava com o website fora do ar, o que já acumulou muitos pontos negativos. Para piorar, a tipografia manuscrita usada no menu é quase ilegível, atrapalhando a navegação em um website com uma programação visual totalmente precária. As cores escolhidas e os filtros usados nas fotografias não mesclam e não transmitem a sensação de “antique” que possivelmente os responsáveis pela criação queriam passar. Há um link para a página da empresa no Facebook.

18

ocalizada em Campos do Jordão - SP, a ‘Mercearia Campos’ possui um website em Flash, o que faz em alguns momentos com que o usuário espere a página carregar. O site é prático mas, por outro lado seu design não é bem elaborado, o menu encontra-se na parte inferior representado por gravuras. Como visto na imagem acima, o website não se ajusta à tela, ficando sempre um quadro contendo as informações de determinado menu e um fundo que vai variado as cores de acordo com o mesmo. Não possui link com as redes sociais.

PROGRAMAÇÃO VISUAL

PRATICIDADE

PROGRAMAÇÃO VISUAL

PRATICIDADE

CONTEÚDO

MÍDIAS SOCIAIS

CONTEÚDO

MÍDIAS SOCIAIS

19


4

PONTUAÇÃO MÉDIA

MERCEARIA DO CONDE

4

PONTUAÇÃO MÉDIA

MERCEARIA DO FRANCÊS

WEBSITE EM FLASH COM BOA PROGRAMAÇÃO VISUAL MAS É LENTO. MENU CONFUSO, POSSUI PÁGINA NO FACEBOOK E LINK PARA A REDE.

WEBSITE EM HTML, PRÁTICO E BOA PROGRAMAÇÃO VISUAL. FALTA DE CONTEÚDO E NÃO POSSUI LINK COM AS REDES SOCIAIS.

A

A

URL: http://www.merceariadoconde.com.br

URL: http://merceariadofrances.com.br/

’Mercearia do Conde’ fica no Jd. Paulistano - São Paulo - SP. Seu website é feito em Flash, o que mais uma vez nos leva aos problemas de esperar a pagina carregar. Não bastasse isso, o menu gira como um penduricalho de berço, tornando difícil clicar no item desejado. Segue o mesmo estilo do website anterior, não se ajustando à tela e tendo a cor de fundo alterada sempre que selecionado um novo menu. Possui link para o Facebook.

20

’Mercearia do Francês’ pode ser encontrada em três diferentes endereços em São Paulo, com um website também desenvolvido em Flash, neste até som foi colocado. Apesar de ter um design bem desenvolvido, o website pode ser resumido à uma história sobre as três unidades da mercearia e à 4 receitas, também não possui link para nenhuma rede social.

PROGRAMAÇÃO VISUAL

PRATICIDADE

PROGRAMAÇÃO VISUAL

PRATICIDADE

CONTEÚDO

MÍDIAS SOCIAIS

CONTEÚDO

MÍDIAS SOCIAIS

21


4.5

PONTUAÇÃO MÉDIA

MERCEARIA ZN

4

PONTUAÇÃO MÉDIA

MERCEARIA SÃO ROQUE

WEBSITE EM HTML, PRÁTICO E BOA PROGRAMAÇÃO VISUAL. BOM CONTEÚDO ESTÁTICO MAS SEM INTERATIVIDADE COM AS REDES SOCIAIS.

WEBSITE EM HTML, PRÁTICO E PROGRAMAÇÃO VISUAL REGULAR. POSSUI CONTEÚDO MAS NÃO POSSUI LINK COM AS REDES SOCIAIS.

E

A

URL: http://merceariazn.com.br/

URL: http://merceariasaoroque.com.br/

sta se localiza no Jd. França - São Paulo - SP. O website é desenvolvido em HTML, com um visual agradável e bem intuitivo, entretanto, não possui link para nenhuma rede social e por ter conteúdo estático, mesmo sendo bem elaborado, não é atrativo pois o conteúdo mesmo sendo completo, é estático.

22

’Mercearia São Roque’ se fragmenta em 3 endereços diferentes, inicialmente é apresentado ao usuário uma página com as opções de acesso aos três. Com a mesma base visual, o que muda é o conteudo referente a cada mercearia. Em todos eles podemos encontrar o mesmo erro, em algumas áreas o texto não se ajusta ao espaço reservado a eles, chegando até a ficar palavra por cima de palavra, o que além de não ser agradavél visualmente, atrapalha a compreenção do texto. Também não possui link para as redes sociais.

PROGRAMAÇÃO VISUAL

PRATICIDADE

PROGRAMAÇÃO VISUAL

PRATICIDADE

CONTEÚDO

MÍDIAS SOCIAIS

CONTEÚDO

MÍDIAS SOCIAIS

23


5

PONTUAÇÃO MÉDIA

MERCADO 153

5

PONTUAÇÃO MÉDIA

BAR MERCEARIA

WEBSITE EM FLASH COM BOA PROGRAMAÇÃO VISUAL MAS É LENTO. MENU CONFUSO, POSSUI PÁGINA NO FACEBOOK E LINK PARA A REDE.

WEBSITE EM HTML, PRÁTICO E MÉDIA PROGRAMAÇÃO VISUAL FALTA DE CONTEÚDO E POSSUI LINK COM O FACEBOOK E TWITTER.

O

O

URL: http://www.grupocouvert.com.br/mercado153/index.php

URL: http://www.barmercearia.com.br/

’Mercado 153’ pode ser encontrado em vários lugares do Brasil, inclusive aqui no Pernambuco, Distrito Federal, Ceará, entre outros. Desenvolvido em PHP, o website possui um visual agradável mas é lento. Possui links para as mídias sociais Facebook e Twitter.

24

‘Bar Mercearia’ está situado em Campo Grande - MS e seu website é um mistério. Possivelmente foi projetado em algum CMS e está totalmente incompleto. Provavelmente, como muitos, deve ser apenas um tema de CMS alterado, o que gera uma programação visual razoável dependendo da escolha e do nível de alteração aplicado, entretanto, peca na falta de criatividade. Há maior presença da empresa nas redes sociais Facebook e Twitter.

PROGRAMAÇÃO VISUAL

PRATICIDADE

PROGRAMAÇÃO VISUAL

PRATICIDADE

CONTEÚDO

MÍDIAS SOCIAIS

CONTEÚDO

MÍDIAS SOCIAIS

25


7

PONTUAÇÃO MÉDIA

CASA SANTA LUZIA MERCEARIA

ANALISAR A CONCORRÊNCIA E AS TENDÊNCIAS DE USO NA WEB, TE DEIXA SEMPRE UM PASSO A FRENTE.

WEBSITE EM PHP COM BOA PROGRAMAÇÃO VISUAL E RÁPIDO. TEM ALGUNS LINKS FALSOS PARA AS REDES SOCIAIS.

A

‘Casa Santa Luzia’ é na verdade um e-commerce, sendo o único da lista de análise competitiva. Embora não seja o mesmo ramo de website proposto ao trabalho, uma loja virtual para uma mercearia pode ser um excelente objetivo/meta a longo prazo, se houver uma boa estratégia e cobertuda de ação. Possui uma programação visual agradável e é uma loja virtua prática. Embora um pouco escondido, há um link de conteúdo estático falando sobre a história e missão da empresa, tornando o website mais completo ainda. A única falha são os links das redes sociais do Facebook e do YouTube que não levam o usuário a lugar algum. Mas os links do Twitter e Instagram nos levam aos perfis da empresa nas respectivas mídias.

URL: http://www.santaluzia.com.br

26

PROGRAMAÇÃO VISUAL

PRATICIDADE

CONTEÚDO

MÍDIAS SOCIAIS

27


TABELA COMPARATIVA DROGHERIA

L’ÉPICERIE

MERCEARIA CAMPOS

MERCEARIA DO CONDE

MERCEARIA DO FRANCÊS

MERCEARIA ZN

MERCEARIA SÃO ROQUE

MERCADO 153

BAR MERCEARIA

CASA SANTA LUZIA

Institucional e Corporativo

Institucional

Institucional

Institucional

Institucional

Institucional

Institucional

Institucional e Corporativo

Institucional

e-Commerce

“Chi siamo”

“Bistral”

-

“História”

-

“Sobre a Mercearia ZN”

“A Mercearia”

“Mercado 153”

“O Bar”

“Nossa Casa”

Flash

Flash

Flash

HTML, JavaScript

Flash

HTML, PHP

HTML, PHP, JavaScript/jQuery

HTML, JavaScript, SQL, PHP

-

-

-

TIPO DO WEBSITE ACESSO RÁPIDO INSTITUCIONAL CONTEÚDO DINÂMICO VERSÃO MOBILE DO SITE TECNOLOGIAS

HTML, JavaScript, HTML, JavaScript/ Flash jQuery

PROGRAMAÇÃO VISUAL PRATICIDADE CONTEÚDO REDES SOCIAIS

-

-

Representa NÃO ou abaixo de 5 pontos Representa SIM ou acima de 5 pontos

28

29


CONTEÚDO DO SITE

CONTEÚDO ESTÁTICO

C

C

om base nos objetivos/metas, com a definição do público-alvo, personas e cenários e a análise competitiva, podemos agora estabelecer e construir o conteúdo e as funcionabilidades do website.

onsideramos como estático, todo conteúdo que é informativo sobre o website para o visitante e que não tenha necessidade de alterações frequentes.

A partir de toda esta grade de informações até agora, encontramos a grande deficiência dos websites atuais em fazer a interligação com as mídias sociais e de criarem conteúdo atrativo e dinâmico, como promoções e até a ausência de um blog de notícias. O website mais “completo” e profissional avaliado em relação à demanda do público-alvo seria o e-commerce da Casa Santa Luzia, entretanto, por ser uma loja virtual, sua função e seu conteúdo é focado apenas em uma área de atuação que é justamente de vender produtos. E isto é o oposto da finalidade de um website institucional de uma empresa com loja física. A conveniência de delivery e compras online não atrai o cliente ao local, embora ainda divulga a marca. Mercearias que trabalham como restaurantes e bares e que não pretendem vender online, precisam atrair clientes à loja física e por isso um site do tipo institucional é mais indicado, o que é o nosso caso. A princípio, como o nosso projeto do site da mercearia é pra ser deste tipo, mas entretanto, com conteúdo dinâmico e interligado com as redes sociais, teremos então ambos conteúdos, além das ferramentas funcionais/transacionais.

+ CONTEÚDO ESTÁTICO + CONTEÚDO DINÂMICO + FUNCÃO E TRANSAÇÃO

De acordo com nossa pesquisa, o website a ser elaborado irá trabalhar com cadastramento e promoções, o que implica em envio de dados pessoais e interação e comunicação entre empresa e consumidor. Também sabemos que por ser um website do tipo institucional, haverá muitas informações sobre a empresa nas quais raramente serão manipuladas quando forem finalizadas. Selecionamos uma lista de items nas quais consideramos importantes incluir como conteúdo estático com base no nosso levantamento de dados.

- CONTEÚDO ESTÁTICO POLÍTICA DE PRIVACIDADE TERMOS DE USO REGRAS PROMOCIONAIS FAQ + QUEM SOMOS + BAR + CARDÁPIO

+ CONTEÚDO DINÂMICO + FUNCÃO E TRANSAÇÃO

30

31


CONTEÚDO DINÂMICO

FUNCÃO E TRANSAÇÃO

C

S

Websites assim geralmente trabalham com um banco de dados (SQL) e com “templates”, que neste caso não são temas prontos e sim são páginas com um determinado visual padrão criadas via HTML e CSS e todo o conteúdo adicionado à elas é via PHP, uma linguagem que se comunica com o servidor e que chama e puxa determinadas informações do banco de dados e preenche o template de acordo com a navegação do usuário.

Com base em nossa pesquisa, concluimos que poucos itens no website iriam possuir um formulário. Um deles, que é comum, é a parte de “Contato”, que sempre há um formulário requisitando certos dados simples do navegante para que ele possa enviar uma mensagem/e-mail à empresa.

onteúdo dinâmico é aquele que se modifica com frequência ou que recebe atualizações constantes ou são conteúdos criados a partir da navegação do usuário.

Como toda esta estrutura é complicada de se realizar manualmente e é mais complicado ainda de criar um sistema que automatize isto tudo, usamos um CMS (content management system), como o WordPress, que é o mais usado hoje em dia e que realiza todos estes processos sem dor de cabeça e com um painel simples e amigável para o responsável do website. Atualmente, se não todos, quase todos os blogs, sites de notícias e lojas virtuais trabalham com um CMS. Como as necessidades do público-alvo exigem conteúdo atrativo e atualizado, assim como promoções e notícias, iremos incluir os seguintes itens ao lado que se classificam como conteúdo dinâmico.

32

ão ferramentes funcionais/transacionais em um website toda e qualquer troca de informação entre o website (empresa) e o visistante. No caso, seriam os formulários.

+ CONTEÚDO ESTÁTICO - CONTEÚDO DINÂMICO + BLOG + PROMOÇÕES + MULTIMÍDIA

+ FUNCÃO E TRANSAÇÃO

O outro item a ter um formulário é o “Newsletter”, que vai ser incluido ao website de duas maneiras: ou o usuário automatiza seu cadastro usando seu perfil do Facebook ou do Twitter ou ele preenche o formulário disponível no site. Em qualquer dos casos, as informações serão enviadas e guardadas no banco de dados e estarão disponíveis aos responsáveis da empresa. É bom lembrar, entretanto, de sempre respeitar a “Política de Privacidade”. Há muitas empresas que dizem nessa seção que não irão distribuir seus dados pessoais com terceiros ou mesmo enviar e-mails promocionais sem a permissão do navegante, mas mesmo assim o fazem. SPAM/ mala direta é crime e violar a privacidade do usuário, também. Fiquem atentos.

+ CONTEÚDO ESTÁTICO + CONTEÚDO DINÂMICO - FUNCÃO E TRANSAÇÃO NEWSLETTER CONTATO

33


CARD-SORTING HOME

QUEM SOMOS

BAR

CARDÁPIO

PROMOÇÕES

BLOG

MULTIMÍDIA

HISTÓRIA

BEBIDAS

NOSSAS PIZZAS

AGENDA

RECEITAS

VÍDEOS

AMBIENTE

VINHOS

CALZONES

EVENTOS

SERVIÇOS

ENTRADAS

PRÊMIOS

SOBREMESAS

NEWSLETTER

CONTATO

IMPRENSA

DEPOIMENTOS

POLÍTICA DE PRIVACIDADE

34

TERMOS DE USO

Conteúdo Estático

Conteúdo Dinâmico

Menu Principal

Menu Inferior

REGRAS PROMOCIONAIS

FAQ

Função e Transação

35


MAPA DO SITE HOME

QUEM SOMOS

BAR

CARDÁPIO

HISTÓRIA

BEBIDAS

NOSSAS PIZZAS

AGENDA

AMBIENTE

VINHOS

CALZONES

EVENTOS

SERVIÇOS

ENTRADAS

PRÊMIOS

SOBREMESAS

PROMOÇÕES

BLOG

RECEITAS

MULTIMÍDIA

NEWSLETTER

CONTATO

VÍDEOS IMPRENSA

DEPOIMENTOS

POLÍTICA DE PRIVACIDADE

36

TERMOS DE USO

Conteúdo Estático

Conteúdo Dinâmico

Menu Principal

Menu Inferior

REGRAS PROMOCIONAIS

FAQ

Função e Transação

37


FLUXO DE NAVEGAÇÃO HOME

QUEM SOMOS

BAR

CARDÁPIO

HISTÓRIA

BEBIDAS

NOSSAS PIZZAS

AGENDA

AMBIENTE

VINHOS

CALZONES

EVENTOS

SERVIÇOS

PROMOÇÕES

BLOG

MULTIMÍDIA

RECEITAS

NEWSLETTER

CONTATO

1

2

VÍDEOS IMPRENSA

ENTRADAS SUCESSO!

PRÊMIOS

SOBREMESAS

DEPOIMENTOS

POLÍTICA DE PRIVACIDADE

38

TERMOS DE USO

Conteúdo Estático

Conteúdo Dinâmico

Menu Principal

Menu Inferior

Função e Transação

REGRAS PROMOCIONAIS

1

FAQ

Caso o usuário não insira um e-mail ou cadastro válido, retornar ao Newsletter.

2 Caso usuário não preencha os campos obrigatórios, retornar ao Contato.

39


INVENTÁRIO DO CONTEÚDO DO WEBSITE FEITO EM UMA PLANILHA DO GOOGLE DOCS. PARA ACESSÁ-LA, BASTA CLICAR NESTE LINK.

40

conclusão

INVENTÁRIO DO CONTEÚDO

CONCLUSÃO

E

stabelecer os elementos chaves, objetivos e metas mirando o público-alvo e estar atento nas ações das competidoras são atitudes fundamentais de um profissional de design gráfico, e servem para melhor compreender não somente a área de atuação da empresa que está desejando ter um website mas também ajuda o profissional a entender e aprender mecanismos que podem ser implementados em trabalhos futuros. Qualquer website, seja o tipo que for, antes de ser projetado, precisa de uma pesquisa de campo aprofundada com personas e cenários e com uma análise competitiva abrangente. Para uma empresa ter somente o website publicado na web é fácil, o complicado é fazer o investimento trazer retorno. E muitas empresas optam por investir pouco na internet, muitas vezes é por que seus responsáveis ou não compreendem o poder da world wide web e negligenciam-na quase que completamente. Várias pesquisas vêm mostrando que as empresas que investem pesado na rede, conseguem retorno positivo. E praticamente todas as companias que sabem utilizar uma mídia social, conseguem propagar mais a marca, vender ou obter mais clientes e dissiminar conteúdo sem investir muito. Atualmente, os usuários brasileiros gastam mais tempo nas redes socias do que em qualquer outro tipo de website. Assim sendo, temos que aliar o site da empresa com todas as mídias sociais possíveis, gerando tráfego de acesso e divulgação da compania. A internet muda constantemente o tempo inteiro. É preciso, como profissional na área de design gráfico, estar antenado à estas mudanças e envisionar as tendências do mercado.

41


ARQUITETURA DA INFORMAÇÃO

WEBSITE DE MERCEARIA


Arquitetura da Informação - Website de Mercearia