1
UNIVERSIDADE TECNOLÓGICA FEDERAL DO PARANÁ DEPARTAMENTO ACADÊMICO DE DESENHO INDUSTRIAL
CURSO DE TECNOLOGIA EM DESIGN GRÁFICO
TIAGO VIEIRA DOS SANTOS
WEBSITE INSTITUCIONAL PARA JC ALIMENTOS
TRABALHO DE CONCLUSÃO DE CURSO
1
TIAGO VIEIRA DOS SANTOS
TRABALHO DE CONCLUSÃO DE CURSO
Trabalho de Conclusão de Curso apresentado como requisito parcial à obtenção do título de Tecnólogo em Design Gráfico, do Departamento de Desenho Industrial, da Universidade Tecnológica Federal do Paraná.
Orientador: Prof. Dr. Cayley Guimarães
CURITIBA 2018
TERMO DE APROVAÇÃO
TRABALHO DE CONCLUSÃO DE CURSO 077
WEBSITE INSTITUCIONAL PARA JC ALIMENTOS por
Tiago Vieira Dos Santos – 1503650
Trabalho de Conclusão de Curso apresentado no dia 22 de junho de 2018 como requisito parcial para a obtenção do título de TECNÓLOGO EM DESIGN GRÁFICO, do Curso Superior de Tecnologia em Design Gráfico, do Departamento Acadêmico de Desenho Industrial, da Universidade Tecnológica Federal do Paraná. O aluno foi arguido pela Banca Examinadora composta pelos professores abaixo, que após deliberação, consideraram o trabalho aprovado.
Banca Examinadora: Prof. Alan Ricardo Witikoski (Dr.) Avaliador
DADIN – UTFPR
Rosamelia Parizotto Ribeiro (Dra.) Convidada
DADIN – UTFPR
Cayley Guimarães (Dr.) Orientador
DADIN – UTFPR
Prof. André de Souza Lucca (Dr.) Professor Responsável pelo TCC DADIN – UTFPR
“A Folha de Aprovação assinada encontra-se na Coordenação do Curso”. UNIVERSIDADE TECNOLÓGICA FEDERAL DO PARANÁ
PR
Ministério da Educação
Universidade Tecnológica Federal do Paraná Câmpus Curitiba
Diretoria de Graduação e Educação Profissional Departamento Acadêmico de Desenho Industrial
3
AGRADECIMENTOS
A Deus em primeiro lugar, por seu amor e misericórdia para comigo e meus familiares, independente das eventuais condições difíceis da vida e da crise que o país passa atualmente, graças a Deus nada me impede de progredir em direção aos meus objetivos.
Aos meus pais e minha namorada pelo amor para comigo e apoio quanto ao meu desenvolvimento intelectual, físico e espiritual. Nosso esforço conjunto é o que tem gerado resultados, pois sem o apoio familiar não haveria motivação para sonhar e almejar a prosperidade e desenvolvimentos pessoal que tenho buscado.
Aos professores Cayley Guimarães e André Lucca, pois estes contribuíram significativamente para a realização deste projeto, com paciência, boa vontade e capacidade intelectual.
4
RESUMO
O website institucional para JC Alimentos foi um projeto em que se buscou divulgar os serviços da empresa através de páginas que encontram-se acessíveis na internet. Para isso foi realizado um briefing inicialmente para identificar o problema ou necessidade da empresa, feito o levantamento de informações relevantes para incluir no website e definido o público alvo da JC Alimentos. A fase seguinte do projeto foi a análise de websites similares, com o objetivo de identificar boas práticas que pudessem servir de orientação ao desenvolvimento do layout do website. Posteriormente foi desenhado o layout das páginas do website com o software Adobe Photoshop CC 2014. Nessa fase buscou-se criar um protótipo para simular visualmente o design das páginas do website e sua interface em computadores e dispositivos moveis. Após o design do protótipo do website e a aprovação do projeto pela JC Alimentos, o website foi implementado em ambiente web (na internet) utilizando o sistema gerenciador de conteúdo WordPress. Ainda na fase de implementação em WordPress foi otimizado (SEO) o website para poder ser encontrado por mecanismos de busca na internet. Na penúltima fase do projeto buscou-se validar o website da JC Alimentos através do checklist de usabilidade ErgoList, tendo em mente comprovar através de respostas positivas aos requisitos do checklist, que o website oferece boa usabilidade. Finalmente foi apresentado no último capítulo os resultados que comprovam que o website é encontrado pelo público alvo da JC Alimentos e que oferece perspectivas positivas para suas negociações.
5
ABSTRACT
The institutional website for JC Alimentos was a project in which it was sought to spread the services of the company through pages that are accessible on the Internet. In order to do so, a Briefing was initially carried out to identify the problem or need of the company, the collection of relevant information to include in the website and defined the target audience of JC Alimentos. The next phase of the project was the analysis of similar websites, with the objective of identifying good practices that could serve as a guide to the development of the website layout. Later, the layout of the pages of the website with the software Adobe Photoshop CC 2014 was designed. In this phase, we tried to create a prototype to visually simulate the design of the pages of the website and its interface in computers and mobile devices. After designing the website prototype and approving the project by JC Alimentos, the website was implemented in a web environment (using the WordPress content management system). Still in the implementation phase in WordPress was optimized (SEO) the website to be found by search engines on the internet. In the penultimate phase of the project we tried to validate the JC Alimentos website through the ErgoList usability checklist, having in mind to confirm positive responses to checklist requirements, that the website offers good usability. Finally, it was presented in the last chapter the results that prove that the website is found by the target audience of JC Alimentos and that offers positive perspectives for its negotiations.
Keywords: Institutional website. WordPress. Trade Representative. Responsive
6 SUMÁRIO 1 INTRODUÇÃO ... 8 1.1 PROBLEMÁTICA ... 8 1.2 OBJETIVO ... 9 1.2.1 Objetivos específicos... 9 1.3 JUSTIFICATIVA ... 10 1.4 PROCEDIMENTOS METODOLÓGICOS ... 11 1.5 EMBASAMENTO TEÓRICO ... 12 2 BRIEFING ... 13 2.1 QUEM É A JC ALIMENTOS? ... 13 2.2 PÚBLICO ALVO ... 14
2.3 REQUISITOS PARA ATENDER AS SOLICITAÇÕES DA JC ALIMENTOS ... 14
3 ANÁLISE DE SIMILARES ... 16
3.1 WEBSITES ANALISADOS ... 16
3.1.1 Cabeçalho das páginas ... 16
3.1.2 Conteúdo da homepage ... 18
3.1.3 Página institucional (sobre a empresa) ... 21
3.1.4 Página de contatos ... 24
3.1.5 Funcionalidade responsiva ... 26
3.2 FATORES IMPORTANTES DA ANÁLISE ... 28
4 DESIGN DO LAYOUT DAS PÁGINAS ... 29
4.1 PRIORIDADES DO DESIGN DAS PÁGINAS DO WEBSITE ... 29
4.2 ORGANIZAÇÃO DA INFORMAÇÃO E NAVEGAÇÃO DO WEBSITE ... 30
4.3 GRID UTILIZADO NA CONSTRUÇÃO DO LAYOUT DAS PÁGINAS ... 32
4.3.1 Largura da área de conteúdo das páginas ... 34
4.4 SEÇÕES DE PÁGINA ... 35
4.5 CABEÇALHO DO WEBSITE ... 35
4.6 DESIGN DA HOMEPAGE DA JC ALIMENTOS ... 36
4.6.1 Banners rotativos ... 37
4.6.2 Demais elementos da homepage ... 39
4.7 RODAPÉ DO WEBSITE ... 42
4.8 DESIGN DA PÁGINA INSTITUCIONAL ... 43
4.9 DESIGN DO BLOG ... 45
4.10 DESIGN DO ITEM DE MENU “FALE CONOSCO” ... 48
4.11 DESIGN RESPONSIVO ... 49
4.12 ESCOLHA DA FONTE TIPOGRÁFICA ... 55
4.13 ESCOLHA DAS CORES E IMAGENS ... 57
4.14 ESCOLHA DOS ÍCONES ... 59
4.15 RESULTADO DO LAYOUT DAS PÁGINAS ... 61
5 DOMÍNIO E HOSPEDAGEM WEB ... 64
5.1 DOMÍNIO/ ENDEREÇO DO WEBSITE ... 64
5.2 HOSPEDAGEM DO WEBSITE ... 64
6 FERRAMENTAS DE DESENVOLVIMENTO ... 66
6.1 WORDPRESS ... 66
6.1.1 Plugins ... 67
7
6.3.1 Widgets ... 69
6.4 PLUGIN VISUAL COMPOSER ... 72
6.5 FERRAMENTAS DO VISUAL COMPOSER ... 72
6.5.1 Estrutura das páginas... 73
6.5.2 Ferramenta accordion e a seção de página “Como funciona?” ... 74
6.5.3 Ferramenta carousel ... 75
6.5.4 Galeria de imagens ... 76
6.5.5 Páginas responsivas com o Visual Composer ... 77
6.6 BANNER ROTATIVO COM SLIDER REVOLUTION ... 78
6.7 FONT ICONS ... 79
6.8 ARTIGOS (POSTAGENS) DO BLOG ... 80
6.8.1 Widget e barra lateral do blog ... 81
6.9 MENU FALE CONOSCO ... 82
6.9.1 Formulários de contatos ... 82
7 SEO ... 84
7.1 PLUGIN YOAST SEO ... 84
8 VALIDAÇÃO ATRAVÉS DO CHECKLIST DE USABILIDADE - ERGOLIST ... 86
8.1 PRESTEZA ... 86
8.2 AGRUPAMENTO POR LOCALIZAÇÃO... 89
8.3 AGRUPAMENTO POR FORMATO ... 91
8.4 FEEDBACK ... 95 8.5 LEGIBILIDADE ... 97 8.6 CONCISÃO ...100 8.7 AÇÕES MÍNIMAS ...103 8.8 DENSIDADE INFORMACIONAL ...104 8.9 AÇÕES EXPLÍCITAS ...106 8.10 CONTROLE DO USUÁRIO ...107 8.11 FLEXIBILDADE ...108 8.12 EXPERIÊNCIA DO USUÁRIO ...108
8.13 PROTEÇÃO CONTRA ERROS ...109
8.14 MENSAGENS DE ERRO ...110 8.15 CORREÇÃO DE ERROS ...112 8.16 CONSISTÊNCIA ...113 8.17 SIGNIFICADOS ...115 8.18 COMPATIBILIDADE ...117 8.19 RESULTADO/LAUDO ...120
8.20 CONCLUSÃO A PARTIR DO LAUDO...120
9 RESULTADOS DO WEBSITE JC ALIMENTOS ...121
9.1 CONTATO DO PÚBLICO ALVO COM A JC ALIMENTOS ...122
10 CONCLUSÃO ...124
REFERÊNCIAS ...126
8
1 INTRODUÇÃO
1.1 PROBLEMÁTICA
A JC Alimentos é uma empresa que atua como representante comercial e foi oficialmente criada em 2016 por Júlio Cesar dos Santos. É uma empresa que atua como prestadora de serviços para Indústrias de produtos alimentícios (representadas). Ou seja, atua como mediadora entre a Indústrias fabricante de produtos alimentícios (fornecedor dos produtos) e as redes de Supermercados que compram os produtos alimentícios. A JC Alimentos atua nas vendas, negociações, ações promocionais e acordos comerciais, auxiliando na manutenção da imagem dos produtos e gerando consolidação da marca representada. A JC Alimentos não estoca produtos e nem redistribui, ela realiza as vendas e fica a cargo da Industrias representada entregar os produtos, assim como receber o pagamento e repassar o percentual baseado na venda (previamente acordado) para JC Alimentos.
Atualmente a JC Alimentos presta serviços como representante comercial para a Industria de Doces Santo Antônio (D.S.A) - Santo Antônio da Patrulha/RS e também para a Feijão Pontarollo - Ponta Grossa/PR. A exemplo dessas Indústrias fica claro a possibilidade da JC Alimentos prestar serviços como representante comercial para Indústrias de fora de Curitiba e região metropolitana. E é este o principal motivo para que JC Alimentos tivesse interesse em um website, pois tais indústrias que não pertencem a localização que a JC Alimentos atua, dificilmente seriam alcançadas sem o uso da internet, portanto o website tem a finalidade de possibilitar novas parceria e consequentemente aumentar o faturamento da JC Alimentos. Também existe o fato de que Indústrias alimentícias de Curitiba e região metropolitana, já possuem acesso aos supermercados dessa região. Nesse contexto, as Indústrias alimentícias de fora tem uma necessidade maior de representantes comerciais, portanto a JC Alimentos tem maior oportunidade de se tornar indispensável nas negociações entre Supermercados de Curitiba e região metropolitana e Indústrias alimentícias de fora de Curitiba e região metropolitana.
Chegou-se conclusão de que um website possibilitaria que Indústrias de produtos alimentícios de fora (de Curitiba e região metropolitana) pudessem encontrar a JC Alimentos pela internet, solucionando o problema de distância geográfica. Considerando também que da parte da JC Alimentos não cogita-se ir pessoalmente a
9
descarta a possibilidade de realizar parceria com Industrias alimentícias de Curitiba e região metropolitana usando o website como meio para isso.
Ficou claro a necessidade da JC Alimentos ter optado por um website, já que precisa alcançar Indústrias de produtos alimentícios de fora de Curitiba e região metropolitana, mas por que não uma página em rede social, Facebook mais especificamente? Pois uma página em uma rede social não oferece 100% de controle sobre o layout, limitando a tentativa de transmitir a personalidade da empresa através da identidade visual.
Outro fator desfavorável que influenciou em não optar por criar somente uma página em rede social para JC Alimentos, diz respeito a SEO (otimização para mecanismos de busca). Pois toda busca relacionada a JC Alimentos estaria vindo com um link de um domínio de terceiros, Facebook por exemplo ficaria similar a: http://Facebook.com/jcalimentos. A criação de uma página no Facebook também foi levada em consideração, porém, ficou claro que não tornaria dispensável a criação do website nesse caso, para todos os fins, foi desenvolvido ambos, página no Facebook como um meio de marketing alternativo e o principal (e o foco deste trabalho) o website para JC Alimentos.
Em virtude de tal necessidade da JC Alimentos alcançar Indústrias de produtos alimentícios de fora de Curitiba e região metropolitana (principalmente) para concretizar novas parcerias, resultando em maior faturamento/crescimento da empresa e sabendo que a internet oferece essa possibilidade de encurtar distancias comerciais, como criar um website para a empresa JC Alimentos alcançar tais Indústrias alimentícias?
1.2 OBJETIVO
Desenvolver um website capaz de alcançar Indústrias alimentícias, principalmente de fora Curitiba e região metropolitana e trazer novas parcerias para JC Alimentos - Representante comercial.
1.2.1 Objetivos específicos:
Conceituar o público alvo e reunir as informações da JC Alimentos para incluir no website
10
Criar o protótipo do layout das páginas do website
Verificar a aprovação do protótipo pela JC Alimentos
Implementar o website em WordPress
Otimizar o website para responder a mecanismos de busca.
Validar o website
Obter aprovação da JC Alimentos no projeto
Comprovar o funcionamento do website através de contatos positivos, feitos por meio do website (ou influência do mesmo), entre a JC Alimentos e Indústrias Alimentícias interessadas em parceria.
1.3 JUSTIFICATIVA
Um website contribui para divulgação da empresa na internet, é o cartão de visitas digital e pode ser a porta de entrada para novas parcerias. Para o caso da JC Alimentos um website possibilita o contato com Indústrias de produtos alimentícios (de fora de Curitiba região metropolitana) que dificilmente teriam contato com os serviços de representação comercial da JC Alimentos.
O Brasil encontra-se “em quarto lugar no ranking mundial de usuários de internet” (Valente, 2017), segundo relatório sobre economia digital, pela Conferência das Nações Unidas sobre Comércio e Desenvolvimento. Confirmando portanto que há um público alvo em potencial para negócios divulgados na internet. O Brasil tem “59% de usuários conectados” (Valente, 2017), portanto há uma grande possibilidade de que o público alvo da JC Alimentos, as Indústrias de produtos alimentícios, estejam procurando na internet, por alguém que represente seus produtos em Curitiba e região metropolitana.
A complexidade exigida para o desenvolvimento do website, encontra-se em responder a necessidade da JC Alimentos (cliente), de utilizar uma tecnologia de comunicação, com a finalidade de crescimento da empresa. E uma única parceria a mais para a JC Alimentos, que no momento representa apenas 2 Indústrias alimentícias, já corresponderia a um aumento relativamente bom em seu faturamento anual, possivelmente.
Diante das perspectivas positivas com relação a uma empresa possuir um website, fica claro o papel de responsabilidade do designer, que através de um projeto
11
gráfico pode auxiliar a aumentar o faturamento de uma empresa, abrir portas para novos negócios e ampliar a visibilidade da mesma para o mercado.
1.4 PROCEDIMENTOS METODOLÓGICOS
Como método inicial, foi levantado informações sobre o problema da JC Alimentos e identificar seu público alvo, gerando assim um briefing. Este conceito é semelhante ao encontrado no livro Design Thinking, que define esta etapa (briefing) como sendo “a primeira etapa em qualquer processo de Design” (Ambrose e Harris, 2011, p. 14).
A etapa seguinte do processo foi pesquisar e analisar websites de empresas que atuassem profissionalmente na mesma área (ou semelhante) da JC Alimentos, utilizando-os como referência para identificar que tipo de conteúdo e aparência seria relevante considerar ao elaborar o layout das páginas do website da JC Alimentos.
Após reunidas as informações sobre o design de páginas de websites analisados, obteve-se ideias para iniciar um protótipo, pois “Um protótipo pode ser usado para testar a viabilidade técnica de uma ideia de design se funciona como um objeto físico.” (Ambrose e Harris, 2011, p. 21). Não necessariamente um objeto físico, mas no caso um projeto visual do layout das páginas do website, porém, ainda não funcional nessa fase, mas apenas imagens. Nesta etapa também foi selecionado o melhor layout das páginas, definindo o que manter e o que acrescentar.
Após aprovado o layout das páginas pela JC Alimentos, o procedimento seguinte foi a implementação em WordPress, seguindo o protótipo como modelo. Em WordPress foi possível definir a funcionalidade de cliques, transição de páginas, interações em geral, carregamento de páginas, SEO (otimização para mecanismos de busca), possíveis erros e assim tornar o site funcional na internet.
Buscou-se comprovar se o website solucionava o problema proposto, através de um feedback, isso ocorreu após a implementação em WordPress. Semelhante ao conceito do livro Design Thinking, onde “Após a implementação, o cliente pode começar a procurar ou receber feedback sobre como o produto foi recebido pelo público-alvo e quão benéfico seus efeitos sobre o público-alvo” (Ambrose e Harris, 2011, p. 27). Além do fato de que “O feedback gerado no final do processo torna-se um aprendizado e oportunidade para futuros projetos” (Ambrose e Harris, 2011, p. 27),
12
ou seja, é um processo determinante pare identificar possíveis necessidades de melhorias no projeto.
Figura 1 – Etapas do desenvolvimento do website para JC Alimentos, inspirado em Design Thinking Fonte: Autoria própria.
1.5 EMBASAMENTO TEÓRICO
Como auxilio ao fluxo de andamento do projeto do website, foi utilizado conceitos do livro “Design Thinking de Gavin Ambrose e Paul Harris, 2011” com metodologia de trabalho que envolve levantamento de ideias, definição do problema, público-alvo, prototipagem e feedback.
Para elaboração do website institucional para JC Alimentos houve o apoio teórico de conceitos do livro “Projetando websites de Jakob Nielsen, 2000”. Os argumentos encontrados no livro que demonstram a importância da usabilidade e o quão determinante é que o usuário do site encontre o que procura de forma rápida, para assim gerar conversões. Esse conceito de usabilidade implica diretamente em fazer com que o usuário (possível cliente) que entre no website da JC Alimentos, encontre rapidamente informações sobre os serviços e como funciona a prestação de serviços da JC Alimentos.
Foi utilizado também o livro “Não me faça pensar de Steve Krug, 2006”, este livro como o próprio nome sugere mostra como é importante evitar a complexidade ao criar um website, pois não é o que o usuário deseja encontrar. Segundo Steve Krug “uma página do site deve ser evidentemente autoexplicativa, a tal ponto que o seu vizinho, que não se interessa pelo assunto do website, seja capaz de entende-la” (Krug, 2006, p.25). Conceitos do livro foram importantes para criação do website, motivaram a criar textos breves, visual organizado (que implica em informações fáceis de achar), mostrar as informações mais importantes primeiro e de maneira “que saltem nos olhos do usuário”.
13
2 BRIEFING
2.1 QUEM É A JC ALIMENTOS?
A JC Alimentos é uma empresa prestadora de serviços e atua como Representante Comercial (desde 2016). Conforme previsto em Lei nº 4.886 (BRASIL, 1965, art. 1º) com as alterações introduzidas pela Lei nº 8.420 (BRASIL, 1992) “o representante comercial é o profissional autônomo que pratica a realização de negócios mercantis, agenciando propostas ou pedidos, para transmiti-los aos representados”.
A JC Alimentos possui parceria com Indústrias de produtos alimentícios, onde desempenha um papel semelhante a de um vendedor. Porém, não há vinculo trabalhistas entre a JC Alimentos e a representada (Indústria de produtos alimentícios).
A JC Alimentos desempenha atividades relacionadas a vendas dos produtos da empresa que representa (indústria de produtos alimentício). A venda é feita para supermercados de Curitiba e região metropolitana. Tudo que esteja relacionado a vendas de produtos, acompanhamento, cadastros, retirada de pedidos de compra, são promovidos pela JC Alimentos. Já a entrega de produtos e pagamentos não são feitos pela JC Alimentos, é diretamente entre o supermercado e a Indústria alimentícia (representada). Posteriormente a Indústria alimentícia repassa um percentual da venda para JC Alimentos como pagamento das vendas.
Figura 2 - Fluxo de prestação de serviços da JC Alimentos para Indústrias Alimentícias Fonte: Autoria própria.
14
2.2 PÚBLICO ALVO
O foco da JC Alimentos é conquistar parcerias com indústrias alimentícias, principalmente de fora de Curitiba e região, pois estas tem maior necessidade de um representante, por não terem acesso fácil aos supermercados de Curitiba e região, levando em consideração que possuem Industrias fora desse local. Dentre as possíveis parcerias que a JC Alimentos pretende conquistar, há restrições para indústrias alimentícias que possuam a mesma linha de produtos de Industrias que a JC Alimentos já representa, evitando vender produtos de Indústrias concorrentes.
2.3 REQUISITOS PARA ATENDER AS SOLICITAÇÕES DA JC ALIMENTOS
Os textos para inserir no website foram disponibilizados pela JC Alimentos e algumas recomendações foram feitas por ela para o bom uso desses textos e informações:
Textos sobre a empresa em uma página especifica;
Uma área ou página informando sobre as indústrias com as quais a JC Alimentos já possui parceria;
Área para exibir imagens de exposições de produtos que a JC Alimentos representa;
Uma página para a JC Alimentos postar textos/artigos;
Uma área ou página para exibir contatos e Facebook da JC Alimentos;
Aparência profissional.
Para atender os requisitos da JC Alimentos com relação relacionados ao design e a usabilidade do website, realizados alguns procedimentos, são eles:
Design de qualidade, foi importante prezar pela boa aparência do website,
pois “O primeiro passo para conquistar confiança é fazer com que seu site pareça legítimo e profissional [...] o site deve usar um esquema de cores e imagens adequadas” (Harley, 2016, tradução nossa).
Usabilidade, porque “Ter um ótimo SEO, mas pouca usabilidade significa que
você terá muito tráfego, mas os visitantes não se transformarão em clientes” (Nielsen,
15
interação do website fácil para o usuário.
Website Responsivo, pois no brasil, em 2015 “o telefone celular ultrapassou
o computador como dispositivo mais utilizado para o acesso à Internet” (Cetic.br, 2015), portanto ficou nítido a importância de se desenvolver um website capaz de ser bem exibido também em dispositivos moveis
SEO (otimização para mecanismos de busca) “[...]decorre do fato de que a
maioria dos usuários exibe forte domínio de busca - ou seja, a pesquisa é a principal maneira de as pessoas irem à Internet.” (Nielsen, 2012, tradução nossa). Logo, um link direto para o website não seria a única maneira de acessa-lo, pois termos de busca ou palavras chave usadas no mecanismo de busca, podem trazer o website como resultado. Um exemplo prático seria buscar no Google por “representante comercial Curitiba” e assim obter na lista de resultados o website da JC Alimentos.
16
3 ANÁLISE DE SIMILARES
O pressente capitulo teve como objetivo apresentar a análise de websites de empresas que fazem atuação profissional similar à da JC Alimentos e verificou-se boas e más práticas do website das mesmas. Buscou-se analisar tipos de conteúdo/arquitetura mais comum entre os websites e através disso verificar o que seria relevante ou indispensável incluir no website da JC Alimentos.
3.1 WEBSITES ANALISADOS
Foram analisados os websites: Mira - distribuidora de produtos para panificação e confeitaria, Linea Verde Alimentos - distribuidora de produtos naturais e JC Distribuição - distribuidora e atacadista de produtos alimentícios. No entanto, é conveniente lembrar que a JC Alimentos não é uma distribuidora, ela não estoca os produtos das Indústrias que representa, ela apenas realiza as vendas dos produtos, ficando a cargo da representada entregar as mercadorias. Portanto, a JC Alimentos tem em comum com as empresas analisadas, a prática de vendas de produtos alimentícios das Indústrias com as quais tem parceria, atuando em Curitiba e região.
3.1.1 Cabeçalho das páginas
O topo da página (cabeçalho) exibe logotipo e o menu. Esse padrão adotado pelos websites analisados, é uma prática bem comum em websites em geral, e também uma pratica funcional, pois da esquerda para a direita (modo de leitura ocidental) é possível identificar a marca da empresa ao ver o logotipo e depois o menu que auxilia na navegação no website
No caso da JC Distribuição, há uma exceção, a primeira página é diferente das demais páginas internas no próprio website e não tem o logotipo e o menu no topo da página. Entende-se como uma pratica ruim e incomum, pois o website como um todo não segue um padrão. Ou seja, essa mudança de interface pode dar a entender que não se trata do mesmo website ao navegar da homepage para página institucional (página que informa sobre a empresa) por exemplo, pois a interface sofre alteração de posição do logotipo e do menu de navegação, conforme figura 3.
17
Figura 3 – Interface da homepage e da página institucional do website da JC Distribuição Fonte: print screen do navegador de internet no sistema operacional Windows 10.
Os demais websites mantiveram o logotipo e o menu no topo em todas as páginas internas, mantendo padrão. Podemos observar isso do ponto de vista de umas das Heurística de usabilidade para o design da interface, escritas por Jakob Nielsen, no artigo sobre “10 Heurísticas de Usabilidade”, divulgado no site Nielsen Norman Group, que diz respeito à consistência e padrões, onde “Os usuários não devem ter que se perguntar se diferentes palavras, situações ou ações significam o mesmo” (Nielsen, 1994, tradução nossa). Ou seja, o website da JC Distribuição abre margem para que o usuário tenha dúvidas sobre o estado do website, devido a mudança de aparência ao acessar outra página interna do site, após ter estado na homepage, pois a interface muda significativamente.
A informação obtida pela análise motivou a utilização de um cabeçalho padrão em todo o website, pois é uma prática que facilita a orientação do usuário e também é uma pratica comum entre os demais websites analisados, conforme figura 4 e 5, que mostram a transição da homepage para a página institucional (página que informa sobre a empresa):
Figura 4 – Interface da homepage e da página institucional do website da distribuidora Mira Fonte: print screen do navegador de internet no sistema operacional Windows 10.
18
Figura 5 – Interface da homepage e da página institucional do website da Linea Verde Fonte: print screen do navegador de internet no sistema operacional Windows 10.
3.1.2 Conteúdo da homepage
A homepage (ou página inicial) deve identificar o website (o que é), dar uma noção sobre o que a empresa faz, assim como Steve Krug sugere que “De cara, a página inicial tem de me dizer o que é este site e para que ele serve” (Krug, 2005, p.95). Deixando claro a necessidade de se projetar a homepage da JC Alimentos, mostrando o que é a JC Alimentos, apresentando seus serviços de maneira objetiva e como funciona a prestação dos serviços.
No caso do site Linea Verde Alimentos, é possível observar que na homepage já tem uma informação do que a empresa faz, conforme mostrado da figura 6, logo que o usuário entra no website se depara com um banner escrito “Os melhores produtos naturais”, pois se trata de uma empresa que vende produtos naturais. Porém, outras informações complementares só podem ser vistas nas outras páginas do site, então seria interessante o website apresentar mais detalhes sobre o que faz a empresa na própria homepage, pois segundo Jakob Nielsen “a primeira meta imediata de qualquer homepage é responder as perguntas” Onde estou?” e “O que faz esse site?”” (Nielsen, 2000 p.166).
19
Figura 6 – Interface da homepage do website da Linea Verde
Fonte: print screen do navegador de internet no sistema operacional Windows 10.
Ainda ao analisar o websites da JC Distribuição (figura 7), notou-se que a mesma não deixou claro em primeiro em sua homepage sua área de atuação, a única informação sugerindo a área de atuação da empresa é o próprio nome “distribuição”. Pesquisando entre as informações do website da JC Distribuição, foi possível identificar que se trata de uma distribuidora/transportadora não só de produtos alimentícios, mas também produtos de papelaria, higiene, limpeza, entre outros. Considerando a pratica falha da JC Distribuição que está em discordância do que diz Steve Krug que, “Para alguns visitantes, a página inicial será a única chance que seu site tem de dar uma boa impressão” (Krug, 2005 p.96), fica claro portanto, a necessidade de ser mais objetivo ao criar a homepage de um website, pois pode ser a única oportunidade de converter um usuário, que o acesse, em um cliente.
20
Figura 7 – Interface da homepage do website da JC Distribuição
Fonte: print screen do navegador de internet no sistema operacional Windows 10.
No caso do website da empresa Mira - distribuidora de produtos para panificação, é possível identificar o que é a empresa, conforme figura 8. Porém, no caso do banner que aparece no topo do site, abaixo do menu, tem uma frase que ajuda a identificar do que se trata o website, mas essa frase encontra-se em tamanho de fonte bem pequeno, 12px e exige em torno de 7 segundos para ler, talvez dificultando um pouco a absorção da informação pelo usuário.
21
Segundo Jakob Nielsen deve se usar “fontes de tamanho suficiente para que as pessoas possam ler o texto, mesmo que não tenha uma visão perfeita” (Nielsen, 2000, p.125), portanto, seria interessante ter usado tamanho de fonte maior. Caso necessário, resumir a informação e inserir um botão de “saiba mais” ou “leia mais”, para que o usuário pudesse ler mais detalhes quando redirecionado pelo botão, em outra página do website.
Temos também, ainda analisando o website da empresa Mira, conteúdo redundante que apresenta um texto idêntico na homepage e na página “quem somos” e se trata de um texto longo, conforme figura 9. Conclui-se que poderia ter sido evitado essa redundância, inclusive é incoerente com a oitava das dez heurísticas de usabilidade de Jakob Nielsen, que recomenda que deve-se evitar informações irrelevantes, “Toda unidade extra de informação [...] compete com as unidades de informação relevantes e diminui a sua visibilidade relativa.” (Nielsen 1994, tradução nossa). Ou seja, ao repetir a mesma informação, pode-se perder o foco (visibilidade) para outras informações que seriam mais importantes.
Figura 9 – Interface da homepage e da página institucional do website da distribuidora Mira Fonte: print screen do navegador de internet no sistema operacional Windows 10.
3.1.3 Página institucional (sobre a empresa)
Uma página institucional ou a página que fala sobre a empresa é algo utilizado de maneira unanime em todos os websites analisados e entende-se que destinar uma página individual para responder a pergunta “o que é essa empresa?” É algo necessário, pois segundo Jakob Nielsen “[...] a homepage nunca pode ser tão especifica ou útil a um determinado problema quanto a página em si que descreve o produto ou responde à pergunta” (Nielsen, 2000, p. 179). Cabe a página institucional, portanto, definir o que é a empresa de maneira especifica, algo não recomendável já na homepage, para não tornar extenso o conteúdo da mesma.
22
Observando o website Linea Verde Alimentos, em sua página que fala sobre a empresa, é possível notar informações sobre a empresa e a equipe, conforme figura 10. Além das informações sobre a missão, visão e valores da empresa, algo a se considerar, pois traz informações bem pessoais da empresa na tentativa de criar proximidade com o usuário.
Figura 10 – Interface da página institucional do website da Linea Verde
Fonte: print screen do navegador de internet no sistema operacional Windows 10.
O website da empresa Mira além de apresentar sobre a empresa no texto “Quem somos” também mostra sobre seus serviços: logística, marketing e suporte, conforme indicado na figura 11.
23
No caso do website da JC Distribuição, eles também apresentam um texto sobre a empresa na página institucional, porém separam algumas informações em abas, até dificultando saber se era possível clicar em tais itens, conforme indicado no retângulo em vermelho, figura 12, algo incomum nos demais websites analisados.
Figura 12 – Interface da página institucional do website da JC Distribuição
Fonte: print screen do navegador de internet no sistema operacional Windows 10.
Entende-se como uma pratica ruim, da parte da JC Distribuição, separar informações (figura 13) que poderiam estar agrupadas/próximas, por estarem no mesmo contexto e com a possibilidade de diagrama-las utilizando melhor o espaço disponível. Porém, optaram por dificultar a visualização das informações, ao contrário do que recomenda Nielsen em sua sexta heurística de usabilidade, sobre reconhecimento, onde “[...] se deve minimizar a carga de memória do usuário, tornando visíveis objetos, ações e opções” (Nielsen 1994, tradução nossa). Mas ao analisarmos o conteúdo separado nas outras abas, “área de atuação”, ou “responsabilidade social” por exemplo, nota-se que poderia ter sido melhor agrupado, ou melhor distribuído em colunas. Esse princípio foi citado por Nielsen em seu artigo sobre “Proximidade de ações e objetos no Design”, que sugere que, “[...] as coisas que estão juntas na tela são vistas como relacionadas” (Nielsen, 2010, tradução nossa), portanto aproximar informações de mesmo contexto na página do website, poderia poupar o usuário de ter que dar mais cliques para visualiza-las.
24
Figura 13 – Interface da página institucional, sobre a área de atuação do website da JC Distribuição Fonte: print screen do navegador de internet no sistema operacional Windows 10.
3.1.4 Página de contatos
É indispensável disponibilizar meios de contato como telefone, e-mail, endereço, formulários de contato, quando se trata de uma empresa que deseja conseguir clientes na internet. Pois o cliente precisa ter a possibilidade de entrar em contato com a empresa caso queira obter os serviços (ou produtos) dela. Caso contrário o website seria em vão, a empresa continuaria anônima, independente do cliente criar afinidade ou despertar interesse nela. Sendo assim, ao analisar os websites, buscou-se avaliar quais praticas são recorrentes, o que eles disponibilizam para que o usuário entre em contato.
Ao analisar o site da empresa Mira, conforme figura 14, temos localização, telefones e endereços de suas sedes e também um formulário de contato, entende-se que é uma página de contato bem completa e que utiliza bem os espaços da página.
25
Figura 14 – Interface da página de contatos do website da distribuidora Mira Fonte: print screen do navegador de internet no sistema operacional Windows 10.
O website da empresa Linea Verde Alimentos segue o mesmo padrão do site Mira, exibindo localização, endereços, telefones e formulário de contato, em sua página referente ao menu “Fale conosco”, como pode-se observar na figura 15.
Figura 15 – Interface da página de contatos do website da distribuidora Mira Fonte: print screen do navegador de internet no sistema operacional Windows 10.
O website da JC Distribuição não aproveita bem os espaços disponíveis, conforme indicado pelos retângulos vermelhos com ‘X’, na figura 16 e ainda separa o conteúdo referente aos meios de contato em duas abas, uma aba com “formulário de contato” e a outra com “endereço das unidades”. Fica claro um mal aproveitamento de espaços, algo que poderia ter sido evitado ao apresentar os endereços das unidades juntamente com o formulário de contato, distribuindo ambos em duas colunas e aproveitando os espaços em branco, conforme figura 16.
26
Figura 16 – Interface da página de contatos do website da JC Distribuição
Fonte: print screen do navegador de internet no sistema operacional Windows 10.
3.1.5 Funcionalidade responsiva
Precisa-se levar em consideração que existem várias larguras de tela possíveis, através das quais os usuários poderão visualizar o website e segundo o ponto de vista de Jakob Nielsen “deve-se criar tendo em mente todas as resoluções de tela – em outras palavras, páginas independentes de resolução que se adaptem a qualquer tamanho de tela que sejam exibidas” (Nielsen, 2000, p.29). Portanto, um critério analisado foi observar como os websites similares se comportam ao serem exibidos em celular ou tablet.
O website da empresa Mira não manteve o logotipo da empresa, quando exibido em tablet ou celular, ficou apenas o nome “Mira” e não tem um link no nome para acesso direto a homepage, isso não é coerente como sugere Jakob Nielsen que defende que “Em todas as páginas interiores, o logo deve ser clicável e vinculada à homepage” (Nielsen, 2000, p.178). Outra perda de informação relevante foi o texto no banner quando o website é visto no celular, como pode-se observar na figura 17, isso também entra em desacordo com a Heurística de usabilidade de Nielsen, sobre Consistência e padrões, em que “Os usuários não devem se perguntar se palavras, situações ou ações diferentes significam a mesma coisa” (Nielsen, 1994, tradução
27
Figura 17 – Interface da homepage do website da distribuidora Mira em computador, tablet e celular Fonte: print screen do navegador de internet no sistema operacional Windows 10.
Quanto ao site JC Distribuição, ao carregar a página inicial e visualiza-lo no celular, fica completamente distorcido, como se as laterais fossem “espremidas” para caber na tela. Isso afeta esteticamente o website e também influencia negativamente na legibilidade do mesmo, como pode ser conferido na figura 18.
Figura 18 – Interface da homepage do website da JC Distribuidora em computador, tablet e celular Fonte: print screen do navegador de internet no sistema operacional Windows 10.
Observando a homepage do website da empresa Linea Verde Alimentos, quando apresentado em tablet ou celular, é possível notar que o conteúdo abaixo do banner passa de cinco colunas para apenas uma e acaba por não aproveitar toda a largura disponível. Conforme indicado pelos retângulos vermelhos com ‘X’, na figura 19, nota-se um mal aproveitamento de espaços e algo que demostra uma adaptação ruim do website ao ser exibido em tablet e celular:
28
Figura 19 – Interface da homepage do website da Linea Verde em computador, tablet e celular Fonte: print screen do navegador de internet no sistema operacional Windows 10.
3.2 FATORES IMPORTANTES DA ANÁLISE
A partir da análise dos websites similares, foram observados alguns fatores importantes, ou seja boas e más práticas adotadas por eles. Boas práticas foram levadas em consideram durante a fase de geração de ideias para a criação do layout do website da JC Alimentos e as más práticas foram evitadas. As boas práticas encontram-se listadas abaixo:
Ser claro ao mostrar ao usuário do que se trata o website
A homepage não deve ser tão especifica quanto ao conteúdo de todo o website, apenas introduzir os mesmos
Utilizar link/botões, nas introduções, para direcionar ao assunto completo na página destino
Ser claro nas informações da homepage, pois pode ser a única oportunidade de deixar uma boa impressão
Apresentar legibilidade
Manter a consistência e padrão
Aproximar informações similares
Evitar redundância
Tornar as informações visíveis e ao alcance do usuário
Tornar a navegação fácil no website
Deixar claro ao usuário onde ele se encontra (página ou seção) no website
Disponibilizar meios de contato
29
4 DESIGN DO LAYOUT DAS PÁGINAS
A partir da análise dos websites similares e após estudar as informações relevantes (que deveriam ser consideradas) dos mesmos, foi a fase de geração de ideias criando-se o design das páginas. Esse design das páginas, em seu processo de criação, dependeu da aprovação da JC Alimentos e a implementação do layout em WordPress foi posterior a aprovação de todas as páginas, ou seja após a fase de prototipação. No processo de criação do layout foi considerado o problema que o cliente desejava resolver, portanto as informações obtidas no briefing foram o guia para construção do layout das páginas
Foi desenhado o layout do website usando o Adobe Photoshop CC 2014, o critério para escolha do software (programas) foi por questão de maior compreensão e habilidade com o mesmo, se comparado com outros softwares. Existe há a possibilidade de se obter o mesmo resultado utilizando outros softwares gráficos.
4.1 PRIORIDADES DO DESIGN DAS PÁGINAS DO WEBSITE
Comunicação Clara: Segundo um artigo de Nielsen sobre Criação de um site
de negócios, “Os usuários alocam um tempo mínimo para as visitas iniciais ao site, por isso você deve convencê-los rapidamente de que o site vale a pena” (Nielsen, 2006, tradução nossa). Portanto foi necessário projetar conteúdo objetivo, pois com várias opções de websites na internet e possivelmente oferecendo serviços similares, é de extrema importância convencer rapidamente o usuário que acesse seu website, antes que procure um concorrente.
Informar o que os usuários desejam: “Os usuários devem poder assimilar
facilmente se seus serviços atendem às suas necessidades e por que devem fazer negócios com você” (Nielsen, 2006, tradução nossa). Tendo isso em mente ao projetar o layout das páginas, foi priorizado informar o que a empresa faz. A intenção era de projetar um website em que o usuário que navegue por ele, pudesse saber rapidamente que a JC Alimentos atua como representante de indústrias alimentícias.
Design simples e consistente: “navegação clara e uma arquitetura da
informações que coloca as coisas onde os usuários esperam encontrá-las” Nielsen, 2006, tradução nossa). Isso foi levado em consideração, buscando-se projetar um design limpo e uma navegação intuitiva.
30
4.2 ORGANIZAÇÃO DA INFORMAÇÃO E NAVEGAÇÃO DO WEBSITE
A “espinha dorsal”, ou seja a estrutura principal do website, foi projeta com 4 itens principais que englobam todas as informações, trata-se da homepage, da página sobre a empresa, o Blog e o “fale conosco” e isso pode ser conferido na figura 20.
Foi projetado uma homepage com informações gerais, ou seja resumos/introduções sobre quem é a JC Alimentos, o que faz e como faz. Foi projetado uma página sobre a empresa que é mais especifica quanto a informar quem é a JC Alimentos e para quem ela já presta serviços, de maneira a exemplificar sua atuação profissional. O Blog foi projetado para ser uma área em o que o cliente (JC Alimentos) pudesse inserir informações de maneira prática no website, sem auxílio de um web designer e essas informações seriam obviamente a respeito de sua área de atuação profissional. O item do menu “fale conosco” foi feito com a finalidade de oferecer meios para que o usuário entre em contato com a JC Alimentos.
Figura 20 – Mapa do website da JC Alimentos Fonte: Autoria própria.
Jen Cardello, define “navegação de um site” da seguinte forma: “A navegação de um site é uma coleção de componentes da interface do usuário. O principal objetivo da navegação é ajudar os usuários a encontrar informações e funcionalidades” (Cardello, 2014, tradução nossa). Portanto, sabendo que a navegação deve disponibilizar meios que auxiliem o usuário a encontrar as informações no website,
31
disposição menus e links bem visíveis e que sua navegação por esses meios fosse intuitiva. Como por exemplo, que os menus fossem claros em seus textos para que o usuário soubesse para onde iria ao clicar no item de menu e ao acessar o destino do link soubesse, através de alguma sinalização, onde estava. Com isso em mente, foi estipulado que nas páginas principais (“sobre a empresa” e “Blog”) houvesse no menu e no cabeçalho da página o mesmo título. Além disso, como orientação sobre qual página o usuário se encontra, o item de menu que correspondente a página acessada ficaria na cor laranja, conforme pode-se observar nas figuras 21, 22 e 23, logo abaixo.
Figura 21 – Cabeçalho da homepage no website da JC Alimentos
Fonte: print screen da homepage da JC Alimentos no sistema operacional Windows 10.
Figura 22 – Cabeçalho da página sobre a empresa no website da JC Alimentos
Fonte: print screen da página sobre a empresa da JC Alimentos no sistema operacional Windows 10.
Figura 23 – Cabeçalho do blog no website da JC Alimentos
Fonte: print screen da página sobre a empresa da JC Alimentos no sistema operacional Windows 10.
Os botões do website, “saiba mais” ou “leia mais”, são de fácil compreensão e reagem ao passar o mouse, ou seja, mudam de cor quando se posiciona o mouse sobre eles, deixando claro que são links clicáveis, facilitando a navegação.
32
Outro recurso que foi utilizado para orientar o usuário sobre as áreas do website visíveis no momento da navegação pelas páginas, foram os títulos das seções de página, que com um tamanho de fonte considerável para leitura, chamam atenção sobre o conteúdo de cada seção, conforme exemplo na figura 24.
Figura 24 – Títulos de seções de páginas da homepage do website da JC Alimentos
Fonte: print screen da página sobre a empresa da JC Alimentos no sistema operacional Windows 10.
Em se tratando de um website com poucas camadas, não se viu necessário utilizar breadcrumbs (migalhas de pão em sua tradução), que é uma analogia a rastros de pão deixados pelo caminho que foi percorrido. Ao que diz respeito a navegação web, seria uma linha de texto no website indicando a localização atual do usuário e quais são os níveis superiores da estrutura, como por exemplo: home > serviços > serviço 1 > orçamento. Isso explica o porquê de ter-se optado por não usar breadcrumbs, pois há 4 itens de menu no website da JC Alimentos, é uma navegação bem simples, há basicamente 2 camadas se considerarmos que a primeira camada contém a “home”, “sobre a empresa”, “Blog” e “fale conosco”, que são as camadas principais e os artigos do Blog que correspondem a segunda camada. Portanto é improvável que o usuário, por mais inexperiente que seja, perca-se durante a navegação.
4.3 GRID UTILIZADO NA CONSTRUÇÃO DO LAYOUT DAS PÁGINAS
33
2011, p. 63). Portanto essa estrutura serviu de guia para posicionar elementos como textos, imagens e ícones de maneira organizada. Na elaboração do layout foi definido um grid de seis colunas e a partir disso, os elementos gráficos foram desenhados e aplicados de maneira orientada pelo grid, conforme exemplo na figura 25:
Figura 25 – Exemplo de elementos gráficos distribuídos sobre o grid de seis colunas Fonte: Autoria própria.
Foi escolhido um grid de 6 colunas, pois nesse espaço foi possível posicionar elementos gráficos que ocupassem seis, quatro, três, duas ou uma coluna(s) de largura, conforme figura 26, de maneira simétrica, contribuindo positivamente para organização do layout.
Figura 26 – Exemplo com retângulos indicando a possibilidade de aplicação de elementos gráficos Fonte: Autoria própria.
34
Um fator determinante para a escolha desse modelo de grid foi a ferramenta de diagramação que viria a ser utilizada no WordPress, o Visual Composer, assunto que será abordado posteriormente, pois houve uma limitação de grid de no máximo 6 colunas. E dentro dessa limitação de seis colunas, ainda existia a possibilidade de usar seis, quatro, três, duas ou uma coluna(s), porém cinco colunas a ferramenta não aceitava e isso foi levado em consideração ao criar o layout. Apesar disso ser uma limitação da ferramenta, não gerou prejuízo visual algum, pois ainda assim foi possível distribuir (no layout) os elementos de maneira legível e organizada.
4.3.1 Largura da área de conteúdo das páginas
A área de conteúdo efetivo das páginas é o local que foi destinado a exibir os elementos gráficos como textos, imagens, formas e ícones com exceção dos planos de fundo ou “backgrounds”, conforme pode-se observar na figura 27, na parte mais azulada e indicado na figura 27.
Figura 27 – Demonstração da largura da área de conteúdo das páginas do website da JC Alimentos Fonte: Autoria própria.
Isso é fundamental para entender a largura máxima da área de conteúdo das páginas, que é de 1140px de largura, ou seja, independente da largura da tela que será exibido o website, foi estabelecido que a área efetiva de conteúdo fosse de no máximo 1140px de largura, então o conteúdo (com exceção dos planos de fundo) ficou distribuído dentro dessa área.
35
4.4 SEÇÕES DE PÁGINA
As seções aqui mencionadas são as divisões encontradas nas páginas. As informações/conteúdo de cada seção deveriam pertencer ao mesmo contexto e apresentar um design semelhante, que estivesse em concordância tanto em espaçamentos, cores, fontes, ícones, entre outros recursos gráficos.
As divisões foram utilizadas como recurso visual com intercalação de planos de fundo, para deixa-las bem visíveis. Basicamente, utilizou-se imagens em planos de fundo em algumas seções de página e isso foi intercalado com fundo branco, para enfatizar uma agrupamento de conteúdo de mesmo contexto, esses blocos de conteúdo são as “seções de página”, conforme exemplo na figura 28.
Figura 28 – Demonstração das seções de página do website da JC Alimentos Fonte: Autoria própria.
4.5 CABEÇALHO DO WEBSITE
Foi escolhido fazer um cabeçalho apenas com o logotipo a esquerda e menu a direita, pois de maneira básica o logotipo serve para identificar a empresa e o menu para acessar as páginas. Outra característica do cabeçalho é que o mesmo aparece em todas as páginas do website, é um conteúdo fixo. Como forma de orientar o usuário com relação a qual pagina se encontra, foi utilizado cor laranja no item de menu que correspondesse a página ativa, conforme figura 29.
36
Figura 29 – Cabeçalho do website da JC Alimentos
Fonte: print screen do layout do website da JC Alimentos no sistema operacional Windows 10.
O critério para escolha da cor do fundo do cabeçalho, foi que observou-se pela JC Alimentos que o logotipo se destacava mais ao utilizar fundo azul, ouve maior contraste do que com fundo branco. Outra constatação foi que perdia-se visualmente a divisão entre cabeçalho e o primeiro banner, como pode-se observar na figura 30.
Figura 30 – Parte superior da homepage do website da JC Alimentos
Fonte: print screen do layout do website da JC Alimentos no sistema operacional Windows 10.
4.6 DESIGN DA HOMEPAGE DA JC ALIMENTOS
Foi definido que a página inicial do website da JC Alimentos deveria apresentar informações em destaques sobre a área de atuação e sobre quem é a JC Alimentos, pois segundo Steve Krug “Como a capa de uma revista, a página inicial precisa atrair com dicas do “bom material” dentro dela” (Krug, 2005, p. 96). Portanto, foi apresentado na homepage da JC Alimentos as informações mais importantes e algumas de maneira introdutória, buscando despertar o interesse do usuário para navegar pelo website e conferir as informações completas.
Foi respeitado uma hierarquia, ou seja, informações mais importantes primeiro, levando em consideração o que diz Steve Krug, que “A página inicial deve dar uma visão geral do que o site possui para oferecer - tanto conteúdo ("O que eu encontro aqui?") e os recursos ("O que eu posso fazer aqui?")” (Krug, 2005, p. 95), isto está diretamente relacionado com as informações que identificam a empresa e o que ela faz, portanto isso foi considerado ao projetar o layout da homepage.
37
4.6.1 Banners rotativos
Em se tratando da homepage, ou página inicial, é bem comum em website em geral a utilização de banners rotativos, ou imagens em efeito carousel (carrossel em sua tradução). Essas imagens com textos e botões/links, ocupam uma mesma área na parte superior da página, ou seja, exibe mais de um conteúdo no mesmo lugar (um de cada vez). E, além da “compactação” do conteúdo há um benefício adicional, “mais informações aparecem próximas ao topo da área visível, podendo haver uma oportunidade maior para as pessoas realmente visualizarem.” (Pernice, 2013, tradução nossa).
Portanto ao elaborar o layout da homepage optou-se por usar esse recurso, porém algumas diretrizes foram seguidas, como por exemplo limitar o número de banners, ou quadros, pois “Pode ser desgastante percorrer muitos quadros em um dispositivo móvel, e é difícil para os usuários reconhecerem tópicos que já visualizaram quando um conjunto excede cerca de cinco” (Pernice, 2013, tradução nossa). Também foi preciso pensar em uma navegação (conforme figura abaixo, indicação em vermelho) intuitiva pelos banners/quadros, com setas para se poder passar manualmente (os banners/quadros) e caso passasse automaticamente deveria ficar tempo suficiente para o usuário ler toda informação, como mencionado no artigo sobre “Usabilidade do carousel” do website Nielsen Norman Group, que “deve-se estimar quanto tempo o usuário médio pode ler o texto e processar as imagens”. (Pernice, 2013, tradução nossa).
O botão “saiba mais” desse banner aponta para a seção de página “Como funciona?”, logo abaixo ainda na homepage, pois são informações que se complementam. Ocorre da seguinte forma, há uma questão “Deseja melhorar suas vendas?” e logo abaixo um dos motivos que sugere que a JC Alimentos poderia ajudar (possui 25 anos de experiência). Após isso o botão “saiba mais” recomenda que o usuário acesse informações complementares e direciona para a seção “Como funciona?” que traz informações sobre a atuação da JC Alimentos. Conforme demostrado na figura 31.
38
Figura 31 – Exemplo de redirecionamento do botão “saiba mais” no primeiro banner da homepage Fonte: print screen do layout do website da JC Alimentos no sistema operacional Windows 10.
Na segunda imagem do banner rotativo (carousel) não foi utilizado uma imagem relacionada à alimentos, ou empresa/escritório, mas sim a imagem de uma ponte, conforme figura 32. Sugestivamente a JC Alimentos estaria sendo representada como uma ponte que liga Indústria Alimentícia e Supermercados, pois o significado de ponte na linguagem figurada é “Qualquer elemento que estabelece contato entre pessoas, entidades ou coisas” (Michaelis Dicionário Brasileiro da Língua Portuguesa, 2015). Outro fator que contribuiu para escolha desta imagem especificamente foram as cores predominantes na imagem, as tonalidades de laranja e de azul, que são cores que harmonizaram bem com as cores do logotipo identidade visual do website.
39
Figura 32 – Segundo banner da homepage definido com função carousel
Fonte: print screen do layout do website da JC Alimentos no sistema operacional Windows 10.
4.6.2 Demais elementos da homepage
Após os banners rotativos, foram destacados 3 serviços da empresa, conforme figura 33, para dar ênfase foram incluídos ícones, textos breves e botões com links para encaminhar para uma página com as informações mais completas dos serviços, pois segundo Krug “Informações complementares longas podem ser delegadas a páginas secundárias” (Krug, 2000, p.112)
Figura 33 – Seção de página com trechos de informações sobre serviços da JC Alimentos Fonte: print screen do layout do website da JC Alimentos no sistema operacional Windows 10.
Foi projetado uma área para explicar brevemente como funciona a prestação de serviços como representante comercial, para isso usou-se um accordion, ou seja, “um elemento de design que se expande no lugar para expor algumas informações ocultas [...] os accordions empurram o conteúdo da página para baixo, em vez de ficarem sobrepostos no topo do conteúdo da página” (Budiu, 2015, tradução nossa).
40
esclarecimentos sobre a maneira que a JC Alimentos desempenha a função de representante comercial, foi essencial utilizar pouco espaço para que o usuário não perdesse o interesse de ler um conteúdo tão importante. Nessa área foi incluído a informação sobre o que é um representante comercial, informação sobre como funciona a parceria entre prestador de serviço e contratante e a última parte do conteúdo com informações sobre como contratar, conforme figura 34. A navegação é bem simples, basta clicar no título, com ícone de um ‘+’ a esquerda e o conteúdo oculto ira aparecer.
Figura 34 – Seção de página que informa como funciona a prestação de serviços da JC Alimentos Fonte: print screen do layout do website da JC Alimentos no sistema operacional Windows 10.
Após a seção de página “Como funciona?” foi projetado uma área que exibisse os logotipos dos supermercados que a JC Alimentos atende, utilizou-se um design tipo carousel (figura 35) onde as imagens circulariam de tempos em tempos e automaticamente, porém, com disponibilidade de setas para controle manual. A razão para se utilizar esse método foi simples, se tratavam de vários logotipos, pois a JC Alimentos atende dezenas de redes de supermercados de Curitiba e região metropolitana, mas o grid foi limitado com seis colunas para posicionar elementos gráficos. Portanto, o resultado obtido com o efeito carousel trouxe melhor funcionalidade dentro destas condições.
41
Não se optou por criar um quadro, conforme figura 36, pois isso tomaria muito espaço, inclusive na exibição do website em dispositivos moveis, pois a largura de tela é menor, por isso veio a calhar um efeito carousel que exibe de maneira rotativa e compacta o conteúdo, além de priorizar a exibição dos logotipos dos supermercados que aparecem primeiro, pois estas eram as mais importante.
Figura 36 – Opção (descartada) que apresenta os supermercados que a JC Alimentos atende Fonte: print screen do layout do website da JC Alimentos no sistema operacional Windows 10.
A partir da análise de similares, foi possível confirmar a importância de apresentar características boas da empresa, alguns websites analisados colocam a missão, a visão, objetivos, enfim, informações que contribuíssem para gera mais afinidade com o usuário (e possível cliente) que acessasse o website
A seção de página em questão mostrou as características positivas da JC Alimentos, com o objetivo de motivar confiança do usuário para com a empresa, de maneira ilustrativa, utilizando ícones para contribuir para rápida absorção da informação contida nos textos, conforme figura 37.
Figura 37 – Seção que apresenta os diferenciais da JC Alimentos
42
Na última seção da homepage foi apresentado quatro artigos do Blog, ou a introdução de cada um pra ser mais especificamente, conforme figura 38. Esse conteúdo tem a função de familiarizar o usuário com os assuntos presentes no website, com informações a respeito de representação comercial e vendas, assuntos relacionados a área de atuação da JC Alimentos. Como o objetivo não era tomar muito espaço na homepage, mas sim utiliza-la como uma “vitrine” para os seus conteúdos internos, foi deixado apenas a introdução dos artigos e um botão “saiba mais” com link direto para informação completa em outra área do website. Pois segundo o argumento de Nielsen, sobre Blog corporativo, “A exibição de resumos de muitos artigos tem mais probabilidade de atrair usuários do que fornecer artigos completos, o que pode esgotar rapidamente o interesse do leitor” (Nielsen, 2010, tradução nossa). Foi deixado, por exemplo, um artigo nesta seção sobre “as vantagens de se ter um representante” (terceiro na figura 38), com informações que pudessem despertar o interesse de algum usuário ligado a Industria Alimentícia, que viesse a acessar o website da JC Alimentos, pois é um assunto que esclarece o que um representante comercial faz e mostra algumas vantagens de se obter os serviços do mesmo.
Figura 38 – Seção de página que exibe resumos do artigos do Blog da JC Alimentos
Fonte: print screen do layout do website da JC Alimentos no sistema operacional Windows 10.
4.7 RODAPÉ DO WEBSITE
Buscou-se ocupar o rodapé com meios de contatos da JC Alimentos, conforme figura 39, logo abaixo, por se tratar de um conteúdo fixo no website que está sempre
43
No topo do rodapé foi deixado um telefone de maneira bem destacada, os demais contatos embaixo na primeira coluna, na segunda coluna um formulário e ainda opção para seguir a página da JC Alimentos no Facebook (terceira coluna). Foi aproveitado a área do topo a direita para inserir um campo de cadastro de e-mail (cadastro para Newsletter), uma opção a mais para manter usuários inteirados das postagens que surgirem no Blog. Este campo de cadastro de e-mail foi aplicado sem grandes expectativas de retorno, porém caso um usuário, ou seja, alguém ligado a Industria Alimentícia, opte por cadastrar o e-mail, este usuário recebera atualizações de conteúdo através de e-mail marketing, com informações que agreguem credibilidade quanto a capacidade de atuação profissional da JC Alimentos.
Figura 39 – Layout do rodapé do website da JC Alimentos
Fonte: print screen do layout do website da JC Alimentos no sistema operacional Windows 10.
4.8 DESIGN DA PÁGINA INSTITUCIONAL
A primeira seção da página “Sobre a empresa” foi destina a exibir o título da página, sobre um plano de fundo um pouco escuro para contrastar com este título. A imagem de plano de fundo da área de título é comum a todas as páginas com exceção da homepage, isso contribui para destacar o título da página, além de exibir uma imagem em um contexto de empresa de negócios, assunto que será abordado posteriormente sobre o conceito das imagens utilizadas no website da JC Alimentos.
Abaixo do título, conforme figura 40, foi incluído um bloco de texto breve sobre a história da empresa, sobre quem é a JC Alimentos e o que ela faz. Vale ressaltar que os textos de todo o website foram elaborados pela JC Alimentos, durante o design foi apenas posicionado de maneira mais conveniente estes textos.
44
Figura 40 – Layout da página sobre a empresa JC Alimentos
Fonte: print screen do layout do website da JC Alimentos no sistema operacional Windows 10.
O Conteúdo após o texto sobre a JC Alimentos foi uma espécie de portfólio, pois exibe imagens dos produtos das Indústrias (representadas) nas áreas de venda dos Supermercado, assim como informações sobre essas Indústrias Alimentícias para as quais a JC Alimentos presta serviços. Para mostrar a área de venda dos produtos das Industrias parceiras foi projetado uma galeria de imagens, escolhidas pela JC Alimentos e que podem ser ampliadas quando clicadas, pois desta forma é possível que o usuário veja um pouco do trabalho da JC Alimentos.
Para contribuir visualmente na divisão das seções desta página sobre a empresa, foi deixado o fundo cinza nessa seção “Indústrias que representamos”. Os blocos de conteúdo que continham as informações de cada Industria (representada), foram feitos sobre o fundo branco, isso foi utilizado como estratégia para criar delimitações de conteúdo e tornar mais organizado, conforme figura 41.
45
Abaixo da seção “Industrias que representamos” foi projetado uma área de depoimentos de profissionais envolvidos com vendas que já tiveram contato com os trabalhos da JC Alimentos, conforme figura 42. O objetivo foi gerar confiança no usuário, uma vez que há relatos sobre a eficiência do trabalho da JC Alimentos. Novamente foi usado um efeito carousel e exibido um depoimento por vez (conforme figura abaixo), isso tornou bem compacta a exibição e o conteúdo passa automaticamente ou clicando nas bolinhas abaixo do texto.
Figura 42 – Layout da seção de página com depoimentos a respeito da JC Alimentos Fonte: print screen do layout do website da JC Alimentos no sistema operacional Windows 10
4.9 DESIGN DO BLOG
Um Blog permite atualização rápida com a possibilidade de acrescentando artigos e podem ser escritos por vários autores. Respondendo a um interesse da JC Alimentos, foi possibilitado que a JC Alimentos pudesse criar artigos nesse Blog de maneira prática, sem auxílio de um web designer, por isso optou-se por um Blog, para dar autonomia ao cliente JC Alimentos. O Blog traz informações a respeito da área de atuação da JC Alimentos, ou seja, conteúdo relacionado a vendas, negociações e representação comercial.
Inicialmente foi relacionado artigos do Blog com assuntos da homepage, conforme figura 43, onde temos uma introdução a respeito de serviços da JC Alimentos. Já o assunto completo ficou acessível através do botão (link) “Saiba mais”, após isso o usuário é direcionado para o Blog, mais especificamente para o artigo correspondente ao assunto clicado na página inicial.
46
Figura 43 – Demonstração de redirecionamento do link sobre Visibilidade para o artigo do blog Fonte: print screen do layout do website da JC Alimentos no sistema operacional Windows 10
Diferente da homepage e da página “sobre a empresa”. O Blog não foi projetado obedecendo um grid de seis colunas proporcionais, mas sim, em um grid que divide a página em 3/4 (três quartos) de largura para os artigos e 1/4 (um quarto) de largura para menus e links de navegação (barra lateral). Foi escolhido dessa forma, tanto pelo aproveitamento de espaço, quanto pelo fato dessa diagramação ser mais comum em blogs. Ficou na barra lateral a direita, tudo que diz respeito a navegação, como uma área de busca, link das categorias de artigos e etiquetas (tags) que são termos presentes nos artigos como se fossem palavras chave e que são apresentadas na barra lateral para facilitar a filtragem de busca por termos, conforme figura 44.
