ARQUITETURA DA INFORMAÇÃO
WEBSITE DE MERCEARIA TRABALHO COORDENADO PELO PROFESSOR CARLOS JOSÉ
ANDERSON LIMA
BRUNA CLAUDIA
SOLIMAR CORREIA
equipe
ALEXANDRE YAMAMOTO
equipe
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
Template
42
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.
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
8.9%
de todos os sites do mundo usam o WordPress como CMS.
1º
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. 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.
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
UTILIZE AS MÍDIAS SOCIAIS A SEU FAVOR
9
PERSONAS+CENÁRIOS
TEREZA MELO
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.
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
O que gostaria de encontrar num site de mercearia? Promoções e frete grátis. Visita o website da mercearia que frequenta? Não, pois o site é desorganizado, e não é direto.
10
WALTER MAGALHÃES
IDADE: ESTADO CIVIL: ESCOLARIDADE: PROFISSÃO: RENDA MENSAL: FILHOS: BEBE: FUMA: CLASSE: HOBBIE: SMARTPHONE: TABLET: COMPUTADOR: FACEBOOK: TWITTER: 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
CAROL YU
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, 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 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
O que gostaria de encontrar num site de mercearia? Novidades e promoções.
O que gostaria de encontrar num site de mercearia? Promoções.
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.
12
RONALDO NAKAMURA
IDADE: ESTADO CIVIL: ESCOLARIDADE: PROFISSÃO: RENDA MENSAL: FILHOS: BEBE: FUMA: CLASSE: HOBBIE: SMARTPHONE: TABLET: COMPUTADOR: FACEBOOK: TWITTER: 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? Delivery.
O que gostaria de encontrar num site de mercearia? Promoções, delivery, novidades.
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.
13
JULIANE VASCONCELOS
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
FERNANDO TODESCHINI
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
O que gostaria de encontrar num site de mercearia? Promoções e vendas online.
O que gostaria de encontrar num site de mercearia? Indiferente
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.
14
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:
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, novidades, frete grátis, delivery.
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.
Visita o website da mercearia que frequenta? Não, pois não há interesse e o website é “feio”.
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
análise
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 ELABORADO EM HTML, ACESSO RÁPIDO, MAS VISUAL MAL ELABORADO. MENUS COM TIPOGRAFIA MANUSCRITA E INTERATIVIDADE COM O FACEBOOK.
E
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.
URL: http://www.lepicerie.com.br/
18
PROGRAMAÇÃO VISUAL
PRATICIDADE
CONTEÚDO
MÍDIAS SOCIAIS
4
PONTUAÇÃO MÉDIA
MERCEARIA CAMPOS WEBSITE EM FLASH, PRÁTICO MAS PRECÁRIA PROGRAMAÇÃO VISUAL. MENUS POR GRAVURAS E SEM INTEGRAÇÃO COM AS REDES SOCIAIS.
L
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.
URL: http://www.merceariacampos.com.br/
PROGRAMAÇÃO VISUAL
PRATICIDADE
CONTEÚDO
MÍDIAS SOCIAIS
19
4
PONTUAÇÃO MÉDIA
MERCEARIA DO CONDE WEBSITE EM FLASH COM BOA PROGRAMAÇÃO VISUAL MAS É LENTO. MENU CONFUSO, POSSUI PÁGINA NO FACEBOOK E LINK PARA A REDE.
A
’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.
URL: http://www.merceariadoconde.com.br
20
PROGRAMAÇÃO VISUAL
PRATICIDADE
CONTEÚDO
MÍDIAS SOCIAIS
4
PONTUAÇÃO MÉDIA
MERCEARIA DO FRANCÊS WEBSITE EM HTML, PRÁTICO E BOA PROGRAMAÇÃO VISUAL. FALTA DE CONTEÚDO E NÃO POSSUI LINK COM AS REDES SOCIAIS.
A
’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.
URL: http://merceariadofrances.com.br/
PROGRAMAÇÃO VISUAL
PRATICIDADE
CONTEÚDO
MÍDIAS SOCIAIS
21
4.5
PONTUAÇÃO MÉDIA
MERCEARIA ZN
WEBSITE EM HTML, PRÁTICO E BOA PROGRAMAÇÃO VISUAL. BOM CONTEÚDO ESTÁTICO MAS SEM INTERATIVIDADE COM AS REDES SOCIAIS.
E
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.
URL: http://merceariazn.com.br/
22
PROGRAMAÇÃO VISUAL
PRATICIDADE
CONTEÚDO
MÍDIAS SOCIAIS
4
PONTUAÇÃO MÉDIA
MERCEARIA SÃO ROQUE WEBSITE EM HTML, PRÁTICO E PROGRAMAÇÃO VISUAL REGULAR. POSSUI CONTEÚDO MAS NÃO POSSUI LINK COM AS REDES SOCIAIS.
A
’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.
URL: http://merceariasaoroque.com.br/
PROGRAMAÇÃO VISUAL
PRATICIDADE
CONTEÚDO
MÍDIAS SOCIAIS
23
5
PONTUAÇÃO MÉDIA
MERCADO 153 WEBSITE EM FLASH COM BOA PROGRAMAÇÃO VISUAL MAS É LENTO. MENU CONFUSO, POSSUI PÁGINA NO FACEBOOK E LINK PARA A REDE.
O
’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.
URL: http://www.grupocouvert.com.br/mercado153/index.php
24
PROGRAMAÇÃO VISUAL
PRATICIDADE
CONTEÚDO
MÍDIAS SOCIAIS
5
PONTUAÇÃO MÉDIA
BAR MERCEARIA WEBSITE EM HTML, PRÁTICO E MÉDIA PROGRAMAÇÃO VISUAL FALTA DE CONTEÚDO E POSSUI LINK COM O FACEBOOK E TWITTER.
O
‘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.
URL: http://www.barmercearia.com.br/
PROGRAMAÇÃO VISUAL
PRATICIDADE
CONTEÚDO
MÍDIAS SOCIAIS
25
7
PONTUAÇÃO MÉDIA
CASA SANTA LUZIA MERCEARIA 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
competitiva
ANALISAR A CONCORRÊNCIA E AS TENDÊNCIAS DE USO NA WEB, TE DEIXA SEMPRE UM PASSO A FRENTE.
27
TABELA COMPARATIVA DROGHERIA
L’ÉPICERIE
MERCEARIA CAMPOS
MERCEARIA DO CONDE
Institucional e Corporativo
Institucional
Institucional
Institucional
“Chi siamo”
“Bistral”
-
“História”
Flash
Flash
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
-
-
MERCEARIA DO FRANCÊS
MERCEARIA ZN
MERCEARIA SÃO ROQUE
MERCADO 153
BAR MERCEARIA
CASA SANTA LUZIA
Institucional
Institucional
Institucional
Institucional e Corporativo
Institucional
e-Commerce
-
“Sobre a Mercearia ZN”
“A Mercearia”
“Mercado 153”
“O Bar”
“Nossa Casa”
Flash
HTML, JavaScript
Flash
HTML, PHP
HTML, PHP, JavaScript/jQuery
HTML, JavaScript, SQL, PHP
-
-
-
29
CONTEÚDO DO SITE
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. 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.
30
+ CONTEÚDO ESTÁTICO + CONTEÚDO DINÂMICO + FUNCÃO E TRANSAÇÃO
CONTEÚDO ESTÁTICO
C
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. 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
31
CONTEÚDO DINÂMICO
C
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. 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. 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
+ CONTEÚDO ESTÁTICO - CONTEÚDO DINÂMICO + BLOG + PROMOÇÕES + MULTIMÍDIA
+ FUNCÃO E TRANSAÇÃO
FUNCÃO E TRANSAÇÃO
S
ã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. 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. 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
HISTÓRIA
BEBIDAS
NOSSAS PIZZAS
AGENDA
AMBIENTE
VINHOS
CALZONES
EVENTOS
SERVIÇOS
ENTRADAS
PRÊMIOS
SOBREMESAS
DEPOIMENTOS
POLÍTICA DE PRIVACIDADE
34
TERMOS DE USO
Conteúdo Estático
Conteúdo Dinâmico
Menu Principal
Menu Inferior
Função e Transação
BLOG
MULTIMﾃ好IA
RECEITAS
Vﾃ好EOS
NEWSLETTER
CONTATO
IMPRENSA
REGRAS PROMOCIONAIS
FAQ
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
DEPOIMENTOS
POLÍTICA DE PRIVACIDADE
36
TERMOS DE USO
Conteúdo Estático
Conteúdo Dinâmico
Menu Principal
Menu Inferior
Função e Transação
PROMOÇÕES
BLOG
RECEITAS
MULTIMﾃ好IA
NEWSLETTER
CONTATO
Vﾃ好EOS IMPRENSA
REGRAS PROMOCIONAIS
FAQ
37
FLUXO DE NAVEGAÇÃO HOME
QUEM SOMOS
BAR
CARDÁPIO
HISTÓRIA
BEBIDAS
NOSSAS PIZZAS
AGENDA
AMBIENTE
VINHOS
CALZONES
EVENTOS
SERVIÇOS
ENTRADAS
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
PROMOÇÕES
BLOG
MULTIMÍDIA
RECEITAS
NEWSLETTER
CONTATO
1
2
VÍDEOS IMPRENSA
SUCESSO!
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
TEMPLATE
O
O
inventário é formado a partir da pesquisa elaborada para identificar quais são os conteúdos que seriam necessários haver no website para atender as necessidades dos usuários. Neste inventários, nós elaboramos os nomes de cada item, assim como sua descrição, URL, os tipos de elementos visuais contidos, o tipo do conteúdo e quais os grupos de usuários que poderão ter acesso ao item.
template é esquematizado a partir também da pesquisa elaborada e com base na análise competitiva. Ele seria, iniciamente, com base na imagem ao lado e seria do estilo 1-page, com elemento skeoumórficos e com tecnologia HTML 5, CSS3, PHP e JavaScript.
INVENTÁRIO DO CONTEÚDO DO WEBSITE FEITO EM UMA PLANILHA DO GOOGLE DOCS. PARA ACESSÁ-LA, BASTA CLICAR NESTE LINK. 40
CABEÇALHO NAVEGAÇÃO GLOBAL SUB-MENU
LOGO
SLIDER
QUEM SOMOS (CONTEÚDO)
BAR (CONTEÚDO)
SUB-MENU
LOGO
RODAPÉ
41
conclusão 42
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.
43
ARQUITETURA DA INFORMAÇÃO
WEBSITE DE MERCEARIA