Portal oppe priscila borges by Clari

UNIVERSIDADE DO SUL DE SANTA CATARINA PRISCILA APARECIDA BORGES

Desenvolvimento de um Portal Web de Pesquisas de Pre莽os de Produtos de Supermercado.

Florian贸polis 2010

PRISCILA APARECIDA BORGES

Desenvolvimento de um Portal Web de Pesquisas de Preços de Produtos de Supermercado.

Trabalho de desenvolvimento de um Portal Web apresentado ao curso de Design da Universidade do Sul de Santa Catarina, como requisito final à obtenção do título de Bacharel em Design.

Orientador: Prof. Cláudio Henrique da Silva, Msc.

Florianópolis 2010

AGRADECIMENTOS

Ao privilégio de cursar Design na Universidade do Sul de Santa Catarina com bolsa integral adquirida a partir da realização do ENEM e classificação por notas no ProUni, programa Universidade para Todos do Governo Federal. Ao Orientador Prof. Cláudio Henrique da Silva pelo apoio e auxílio às atividades e discussões pertinentes ao desenvolvimento deste projeto de Design Digital. Aos demais professores e coordenadora do curso de Design da Universidade do Sul de Santa Catarina por suas vocações e dedicações ao ensino de Design durante o curso. Aos colegas de classe pelo apoio e troca de informações e materiais sobre os diversos projetos desenvolvidos ao longo do curso de Design. Aos pais pelo apoio incondicional ao longo do curso. Sempre com incentivo ao desenvolvimento de novos projetos de Design. E, Finalmente, ao apoio incondicional do Eng. De Controle e Automação Luís Carlos Dill Junges, meu namorado, que acreditou neste projeto e irá, juntamente com uma equipe multidisciplinar, torná-lo real e acessível na Internet aos consumidores.

RESUMO

Diante do problema do processo de pesquisa de preço ao consumidor, que espera encontrar o supermercado que possua o menor preço por um conjunto pré-determinado de itens de consumo, tem-se uma grande oportunidade de desenvolver uma ferramenta específica para isso. Com o intuito de explorar melhor esta idéia, apresenta-se uma conceituação do problema bem como o porquê este surge dentro do mercado de produtos de supermercado. Juntamente com isso, define-se o problema baseado em pesquisa de campo realizada junto aos consumidores. Uma vez definido o conceito e abrangência do problema, apresenta-se uma proposta de solução deste com as vantagens e desvantagens de sua utilização. De modo geral, apresenta-se a idéia de construção de um Portal Web de pesquisa de preço voltado aos consumidores onde é possível pesquisar os mais diversos produtos de supermercados bem como comparar seus preços, que são atualizados automaticamente. Definida a proposta de solução, apresenta-se o desenvolvimento da marca e da identidade visual de tal modo que estas sejam coerentes com os seus objetivos e suas finalidades. Ao final, este documento apresenta um projeto de um Portal Web de pesquisa de preços utilizando a metodologia Garrett onde são levadas em consideração, com o objetivo de obter uma melhor experiência do usuário na Web, as etapas de Objetivos do Portal Web, Especificações Funcionais, Arquitetura da informação, Design de Interação, Design de Informação bem como o Design Visual. Palavras-chave: Portal Web. Economia em supermercados. Comparação de preço. Produtos de Supermercado.

ABSTRACT

Faced with the problem of the research process of the consumer price, hoping to find the supermarket that has the lowest price for a predetermined set of consumer items, there is a great opportunity to develop a specific tool for that.In order to explore this idea, this document presents a conceptualization of the problem and why it arises on the supermarket products. Along with this, the problem is defined based on field research conducted among consumers. Having defined the concept and scope of the problem, this document presents a proposed solution to this with the advantages and disadvantages of its use. In general, it presents the idea of building a Web Portal for price search where the users can search a wide variety of grocery products as well as compare their prices, which are updated automatically.Once defined the proposed solution, this document presents the development of the brand and visual identity so that they are consistent with its objectives and purposes. Finally,

this

document

presents a Design of a Web Portal for price search using the Garrett methodology where it is taken into account, in order to get a better user experience on the Web, the steps of Functional Specifications, Objectives of the Web Portal, Architecture Information Design, Interaction Design, Information Design and also the Visual Design. Key words: Web Portal. Economy in supermarkets. Price comparison. Supermarket Products.

LISTA DE ILUSTRAÇÕES Figura 1.1 - Metodologia Garrett.......................................................................20 Figura 1.2 - Execução da Metodologia Garrett.................................................21 Figura 2.1 - Evolução dos números de e-commerce........................................28 Figura 2.2 - Mercado mais barato da região.....................................................32 Figura 2.3 - As redes mais baratas...................................................................33 Figura 2.4 - Prestação de serviços ainda engatinha.........................................33 Figura 2.5 - Preços praticados na Internet pelos supermercados.....................34 Figura 2.6 - Atravesse a rua e economize.........................................................34 Figura 2.7 - Valores da cesta básica.................................................................35 Figura 2.8 - Valores dos alimentos por região...................................................37 Figura 2.9 - Tempo de trabalho para comprar a ração essencial......................39 Figura 2.10 - Preços médios da Ração essencial.............................................40 Figura 2.11 - Critérios de busca para cesta básica...........................................41 Figura 2.12 - Resultado da busca......................................................................41 Figura 2.13 - Tempo de navegação por pessoa no Brasil.................................48 Figura 2.14 - Número de usuários de Internet ativos no Brasil..........................49 Figura 2.15 - Nível global de utilização da Internet...........................................50 Figura 2.16 - Faixa Etária de usuário da Internet no Brasil...............................51 Figura 3.1 - Página inicial do Super Pesquisa.net.............................................52 Figura 3.2 - Página de detalhes do produto.......................................................53 Figura 3.3 - Página inicial Mercado Mineiro.......................................................53 Figura 3.4 - Listagem de produtos do Mercado Mineiro....................................54 Figura 3.5 - Página de preços detalhados do Mercado Mineiro........................55 Figura 3.6 - Lista de compras do Mercado Mineiro...........................................55 Figura 3.7 - Gráfico de respostas diárias..........................................................56 Figura 3.8 - Idade dos participantes da pesquisa..............................................57 Figura 3.9 - Profissões dos participantes..........................................................57 Figura 3.10 - Participantes dividos por sexo.....................................................57 Figura 3.11 - Escolaridade dos participantes....................................................58 Figura 3.12 - Frequência de acesso a Internet.................................................58 Figura 3.13 - Quantidade de entrevistados que pratica economia doméstica.58 Figura 3.14 - Frequência com que pratica a economia doméstica...................59

Figura 3.15 - Modo de pesquisar os preços......................................................59 Figura 3.16 - Atributos mais importantes na visão do usuário..........................59 Figura 3.17 - Supermercados mais comuns......................................................60 Figura 3.18 - Supermercados vistos pelos clientes como vendedores pela Internet..............................................................................................................60 Figura 3.19 - Número de usuários que pesquisam preços................................61 Figura 3.20 - Quantidade de usuários que utilizariam o Portal Web.................61 Figura 3.21 - Atributos desejados pelos clientes...............................................61 Figura 3.22 - Tipos de propaganda desejados pelos clientes...........................62 Figura 3.23 - Percentual de clientes que compraria pelo Portal Web...............62 Figura 3.24 - Benefícios esperados pelos clientes............................................62 Figura 3.25 - Percentual de clientes que comprariam no supermercado mais barato.................................................................................................................63 Figura 3.26 - Clientes que fariam um cadastro no Portal Web..........................63 Figura 3.27 - Tempo que o cliente gastaria no Portal Web...............................63 Figura 4.1 - Painel semântico expressão do produto........................................65 Figura 4.2 - Painel semântico público alvo........................................................66 Figura 4.3 - Painel semântico tema visual.........................................................66 Figura 4.4 - Casos de uso do sistema...............................................................68 Figura 4.5 - Mapa de navegação do Portal Web...............................................69 Figura 5.1 - Palavras mais citadas pelos usuários em conversa informal........72 Figura 5.2 - Palavras formadas pela associação das letras chave...................74 Figura 5.3 - Palavras finalistas……………………………………………...…..…74 Figura 5.4 - Elementos para símbolos...............................................................75 Figura 5.5 - Potenciais Slogans.........................................................................77 Figura 5.6 - Estudos de logotipos......................................................................78 Figura 5.7 - Logotipos selecionados para aprimoramento.................................78 Figura 5.8 - Logotipos selecionados para refinamento......................................79 Figura 5.9 - Estudos para refinamento do conceito do símbolo........................80 Figura 5.10 - Alternativas iniciais do símbolo....................................................81 Figura 5.11 - Alternativas aperfeiçoadas do símbolo........................................82 Figura 5.12 - Alternativas para refinamento……………………………….....…..82 Figura 5.13 - Alternativas iniciais da composição da marca..............................83

Figura 5.14 - Alternativas escolhidas para refinamento da composição da marca................................................................................................................83 Figura 5.15 - Alternativas geradas com slogan.................................................84 Figura 5.16 - Alternativa final na posição horizontal e espelhada.....................85 Figura 5.17 - Alternativa final na posição vertical..............................................85 Figura 5.18 - Contorno estrutural marca horizontal e espelhada......................86 Figura 5.19 - Contorno estrutural marca vertical...............................................86 Figura 5.20 - Escala de cinza da marca horizontal e espelhada.......................87 Figura 5.21 - Escala de cinza da marca vertical................................................87 Figura 5.22 - Lista de cores definidas na marca...............................................88 Figura 5.23 - Tipografia institucional da marca oppe........................................89 Figura 5.24 - Malha construtiva para a marca oppe.........................................89 Figura 5.25 - Limites de redução para a marca oppe horizontalmente............90 Figura 5.26 - Limites de redução para a marca oppe verticalmente.................90 Figura 7.1 - Wireframe da página inicial..........................................................106 Figura 7.2 - Wireframe da demonstração do vídeo.........................................106 Figura 7.3 - Wireframe da descrição do Portal Web.......................................107 Figura 7.4 - Wireframe de supermercados parceiros......................................107 Figura 7.5 - Wireframe de supermercado parceiro..........................................108 Figura 7.6 - Wireframe de ofertas do supermercado parceiro.........................109 Figura 7.7 - Wireframe de parcerias................................................................109 Figura 7.8 - Wireframe de Termos de Uso......................................................109 Figura 7.9 - Wireframe de Contato..................................................................110 Figura 7.10 - Wireframe da Página Inicial.......................................................110 Figura 7.11 - Wireframe da página principal de pesquisas.............................111 Figura 7.12- Wireframe da página de Super Ofertas.......................................112 Figura 7.13 - Wireframe da página de pesquisa..............................................113 Figura 7.14 - Wireframe de Detalhes do Produto............................................114 Figura 7.15 - Wireframe de detalhe de Lista de Pesquisa...............................115 Figura 7.16 - Wireframe de envio de Lista de Pesquisa..................................115 Figura 7.17 - Wireframe de resposta ao usuário.............................................116 Figura 8.1 - Mapa de navegação………………………………………...……....117 Figura 8.2 - Elemento ComboBox para seleção de bairro...............................119 Figura 8.3 - Elemento seta...............................................................................119

Figura 8.4 - Padrões cromáticos e tipografia dos elementos Combobox e seta..................................................................................................................119 Figura 8.5 - Elemento de atalho para o vídeo.................................................120 Figura 8.6 - Modo fullscreen do vídeo de apresentação.................................120 Figura 8.7 - Padrões cromáticos e tipografia do texto ....................................121 Figura 8.8 - Carrinho de compras cheio..........................................................121 Figura 8.9 - Bloco de navegação para as páginas de apoio do Portal Web..122 Figura 8.10 - Padrões cromáticos e tipografia do texto e barra inferior..............................................................................................................122 Figura 8.11 - Texto as melhores ofertas na página inicial...............................123 Figura 8.12 - Padrões cromáticos e tipografia do texto as melhores ofertas..123 Figura 8.13 - Borda superior página inicial......................................................123 Figura 8.14 - Padrões cromáticos borda superior página inicial......................124 Figura 8.15 - Barra de navegação superior do Portal Web.............................125 Figura 8.16 - Padrões cromáticos e tipografias da barra de navegação superior............................................................................................................125 Figura 8.17 - Barra de navegação por categorias e subcategorias.................126 Figura 8.18 - Padrões cromáticos e tipografia da barra de navegação por categorias e subcategorias..............................................................................127 Figura 8.19 - Prateleira de produtos por supermercado..................................128 Figura 8.20 - Padrões cromáticos e tipografia da prateleira de produtos por supermercado..................................................................................................129 Figura 8.21 - Prateleira de ofertas dos supermercados parceiros...................130 Figura 8.22 - Padrões cromáticos e tipografia da prateleira de ofertas...........130 Figura 8.23 - Detalhes do produto…………………………………………......…131 Figura 8.24 - Padrões cromáticos e tipografia de detalhe dos produtos.........132 Figura 8.25 - Lista de Pesquisa……………………………………………….…133 Figura 8.26 - Padrões cromáticos e tipografia da Lista de Pesquisa..............134 Figura 9.1 - Layout da página inicial do Portal Web........................................135 Figura 9.2 - Layout da página de ofertas.........................................................136 Figura 9.3 - Layout da página de listagem de produtos..................................137 Figura 9.4 - Layout da página de detalhes do produto....................................138 Figura 9.5 - Layout da página dos produtos selecionados..............................139 Figura 9.6 - Layout da lista para impressão.....................................................140

Figura 9.7 - Layout da página Sobre o Portal..................................................141 Figura 9.8 - Layout da página dos Supermercados Parceiros.........................141 Figura 9.9 - Layout da página do Supermercado Parceiro Angeloni...............142 Figura 9.10 - Layout da página de Termos de uso..........................................142 Figura 9.11 - Layout da página de Parcerias...................................................143 Figura9.12 - Layout da página de Contato......................................................143

SUMÁRIO 1 INTRODUÇÃO................................................................................................14 1.1 PROBLEMA.................................................................................................14 1.2 OBJETIVOS.................................................................................................15 1.2.1 Objetivo geral..........................................................................................15 1.2.2 Objetivos Específicos.............................................................................15 1.3 JUSTIFICATIVA...........................................................................................15 1.4 ESCOPO......................................................................................................17 1.5 PROCEDIMENTO METODOLÓGICO.........................................................18 1.5.1 Metodologia de Projeto Digital..............................................................18 1.5.1.1 Metodologia Garrett...............................................................................19 2 FUNDAMENTAÇÃO TEÓRICA.....................................................................22 2.1 ECONOMIA DOMÉSTICA...........................................................................22 2.1.1 Moradia e Alimentação...........................................................................24 2.2 DINÂMICA DOS SUPERMERCADOS........................................................25 2.2.1 Promoções em supermercados............................................................25 2.2.2 Preços de Supermercados....................................................................26 2.3 E-COMMERCE............................................................................................28 2.3.1 E-Commerce em Supermercados.........................................................29 2.4 PESQUISAS DE PREÇOS DE PRODUTOS DE SUPERMERCADO........30 2.4.1 PROTESTE...............................................................................................31 2.4.2 DIEESE.....................................................................................................36 2.4.2.1 Metodologia DIEESE.............................................................................36 2.4.3 Associações das Donas de Casa..........................................................41 2.5 IDENTIFICAÇÃO DO NEGÓCIO ATRAVÉS DA MARCA...........................43 2.6 DESIGN DIGITAL........................................................................................44 2.7 ABRANGÊNCIA DA INTERNET..................................................................45 2.7.1 Publicidade e Internet.............................................................................46 2.7.2 Abrangência da Internet no Brasil........................................................48 3 PESQUISA DE MERCADO............................................................................52 3.1 PESQUISA DE CONCORRENTES.............................................................52 3.2 PESQUISA DE CAMPO..............................................................................56 3.2.1 Pesquisa de campo com consumidores..............................................57

3.2.2 Pesquisa de campo com supermercadistas.......................................63 3.2.3 Definição Público Alvo..........................................................................64 4 CONCEITO DO PROJETO DIGITAL............................................................65 4.1 INDICADORES...........................................................................................66 4.2 ANÁLISE DE REQUISITOS PRELIMINARES............................................67 4.2.1 Descrição das funcionalidades e conteúdo preliminares................68 4.3 ATUALIZAÇÕES DE PREÇOS NO PORTAL WEB....................................70 5 DEFINIÇÃO E DESENVOLVIMENTO DA MARCA.......................................72 5.1 PROBLEMATIZAÇÃO…………………………………………………...……..72 5.2 CONCEPÇÃO DO LOGOTIPO....................................................................72 5.3 CONCEPÇÃO DO SÍMBOLO......................................................................74 5.4 CONCEPÇÃO DO SLOGAN.......................................................................76 5.5 GERAÇÃO DE ALTERNATIVAS DO LOGOTIPO.......................................77 5.6 GERAÇÃO DE ALTERNATIVAS DO SÍMBOLO..........................................79 5.7 GERAÇÃO DE ALTERNATIVAS DA COMPOSIÇÃO DA MARCA..............83 5.8 APERFEIÇOAMENTO E VALIDAÇÃO........................................................84 5.9 ESTUDOS DE COR.....................................................................................87 5.10 TIPOGRAFIA……………………………………………………………......…88 5.11 MALHA CONSTRUTIVA E LIMITES DE REDUÇÃO................................89 6 ESPECIFICAÇÕES FUNCIONAIS E REQUISITOS DE CONTEÚDO..........91 6.1 ESPECIFICAÇÕES FUNCIONAIS…………………………………...…..…..91 6.1.1 Listar produtos…………………………………………………………......91 6.1.2 Selecionar produtos e lista de pesquisa............................................91 6.1.3 Comparar preços dos produtos em cada supermercado.................92 6.1.4 Informar o consumidor sobre os serviços.........................................92 6.2 REQUISITOS DE CONTEÚDO…………………………………………...…..92 6.2.1 Requisitos para listar produtos…………………………………...….....93 6.2.2 Selecionar produtos e lista de pesquisa............................................94 6.2.3 Comparar preços dos produtos em cada supermercado.................95 6.2.4 Páginas de apoio e informação ao usuário........................................95 7

DESIGN DE INTERAÇÃO E ARQUITETURA DA INFORMAÇÃO............97

7.1 DESIGN DE INTERAÇÃO...........................................................................97 7.1.1 Requisitos para listar produtos……………………………....…...….....98 7.1.2 Selecionar produtos e lista de pesquisa..........................................100

7.1.3 Comparar preços dos produtos em cada supermercado...............101 7.1.4 Páginas de apoio e informação ao usuário......................................101 7.2 ARQUITETURA DA INFORMAÇÃO.........................................................105 7.2.1 Proposta de wireframe……………………………………..………….…105 7.2.1.1 Wireframe Final……………………………………………….…………..105 8

DESIGN DA INFORMAÇÃO…………………………………………………117

8.1 DESIGN DA NAVEGAÇÃO.......................................................................117 8.2 DESIGN DA INTERFACE.........................................................................118 8.2.1 Página Inicial…………………………………………………………..…..118 8.2.2 Página da listagem de produtos........................................................124 8.2.3 Página das Ofertas...............................................................................129 8.2.4 Página dos Detalhes do Produto.........................................................131 8.2.5 Página da Lista de Pesquisa................................................................132 9 DESIGN VISUAL DO PORTAL WEB..........................................................135 CONSIDERAÇÕES FINAIS............................................................................144 REFERÊNCIAS BIBLIOGRÁFICAS...............................................................146 APÊNDICE A – QUESTIONÁRIO DOS CONSUMIDORES...........................150 APÊNDICE B – QUESTIONÁRIO DOS SUPERMERCADOS.......................155

1 INTRODUÇÃO Este capítulo descreve o problema, bem como os objetivos a serem atingidos com este projeto de conclusão de curso. Deste modo, relata detalhadamente a justificativa do projeto além, de apresentar a metodologia que será utilizada ao longo do desenvolvimento do projeto. 1.1 PROBLEMA O problema é o processo de pesquisa de preço ao consumidor que espera encontrar o supermercado que possua o menor preço por um conjunto pré-determinado de itens de consumo. A grande dificuldade é obter a relação dos preços de cada supermercado bem como fazer a comparação destes com o intuito de encontrar o menor valor total. Isto se torna inviável de se realizar, no momento de efetuar as compras dos itens, uma vez que demanda visitas pessoais a todos os supermercados ou acesso a todos os sites dos supermercados

ainda

acesso

às

informações

consolidadas

pelas

Associações das Donas de Casa. Este problema de diferença de preços nos diversos supermercados tem sua origem fundamentada em fatores como: lucratividade praticada nos produtos, localização do supermercado, infra-estrutura do supermercado, promoções e parcerias com fornecedores entre outras variáveis. Desse modo, um conjunto de itens apresenta uma grande variação do preço total que é muito difícil de ser mapeada manualmente. Como conseqüência, o comprador dos itens acaba por escolher o seu supermercado baseado em variáveis como facilidade de acesso, conhecimento prévio do supermercado, qualidade do ambiente, nível de atendimento entre outras variáveis pessoais. Este comprador, entretanto, não inclui nesta escolha do supermercado a variável de preço total dos itens pela dificuldade em obtê-la. Assim, o consumidor fica sujeito a pagar um preço maior pelo conjunto de itens desejados em determinado supermercado.

1.2 OBJETIVOS Nesta seção são apresentados o objetivo geral e específicos que se pretende atingir no final do desenvolvimento deste projeto. 1.2.1 Objetivo geral Desenvolver um Portal Web gratuito no qual o usuário poderá definir sua lista de compras e saber qual o supermercado que oferece produtos pelo menor preço. Trata-se, portanto, de uma ferramenta on-line de comparação de preços de um determinado conjunto de produtos junto aos supermercados de Florianópolis. 1.2.2 Objetivos Específicos Dentre os objetivos específicos a serem atingidos, os principais são: 1. Compreender a dinâmica das diferenças de preços efetuadas em supermercados de Florianópolis. 2. Compreender a divulgação das pesquisas de mercado realizadas por Associações das Donas de Casa e outras empresas que atendem ao consumidor. 3. Definir conceitos de Design Gráfico e Design Digital no Portal Web para obter navegação e usabilidade eficazes ao usuário. 4. Desenvolver uma marca que apresente ao usuário confiabilidade e transparência das informações. 1.3 JUSTIFICATIVA Levando-se em conta que o consumidor escolhe o supermercado baseado em um conjunto de variáveis na qual a informação do preço total dos itens não é bem definida, tal Portal Web pode impactar na decisão por trazer ao consumidor a informação de preço de maneira correta e prática. Esta escolha de supermercado, portanto, pode ser fortemente influenciada pelo conhecimento do preço total dos itens em determinadas

camadas sociais mais sensíveis financeiramente como, por exemplo, as classes C e D que, em geral, buscam diferentes maneiras de reduzir suas despesas mensais. Neste caso, tal ferramenta torna-se de grande relevância para tal público. Considerando ainda o fato de que tal serviço já é executado de forma incipiente por associações de determinadas cidades (Associações das Donas de Casa) e possui uma procura razoável, existe um público que, como já utiliza as informações das pesquisas de preço dos produtos, poderia também utilizar o Portal Web, pois este forneceria preços em tempo real e não defasados como ocorre atualmente nas pesquisas das Associações das Donas de Casa. Outro aspecto importante para o desenvolvimento de tal Portal Web é que uma parte dos supermercados já apresenta divulgação, compra e entrega de produtos via Internet. Tem-se, portanto, um conjunto de informações on-line de preços bem como usuários potenciais da ferramenta que já pesquisam, utilizam e compram produtos de supermercado através da internet. Tal

ferramenta

também

está

alinhada

com

crescente

disponibilização de serviços on-line oferecidos por grandes redes como, por exemplo, o sistema de compras on-line das Casas Bahia. Este crescimento de aplicações on-line ocorre devido, em parte, ao crescimento da utilização de Internet observado nas classes sociais menos privilegiadas conforme dados do (IBGE, 2005). Esta ferramenta também serviria como exemplo para melhorar a performance no serviço público por apresentar a capacidade de realizar uma pesquisa de preços da cesta básica em poucos minutos. De acordo com o DIEESE (2010), a pesquisa de preços da cesta básica (ração básica) em Março de 2010 consumiu 99 horas e 8 minutos para a cidade de Florianópolis. Com tal ferramenta, este tempo seria reduzido para tão somente o tempo necessário de selecionar os itens que fazem parte da pesquisa, da obtenção do resultado da pesquisa do total de preços pesquisados, além da permanência do consumidor no Portal Web. A justificativa do problema identificado ainda se deve ao crescimento de ferramentas de desenvolvimento digital para Web e do Design Digital como

ferramenta de comunicação e geradora de cultura, bem como pela demanda crescente no uso do comércio eletrônico que, aliados aos anseios dos consumidores, traz informações úteis à sociedade sobre os preços de produtos. Em

última

instância,

tal

ferramenta

ainda

justifica

seu

desenvolvimento pelo potencial que apresenta para ser utilizada como geradora de faturamento mensal decorrente da aplicação de algum modelo de negócio. 1.4 ESCOPO Dentro do escopo do trabalho, os modelos de interação e estudos das tecnologias necessárias serão realizados e entregues ao final do projeto. Isso inclui o desenvolvimento de modelos de navegação e descrição das tecnologias de troca de dados entre o Portal Web e os supermercados. Dentro do desenvolvimento do Portal Web, o trabalho de Design inclui a criação das interfaces gráficas, navegação e interação no Portal Web e construção da marca. Todo

esse

trabalho

será

desenvolvido

com

maiores

supermercados de Florianópolis, que serão definidos de acordo com os resultados

pesquisa

obtidos

relação

aos

supermercadistas,

consumidores e a presença ou não de e-commerce na Internet. Desse modo, o público alvo da ferramenta, que se enquadra dentro do segmento alimentício, serão os consumidores de tais supermercados ou que vivem nas proximidades destes. Este público é composto, em geral, pelas classes C e D que são mais sensíveis às variações de preço e que possuem acesso a Internet. Ainda como restrição do público alvo, os usuários da ferramenta serão consumidores que possuem mais facilidade em utilizar a internet que, segundo o IBGE (2007), se enquadram na faixa etária de 15 a 50 anos. Para

tal

projeto,

tempo

disponível

para

planejamento,

levantamento de requisitos, modelagem bem como desenvolvimento é de aproximadamente oito meses. Dentro deste tempo, o projeto é dividido em duas grandes fases que incluem o planejamento e a parte teórica do projeto

enquanto que a segunda parte inclui efetivamente o desenvolvimento do Portal Web. 1.5 PROCEDIMENTO METODOLÓGICO Os procedimentos metodológicos descritos neste Plano de Trabalho servirão como ferramenta para alcançar os objetivos específicos do projeto em um contexto de pesquisa científica, além de obter conhecimento da realidade empírica do problema e parte do planejamento do projeto; possibilitando, desse modo, um desenvolvimento satisfatório do projeto de Design Digital do Portal Web. Segundo Lakatos apud Marconi (2008), realizar uma pesquisa requer um tratamento científico da informação e se constitui no caminho para se conhecer a realidade ou para descobrir verdades parciais. Ainda segundo estes

autores,

algumas

das

pesquisas

sugeridas

para

resolução

desenvolvimento de projetos são as seguintes: 1. Pesquisa de campo: Pesquisa que será de forma quantitativa, na qual será elaborada para obtenção de dados diretamente com o público alvo nos supermercados, Internet, Associações de Donas de Casa, entre outros. 2. Pesquisa Bibliográfica: Pesquisa que será realizada através de informações já publicadas sobre o assunto do projeto disponibilizadas em livros, teses, artigos de periódicos e materiais disponibilizados na Internet. 1.5.1 Metodologia de Projeto Digital Metodologias de gestão de projetos podem ser aplicadas em desenvolvimento de projetos de Design Digital. Desde que se adéquem ao produto a ser realizado e as condições da realização. Há, atualmente, várias metodologias que possuem algumas vantagens e desvantagens, de acordo com o tipo de projeto a ser realizado, não pode se dizer que um método é melhor que outro, pois um pode funcionar bem onde outro não poderia ser implementado.

Para o desenvolvimento do projeto, a metodologia utilizada será baseada na metodologia de Jesse James Garrett, que organiza as informações e trata das considerações importantes para o desenvolvimento da experiência do usuário na Web. Na próxima seção é explicada a metodologia escolhida para o desenvolvimento do projeto do Portal Web, sendo a metodologia de Design Digital que mais se enquadra com um projeto de média complexidade levando em conta contextos de desenvolvimento. 1.5.1.1 Metodologia Garrett A metodologia Garrett (2003), definida por Jesse James Garrett, define um método simplificado e formal para o desenvolvimento de Web sites e aplicações Web. Segundo seus conselhos, o desenvolvimento de um Web site pode ser completamente decomposto em 5 planos ou etapas, a saber: 1. Objetivo: O objetivo é o primeiro plano que define qual a finalidade principal do site. É o componente mais importante uma vez que define o motivo que fará com que o usuário vá até o site ou forneça a informação que este usuário procura. No projeto proposto, neste plano se enquadra o objetivo do Portal Web que é prover a localização e nome do supermercado que oferece um conjunto de itens pelo menor preço. 2. Escopo: O escopo é considerado o segundo plano onde é realizado o levantamento de requisitos. Nesta etapa, são definidos quais serão os requisitos do sistema como, por exemplo, as opções de busca, salvar e interação que o usuário terá a disposição quando utilizar o Portal. Desse modo, nesta etapa são definidos os requisitos de funcionalidades e de conteúdo do Portal Web. 3. Estrutura: A estrutura define como o site irá se comportar após uma interação do usuário. Neste caso, no projeto proposto, isso inclui como será realizada a busca e comparação de preços de itens junto aos servidores dos

supermercados. Desse modo, nesta etapa são definidos o Design de interação e a arquitetura de informação do Portal Web. 4. Esqueleto: Nesta etapa há uma subdivisão em três sub-etapas menores que englobam o Design de Navegação, o Design de Interface e o Design de Informação. A primeira define o modo com que haverá a navegação pelo Portal de modo a ser claro e conciso para o usuário. A segunda define a construção de wireframes de como será o Portal e posicionamento de componentes de tal modo a permitir o usuário interagir intensamente com as funcionalidades do Portal. Na terceira e última sub-etapa, Design de Informação, são definidos o modo de apresentação da informação de tal modo a facilitar o entendimento por parte do usuário. 5. Projeto Gráfico: Nesta última é realizado o projeto gráfico do Portal. Desse modo, tal etapa compreende efetivamente como o Design visual do Portal e como será quando o estiver acabado. Esta metodologia é apresentada na Figura 1.1, onde é possível perceber os 5 planos distintos com as suas respectivas divisões.

Figura 1.1 - Metodologia Garrett Fonte: Obtida de Garrett (2003)

Esta metodologia ainda prevê que uma forma de se executar o desenvolvimento de cada um dos planos. Considerando que em cada plano há vários caminhos, há uma infinidade de rumos que o projeto, como um todo, pode seguir. Para garantir o sucesso e a boa interação entre os planos, a metodologia sugere que a melhor opção é não seguir rigidamente os planos de tal modo que, somente após acabar um plano, outro possa começar. A metodologia sugere iniciar as atividades ao longo de cada plano antes que o trabalho do plano posterior tenha acabado. Estas duas abordagens de execução de um projeto seguindo a metodologia são mostradas na Figura 1.2.

Figura 1.2 - Execução da Metodologia Garrett Fonte: Obtida de Garrett (2003)

2 FUNDAMENTAÇÃO TEÓRICA

Este

capítulo

subdividido

seções

que

descrevem,

primeiramente, a pesquisa relacionada ao problema proposto ligado a economia doméstica, dinâmica dos supermercados e pesquisas de preço realizadas. Logo após, trata-se da importância e dos limites da área de Design Digital É mostrada a abrangência da Internet no Brasil, bem como a utilização do e-commerce nos supermercados. Ao final, as próximas seções tratam de questões relacionadas ao desenvolvimento do projeto, como estudos técnicos para posterior implementação do sistema. 2.1 ECONOMIA DOMÉSTICA O presente projeto visa desenvolver um Portal Web de pesquisas de preço de produtos de consumo de supermercados. E o maior fator para a sua utilização é a procura pelos consumidores por economia em suas compras nos supermercados. Esta seção vai dar um panorama da economia doméstica e a interferência desta ação no orçamento doméstico. Partindo do pressuposto que as classes mais baixas necessitam de uma maior economia doméstica diante de seu orçamento limitado, ambas as classes praticando economia doméstica podem usufruir das sobras e economizar ou fazer mais atividades de lazer, cada indivíduo poderá aproveitar os frutos de sua economia quando for conveniente. Todas as famílias têm que administrar as contas da casa e a economia doméstica é esta administração. Planejamento e ação que tem como intuito no fim de cada mês terem usado o dinheiro da melhor forma possível. O tempo do mês é adotado, porque a cada mês vencem vários compromissos, como supermercado, luz, gás, telefone, aluguel, entre outras despesas. A economia doméstica, segundo Edwald (2003), é a ciência que estuda a escassez de recursos. Para aplicar a economia domestica é necessário identificar as prioridades de gastos. E neste momento realizar um

orçamento que ajudará na administração da escassez de recursos, tanto para uma empresa ou família. Segundo Santo (2009), fazer um orçamento doméstico não necessita de conhecimento técnico. Os indivíduos podem realizar seu orçamento descrevendo as suas receitas e prováveis despesas. Assim, a boa elaboração depende de um bom acompanhamento dos valores previstos e realizados, e como o elaborador se comporta. Se o orçamento é levado a sério, a tendência é de melhorar substancialmente a situação financeira familiar. Segundo Edwald (2003), para realizar um orçamento doméstico é necessário passar por três fases: 1. Fase: Avaliação, sem critério, do valor das despesas que a família acha que estão sendo feitas durante o mês; 2. Fase: Acompanhamento e apuração no mês seguinte das despesas realmente efetuadas. 3. Fase: Avaliação, programação de possíveis cortes e previsão dos valores que poderão ser gastos no mês seguinte; esse será o orçamento doméstico que deverá valer daí para frente, todos os meses, com acompanhamento e ajustes. Na primeira fase, a primeira tarefa é fazer a planilha do orçamento, item por item, para então identificar as receitas e despesas que acontecem em um mês. Determinando os valores nos respectivos itens da planilha. Para a primeira apuração de despesas e receitas são utilizados valores já acontecidos que serão comparados aos do mês que foi planejado através do orçamento doméstico. A identificação das despesas é muito importante para a realização do orçamento doméstico, sendo que os padrões de despesas domésticas são: Morar, Comer, Ir, Vir, Vestir, Estudar, Lazer, Saúde e despesas financeiras. Existindo as despesas elásticas, que são aquelas que podem ser comprimidas, e outras que são inelásticas, ou seja, não adianta tentar que não há como fazer com que diminuam.

2.1.1 Moradia e Alimentação Segundo Edwald (2003), na família padrão brasileira, a moradia e suas respectivas despesas representam 30% dos gastos totais. O aluguel ou a prestação da compra de um imóvel são itens praticamente inelásticos, ou seja, seu valor não pode ser reduzido, a menos que realize uma mudança de casa para reduzir despesas. Sendo que, as despesas com alimentação têm peso de 25% no total dos gastos de uma família padrão brasileira e é um grupo onde se pode fazer muita economia, sabendo administrar as compras. Segundo Edwald (2003), a estrutura orçamentária de uma família brasileira padrão tem suas despesas distribuídas com os tais percentuais: 1. 30% para moradia, 2. 25% para alimentação, 3. 12% para saúde e higiene pessoal, 4. 15% para transportes, 5. 8% para educação e cultura, 6. 5% para lazer, 7. 5% para gastos diversos. Esses percentuais referem-se a um consolidado médio de todas as famílias brasileiras, cujas estruturas de gastos podem variar conforme a classe social. Como nosso país tem uma baixa renda per capita, as necessidades básicas, como moradia e alimentação, pesam muito mais nas classes de renda mais baixa e influenciam bastante nesta média. Analisando os percentuais de despesas de um consolidado médio de todas as famílias 25% são referentes a gastos com alimentação, que podem ser economizados, são despesas elásticas. O maior percentual de despesa é o morar com 30%, na qual é uma despesa inelástica se tratando de aluguel, ou pode ser elástica na escolha do imóvel ou na construção da casa.

2.2 DINÂMICA DOS SUPERMERCADOS Supermercado é um ambiente no qual as pessoas, consumidores fazem compras e não necessitam do atendimento de um vendedor, necessitando de um atendimento específico quando faz o pagamento das compras e nas áreas de perecíveis, setores de açougue, padaria, frutas e verduras. É considerado um supermercado quando este disponibiliza itens de consumo e possui área de 200 m2 a 5000 mil m2. Os supermercados respondem pela venda de mais de 80% do volume dos alimentos, bebidas, higiene e beleza, limpeza e bazar, segundo (GUTIERREZ, 2009). Referencialmente, o supermercado está dividido em setores denominados: recebimento, estoque, retaguarda e frente de loja. Segundo

Edwald (2003),

supermercado

está

montado

para

aumentar o tempo de compra dos clientes. Não possui relógios, de modo que o cliente gasta um tempo grande distraído com as ofertas; Não existem janelas para não tirar a atenção dos clientes; O chão é escorregadio para o cliente não andar depressa e poder assim olhar as ofertas e comprar mais; E por uma estratégia de marketing os supermercados são mais baratos de terça a quintafeira e domingos, para atrair mais clientes. 2.2.1 Promoções em supermercados Segundo

Edwald

(2003),

uma

estratégia

marketing

constantemente utilizada por todos os supermercados é a de anunciar promoções por tempo limitado para produtos selecionados, de modo a atrair a clientela. Analisando os produtos, chega-se a conclusão de que as grandes redes selecionam as ofertas, cada rede dividindo o mercado de promoções, ou seja, não brigam entre si. Esta ação facilita ao consumidor, mas este deve estar atento e disposto a gastar tempo percorrendo os diversos estabelecimentos atrás das promoções a fim de economizar nas compras. Segundo Edwald (2003), uma bem sucedida operação de economia, conjugada com estoques antecipados estrategicamente pode representar uma economia de até mais de 20% sobre o total.

A pesquisa de preço em cada estabelecimento e o deslocamento até os locais requerem tempo e vontade para obter economia, ação que sem o conhecimento da real economia através da pesquisa pelo consumidos, faz com que grande parte utilize determinado estabelecimento por outros fatores que não tem ligação com o preço como a infra-estrutura, a localização, o atendimento, o marketing de consumo, entre outros fatores. 2.2.2 Preços de Supermercados Os preços baixos, promoções são uns dos principais atributos considerados pelos consumidores na escolha do supermercado para realizar as compras, segundo Rojo (1998), além do fator preço, o supermercado deve oferecer bom atendimento, qualidade, higiene e variedade. Prestando qualidade no serviço o supermercado tem a possibilidade de conquistar o cliente e ter fidelidade. Outros atributos para escolha do local de compras: 1. Atendimento: O atendimento é o segundo atributo mais importante pelo consumidor, sendo considerado pelos supermercadistas como fator de atração e fidelização do cliente. Sendo fundamental para estes a cordialidade e eficiência durante as compras. Segundo Rojo (1998), 47% dos consumidores procuram atendimento de excelência, e que os supermercados podem melhorar a qualidade do atendimento. 2. Qualidade: Sendo uma variável importante assim como o atendimento, a qualidade do supermercado está associada ao padrão arquitetônico e tecnológico do supermercado e produtos perecíveis, tendo 51% excelência, segundo a pesquisa (ROJO,1998). Em relação aos alimentos perecíveis os consumidores evidenciam as diferenças entre os supermercados de acordo com a qualidade de frutas e verduras e do açougue. Sendo que detalhes de limpeza, conservação de pisos e manutenção são fatores que devem ser aprimorados nos supermercados para obtenção de qualidade.

3. Variedade: Para os consumidores e supermercadistas este é outro fator relevante

escolha

supermercado.

Segundo

Rojo

(1998),

supermercadistas estão procurando aplicar mais o conceito de gerenciamento de categorias em suas lojas, sendo que para o varejista, a gestão da variedade pode ter forte impacto em seu investimento e giro de estoques, afetando a rentabilidade do supermercado. Além da variedade de produtos, os consumidores procuram encontrar os produtos que constantemente compram no estabelecimento. A variedade é considerada excelente por 28% dos entrevistados, caindo para 24% nas classes altas, que procuram constância no abastecimento nos pontos de venda. 4. Crédito: O crédito fornecido pelos supermercados através de cartões e cheques pré-datados é um fator de atração dos consumidores. Mas, em geral é realizado pela maioria dos supermercados e assim acaba não sendo um diferencial competitivo forte. Segundo Rojo (1998), 52% dos consumidores entrevistados consideram a forma de crédito disponibilizada excelente e que quanto mais prazo oferecido melhor. O supermercado que não disponibilizar opções de crédito atraentes se apresenta atrás da concorrência. 5. Rapidez no caixa: Está associado ao atendimento, e segundo Rojo (1998), 27% dos consumidores entrevistados consideram excelente o atendimento no caixa dos supermercados que frequentam. Os consumidores esperam mudanças nos processos de atendimentos, como rapidez no caixa, cuidado no manuseio dos alimentos, demora para encontrar os preços. 6. Perecíveis: O setor de perecíveis contribui com a formação da qualidade do supermercado. É um fator de diferenciação entre supermercados segundo opinião dos consumidores. Segundo Rojo (1998), 35% dos consumidores consideram excelente a seção de perecíveis dos supermercados. Existem insatisfações nos setores do açougue, frutas e verduras, frios e lacticínios e padaria, ligados a higiene e má conservação e apresentação dos produtos. Os consumidores procuram qualidade nos serviços disponibilizados pelos supermercados, e estes atributos descritos são fortes influenciadores na

escolha do estabelecimento para o consumidor efetuar realizar compras. O supermercado que não apresenta o mínimo de qualidade em cada atributo de escolha mesmo tendo excelência no preço baixo, estará atrás da concorrência e perderá a fidelidade do consumidor. 2.3 E-COMMERCE Com o advento da Internet e todo seu desenvolvimento e potencial disseminador de informações, as empresas viram nesta nova mídia um espaço potencial para mostrar seus produtos, serviços e vendê-los. Segundo Ciashop (2008), a venda através da internet e as lojas virtuais surgiram nos anos 90, e o comércio eletrônico, e-commerce, passou a ser utilizado no Brasil a partir de 1995. Hoje em dia, mais do que um processo de vendas através da internet, é um meio de comercialização complementar das empresas. Seu funcionamento envolve diferentes áreas como marketing, logística, infraestrutura, tecnologia, administração e inovação dos serviços para atender aos usuários que procuram eficiência, segurança e rapidez no atendimento. Abaixo dados da evolução dos números de e-commerce na Figura 2.1:

Figura 2.1 - Evolução dos números de e-commerce Fonte: Obtida de Ciashop (2008).

É um mercado em crescimento, devido ao número maior de internautas utilizando a internet, disseminação da confiabilidade da rede, a

inserção de uma nova cultura e a inclusão digital de classes menos favorecidas. Segundo Felipini (2008), pesquisas indicam que cerca de 30% dos consumidores das lojas físicas pesquisam na Internet antes de adquirir o produto. Considerando que esse percentual tende a aumentar em decorrência da maior penetração da Internet nas classes mais baixas. As mudanças em muitos setores incluindo o do comércio ocorreram devido ao fato dos consumidores adotarem a Internet para efetuarem compras, pesquisarem produtos e preços. O acesso a estas informações é rápido, prático e direto. O consumidor tem a possibilidade de obter o produto sem atravessadores, segundo Felipini (2008), essa palavra era muito usada para se referir a um determinado intermediário que comprava por X e vendia por 10X sem agregar valor algum à mercadoria. E com a Internet o consumidor pode descobrir uma centena de fornecedores do produto desejado e na Internet comprar o produto, havendo também interferência na cadeia de distribuição dos produtos, com a possibilidade de acesso direto ao fabricante. 2.3.1 E-Commerce em Supermercados Diante do grande potencial do e-commerce como ferramenta de venda complementar e total para empresas na Internet, e o crescimento se sua utilização na rede. Serviços de e-commerce para supermercados passaram a ser implementados visando o aumento de consumidores que utilizam a Internet e serviços de e-commerce de outros setores e consumidores estes que procuram um atendimento personalizado, eficiente e rápido. Tendo este os produtos comprados virtualmente nos sites dos supermercados entregues em suas casas até no mesmo dia da compra. A

utilização

e-commerce

supermercados

para

consumidores é uma forma de adquirir produtos de consumo com praticidade e sem um valor muito alto agregado pelo serviço disponibilizado pelo supermercado. Segundo Persona (2010), no início da utilização do ecommerce nem todos os serviços funcionavam na Internet e os supermercados não obtiveram grandes vantagens descobrindo que as atividades de seleção,

embalagem e entrega eram feitas pelo consumidor e naquele momento este papel teria invertido. Assim, os custos aumentaram ao invés de diminuírem com o novo serviço. Custos imprevistos foram gerados como, disponibilização de funcionários para as novas funções de atender o delivery, nova logística de entrega de acordo com o tipo de produtos vendidos e horários. Assim alguns supermercados fecharam suas portas virtuais. E outros tiveram que se adaptar a nova realidade para sobreviver ao mercado competitivo. Diante do crescente número de usuários da Internet e da utilização do e-commerce em outros setores, os supermercados mesmo tendo que ter uma logística interna diferente e possivelmente a primeiro vista não rentável, estão disponibilizando os serviços de venda on-line principalmente as grandes redes como: Carrefour, Wal-mart, Angeloni em SC, entre outros, para estarem de acordo com a procura dos novos consumidores que já incorporaram a sua cultura o uso de mídias digitais e os supermercados que não estão ainda aderindo a esta parcela do mercado ficam fora desta concorrência, que apresenta tendência crescente de utilização. 2.4 PESQUISAS DE PREÇOS DE PRODUTOS DE SUPERMERCADO A pesquisa de preços de produtos de supermercado é a melhor e mais confiável ferramenta para obter economia doméstica. De acordo com a PRO TESTE (Associação Brasileira de Defesa do Consumidor) PROTESTE (2010), os brasileiros gastam cerca de um terço do orçamento doméstico nas compras de supermercado e qualquer economia na compra destes produtos é essencial. Um tipo de pesquisa realizada a fim de oferecer dados estatísticos ao consumidor e ao supermercadista é a pesquisa de varejo que segundo Smart Jobs (2010), é um estudo voltado para características do produto quanto ao preço, promoção, localização e exposição no ponto-de-venda. Neste tipo de pesquisa são avaliados: fornecedores, quantidade distribuída aos pontos-devenda, preços, custos de distribuição e localização do produto nas prateleiras. Direcionadas ao consumidor que procura obter economia nas compras em supermercados é realizadas pesquisas de preços por várias

entidades como DIEESE e PRO TESTE, nível federal e Associações de Donas de Casa de diversas cidades brasileiras a fim de incentivar o consumidor a realizar uma pesquisa de preços e mostrar através de dados estatísticos quais os preços médios dos produtos vendidos em supermercados e em quais estabelecimentos estão mais baratos. 2.4.1 PROTESTE A PROTESTE é uma entidade civil sem fins lucrativos, apartidária, independente de governos e de empresas, e tem como objetivo A DEFESA DO CONSUMIDOR NO BRASIL. Esta Associação realiza a comparação de preços de produtos em supermercados a fim de ajudar os consumidores a economizarem. Pelo 5 ano consecutivo realizou uma pesquisa nacional de preços de supermercados, segundo PROTESTE (2010), as compras de supermercado podem custar quase R$ 4 mil a menos por ano, dependendo do estabelecimento de escolha. A pesquisa foi feita durante praticamente um mês, 975 pontos de venda operando em 14 cidades foram visitadas em todo o Brasil, o que resultou numa coleta de 187 mil preços. A amostra incluiu 103 produtos diferentes que representam o consumo padrão de uma família brasileira. Segundo PROTESTE (2010), mobilizou 37 colaboradores entre os dias 3 e 31 de março de 2009 e as marcas pesquisadas foram definidas com base nos resultados da pesquisa de preços realizada em 2008 e nos dados da pesquisa Líderes de Vendas 2009 da Abras. No site na seção PROTESTE (2009), pode-se conferir o guia de preços e os supermercados mais baratos em cada região do Brasil. Na figura 2.2, está selecionado o estado Santa Catarina, a cidade e a região do dos estabelecimentos e de acordo com a pesquisa feita pode-se conferir os supermercados que apresentaram os preços mais baixos nas duas cestas realizadas. Observando os resultados o estabelecimento mais barato nas duas cestas é o Big - Avenida Madre Benvenuta, 687.

Figura 2.2 - Mercado mais barato da região Fonte: Obtida de PROTESTE (2009).

Na figura 2.3, pode-se observar quais as redes mais baratas da região de Florianópolis, sendo o Big a rede que oferece os preços mais baixos nos dois tipos de cestas de acordo com a pesquisa. Na figura 2.4, evidencia-se a prestação de serviços diferenciados na região de Florianópolis e observa-se que nem todos os estabelecimentos oferecem os mesmos serviços e, por exemplo, somente 40% dos estabelecimentos fazem encomendas por telefone.

Figura 2.3 - As redes mais baratas Fonte: Obtida de PROTESTE (2009).

Figura 2.4 - Prestação de serviços ainda engatinha Fonte: Obtida de PROTESTE (2009).

Na Figura 2.5, evidencia-se os supermercados que oferecem venda através da internet e as suas vantagens. Os supermercados dependendo do valor cobram uma taxa para efetuarem a entrega.

Figura 2.5 - Preços praticados na Internet pelos supermercados Fonte: Obtida de PROTESTE (2009).

Na Figura 2.6, também é disponibilizado através da pesquisa informações sobre a economia que se pode obter fazendo um deslocamento para outros concorrentes e estabelecimentos da mesma rede.

Figura 2.6 - Atravesse a rua e economize Fonte: Obtida de PROTESTE (2009).

A conclusão do estudo feito pela PRO TESTE foi que ficou mais caro encher a despensa em todos os estados. Segundo análise dos dados, o consumidor que optar por fazer compras nos mercados pesquisados pode economizar quase R$ 4 mil ao ano – caso da cesta 2 em São Paulo. A Figura 2.7 abaixo mostra as diferenças de preços entre as cestas compradas nos estabelecimentos mais caros e nos mais baratos para todos os estados pesquisados pela PRO TESTE. Diante do serviço social prestado pela PRO TESTE, , evidencia-se que este resultado é satisfatório para se obter uma média dos preços nacionalmente e regionalmente e obter dados estatísticos e influenciar ao consumidor a realizar pesquisa de preços e os supermercadistas obterem um resultado de seus preços no mercado.

Figura 2.7 - Valores da cesta básica Fonte: Obtida de PROTESTE (2009).

Porém, o consumidor que receber esta informação e evidenciar a real economia diante das pesquisas, para elaborar a sua pesquisa de preços acaba levando em consideração outras mídias para conhecer as promoções dos produtos em cada supermercado ou atributos como localização do

supermercado ou qualidade no atendimento entre outros atributos já descritos neste relatório. 2.4.2 DIEESE Segundo DIEESE (2010), o DIEESE, Departamento Intersindical de Estatística e Estudos Socioeconômicos, é uma criação do movimento sindical brasileiro.

Foi

fundado

1955

para

desenvolver

pesquisas

que

fundamentassem as reivindicações dos trabalhadores. Ao longo de sua história de 50 anos, é reconhecida como instituição de produção científica. Entre seus eixos temáticos, são evidenciados no site DIEESE (2010), seções específicas de desenvolvimento do DIEESE como: emprego e desemprego, índice de custo de vida, cesta básica nacional, salário mínimo necessário, publicações, pesquisas entre outras seções. Na seção cesta básica nacional encontra-se a metodologia utilizada para a realização da pesquisa e histórico das pesquisas realizadas durante os anos. 2.4.2.1 Metodologia DIEESE Na metodologia são descritos os procedimentos para a realização da pesquisa da cesta básica nacional. Sendo apresentados os principais pontos desta metodologia: a) Estrutura das cestas básicas por região: Segundo DIEESE (2009), os produtos da Cesta Básica e suas respectivas quantidades mensais são diferentes por regiões e foram definidos pelo Decreto 399 de 1938. A sua estrutura encontra-se na Figura 2.8 abaixo:

Figura 2.8 - Valores dos alimentos por região Fonte: Obtida de (DIEESE 2009).

b) Locais de coleta: Segundo

DIEESE

(2009),

para

pesquisa

levou-se

consideração os gastos médios mensais referentes aos produtos da Cesta Básica nacional (CBN), realizados pelas famílias nas diferentes capitais; informações obtidas da POF02/03 do IBGE. Através desta pesquisa é possível obter os locais de compra, dos produtos que a compõem nas capitais onde o DIEESE possui escritório. Esta pesquisa -POF02/03- codificou 172 tipos de locais, sendo os principais agrupamentos visaram 4 tipos de equipamentos de comércio: Supermercados:

supermercados,

hipermercados,

mercearias,

armazéns,

empórios; Feiras: feiras-livres, mercado municipal, horti-frutis, sacolões, quitanda, frutaria,fruteiro, verdureira, feira de frutas; Açougues: açougue e casa de carne e padarias: padaria, confeitaria, casa de pães, doceria, panificadora, posto de pão, depósito de pão. c) Cadastro e amostra dos locais: Segundo DIEESE (2009), o levantamento dos cadastros foi realizado por cada escritório. Tendo o tipo de comércio, nome do estabelecimento, endereço e CEP. A intenção do DIEESE foi de extrair uma amostra de pelo menos 30 supermercados e 30 feiras.

d) Tipos, Marcas e Unidades de Medida por produto: Segundo

DIEESE

(2009),

para

cada

produto

deverão

ser

estabelecidos os tipos, marcas e unidades de medida, com maior freqüência de oferta, no mercado consumidor. Para as pesquisas junto aos diversos estabelecimentos que foram as marcas, tipos e unidades de medida, de cada produto. Foram pesquisadas três marcas de cada um, e a escolha das marcas ficou a critério do Supervisor. e) Modelos dos questionários: Segundo DIEESE (2009), a pesquisa possui quatro tipos padrões de questionários: supermercado, feira-livre, açougue e padaria. Dentro de cada tipo pode-se ter modelos distintos, que contemplam mais ou menos produtos, segundo as necessidades de cada município. f) Calendário de Levantamento: Segundo DIEESE (2009), definida a amostra dos locais, estes deverão ser distribuídos ao longo das quatro semanas do mês, respeitando sempre

dia

semana.

Este

procedimento

ocorre,

pois

vários

estabelecimentos fazem ofertas em determinados dias da semana, se os preços forem cotados em dias distintos emparelhados, pode resultar em variações de valores que não necessariamente são inflação ou deflação, mas simplesmente políticas de marketing. É construído um calendário mensal para que sejam distribuídos os roteiros dos locais ao longo das quatro semanas do mês. A coleta é realizada de 2a a 6a feira durante 4 semanas, portanto são 20 dias de pesquisa. g) Digitação, Conferência e Análise Crítica Segundo DIEESE (2009), a coleta semanal deve ser inserida no sistema duas vezes por semana (as 3a e 6a feiras) e conferida imediatamente.

Os Supervisores conferem o levantamento de preços e realizam, em cada escritório, uma análise das variações de valor de certos produtos. Abaixo na Figura 2.9, última pesquisa postada no site do DIEESE datada de Abril de 2010 na cidade de Florianópolis: segundo a pesquisa o gasto mensal para adquirir a cesta básica é de R$ 239,6 dados estes obtidos de todo o processo descrito na metodologia de pesquisa do DIEESE para efetuar a pesquisa nacionalmente.

Figura 2.9 - Tempo de trabalho para comprar a ração essencial Fonte: Obtida de DIEESE (2010).

Na Figura 2.10, observa-se os dados obtidos em todos os estados pesquisados separados pelas regiões, descrevendo também as cestas mais caras e mais baratas nacionalmente. E constata-se que a cidade de Porto Alegre apresentou o maior valor da cesta básica do período.

Figura 2.10 - Preços médios da Ração essencial Fonte: Obtida de DIEESE (2010).

Na seção banco de dados da Cesta Básica Nacional pode-se escolher três tipos de tabelas para buscar os preços: tabela por capital, tabela por produto e tabela por data de referência. Na seção tabela por capital é possível mostrar como encontrar as informações. Nesta subseção é apresentado ao consumidor dados obtidos nas pesquisas da Cesta Básica Nacional de acordo com dados obtidos. A busca é alcançada fornecendo a cidade, tipo de dados que podem ser: gasto mensal, tempo de trabalho e preço médio; os produtos da cesta e o período da pesquisa de acordo com a Figura 2.11. A informação disponibilizada após consultar está relacionada ao produto escolhido ou ao total da cesta conforme Figura 2.12 abaixo. Assim como a PROTESTE diferenciando-se no serviço com a elaboração

dos

índices

nacionais

das

cestas

básicas

mensalmente,

mobilizando grande número de colaboradores e seguindo uma metodologia complexa para obter comparativos entre diferentes realidades regionais e produtos específicos da cesta básica, o DIEESE apresenta comparativa ineficácia na transmissão da informação da pesquisa aos consumidores.

Figura 2.11 - Critérios de busca para cesta básica Fonte: Obtida de DIEESE (2010).

Figura 2.12 - Resultado da busca Fonte: Obtida de DIEESE (2010).

Os dados são específicos da cesta básica nacional e não se obtém os preços das variadas marcas de produtos encontradas nos supermercados. Os consumidores obtendo estas informações de preços da cesta básica nacional podem ser influenciados a realizarem a pesquisa de preços e saberem qual o valor da cesta em sua cidade, mas na compra dos produtos nos supermercados o consumidor perde a referência dos preços diante das diversas marcas encontradas, seus diferentes preços e a concorrência praticada entre os supermercados. 2.4.3 Associações das Donas de Casa Em várias cidades brasileiras existem Associações formadas pelas donas de casa. Tais Associações têm por objetivo oferecer um serviço de utilidade pública sem custo algum dentro do setor alimentício. Basicamente tal

serviço inclui como parte essencial do trabalho, a pesquisa de preços dos itens de supermercado em várias postos de venda da cidade em questão. Além, dessa pesquisa de preço, também são verificadas irregularidades como falta de preços visíveis, problemas de higiene entre outros que, em geral, são comunicados diretamente ao PROCON para que este tome as medidas necessárias. Dentro de sua estrutura, tais associações conseguem executar a tarefa de pesquisa de preços devido ao fato de que todos os integrantes são voluntários. Além, de estarem amplamente distribuídos pelos bairros e regiões da cidade. Desse modo, certas donas de casa pesquisam o preço em determinado supermercado próximo a suas residências enquanto que outras donas de casa pesquisam os preços em outros lugares da cidade. Dentro do âmbito da frequência das pesquisas de preços, tais Associações geralmente realizam mensalmente ou a cada 15 dias a coleta de dados do preço médio da cesta básica e de itens de higiene e limpeza. Uma vez coletados, tais dados são consolidados e divulgados na página da Associação e também enviados para jornais locais para divulgação. A divulgação destes resultados, entretanto, não é satisfatória haja vista que na maioria dos casos isso acontece mediante a impressão de newsletter mensal totalmente patrocinada. Caso não haja patrocínio, a tiragem é baixa ou nem mesmo chega a acontecer. Ainda como fator mais agravante, a logística para distribuição desses jornais é inexistente de tal modo que cada dona de casa ou pessoa interessada deve pessoalmente se dirigir à sede da Associação para retirar o jornal com os dados da pesquisa do mês vigente. Uma vez divulgados, tais resultados são amplamente discutidos e levados em conta pelas donas de casa que não fazem parte da Associação. Isto é percebido pelo fato de que há, em alguns casos, manifestações para boicote de determinados produtos ou supermercados até que estes tenham o preço adequado. Isto também vai ao encontro de uma das características de sociedades contemporâneas que, a partir de relações sociais e de mobilizações com objetivos estratégicos comuns, desenvolve-se articulações e movimentos coordenados que atingem os objetivos. (GOHN, 2003). Analisando-se a grande procura que há por tais resultados de pesquisas, percebe-se que o público de donas de casa busca, mesmo sabendo

que os preços estão desatualizados por duas ou mais semanas, uma maneira de pelo menos garantir o menor preço na hora de comprar os produtos. 2.5 IDENTIFICAÇÃO DO NEGÓCIO ATRAVÉS DA MARCA Para ser identificado no mercado, obter visibilidade e aceitação por parte dos consumidores faz-se necessário criar uma marca que identifique o Portal Web como uma ferramenta de utilidade pública na área de pesquisa de preços de supermercados. Para conseguir tal objetivo, é necessário identificar o exatamente o público alvo bem como criar algo novo e que possa ser associado às emoções dos consumidores. Segundo Fisk (2008), uma marca é aquela na qual o consumidor quer conviver e confia a tal ponto de se manter fiel quando tudo ao seu redor estiver mudando. Trata-se, portanto, de desenvolver uma marca na qual os consumidores possam ter orgulho de usar e que reflita as aspirações do consumidor e não apenas as suas necessidades de tal modo a provocar ao invés de simplesmente informar. Segundo consumidores

afeta

Wheeler

(2009),

diretamente

como sucesso

marca do

percebida

produto

pelos

negócio,

independente de ser uma empresa inicial (start-up), uma organização sem fins lucrativos ou um produto comercial. A marca deve se conectar emocionalmente ao cliente, tornando-se único e criando longas relações com o consumidor. Com isso, a marca do Portal Web deve ter a capacidade de atrair os consumidores de tal modo a passar e realmente comprovar a idéia de que através do uso deste é possível realizar uma boa economia nos gastos de itens alimentícios. Desse modo, tem-se que, segundo Fisk (2008), uma marca pode ser dividida em três critérios básicos, a saber: 1. Racional: O que o produto faz pelas pessoas; 2. Comparativo: Como o produto é diferente, ou seja, seus diferenciais; 3. Emocional: Como as pessoas se sentem em relação produto;

Uma vez definidos tais metas que a marca deve atingir, entra o modo de divulgação desta perante os consumidores. Isso se torna realmente importante porque é preciso que esta marca seja transmitida por todos os meios possíveis incluindo desde folders, cartões até embalagens e outros. O desenvolvimento da marca será realizado seguindo conceitos de Design. E a real diferenciação no mercado e futura utilização deste Portal Web se darão através de todo um trabalho de análises realizado através de ferramentas do Design. 2.6 DESIGN DIGITAL Entre as diferentes habilitações do Design, o Design Digital é uma nova ferramenta de possibilitar a transmissão de informação no mundo atual. Diante das inovações tecnológicas o poder de manipulação das formas pelo designer passou a ser cada vez maior. Segundo Royo (2008), a velocidade incidiu de uma vez por todas na forma de ler o mundo. A horizontalidade e o fluxo contínuo de informações fizeram com que nossa concepção do que é uma narração e uma leitura tenha mudado. Recomenda-se que o designer se acostume a conviver com as novas formas de linguagem e trabalhar com o Design para facilitar a utilização das aplicações e ferramentas digitais pelo usuário. Fazer Design é considerar que existem um grande número de informações e espaços para atuar, deve-se saber que estas informações vão influenciar e serão influenciadas por outras, e poderão ser inseridas em ambientes culturais diferentes. Segundo Royo (2008), existem condições fundamentais para que aconteça um projeto de Design: 1. É preciso haver um espaço de percepção definido, que é também um espaço cultural e um espaço comum de comunicação. No caso das novas tecnologias e do Design Digital surge um novo espaço com novas características físicas e conceituais concretas: o ciberespaço, que é o espaço pelo qual navegamos a matéria da Internet.

2. É preciso haver pessoas que atuem sobre esse espaço. Aqui encontramos os usuários desse espaço, que se movimentam e o ”habitam”: os cibernautas, os usuários. 3. É preciso existir um código de comunicação consensual entre os usuários. Esses códigos configuram a matéria da comunicação a própria matéria do Design: a linguagem. 4. Deve existir dentro desse espaço uma área possível de ser trabalhada pelo Design, uma área onde se dê a comunicação e a linguagem, onde se produz a relação entre o meio e os usuários: a interface. O Design Digital gera cultura, estabelecendo novos espaços que abrem novas possibilidades de trocas de informação dispondo da linguagem. Para melhorar a ação do usuário no ciberespaço, fazem-se questionamentos sobre seus desejos e frustrações de uso. A fim de projetar ferramentas de comunicação que façam parte da percepção do mundo por parte do usuário. 2.7 ABRANGÊNCIA DA INTERNET Nas duas últimas décadas, o mundo assiste uma revolução tecnológica e informacional. O crescimento da informática e as evoluções tecnológicas ocasionaram grandes transformações sociais, políticas e culturais, no plano mundial. Esta revolução tecnológica estabelece uma nova divisão internacional do trabalho, sendo ferramenta. Influenciando na linguagem, estilo de vida, meios de comunicação e nas relações entre os indivíduos. Segundo Paesani (2009), a informação transmitida pela rede Internet de comunicação anula os limites de espaço e tempo, fazendo nascer uma sociedade de comunicação global, em que abatidas, hipoteticamente, as fronteiras das nações, das culturas e ideologias, têm surgido novas relações. Essa tecnologia inovadora deixa o mundo menor. A Internet é uma ligação de redes em escala mundial de milhões de computadores interligados TCP/IP permitindo acesso a informações e transferência de dados. Tendo uma grande infra-estrutura para possibilitar

serviços de correio eletrônico, comunicação instantânea, compartilhamento de dados entre outros recursos e serviços para comunicação. Seu surgimento e desenvolvimento se deram devido aos avanços da tecnologia da informática. 2.7.1 Publicidade e Internet As empresas desde o início da Internet tiveram grande interesse de divulgar seus serviços e produtos na rede mundial de computadores. Algumas das maiores empresas do mundo utilizaram o novo meio de comunicação e transformaram seus serviços e negócios. A Internet como transmissora de informação é também um veículo de comunicação instantâneo e possibilitador desta comunicação simultaneamente. A Internet se faz presente no mundo atual sendo mídia e conectando outros tipos de mídias, que fazem parte de uma indústria da comunicação que tem por objetivo a transmissão de informações, que usufruem e conectam-se através da tecnologia. A tecnologia atual possibilita esta conexão das mídias que tem como resultado seus serviços e informações dispostas em alcance global e procuram destacar-se através da inovação e o contexto do usuário da rede. A Internet facilita a disseminação de produtores da informação, instituições ou pessoas físicas que não tinham espaço na mídia tradicional, como jornais e revistas, blogs e sites independentes. Este conteúdo não necessariamente entra na lógica mercantil da publicidade tradicional, possibilitando novos parâmetros e maneiras de se fazer a comunicação, tendo grande influência o Design Digital. A Internet é o meio de comunicação que mais cresceu no país durante o primeiro semestre de 2008. A rede já rendeu R$ 321 milhões neste período, um aumento de 45% em comparação ao ano passado, segundo Folha (2008), que mede o faturamento de empresas de mídia. A Web ocupa o quinto lugar de veículo que mais recebe verba, há um ano era a sétima colocada. A televisão ainda é a mídia que mais recebe investimento publicitário, com 58,5%, seguidos dos jornais com (17,2%), revistas (8%), rádio (4,3%), internet (3,3%), TV por assinatura (3,2%), mídia exterior (2,8%), guias (2,1%) e cinema (0,3%). (FOLHA, 2008).

Segundo Mosimann (2007), os rendimentos já conquistados nos últimos anos e as perspectivas de retorno para investimentos têm atraído empresas de outros setores para a indústria da informação e do entretenimento. Um indicativo de que empresas de setores como tecnologia e telecomunicações se tornaram referência no mercado de mídia global é a do Google Inc, que obtém 100% do seu faturamento com um formato de publicidade na Internet que inventou os links patrocinados e possui 70% da organização focada em desenvolvimento e engenharia. Através da publicidade, onde os setores possuem dependência destes recursos de atrair o usuário aos serviços para obtenção de retorno financeiro. A televisão aberta vive da publicidade (onde se inclui o merchandising). Alguns sítios na internet vivem apenas da publicidade e comércio eletrônico e outros retiram seus recursos da publicidade, do comércio eletrônico de terceiros e da comercialização do próprio conteúdo segundo, ( COSTA, 2005 apud ). Segundo Mosimann (2007), em Santa Catarina, por exemplo, a maior parte do faturamento dos veículos de comunicação é proveniente da publicidade, 92%. Essa proporção chega a 99% no rádio, 97% na televisão e cai para 83% nos jornais e 60% nas revistas, que faturam também com vendas de assinaturas, venda em bancas e venda de produtos como Cd’s e fascículos. A mídia possui o papel de transmitir a informação, de comunicar-se e para esta comunicação ser viável há uma troca de interesses e negócios entre estes veículos e empresas que querem usufruir do meio para apresentar seus produtos e serviços. O usuário consome a mídia, tem possibilidade de escolhas e consequentemente tem a possibilidade de consumir os produtos e serviços divulgados através da publicidade. A conexão entre estes setores gera um grande dissimulador de informações, cultura, serviços e inovação. Atualmente usufruir desta conexão de mídias e informação é essencial para a utilização das novas mídias e participar deste contexto com projetos, conhecimento, negócios ou até mesmo agilidade em serviços e entretenimento. Desenvolver projetos digitais que utilizam a mídia e influenciam comportamentos e procuram solucionar problemas e necessidades do mundo global são estar em conexão com a tecnologia e o futuro.

2.7.2 Abrangência da Internet no Brasil Diante de seu crescimento global a Internet adquiriu fortemente seu espaço no Brasil. Segundo IBOPE (2009), mostrados na Figura 2.13, no mês de julho de 2009, 36,4 milhões de pessoas usaram a Internet no trabalho ou em residências, o que significa um crescimento de 10% sobre os 33,2 milhões registrados no mês de junho. O tempo médio de uso continuou crescendo e atingiu as marcas de 71 horas e 30 minutos de tempo total, incluindo aplicativos, e de 48 horas e 26 minutos, considerando somente navegação em páginas. O número de pessoas com acesso à Internet em casa ou no trabalho é de 44,5 milhões.

Figura 2.13 - Tempo de navegação por pessoa no Brasil Fonte: Obtida de IBOPE (2009).

Entre os internautas residenciais, o número de usuários ativos chegou a 27,5 milhões de pessoas, um crescimento de 7,4% em relação aos 25,6 milhões do mês anterior e de 16% sobre os 23,7 milhões de julho de 2008. O tempo de navegação em residências em julho cresceu 9% sobre junho e 21% sobre julho de 2008, e atingiu a marca inédita de 30 horas e 13 minutos por pessoa. O número de pessoas que moram em domicílios em que há a presença de computador com Internet é de 40,2 milhões. Considerando os brasileiros de 16 anos ou mais de idade com posse de telefone fixo ou móvel, segundo IBOPE (2009), passou a indicar a existência de 64,8 milhões de pessoas com acesso à Internet em qualquer ambiente

(residências, trabalho, escolas, lan-houses, bibliotecas e telecentros). Na navegação no trabalho e em residências, as categorias com maior crescimento proporcional do número de usuários em julho na comparação com junho foram Viagens e Turismo, com evolução de 17,3%, Automotivo, com aumento de 16,8%, e Casa e Moda, com crescimento mensal de 15,7%, segundo Figura 2.14.

Figura 2.14 - Número de usuários de internet ativos no Brasil Fonte: Obtida de IBOPE (2009).

Em tempo de navegação por pessoa, as categorias que mais cresceram foram Entretenimento, com 13,3%, Buscadores, Portais e Comunidades, com 10,8%, e Telecomunicações e Serviços de Internet, com 9,5%. Sites de redes sociais, de comunicação e de entretenimento foram os que mais contribuíram para o crescimento do tempo médio de uso do internauta brasileiro no mês de julho, informou José Calazans, analista de mídia do IBOPE Nielsen On-line (2010), de acordo com a Figura 2.15.

Figura 2.15 - Nível global de utilização da Internet Fonte: Obtida de IBOPE (2009).

Entre os dez países em que é realizada a pesquisa, o Brasil continua com o maior tempo por usuário, tanto na navegação em páginas quanto no tempo total, incluindo programas on-line. Segundo IBOPE (2009), houve o aumento da quantidade de usuários ativos em residências principalmente entre pessoas adultas. Entre dezembro de 2007 e dezembro de 2008, o público com até 24 anos cresceu 7,5%, enquanto entre adultos com 25 anos ou mais de idade a evolução foi de 21,5%. Em média, um internauta jovem no Brasil consome mais de 2 mil páginas de Internet por mês, 56% mais que um adulto conforme Figura 2.16. Isso ocorre porque os jovens passam bastante tempo em sites de relacionamento. Por outro lado, são os internautas adultos que estão indo, além das redes sociais e navegando mais em conteúdos como automóveis, comércio eletrônico, assuntos de casa e moda e notícias de acordo com o analista de mídia do IBOPE//NetRatings, JoséCalazans (2010).

Figura 2.16 - Faixa Etária de usuário da Internet no Brasil Fonte: Obtida de IBOPE (2009).

Analisando estes dados constata-se o crescimento do número de adultos utilizando a Internet e o crescimento da utilização de portais. Diante destas informações tem-se uma projeção de uma utilização de um Portal Web de pesquisas de preço de produtos de supermercados, pelo público jovem e o público adulto que está utilizando a rede de internet mais frequentemente. Tratando-se

cidade

Florianópolis

onde

pretende

desenvolver o projeto do Portal Web, segundo A REDE (2010), está entre as 6 cidades líderes em percentual de conexões internet acima de 5 Mbit/s. Com Florianópolis (5,1% das conexões acima de 5 Mbit/s), Curitiba (4,5%), Campinas (3,4%), Porto Alegre (2,8%) e Brasília (1,2%). Assim, o fator velocidade na cidade de Florianópolis e a conectividade dos usuários a internet influência na futura utilização pelos consumidores do Portal Web.

3 PESQUISA DE MERCADO Neste capítulo são demonstrados os resultados das pesquisas de campo realizadas junto aos consumidores e supermercados bem como uma breve análise da concorrência além, da definição do público alvo. 3.1 PESQUISA DE CONCORRENTES Com o objetivo de mapear os possíveis concorrentes, encontraramse os seguintes concorrentes com idéias similares, a saber: 1. Super Pesquisa: Trata-se de um site similar cujo objetivo é mostrar os preços de produtos. Tal site, entretanto, apresenta poucos produtos cadastrados e desse modo não há possibilidade do usuário realizar uma comparação de preços entre os diversos supermercados. Na Figura 3.1 é mostrada a página inicial do site.

Figura 3.1 - Página inicial do Super Pesquisa.net Fonte: Obtida de SUPERPESQUISA.NET, (2010).

Na Figura 3.2 são mostrados os detalhes de um produto com sua imagem e preço bem como a cidade e o supermercado onde é possível encontrá-lo. É possível perceber que não há comparação direta de preços com outros supermercados.

Figura 3.2 - Página de detalhes do produto Fonte: Obtida de SUPERPESQUISA.NET ,(2010).

2. Mercado Mineiro: Outro site com conceito similar é o Mercado Mineiro. Na Figura 3.3 é mostrada a página inicial deste site que realiza pesquisa de preços dos mais variados produtos, incluindo eletrônicos, carros inclusive produtos alimentícios.

Figura 3.3 - Página inicial Mercado Mineiro Fonte: Obtida de MERCADO MINEIRO, (2010).

Dentro da seção de pesquisa de supermercados, podem-se pesquisar os preços de produtos de supermercado conforme a Figura 3.4. Neste caso, o site fornece uma lista dos produtos com a variação de preço entre os supermercados com detalhes do menor e do maior preço praticado.

Figura 3.4 - Listagem de produtos do Mercado Mineiro Fonte: Obtida de MERCADO MINEIRO, (2010).

O site também fornece a possibilidade de comparação de preços entre diversos supermercados em forma de tabela conforme mostrado na Figura 3.5. Neste caso, todos os preços de todos os supermercados são mostrados.

Figura 3.5 - Página de preços detalhados do Mercado Mineiro Fonte: Obtida de MERCADO MINEIRO, ((2010).

O site também apresenta a possibilidade de criar uma lista virtual de produtos conforme mostrado na Figura 3. 3.6.. Ao mostrar a lista, o site fornece apenas o preço estimado dos produtos.

Figura 3.6 6 - Lista de compras do Mercado Mineiro Fonte: Obtida de MERCADO MINEIRO, ((2010).

3.2 PESQUISA DE CAMPO A pesquisa foi realizada através da Internet e pessoalmente com os consumidores entre os dias 15/06/2010 a 21/06/2010 obtendo um nível de resposta de acordo com a Figura 3.7. Os questionários da pesquisa de campo de consumidores e supermercados foram realizados utilizando a ferramenta de formulários do serviço Google docs, esta ferramenta proporciona a construção rápida e prática de formulários e os usuários participantes da pesquisa precisam somente acessar o link ou abrir o e-mail destinado e responder ao questionário on-line e enviar a sua resposta de uma forma rápida e sem problemas de formatação como acontece com questionários realizados com a ferramenta Word gerando arquivos doc. Para visualizar os questionários realizados é necessário acessar os seguintes links BORGES (2010) para o questionário de consumidores e BORGES (2010) para o questionário de supermercados.

Figura 3.7 - Gráfico de respostas diárias Fonte: Arquivos do autor, 2010.

As pesquisas de campo foram realizadas com o objetivo de identificar as necessidades dos clientes de tal modo a perceber quais são os requisitos essenciais que devem ser desenvolvidos. Para isso, foi conduzida uma pesquisa de mercado para os consumidores em geral e outra para os supermercados.

3.2.1 Pesquisa de campo com consumidores Na pesquisa de campo para os consumidores, um questionário de 20 perguntas foi submetido a 56 pessoas com idades mostradas na Figura 3.8 tendo como meio de vida as profissões mostradas na Figura 3.9. Os resultados destas perguntas podem ser vistos nas Figuras abaixo. O sexo dos participantes pode ser visto na Figura 3.10. A escolaridade dos participantes pode ser vista na Figura 3.11. A frequência com que tais pessoas utilizam a internet pode ser vista na Figura 3.12. A quantidade de participantes que pratica economia doméstica pode ser visto na Figura 3.13.

Figura 3.8 - Idade dos participantes da pesquisa Fonte: Arquivos do autor, 2010.

Figura 3.9 - Profissões dos participantes Fonte: Arquivos do autor, 2010.

Figura 3.10 - Participantes dividos por sexo Fonte: Arquivos do autor, 2010.

Figura 3.11 - Escolaridade dos participantes Fonte: Arquivos do autor, 2010.

Figura 3.12 - Frequência de acesso a Internet Fonte: Arquivos do autor, 2010.

Figura 3.13 - Quantidade de entrevistados que pratica economia doméstica Fonte: Arquivos do autor, 2010.

A distribuição de respostas dos usuários em relação à frequência com que pratica economia doméstica pode ser vista na Figura 3.14. O modo com que as pesquisas de preços são conduzidas pelos usuários pode ser visto na Figura 3.15. Os atributos mais importantes para os usuários podem ser vistos na Figura 3.16. Os supermercados mais comuns onde os clientes realizam as compras podem ser vistos na Figura 3.17.

Figura 3.14 - Frequência com que pratica a economia doméstica Fonte: Arquivos do autor, 2010.

Figura 3.15 - Modo de pesquisar os preços Fonte: Arquivos do autor, 2010.

Figura 3.16 - Atributos mais importantes na visão do usuário Fonte: Arquivos do autor, 2010.

Figura 3.17 - Supermercados mais comuns Fonte: Arquivos do autor, 2010.

Os supermercados que, segundo os clientes, vendem pela Internet podem ser vistos na Figura 3.18. A quantidade de usuários que utilizam os sites dos supermercados para pesquisar preços pode ser vista na Figura 3.19. A quantidade de usuários que utilizaria o Portal de pesquisa de preços é mostrada na Figura 3.20. Os atributos que os usuários esperam encontrar no portal podem ser vistos na Figura 3.21. Os tipos de propaganda que os clientes gostariam de ver no Portal podem ser vistos na Figura 3.22. O percentual de clientes que compraria produtos pelo Portal é mostrado na Figura 3.23.

Figura 3.18 - Supermercados vistos pelos clientes como vendedores pela Internet Fonte: Arquivos do autor, 2010.

Figura 3.19 - Número de usuários que pesquisam preços Fonte: Arquivos do autor, 2010.

Figura 3.20 - Quantidade de usuários que utilizariam o Portal Web Fonte: Arquivos do autor, 2010.

Figura 3.21 - Atributos desejados pelos clientes Fonte: Arquivos do autor, 2010.

Figura 3.22 - Tipos de propaganda desejados pelos clientes Fonte: Arquivos do autor, 2010.

Figura 3.23 - Percentual de clientes que compraria pelo Portal Web Fonte: Arquivos do autor, 2010.

Os benefícios esperados pelos clientes ao utilizar o Portal são mostrados na Figura 3.24. O percentual de clientes que compraria os produtos no supermercado com o menor valor é mostrado na Figura 3.25. O percentual de clientes que não gostaria de ter cadastro no Portal é mostrado na Figura 3.26. O tempo médio que o cliente estaria disposto a gastar no Portal é mostrado na Figura 3.27.

Figura 3.24 - Benefícios esperados pelos clientes Fonte: Arquivos do autor, 2010.

Figura 3.25 - Percentual de clientes que comprariam no supermercado mais barato Fonte: Arquivos do autor, 2010.

Figura 3.26 - Clientes que fariam um cadastro no Portal Web Fonte: Arquivos do autor, 2010.

Figura 3.27 - Tempo que o cliente gastaria no Portal Web Fonte: Arquivos do autor, 2010.

3.2.2 Pesquisa de campo com supermercadistas A pesquisa junto aos supermercados nĂŁo foi realizada na mesma escala com que foi para com os consumidores. Neste caso, apenas conversas com 2 gerentes dos supermercados Comper e Imperatriz foram realizadas com o intuito de se verificar o interesse pela utilizaĂ§ĂŁo da ferramenta. Constatou-se

que os gerentes e diretores dos supermercados possuem interesse na ferramenta como um modo de divulgação de ofertas e produtos. 3.2.3 Definição Público Alvo De acordo com as pesquisas realizadas na fundamentação teórica e os resultados da pesquisa realizada com os consumidores através da Internet e pessoalmente no centro de Florianópolis e Trindade, o público alvo deste projeto são consumidores com as seguintes características: 1. Faixa etária entre 21 a 50 anos, sendo que também outras faixas etárias também utilizariam o Portal, mas com menos assiduidade. 2. De acordo com a pesquisa realizada, sendo proporcional a possível utilização entre homens e mulheres. 3. Possuem escolaridade superior ao ensino fundamental. 4. De acordo com a análise das profissões e escolaridade, pode-se considerar maior utilização pelas classes sociais B, C e D. 5. Utilizam a Internet com frequência. 6. Praticam economia doméstica. 7. Consumidores que realizam pesquisa de preço de supermercados quando acham necessário. 8. Que pesquisam os preços através da internet, direto do supermercado e através de propagandas. 9. Que consideram o preço como atributo principal para a escolha do supermercado. 10. Que compram em supermercados diversificados. 11. Que compram e pesquisam os produtos através da Internet. 12. Que esperam obter através do serviço economia doméstica e comodidade de pesquisas os produtos de supermercado em casa. 13. Que após a pesquisa iriam até o supermercado que oferece o preço mais baixo.

4 CONCEITO DO PROJETO DIGITAL Diante do problema da dificuldade do consumidor realizar uma pesquisa de preços eficaz e prática para obter o menor preço por um conjunto de itens de consumo dos supermercados. Vislumbrou-se a oportunidade de desenvolver um projeto de Design Digital de um Portal Web que forneça os preços atualizados de produtos de supermercado com o objetivo de proporcionar economia doméstica, além de oferecer ao usuário do Portal Web uma experiência de usabilidade, navegação, estética e interação eficazes para que cada acesso e pesquisa realizada. Este projeto de desenvolvimento do Webdesign de um Portal Web de pesquisa de preços de produtos de supermercado apresentará como conceito principal a disponibilização automática de preços de produtos de supermercado de Florianópolis sendo um Portal Web com palavras conceito como: funcionalidade, simplicidade, praticidade, contemporâneo e clean. Para definir características estéticas, simbólicas e de estilo, que possam ser incorporadas ao projeto foram identificadas características semânticas, sendo de expressão de produto, público alvo/ ambiente e tema visual. 1. Expressão de produto: Funcional, simples, contemporâneo, clean, prático, rápido; De acordo com a Figura 4.1.

Expressão do produto

Painéis semânticos n a e l c

simples

rápido

la no ic nu f

inovador

oc tiá rp

contemporâneo Figura 4.1 - Painel semântico expressão do produto Fonte: Arquivos do autor, 2010.

2. Público alvo/ ambiente: Classes b,c e d, consumidores, informados, economizam, práticos, acessam Internet; De acordo com a Figura 4.2.

Público alvo/ ambiente

Painéis semânticos d e ,c b e ss lac

m az i m o n o c e

s e d ad i v o n s e r o id m u s n o c

s o d a m r o f n i

Figura 4.2 - Painel semântico público alvo Fonte: Arquivos do autor, 2010.

3. Tema visual: Inovação, Interação, Usabilidade, tecnologia, informação; De acordo com a Figura 4.3. Tema visual

Painéis semânticos

interativo

inovador

l a n o i c n u f

tecnológico

informativo

Figura 4.3 - Painel semântico tema visual Fonte: Arquivos do autor, 2010.

4.1 INDICADORES Nesta seção são definidos os indicadores preliminares do projeto (requisitos do Portal Web).

1. Fatores para funcionamento: Para o Portal Web realizar o objetivo principal de fornecer os preços atualizados dos produtos de supermercado aos consumidores poderem efetuar suas pesquisas é necessário obter os preços dos supermercados diretamente de seu sistema. 2. Fatores funcionais / ergonômicos do sistema digital: Para obter uma navegação e usabilidade eficazes no Portal Web pelos usuários é necessário aplicar conceitos e estudos de ergonomia de interface, navegação e usabilidade, bem como realizar testes futuros com consumidores para identificar necessidades no Portal Web nestes quesitos. 3. Fatores técnicos do Portal Web: Inclui o desenvolvimento da interface gráfica, marca e posterior implementação do sistema por um programador e codificação por um profissional de Design Digital, na qual será apresentado ao projeto de conclusão do curso fatores como qualidade, aplicação de conceitos de Design de interação, usabilidade, ergonomia, e Design Gráfico nos layouts e marca a ser desenvolvida. 4. Fatores semânticos: A identidade da marca e os layouts para estruturação da interface apresentarão elementos de estilo contemporâneo e de estética clean, com formas remetendo a simplicidade. 4.2 ANÁLISE DE REQUISITOS PRELIMINARES Nesta seção são definidas as características preliminares do Portal Web, as funcionalidades bem como o conteúdo. De acordo com a Figura 4.4, são apresentados algumas funcionalidades e conteúdos preliminares do Portal Web que serão definidos posteriormente com o desenvolvimento das alternativas e escolha da alternativa juntamente com pesquisa com os consumidores para obtenção de uma melhor experiência de usabilidade, navegação e funcionalidade do Portal Web.

Supermercado indicar o menor preço total

visualizar promoções

comparar preço

selecionar produtos visualizar propaganda salvar buscas identificar supermercado mais próximo

ver informações dos supermercados

USUÁRIO

Figura 4.4 - Casos de uso do sistema Fonte: Arquivos do autor, 2010.

4.2.1 Descrição das funcionalidades e conteúdo preliminares 1. Selecionar Produtos: Os usuários do Portal Web selecionam os produtos cujos preços desejam obter. A seleção dos produtos pode acontecer a qualquer instante bem como pode ser modificada a qualquer instante, não necessitando de nenhum requisito prévio. Os produtos são divididos em seções particulares de acordo com suas características (perecíveis, bebidas, limpeza, etc). Para cada produto, também haverá uma foto que o identifique além, de informações adicionais sobre o produto como valores calóricos. 2. Pesquisar Preços: O usuário, após ter selecionado os produtos desejados, poderá submeter à cesta de produtos para encontrar qual supermercado possui o menor preço. Nesta etapa, o sistema irá consultar o preço de cada item em cada supermercado cadastrado no sistema. Uma vez acabado a consulta os preços serão mostrados automaticamente na página. Nesta página, o usuário poderá visualizar o preço total de cada item em cada supermercado. Nesta página também haverá a divulgação de propagandas dos parceiros do Portal Web, além das opções de salvar a busca atual.

3. Salvar as Buscas: O usuário poderá salvar, a qualquer instante, os produtos selecionados na forma de uma busca. Desse modo, o usuário poderá simplesmente selecionar a busca e pesquisar os preços sem a necessidade de escolher novamente todos os produtos da lista de pesquisa. 4. Visualizar informações dos supermercados: Nesta seção os detalhes de cada supermercado são mostrados. Tais informações incluem a localização, existência de estacionamento, dados de contato, horários de funcionamento, formas de pagamento bem como as promoções vigentes. 5. Propagandas: Ao longo do Portal Web, haverá seções reservadas para propagandas de empresas parceiras. Desse modo, é necessário reservar espaço para tais propagandas de tal modo a não poluir a apresentação do Portal Web. 6. Promoções: As promoções (ofertas), de novos produtos e de preços mais baixos deverão ser mostradas no Portal Web em uma área específica para isso ao longo de toda a navegação pelo Portal Web. Tais promoções basicamente informam ao usuário a existência de um novo produto ou de novos preços mediante imagens ou textos marquee. De acordo com as funcionalidades preliminares do Portal Web e seus conteúdos a Figura 4.5, demonstra o mapa preliminar, onde se pode verificar a navegação preliminar na qual se verifica a maneira com que o usuário irá acessar o Portal Web e identificar as ações que poderá realizar para pesquisar os preços dos produtos do supermercado e os demais conteúdos relacionados ao objetivo do Portal Web.

Figura 4.5 - Mapa de navegação do Portal Web Fonte: Arquivos do autor, 2010.

4.3 ATUALIZAÇÕES DE PREÇOS NO PORTAL WEB Para que o Portal Web funcione corretamente, é preciso ter preços atualizados de todos os supermercados participantes. Para que isso aconteça, há algumas formas que podem ser utilizadas para manter o banco de dados atualizado, a saber: 1. Atualização manual por terceiros: Através de uma equipe os preços dos produtos são constantemente mapeados e digitados manualmente, via Internet ou aplicativos móveis, no banco de dados do Portal Web. Trata-se de uma abordagem bem arcaica devido às constantes mudanças de preços bem como a quantidade de trabalho necessária para manter tais dados atualizados. Embora seja totalmente inviável tal abordagem, é o método utilizado para a formação de preços do DIEESE, PRO TESTE e, bem como, pelas Associações de Donas de Casa. 2. Atualização manual pelos funcionários: Neste caso, os próprios funcionários do supermercado participante do Portal Web são responsáveis por atualizar os preços quando houver uma modificação. Trata-se de uma abordagem possível, porém, muito trabalhosa sem benefício imediato devido ao alto custo agregado para atualização manual de preços. Embora seja ineficiente, é uma abordagem utilizada por supermercados menores que possuem

domínio

Internet

que,

devido

incapacidade

desconhecimento, atualizam manualmente seus preços no Web site do supermercado. 3. Atualização Automática: Com este tipo de automatização, todos os preços são constantemente atualizados a todo instante em que são modificados. Tal atualização ocorre mediante a utilização de protocolos abertos de comunicação como Web services. Neste caso, é fornecida uma interface de programação que deve ser utilizada pelo departamento de TI do supermercado toda vez que algum preço for atualizado. Através da utilização de Web services, todos os supermercados comunicam o Portal Web de que seus preços foram alterados. O Portal Web, neste caso, avalia quais foram os itens modificados e

automaticamente atualiza o banco de dados utilizado para comparação de preços. Desse modo, a utilização de um procedimento automático para atualização de preços é totalmente viável sendo que a única restrição neste caso é o convencimento da administração do supermercado a utilizar tal interface para atualizar os preços no Portal Web. Uma vez implementado, tal sistema sempre atualizará os preços e o Portal Web possuirá um banco de dados dinâmico constantemente atualizado pelos supermercados.

5 DEFINIÇÃO E DESENVOLVIMENTO DA MARCA

5.1 PROBLEMATIZAÇÃO

Com o conceito do projeto estabelecido,surgiu o problema de como representar o objetivo do Portal Web para os usuários, que é a pesquisa de preços de produtos de supermercado. Diante de tal situação, considerou-se que a melhor opção para resolvê-lo seria justamente explicar detalhadamente a idéia do Portal Web para os usuários e verificar o que estes pensam sobre a idéia. De acordo com a pesquisa realizada, que também foi utilizada para definir melhor a idéia do Portal Web em termos de usabilidade, observou-se que havia um conjunto de palavras citadas com mais freqüência conforme Figura 5.1. Economia Inovação Funcional

Simples Gratuito Pesquisa

Preços Comparação Prático

Figura 5.1 - Palavras mais citadas pelos usuários em conversa informal Fonte: Arquivo do autor, 2010.

A partir de tais interações com os usuários, considerou-se que tais palavras como chave para a definição da marca do Portal Web. Analisando tais palavras, observa-se que o usuário percebe que se trata de uma ferramenta de comparação de preços que pode eventualmente lhe proporcionar economia nas compras domésticas. 5.2 CONCEPÇÃO DO LOGOTIPO Baseado nas palavras-chave definidas, definiu-se que a marca deveria transmitir principalmente o conceito de economia. Com isso em mente, buscaram-se palavras que se relacionassem diretamente a este conceito, a saber: •

Poupar, Poupe, Guardar

•

Oferta, Promoção, Desconto

•

Pesquisa, Procurar,Comparar

•

Mesquinho, Pechincha Com este novo conjunto de palavras em mente e com a

determinação de associar o conceito de economia à marca, iniciou-se a procura por uma palavra que não é meramente a junção de palavras-chave como acontece em alguns sites e portais espalhados pela Internet. Além disso, tal palavra da marca deve ser única dentro do contexto brasileiro nos quisitos de não estar associada a outro significado de conhecimento comum da sociedade nem mesmo possuir um significado comum em língua estrangeira e nacional. O nome da marca proposta nasceu pela associação de letras de palavras que remetem ao objetivo do Portal Web de proporcionar economia ao consumidor. Com isso, tem-se a seguinte linha de raciocínio utilizada: Primeiramente queria-se partir do verbo poupar no sentido de que uma pessoa pode poupar. Em seguida, a idéia vinha que de você, usuário, poupe ao utilizar o Portal Web no sentido imperativo do verbo. A seguir são listadas as palavras usadas: Poupar - P O U P E A

partir

destas

palavras,

tentou-se abstrair

letras

que

significassem algum sentido em relação às palavras chave mencionadas pelos usuários. Com isso, teve-se as seguintes letras que puderam ser associadas corretamente: P = pesquisar e = economizar o = obter p = preço A

partir

destas

letras

que

puderam

ser

associadas

corretamente, tentou-se formar uma palavra simples com boa sonoridade que

pudesse ser utilizada como marca. Tem-se, pela matemática, que é possível formar 12 palavras sem repetição, conforme Figura 5.2 abaixo. Peop Epop Ppoe

Pope Eopp Poep

Ppeo Eppo Pepo

Opep Oppe Oepp

Figura 5.2 - Figura das palavras formadas pela associação das letras chave Fonte: Arquivos do autor, 2010.

A partir das palavras formadas, seguiu-se o critério de que não deveriam ser largamente conhecidas do público como OPEP (Organização dos países exportadores de petróleo) e POPE (Papa). Além disso, também foram eliminadas as palavras que não apresentavam uma boa sonoridade. A partir destas eliminações, restou apenas 4 palavras listadas na Figura 5.3. EPPO PEPO

OPPE EPOP

Figura 5.3 - Palavras finalistas Fonte: Arquivos do autor, 2010.

A partir das palavras restantes, escolheu-se a palavra OPPE como final pela melhor sonoridade apresentada entre as disponíveis bem como pela lógica do significado formado pelas letras conforme as palavras associadas a seguir: o = obter P = pesquisar p = preço e = economizar O usuário pode OBTER uma PESQUISA com PREÇOS e ECONOMIZAR. A fim de garantir que tal marca não seja associada a uma sigla, tem-se por preferência a adoção do nome em letra minúscula como, por exemplo, oppe. 5.3 CONCEPÇÃO DO SÍMBOLO Para reforçar o objetivo do Portal Web de proporcionar economia aos usuários, pensou-se em criar um símbolo para fazer parte da composição

da marca oppe. Este símbolo deve transmitir que, a partir da forma e significado, o indivíduo obterá economia e, com a visualização do símbolo, também irá associar tal significado à nova marca. Assim, pensaram-se nos seguintes símbolos que remetessem às palavras economia, comparação de preços, supermercado e pesquisa, como os elementos mostrados na Figura 5.4 abaixo. Carrinho

Lista de compras

Porco

Simbolizar muitas

Simbolizar as compras

Simbolizar economia

Lupa

Balança

Etiqueta de promoção

Simbolizar pesquisa

Simbolizar comparação de preço

Simbolizar ofertas

compras

Figura 5.4 - Elementos para símbolos Fonte: Arquivos do autor, 2010.

Analisando-se cada umas destas opções propostas, tem-se as seguintes considerações para cada uma, a saber: 1. Carrinho: O objetivo de sua utilização é justamente para simbolizar muitas compras que o usuário pode fazer. Porém, após analisar o Portal Web percebe-se que não haverá compras on-line, mas somente pesquisa de produtos e preços. Além disso, o carrinho é símbolo da maioria dos supermercados que vendem pela internet, não sendo um diferencial. 2. Lista de compras: A lista de pesquisa pode ser utilizada para simbolizar a anotação feita dos produtos que se deseja pesquisar. Porém, a utilização de somente uma lista como símbolo não reflete o integral objetivo do site. 3. Lupa: A lupa simboliza uma procura detalhada de preços. O problema é que já há sites que a utilizam como símbolo de pesquisa. E não reflete o sentido integral do Portal Web. 4. Balança: A balança pode ser utilizada para simbolizar a comparação de preços bem como mostrar qual produto ou supermercado é o mais barato.

Porém, teria que representar produtos ou preços que são pesados, não sendo simples a interpretação por parte do usuário. 5. Etiqueta de Promoção: A etiqueta de promoção pode ser utilizada para simbolizar as ofertas da semana e do dia de diversos supermercados. Uma etiqueta, entretanto, não remete diretamente que se trata de produtos de supermercado. 6. Porco: O porco simboliza o objeto “porquinho de poupança” que certas pessoas tiveram na infância ou que ainda possuem. Em seu sentido popular, incentiva os indivíduos a economizar e poupar seu dinheiro. A partir da descrição dos símbolos, tem-se que o símbolo que melhor representa o objetivo do Portal Web é justamente o porco, uma vez que os usuários somente irão pesquisar, comparar e procurar etiquetas de promoção com objetivo básico de economizar. Isso significa que o porco simboliza o objetivo primordial dos outros símbolos que são a Lupa, etiqueta de promoção e a balança. Desse modo, o símbolo escolhido é o porquinho utilizado como cofrinho pelos indivíduos que simboliza a economia que se pode obter ao utilizar o Portal Web. 5.4 CONCEPÇÃO DO SLOGAN Para melhor compreensão sobre o objetivo do Portal Web, sua marca e símbolo serão utilizados para atrair a atenção do usuário com um Slogan. Este será uma frase curta com no máximo três palavras que acompanhará a marca no Portal Web. O Slogan deve transmitir os objetivos similares ao símbolo sendo que se busca uma maior associação ao sentido de uma lista de pesquisa de preços de produtos de supermercado. Com o objetivo de encontrar tal Slogan, um brainstorm foi realizado com o objetivo de levantar um conjunto mínimo do qual poderia ser escolhido um que atendesse aos requisitos iniciais. Na Figura 5.5 abaixo, há alguns exemplos pensados para a frase curta do Slogan.

Prateleira de supermercados

Buscando descontos

Preço bom é aqui

Economia doméstica

Porquinho da economia

Economize e poupe

Economia em supermercados

Cesta básica da economia

Supermercados da economia

Economia a um clique

Poupe em supermercados

Buscando preços para você

Supermercados conectados

Pesquisa inteligente

Conectando supermercados

Antenado nos preços

Não perca tempo e economize

Deixe a procura conosco

Preço camarada

Viva e poupe

Encontre o preço baixo

Carrinho da economia

Prateleiras de desconto

Ofertas válidas

Lista fácil

Cem listas de pesquisas

Seu supermercado

Conectado às ofertas Figura 5.5 - Potencias Slogans Fonte: Arquivos do autor, 2010.

Analisando-se os potenciais slogans, tem-se que a maioria não representa que são produtos de supermercado os objetos cujos preços são mostrados. Isso pode ser verificado pelos slogans que contêm preços em suas composições. Considerando que há preço em vários objetos e não somente em produtos de supermercado, o slogan por si só não representa que são produtos de supermercado. Desse modo, escolheu-se aquele que representa os produtos bem como o objetivo primordial do usuário, que é economizar nas compras em supermercados. Com isso, o slogan escolhido foi Economia em Supermercados.

5.5 GERAÇÃO DE ALTERNATIVAS DO LOGOTIPO Para representar o logotipo oppe, foram realizados estudos com algumas fontes existentes a fim de escolher a que represente com clareza o conceito do site de ser simples, funcional e prático. Na Figura 5.6 abaixo é mostrado um estudo de logotipos desenvolvidos.

Figura 5.6 - Estudos de logotipos Fonte: Arquivos do autor, 2010.

Após análise de cada logotipo apresentado, fez-se uma seleção dos que apresentam em sua forma uma ligação com o conceito que se pretende chegar no Portal Web. Na Figura 5.7 são mostrados os logotipos selecionados para aprimoramento.

Figura 5.7 - Logotipos selecionados para aprimoramento Fonte: Arquivos do autor, 2010.

Analisando os logotipos selecionados, tem-se que para a escolha será levado em consideração a apresentação do logotipo, a

simplicidade da forma, composição das letras para a construção da palavra oppe, a harmonia das linhas, legibilidade, espessura e formato do traço. Assim, chegou-se em 3 alternativas para refinamento juntamente com o símbolo e Slogan. Na Figura 5.8 abaixo tem-se as alternativas escolhidas para refinamento final.

Figura 5.8 - Logotipos selecionados para refinamento Fonte: Arquivos do autor, 2010.

5.6 GERAÇÃO DE ALTERNATIVAS DO SÍMBOLO Para representar o símbolo que fará parte da composição da marca, realizaram-se estudos de formas para se chegar a uma alternativa. Depois disso, fizeram-se vários refinamentos com o objetivo de gerar um símbolo que representasse o conceito e objetivo do Portal Web, que é proporcionar economia aos usuários. Na Figura 5.9 abaixo tem-se os estudos realizados para se definir o símbolo.

Figura 5.9 - Estudos para refinamento do conceito do símbolo Fonte: Arquivos do autor, 2010.

A partir destes estudos, definiu-se que para atender aos objetivos e conceitos do Portal Web, o símbolo teria que representar esta definição. Sendo assim, os estudos baseados em elementos de placas e pessoas não atendem ao objetivo principal, assim como os estudos de carrinhos e listas. Tais elementos, entretanto, fazem parte da identidade e funcionalidades do Portal Web e podem, portanto, serem utilizados na interface do Portal Web e não somente na marca. Desse modo, o elemento que será refinado e definido como símbolo para composição da marca é o porquinho que se associa diretamente ao objetivo do Portal Web, que é proporcionar economia. Na figura 5.10 abaixo tem-se alternativas iniciais para o refinamento do símbolo.

Figura 5.10 - Alternativas iniciais do símbolo Fonte: Arquivos do autor, 2010.

De acordo com o conceito do Portal Web e seu objetivo, a intenção é proporcionar satisfação aos usuários de tal modo que, na representação do símbolo, definiu-se que este deve apresentar as seguintes características: 1. Porquinho gordo: Para passar a impressão de que utilizando o Portal Web o usuário conseguirá encher seu porquinho. 2. Coroa: Para passar a impressão de que este Portal Web será o rei dos preços baixos. 3. Jovial e lúdico: Para atrair o público jovem e seguidores de tendências. 4. Simples: Para remeter à simplicidade de usabilidade do Portal Web. 5. Mascote: Para o usuário associar facilmente o símbolo e a marca. 6. Simpatia: Para fidelizar usuários. 7. Sorriso: Para remeter a uma possível satisfação dos usuários. Na Figura 5.11 tem-se o aperfeiçoamento das alternativas iniciais para a construção do símbolo do Portal Web.

Figura 5.11 - Alternativas aperfeiçoadas do símbolo Fonte: Arquivos do autor, 2010.

Na figura 5.12 tem-se o desenvolvimento de alternativas para o refinamento e composição da marca.

Figura 5.12 - Alternativas para refinamento Fonte: Arquivos do autor, 2010.

Para composição da marca do Portal Web serão utilizadas as alternativas escolhidas para refinamento do nome e símbolo além da inclusão do Slogan.

5.7 GERAÇÃO DE ALTERNATIVAS DA COMPOSIÇÃO DA MARCA A partir das alternativas de nome e símbolo escolhidas para composição da marca bem como seus refinamentos, tem-se as alternativas iniciais de composição da marca mostrados na Figura 5.13.

Figura 5.13 - Alternativas iniciais da composição da marca Fonte: Arquivos do autor, 2010.

De acordo com as alternativas iniciais geradas da composição da marca, tem-se na Figura 5.14 as alternativas escolhidas para refinamento e composição da marca.

Figura 5.14 - Alternativas escolhidas para refinamento da composição da marca Fonte: Arquivos do autor, 2010.

A partir das alternativas mostradas na figura 5.14, fez-se um estudo mais elaborado considerando também o slogan como um elemento da marca. Na Figura 5.15 é possível visualizar as alternativas geradas com a adição deste novo elemento.

Figura 5.15 - Alternativas geradas com slogan Fonte: Arquivos do autor, 2010.

5.8 APERFEIÇOAMENTO E VALIDAÇÃO Com base nas alternativas geradas com o slogan, fez-se um refinamento com o objetivo de integrá-lo melhor às cores do Portal Web e ao layout final deste. O resultado do aperfeiçoamento pode ser visto nas Figuras 5.16 e 5.17.

Figura 5.16 - Alternativa final na posição horizontal e espelhada Fonte: Arquivos do autor, 2010.

Figura 5.17 - Alternativa final na posição vertical Fonte: Arquivos do autor, 2010.

Nas Figura 5.18 e 5.19 abaixo, tem-se a construção do contorno suplementar estrutural da marca.

Figura 5.18 - Contorno estrutural marca horizontal e espelhada Fonte: Arquivos do autor, 2010.

Figura 5.19 - Contorno estrutural marca vertical Fonte: Arquivos do autor, 2010.

Nas Figuras 5.20 e 5.21 tem-se a representaĂ§ĂŁo da marca na escala de cinza.

Figura 5.20 - Escala de cinza da marca horizontal e espelhada Fonte: Arquivos do autor, 2010.

Figura 5.21 Escala de cinza da marca vertical Fonte: Arquivos do autor, 2010.

5.9 ESTUDOS DE COR A partir das alternativas geradas e com o intuito de realĂ§ar os conceitos do Portal Web de ser jovial e atraente, fez-se um estudo cujo resultado demonstrou que as cores mais fortes visualmente sĂŁo as mais

apropriadas para dar vitalidade ao Portal Web sem comprometer o aspecto simples e clean que se pretende alcançar. As cores de destaque utilizadas foram o amarelo para dar brilho e atrair a atenção, em conjunto com as outras cores como o púrpura para agregar valor ao símbolo da coroa e estrela e o azul de fundo para trazer ao Portal tranqüilidade e credibilidade. Na Figura 5.22 são mostradas todas as cores definidas na composição da marca bem como suas respectivas descriminações.

Figura 5.22 - Lista de cores definidas na marca Fonte: Arquivos do autor, 2010.

5.10 TIPOGRAFIA O logotipo foi criado com as seguintes tipografias apresentadas na Figura 5.23 de acordo com análise e escolha na geração de alternativas e composição da marca. Estas tipografias representam o conceito do Portal de ser jovial e descontraído com a utilização da tipografia Pagoda SF, e ao mesmo tempo de ser funcional e apresentar credibilidade com a utilização da tipografia Blippo Light SF por sua legibilidade e harmonia.

Figura 5.23 - Tipografia institucional da marca oppe Fonte: Arquivos do autor, 2010.

5.11 MALHA CONSTRUTIVA E LIMITES DE REDUÇÃO Com o objetivo de garantir a legibilidade e proporção correta para reprodução da marca junto a revistas, propagandas e anúncios na Internet, cartas entre outros, recomenda-se de acordo com as Figuras 5.24, 5.25 e 5.26 uma malha construtiva e um limite máximo de redução da marca.

Figura 5.24 Malha construtiva para a marca oppe Fonte: Arquivos do autor, 2010.

Figura 5.25 - Limites de redução para a marca oppe horizontalmente Fonte: Arquivos do autor, 2010.

Figura 5.26 Limites de redução para a marca oppe verticalmente Fonte: Arquivos do autor, 2010.

6 ESPECIFICAÇÕES FUNCIONAIS E REQUISITOS DE CONTEÚDO Nesta seção são listadas as principais especificações funcionais do projeto bem como um detalhamento dos requisitos de conteúdo. A partir disso, tem-se todos os elementos necessários para desenvolver e estabelecer as funcionalidades e conteúdos necessários de tal modo a satisfazer as necessidades do usuário. 6.1 ESPECIFICAÇÕES FUNCIONAIS As especificações funcionais se referem ao conjunto de requisitos essenciais para que o projeto funcione adequadamente. Isso inclui os mecanismos adequados para a comparação de preços de produtos de supermercados. Neste Portal Web, cujo objetivo básico é proporcionar a economia aos usuários, faz-se necessário listar as diversas funcionalidades necessárias, a saber: 6.1.1 Listar produtos O usuário deve ser capaz de ver os produtos que deseja pesquisar em determinado supermercado. Desse modo, após o supermercado ter sido escolhido, o usuário poderá escolher os produtos de acordo com a categoria e subcategoria, bem como, através da busca pelo nome do produto. Além disso, o usuário também poderá ver os detalhes do produto com informações específicas. Outra funcionalidade é a possibilidade de ver todas as ofertas do dia. 6.1.2 Selecionar produtos e lista de pesquisa O usuário, após ter definido o supermercado e o produto que deseja, necessita um meio de selecionar tal produto para que, no final, possa ser utilizado na comparação de preço. Além disso, o usuário também necessita de um mecanismo para armazenar todos os produtos previamente selecionados.

6.1.3 Comparar preços dos produtos em cada supermercado Outra funcionalidade essencial para o usuário é a possibilidade de poder comparar o preço de todos os produtos selecionados em diferentes supermercados de sua região. Para isso, deve haver um mecanismo para que o preço total de todos os produtos selecionados seja disponibilizado para cada supermercado. 6.1.4 Informar o consumidor sobre os serviços O consumidor poderá tirar suas dúvidas a respeito do sistema através de páginas de apoio que explicarão corretamente como o sistema funciona. Tais páginas terão como público alvo os consumidores e os administradores de supermercados bem como os fabricantes de produtos. 6.2 REQUISITOS DE CONTEÚDO Nesta seção são definidos os elementos necessários para que o Portal Web vá ao encontro das necessidades do usuário. Isso inclui descrever os conteúdos necessários de tal forma que possam ser implementados na versão final do projeto. A fim de definir corretamente a prioridade de cada requisito, estes foram classificados de acordo com a seguinte nomenclatura: •

Alta prioridade: requisitos essenciais ao projeto e ao funcionamento do módulo. O objetivo do projeto depende diretamente do cumprimento de todos os requisitos com esta prioridade.

•

Média prioridade: requisitos desejáveis ao projeto, mas não essenciais. O não cumprimento destes requisitos não afeta o objetivo do projeto, mas acarreta uma redução significativa na funcionalidade do módulo.

•

Baixa prioridade: requisitos desejáveis ao projeto, não essenciais e que estão ligados a aplicações específicas e especializadas do módulo. O não cumprimento destes requisitos não afeta a funcionalidade do módulo, uma vez que estes requisitos podem ser implementados no futuro, quando e se necessário.

6.2.1 Requisitos para listar produtos Nesta seção são definidos os requisitos de conteúdo necessários para que o usuário possa listar os produtos de diversas maneiras, a saber: Requisito: Selecionar supermercado Prioridade: Alta Descrição: Trata-se de uma área onde o usuário poderá escolher o supermercado que deseja escolher produtos. Requisito: Selecionar categoria Prioridade: Alta Descrição: É necessário ter uma área onde o usuário possa selecionar a categoria de produtos que deseja pesquisar. Requisito: Selecionar subcategoria Prioridade: Alta Descrição: Deve haver uma área onde o usuário poderá selecionar a subcategoria do produto. Requisito: Mostrar informações do produto Prioridade: Alta Descrição: Deve haver uma

área específica para mostrar as

informações do produtos. Nesta área deve conter as seguintes informações: •

Nome do produto;

•

Imagem do produto;

•

Preço do produto;

•

Área para selecionar o produto;

•

Área para definir a quantidade desejada;

Requisito: Mostrar detalhes do produto Prioridade: Alta

Descrição: Trata-se de uma área onde é possível ver informações detalhadas a respeito de um determinado produto. Nesta área devem existir as seguintes informações: •

Nome do produto;

•

Imagem do produto;

•

Preço do produto;

•

Área para selecionar o produto;

•

Tabela nutricional;

•

Tabela comparativa de preços em diversos supermercados;

Requisito: Procurar produto Prioridade: Média Descrição: O usuário poderá procurar um produto mediante o conhecimento de seu nome. Para isso, é necessário ter uma área específica para coletar tais informações e disparar a busca no banco de dados. 6.2.2 Selecionar produtos e lista de pesquisa Requisito: Selecionar produto Prioridade: Alta Descrição: O usuário deve possuir um mecanismo de seleção de produtos desejados. Também é necessário ter uma área para selecionar a quantidade desejada do produto em questão. Requisito: Visualizar produtos selecionados Prioridade: Alta Descrição: É necessário ter um mecanismo para que o usuário possa visualizar os produtos previamente selecionados bem como realizar uma comparação de preço total destes produtos em vários supermercados. Além disso, também deve haver um espaço específico para adicionar, remover e esvaziar a lista.

6.2.3 Comparar preços dos produtos em cada supermercado Requisito: Mostrar preço total da lista de pesquisa Prioridade: Alta Descrição: É necessário haver um espaço onde seja mostrado o preço total dos produtos selecionados no supermercado desejado. Requisito: Comparar preços dos produtos selecionados nos supermercados Prioridade: Média Descrição: Uma vez que o usuário tenha selecionado um conjunto de produtos, deve haver uma área específica que mostrada o preço total deste conjunto em cada supermercado parceiro. 6.2.4 Páginas de apoio e informação ao usuário Requisito: Obter a localização do usuário Prioridade: Alta Descrição: É necessário obter a localização do usuário na página inicial do portal para que possa ser listado todos os supermercados da região desejada. Requisito: Informar o usuário sobre o Portal Web Prioridade: Baixa Descrição: É desejável que haja uma área específica para sanar as dúvidas que o usuário por ventura possa ter. Requisito: Divulgar supermercados parceiros Prioridade: Baixa Descrição: É importante ter uma área específica para divulgar os supermercados parceiros bem como atrair novos supermercados a utilizar o serviço. Requisito: Divulgar o serviço perante fabricantes Prioridade: Baixa

Descrição: É importante ter uma área específica para o marketing do Portal Web perante os fabricantes de produtos de tal modo que seja explicado todos os detalhes do funcionamento do Portal Web e do sistema de atualização de preços. Requisito: Informar o usuário dos Termos de uso Prioridade: Baixa Descrição: É necessário ter uma área para explicar os serviços prestados no Portal Web bem como informar possíveis discrepâncias entre os preços publicados no Portal Web e no supermercado. Requisito: Possuir área de contato Prioridade: Média Descrição: Deve haver uma área para que os usuários possam entrar em contato com a equipe de gestão e desenvolvimento do Portal Web para realizar reclamações bem como sugestões acerca do Portal Web.

7 DESIGN DE INTERAÇÃO E ARQUITETURA DA INFORMAÇÃO Nesta seção são mostrados os fluxos de interações que o usuário será submetido bem como a arquitetura e posicionamento dos elementos dentro das páginas para facilitar o acesso intuitivo ao conteúdo. 7.1 DESIGN DE INTERAÇÃO Neste Portal Web procura-se utilizar mecanismos de interação que se adéquam às

necessidades

do público alvo. Assim, partindo da

funcionalidade necessária de apresentar os preços dos produtos aos usuários, tem-se que tais preços serão atualizados dinamicamente. Para representar o mecanismo de atualização de preços, tem-se os fluxos gerais de interação que ocorrerão entre as páginas do Portal Web: •

Atualização de informações requeridas via Ajax (Asynchronous Javascript And XML) é o uso de Javascript com XML, para executar requisições assíncronas de informações de tal modo a carregar somente parte da página. Com tal tecnologia, ao realizar comandos como selecionar uma subcategoria e listar os produtos novas páginas não serão carregadas, mas somente os blocos necessários. Assim, o usuário que se encontra nas páginas de pesquisa de preço sempre terá a opção de interagir com as abas dos supermercados bem como com as abas de comparação de preços, de categorias e subcategorias além da lista de pesquisa.

•

Uso do mecanismo de barra de rolagem, sendo que os produtos de uma determinada subcategoria serão listados em uma única página. Assim, haverá duas áreas para escolha de categoria e subcategoria, sendo uma na parte superior e uma na parte inferior da barra de rolagem. Desse modo, tal mecanismo facilitará a escolha dos produtos quando a área superior já tiver passado do limite de visualização da tela pelo usuário. Os fluxos detalhados, de acordo com os requisitos de conteúdo, são

listados a seguir:

7.1.1 Requisitos para listar produtos Requisito: Selecionar supermercado Design de Interação: O usuário poderá listar os produtos por supermercado. Para isso, faz-se necessário ter elementos que possam ser utilizados a fim de listar os produtos do supermercado desejado. Neste caso, tal seleção entre supermercados será feitas através de abas que indicarão qual supermercado está selecionado através de uma cor diferente. Em cada aba haverá somente um texto indicando o nome do supermercado. Juntamente com as abas dos supermercados, haverá uma aba específica para a listagem das ofertas do dia. Uma vez que tal aba seja selecionada, haverá uma listagem de todos os produtos ofertados por todos os supermercados. Ao clicar na aba, os produtos do supermercado em questão serão atualizados via Ajax em uma única página. Requisito: Selecionar categoria Design de Interação: A seleção dos produtos pode acontecer através das categorias nas quais pertencem. Desse modo, é necessário ter links para todas as categorias incluindo um link para as ofertas do supermercado selecionado. Ao clicar no link da categoria, este mudará de cor bem como atualizará, via Ajax, a área de subcategorias. A categoria selecionada possuirá uma cor de fundo que indicará que esta categoria está selecionada. Para cada categoria haverá um ícone associado ao texto que representa a categoria e que, uma vez clicado, também atualizará a área de subcategorias. Requisito: Selecionar subcategoria Design de Interação: A seleção dos produtos por subcategorias ocorrerá somente após a categoria ter sido selecionada. Desse modo, uma vez que o usuário selecionar a categoria, todas as subcategorias associadas serão mostradas através de links. Em hipótese alguma serão mostradas as subcategorias caso a categoria não tenha sido selecionada. O link selecionado possuirá uma cor de fundo diferente dos

demais. Ao clicar no link de subcategoria, ocorrerá á atualização da lista dos produtos via Ajax. Requisito: Mostrar informações do produto Design de Interação: A listagem simples ocorre quando o usuário seleciona uma subcategoria bem como quando efetuar uma busca. Esta listagem simples é basicamente mostrar as seguintes informações dos produtos: •

Nome do produto: Sem link, somente para visualização;

•

Imagem do produto: Com link direcionador à área de detalhes dos produtos;

•

Preço do produto: Sem link, somente para visualização;

•

Botão de seleção: Com link direcionador à área de lista de pesquisa;

•

InputText (entrada de dados) de quantidade desejada: Com botões para definir a quantidade desejada;

Requisito: Mostrar detalhes do produto Design de Interação: Os detalhes do produto são mostrados em uma área específica, através de atualização via Ajax, com as seguintes informações: •

Nome do produto: Sem link, somente para visualização;

•

Imagem do produto: Com link direcionador à área de detalhes dos produtos;

•

Preço do produto; Sem link somente para visualização;

•

Botão de seleção: Com link direcionador à área de lista de pesquisa;

•

InputText de quantidade desejada: Com botões para definir a quantidade desejada;

•

Tabela nutricional; Sem link, somente para visualização;

•

Tabela comparativa de preços em diversos supermercados; Sem link, somente para visualização;

100

É importante ressaltar que esta página de detalhes somente será mostrada quando o usuário clicar na imagem do produto na listagem simples. Requisito: Procurar produto Design de Interação: O resultado de uma busca será uma listagem simples de produtos que tenham atendido ao critério de procura. Tal critério será o nome do produto através de uma entrada de texto (InputText). Na procura também haverá um botão de iniciar que deverá ser clicado pelo usuário para que os resultados sejam mostrados. 7.1.2 Selecionar produtos e lista de pesquisa Requisito: Selecionar produto Design de Interação: A seleção de produtos acontecerá através de um botão. Uma vez clicado, o Portal Web adicionará o produto em questão na lista de pesquisa. Também haverá um mecanismo (InputText) para definir a quantidade desejada do produto. A área do botão mudará de cor para identificação pelo usuário dos produtos já selecionados. Requisito: Visualizar produtos selecionados Design de Interação: A lista de pesquisa guardará os produtos selecionados pelo usuário. Tal lista terá a opção de mostrar o conteúdo através de um botão que, ao ser clicado, mostrará os produtos selecionados com as seguintes informações para cada um: •

Nome do produto: Sem link, somente para visualização;

•

Imagem do produto: Com link direcionador à área de detalhes dos produtos;

•

Preço do produto no supermercado corrente: Sem link, somente para visualização;

•

Botão para remover ou adicionar mais unidades: Com mecanismo (InputText);

•

Mostrar categoria que o produto pertence: Com link direcionador à categoria correspondente;

101

Haverá uma área sempre visível em todas as páginas de pesquisa com as seguintes informações: •

Número de produtos já selecionados: Sem link, somente para visualização;

•

Botão para ver os detalhes: Com link direcionador à área de detalhes da lista de pesquisa;

•

Botão para salvar, imprimir, enviar por e-mail bem como para limpar a lista: Com links direcionadores a ação escolhida com atualização via Ajax;

7.1.3 Comparar preços dos produtos em cada supermercado Requisito: Mostrar preço total da lista de pesquisa Design de Interação: O preço total dos produtos selecionados pelo usuário aparecerá para cada supermercado. Ao inserir um novo produto na lista, tal preço será automaticamente atualizado sem nenhuma intervenção adicional além do simples fato de adicionar o produto na lista. O preço não possuirá link de tal modo que será somente para visualização. Requisito: Comparar preços dos produtos selecionados nos supermercados. Design de Interação: Na página de detalhes, haverá uma tabela comparativa de preços praticados nos diversos supermercados para o produto em questão. Tal tabela apresentará a informação sem link de tal modo que será somente para visualização. 7.1.4 Páginas de apoio e informação ao usuário Requisito: Obter a localização do usuário. Design de Interação: Tal página será a primeira a ser visualizada pelo usuário. Nesta página, o usuário deve escolher o bairro no qual deseja realizar a consulta de preços. Esta área de escolha será realizada através do mecanismo de ComboBox (caixa de seleção).Também

102

haverá, nesta tela inicial, os links para as páginas de apoio do Portal Web, além de uma área com link direcionador a uma página com um vídeo explicativo de como utilizar o Portal Web de maneira adequada e eficiente. Requisito: Informar o usuário sobre o Portal Web Design de Interação: Nesta tela haverá informações relativas ao Portal Web incluindo uma listagem dos benefícios que o usuário pode ter ao utilizar o Portal Web bem como dados sobre o projeto desenvolvido. Nesta página também haverá um vídeo explicativo do portal. Requisito: Divulgar supermercados parceiros Design de Interação: Tal página tem como objetivo estimular a formação de parcerias com supermercados bem como consolidar as já realizadas. Através de links e informações sobre os supermercados atualmente participantes do Portal Web, pretende-se convencer os leitores de que formar uma parceria com o Portal Web é vantajosa para ambas as partes. Para isso, inclui-se uma descrição sobre cada supermercado bem como links para as ofertas e logomarca deste. Além disso, também há os dados de contato e procedimento para iniciar a parceria. Requisito: Divulgar o serviço perante fabricantes Design de Interação: Tal página é voltada para os fabricantes de produtos bem como para os gestores dos supermercados. Na página de parcerias são disponibilizadas, na forma de texto e links, todas as informações e benefícios que se pode ter ao divulgar os produtos no Portal Web. Além disso, também há os dados de contato e procedimento para iniciar a parceria. Requisito: Informar o usuário dos Termos de uso Design de Interação: Nesta página, cujo objetivo é esclarecer os usuários de que poderá haver pequenas discrepâncias entre os preços divulgados no Portal Web e no supermercado, haverá informações na

103

forma de texto de links. Além disso, também explicará as normas de utilização do Portal Web. Requisito: Possuir área de contato Design de Interação: Nesta página os usuários poderão entrar em contato com a equipe de gestão e desenvolvimento do Portal Web para fazer sugestões e reclamações sobre o Portal Web. Nesta página, o usuário

também

poderá

enviar

diretamente

para

departamento desejado. Será composta por links, textos e campos de entrada para realizar o contato. Segue abaixo Fluxos de ação que usuário poderá realizar no Portal Web: 1. Visualizar produto Para visualizar as informações de um determinado produto, o usuário deve seguir o seguinte fluxo de interação na ordem mencionada: a. Clicar no supermercado desejado ou nas super ofertas; b. Clicar na categoria desejada; c. Clicar na subcategoria desejada; d. Visualizar os produtos listados.

2. Adicionar produto na lista Para adicionar um produto na lista de pesquisa, o usuário deverá executar a seguinte sequência de interações na ordem mencionada: a. Visualizar produto; b. Selecionar quantidade; c. Clicar no botão de adicionar.

104

Também é possível adicionar um produto na lista quando este estiver na sua página de detalhes. Neste caso, para estar na página de detalhes do produto é necessário ter clicado na imagem do produto. 3. Visualizar produtos selecionados Para ver a lista de produtos previamente selecionados o usuário deverá clicar no botão de detalhes da lista. Caso o usuário deseje saber o preço de cada item selecionado em um determinado supermercado, o usuário deverá executar o seguinte fluxo de iteração: a. Clicar no botão de detalhes da lista; b. Clicar na aba correspondente ao supermercado desejado; 4. Remover produtos selecionados Com o intuito de remover um produto previamente selecionado, o usuário deverá executar o seguinte procedimento: a. Clicar no botão de detalhes da lista; b. Clicar no botão remover do produto escolhido. 5. Buscar produtos Caso o usuário deseje um produto particular cujo nome seja conhecido, será necessário executar o seguinte procedimento dentro da página de pesquisa: a. Digitar o nome completo ou parcial do produto na entrada de texto; b. Clicar no botão procurar. 6. Salvar ou Imprimir a lista de pesquisa Caso o usuário deseje salvar ou imprimir a lista de pesquisa, é necessário executar o seguinte procedimento na ordem descrita:

105

a. Selecionar o supermercado desejado cujos preços deseja visualizar; b. Clicar no botão salvar. 7. Remover todos os produtos selecionados Caso o usuário deseje remover todos os items da lista de pesquisa, bastará clicar no botão limpar lista. 7.2 ARQUITETURA DA INFORMAÇÃO Nesta seção é explicado o posicionamento dos elementos para que o usuário possa realizar facilmente todos os fluxos de interação descritos. Juntamente com tais descrições são mostradas as páginas de wireframes. 7.2.1 Proposta de wireframe No decorrer do desenvolvimento do projeto, fizeram-se estudos de arquitetura da informação através da construção de wireframe para se chegar a uma interface adequada ao objetivo principal do projeto. Nesta seção será apresentada o wireframe final desenvolvido, sendo que a estrutura utilizada para

a construção da interface bem como posterior layout seguirão os

requisitos de conteúdo e interação já descritos. 7.2.1.1 Wireframe Final Na página inicial Figura 7.1 haverá uma área para a marca, bem como, para a escolha do bairro que dará acesso à página principal de pesquisa, imagem com carrinho e os demais links para apresentar o Portal Web ao usuário e que aparecerão em todas as páginas do Portal Web como os seguintes:

106

Figura 7.1 - Wireframe da página inicial Fonte: Arquivos do autor,2010.

a) Link para acessar um vídeo simulador de pesquisa. Como no wireframe da Figura 7.2 abaixo:

Figura 7.2 - Wireframe da demonstração do vídeo Fonte: Arquivos do autor,2010.

b) Link Home que dará acesso a página inicial do Portal Web. c) Link Sobre o Portal que trará as informações do serviço. Como no wireframe da Figura 7.3 abaixo:

107

Figura 7.3 - Wireframe da descrição do Portal Web Fonte: Arquivos do autor,2010.

d) Link Supermercados parceiros que trará informações sobre as parcerias com supermercados. Como no wireframe da Figura 7.4 abaixo:

Figura 7.4 - Wireframe de supermercados parceiros Fonte: Arquivos do autor,2010.

Na página Supermercados parceiros o usuário poderá a acessar informações do supermercado clicando na imagem e também poderá acessar a área de ofertas do mesmo na página principal de pesquisa como no wireframe da Figura 7.5 abaixo:

108

Figura 7.5 - Wireframe de supermercado parceiro Fonte: Arquivos do autor,2010.

Ao acessar o link Ofertas o usuário entrará na página principal de pesquisa do Portal Web na aba do supermercado escolhido para obter informações e na categoria ofertas como no wireframe da Figura 7.6 abaixo:

Figura 7.6 - Wireframe de ofertas do supermercado parceiro Fonte: Arquivos do autor,2010.

e) Link Parcerias com informações das parcerias com fabricantes de produtos. Como no wireframe da Figura 7.7 abaixo:

109

Figura 7.7 - Wireframe de parcerias Fonte: Arquivos do autor,2010.

f) Link

termos

uso

que

trará

informações

sobre

responsabilidades do Portal Web. Como no wireframe da Figura 7.8 abaixo:

Figura 7.8 - Wireframe de Termos de Uso Fonte: Arquivos do autor,2010.

g) Contato que trará informações para os usuários realizarem reclamações e sugestões ao Portal Web. Como no wireframe da Figura 7.9 abaixo:

110

Figura 7.9 - Wireframe de Contato Fonte: Arquivos do autor,2010.

Se o usuário preferir acessar a página principal de pesquisas do site poderá acessar como já descrito anteriormente através do link supermercados parceiros no link ofertas ou acessar diretamente através da escolha na página inicial o bairro através do mecanismo de (combobox). Como no wireframe abaixo: a) Página inicial na Figura 7.10 abaixo:

Figura 7.10 - Wireframe da página inicial Fonte: Arquivos do autor,2010.

111

b) Página principal de pesquisas na Figura 7.11 abaixo.

Figura 7.11 - Wireframe da página principal de pesquisas Fonte: Arquivos do autor,2010.

Diferente do estudo anterior esta página é formada por blocos que aparecerão nas demais etapas de pesquisa e com arranjo horizontal dos produtos e categorias e subcategorias. Sendo que os produtos ficarão dispostos em prateleiras um ao lado do outro e todos serão visualizados na mesma página através do mecanismo de barra de rolagem e não de páginas consecutivas. Blocos principais da página de pesquisa: a) Área da marca na parte superior esquerda; b) Bloco superior com abas dos supermercados parceiros e de super ofertas, juntamente com o bloco de lista de pesquisa e suas informações; c) Bloco superior e inferior de categorias; d) Bloco superior e inferior de subcategorias; e) Área para propaganda dinâmica na lateral esquerda; f) Bloco de produtos e suas informações na área central; g) Links sobre os serviços parte inferior;

112

Ao acessar a página principal o usuário automaticamente estará na aba de super ofertas que apresentará separado por categorias as ofertas de todos os supermercados. Como no wireframe da Figura 7.12 abaixo:

Figura 7.12 - Wireframe da página de Super Ofertas Fonte: Arquivos do autor,2010.

A partir desta página de super ofertas o usuário já poderá iniciar

sua

pesquisa

partindo de

uma

oferta

determinado

supermercado ou acessar a aba de algum supermercado desejado. Ao mudar de aba ou categoria e subcategoria o usuário não entra em outra página, sendo que os blocos são atualizados via sistema Ajax que carrega informações diferentes na mesma página. Ao escolher uma aba de determinado supermercado, este estará pesquisando os produtos e visualizando os preços do mesmo, o usuário terá que escolher a categoria e depois a categoria para obter a listagem de produtos ou acessar o sistema de busca com o nome do produto desejado. Como no wireframe da Figura 7.13 abaixo:

113

Figura 7.13 - Wireframe da página de pesquisa Fonte: Arquivos do autor,2010.

As opções de categoria e subcategoria serão destacadas para melhor visualização pelo usuário. O usuário já poderá escolher a quantidade de A a Z produtos e adicionar o produto a lista de pesquisa e visualizar o nome e cada produtos e os preços no supermercado. Ao clicar na foto do produto o usuário acessará as informações de detalhe do produto como no wireframe da Figura 7.14 abaixo:

114

Figura 7.14 - Wireframe de Detalhes do Produto Fonte: Arquivos do autor,2010.

Que conterá uma imagem de melhor visualização ao usuário, tabela nutricional, o preço e demais informações do produto. Este poderá escolher a quantidade

e adicionar a lista de pesquisa. Que

automaticamente mostrará o número de itens pesquisados. Ao adicionar um produto a lista de pesquisa acima das abas dos supermercados haverá o preço total da pesquisa em cada supermercado e em destaque a aba que está sendo utilizada. Assim o usuário poderá mudar de aba automaticamente de acordo com sua preferência de preço total. Também é apresentada ao usuário na página de detalhe uma tabela com a comparação de preço do produto em cada supermercado e destacado em qual supermercado o usuário está pesquisando. Após adicionar produtos na lista de pesquisa o usuário pode acessar o link ver detalhe de lista e verificar quais produtos já adicionou. Como no wireframe da Figura 7.15 abaixo:

115

Figura 7.15 - Wireframe de detalhe de Lista de Pesquisa Fonte: Arquivos do autor,2010.

Nesta página o usuário poderá visualizar, adicionar e remover os produtos pesquisados que estarão organizados de acordo com as categorias específicas. O usuário terá a opção de continuar sua pesquisa e clicando nos links das categorias e subcategorias ou ainda esvaziar a lista ou enviar a lista. Como no wireframe da Figura 7.16 abaixo:

Figura 7.16 - Wireframe de envio de Lista de Pesquisa Fonte: Arquivos do autor,2010.

116

O usuário poderá enviar a lista por e-mail, SMS, imprimir e salvar a lista. Após efetuar algum destes comandos obterá uma resposta do sistema como no wireframe da Figura 7.17 abaixo:

Figura 7.17 - Wireframe de resposta ao usuário Fonte: Arquivos do autor,2010.

O usuário ao terminar a pesquisa pode a qualquer momento realizar novas pesquisas escolhendo seu bairro na página inicial. Para uma versão inicial do Portal Web foi decidido não ter sistema de cadastro, assim o usuário que poderá visualizar suas listas antigas através de cooks.

117

8 DESIGN DA INFORMAÇÃO Neste capítulo serão descritos os designs dos elementos das interfaces bem como o design da navegação entre as diversas páginas do Portal Web. 8.1 DESIGN DA NAVEGAÇÃO Nesta seção são identificados os diferentes fluxos de navegação com o detalhamento do mapa de navegação do Portal Web de acordo com a Figura 8.1 abaixo.

Figura 8.1 - Mapa de navegação Fonte: Arquivos do autor, 2010.

O usuário poderá navegar em qualquer uma das páginas descritas a partir do momento em que escolher o bairro na página inicial. A partir deste momento, poderá executar as navegações por supermercados, categorias e páginas de apoio. Por meio da navegação por supermercados, o usuário poderá navegar entre os diversos supermercados cadastrados no Portal Web,

118

representados na figura 8.1pelos símbolos S1, S2. S3, S4 e S5. Além disso, o usuário poderá acessar outra navegação dinâmica das categorias de produtos que deseja pesquisar através dos símbolos c1 a c13. Ao navegar pelo bloco de supermercados quanto no bloco de categorias, as informações serão carregadas por intermédia da tecnologia Ajax, ou seja, somente o conteúdo necessário será carregado e não toda a página. Considerando que pode haver muitos itens na página, todos os blocos de navegação por supermercado quanto por categorias são espelhados na parte inferior da página de tal modo a serem facilmente encontrados pelo usuário. Além das navegações já citadas, também há a navegação para as páginas de apoio do Portal Web, as quais incluem informações detalhadas sobre os termos de uso e como o Portal Web funciona. Tais páginas são separadas de tal modo que o usuário é direcionado para estas quando desejar ver seu conteúdo. 8.2 DESIGN DA INTERFACE Nesta seção são descritas as decisões tomadas no momento de definir o Design dos elementos e da Interface como um todo. Inclui-se também uma breve análise da utilização de tais elementos . 8.2.1 Página inicial Nesta página o usuário selecionar o bairro onde deseja realizar a pesquisa por intermédio de um ComboBox conforme mostrado na Figura 8.2. Neste elemento, o tamanho foi definido como o menor tamanho possível onde seja capaz de caber o nome do maior bairro existente na cidade. Além disso, para o usuário localizar melhor o local do ComboBox utilizou-se uma seta indicativa como na Figura 8.3. A cor azul e o cinza como contraste, destes elementos, foram utilizadas para trazer equilíbrio e conformidade com a marca .

119

Figura 8.2 - Elemento ComboBox para seleção de bairro Fonte: Arquivos do autor,2010.

Figura 8.3 - Elemento seta Fonte: Arquivos do autor,2010.

Na Figura 8.4 têm têm-se os padrões cromáticos e tipografia utilizada das Figuras 8.2 e 8.3.

Figura 8.4 - Padrões cromáticos e tipografia dos elementos Combobox e seta Fonte: Arquivos do autor,2010.

No outro elemento que compõe a página inicial, mostrado na Figura 8.5, fez-se o uso de uma Figura Figura que representasse um vídeo de tal modo que,

120

ao ser clicado, mostrará um vídeo explicativo sobre como utilizar o Portal Web. Web Este elemento também possui um texto explicativo cujo objetivo é atrair o usuário a assistir o vídeo. Na Figura 8.6 é mostrado uma representação do vídeo quanto clicado. Ao ser clicado, preencherá toda a tela do usuário no chamado modo fullscreen. A cor utilizada no vídeo como preto, foi para obter maior associação do usuário com uma tela e as cores azul e branco, foram for utilizadas s para dar destaque e associação com os outros elementos da página. p As cores do texto azul e laranja foram utilizadas para simbolizar tranqüilidade e ao mesmo tempo expansão e movimento. Sendo que a tipografia Myriad Pro o será utilizada nos textos presentes nos elementos da interface diferenciando-se se das tipografias utilizadas na marca, por ser uma tipografia com maior harmonia, legibilidade legibilidade,, continuidade e simplicidade na forma.

Figura 8.5 8. - Elemento de atalho para o vídeo Fonte: Arquivos do autor,2010.

Figura 8. 8.6 - Modo fullscreen do vídeo de apresentação Fonte: Arquivos do autor,2010.

121

Na Figura 8.7 têm-se têm os padrões cromáticos e tipografia utilizada da Figura 8.5.

Figura 8.7 7 - Padrões cromáticos e tipografia do texto Fonte: Arquivos do autor,2010.

No terceiro elemento da página inicial, mostrado na Figura 8. 8.8, tentou-se se passar o conceito de que o usuário poderá economizar com o uso do Portal Web e que, fazendo isso, será capaz de encher o seu carrinho com produtos em oferta. As cores da imagem simbolizam tranqüilidade e ao mesmo tempo força, ça, movimento e energia. energi

Figura 8.8 8. - Carrinho de compras cheio Fonte: A ser adquirida de istockphoto, (2010).

122

Outro elemento da página inicial, mostrado na Figura 8.9, é a barra de navegação para as páginas de apoio do Portal Web. Estas páginas de apoio podem ser acessadas em todas as páginas do Portal Web na parte inferior da tela. As cores utilizadas foram o azul e o branco como contraste para dar equilíbrio e tranqüilidade.

Figura 8.9 – Barra de navegação para páginas de apoio Fonte: Arquivos do autor,2010.

Na Figura 8.10 têm-se os padrões cromáticos e tipografia utilizadas da Figura 8.9.

Figura 8.10 - Padrões cromáticos e tipografia do texto e barra inferior Fonte: Arquivos do autor,2010.

Outro elemento da página inicial, mostrado na Figura 8.11, é um texto informativo cuja meta é explicar, em poucas palavras, o objetivo do Portal Web aos usuários novatos. De acordo com o texto do vídeo, as cores utilizadas foram o azul e laranja para simbolizar tranqüilidade e ao mesmo tempo expansão e movimento.

123

Figura 8.11 - Texto as melhores ofertas na página inicial Fonte: Arquivos do autor,2010.

Na Figura 8.12 têm-se têm os padrões cromáticos e tipografia utilizados da Figura 8.11.

Figura 8.12 - Padrões cromáticos e tipografia do texto as melhores ofertas Fonte: Arquivos do autor,2010.

Além dos elementos citados, também há uma área na parte superior esquerda da página reservada especificadamente para a marca do Portal Web – oppe e uma borda com formas onduladas para dar destaque ao carrinho como na Figura 8. 8.13. A cor utilizada foi o azul para estar em sintonia com a marca e trazer tranqüilidade, segurança e contraste na página.

Figura 8.13 8. - Borda superior página inicial Fonte: Arquivos do autor,2010

124

Na Figura 8.14 têm-se o padrão cromático utilizado da Figura 8.13.

Figura 8.14 - Padrões cromáticos borda superior página inicial Fonte: Arquivos do autor,2010.

8.2.2 Página da listagem de produtos Dentro da página de listagem de produtos, há o elemento de navegação superior que aparece em todas as procuras realizadas dentro do Portal Web. Este elemento é mostrado na Figura 8.15. Basicamente tal elemento é composto pelo bloco de seleção de supermercados, pela área de preços totais em cada supermercado bem como pelo espaço para a lista de pesquisa representada na figura pela parte superior direita. Na área da lista de pesquisa tem-se o número de itens adicionados a lista, o link de acesso a lista de compras que pode ser acessado no símbolo do carrinho e no texto abaixo, o link de acesso para o usuário salvar a lista que poderá ser acessado através do símbolo disquete e o texto abaixo e ainda o usuário poderá acessar o link imprimir a lista através do símbolo impressora e texto abaixo. Na parte inferior direita do elemento de navegação superior tem-se a área de busca com (imput text) para o usuário descrever o nome do produto e o botão ok em forma de círculo para efetuar a busca. A área do bloco de supermercados organizados um ao lado do outro com os preços totais das pesquisas acima com cor diferenciada, é uma área de bastante utilização e cada supermercado quando selecionada fica em destaque

125

em relação aos outros e o usuário pode poderá rá realizar sua pesquisa em outro supermercado quando desejar e visualizar diferenciação de preços na pesquisa. Na mesma área dos supermercados, deslocado a esquerda, tem tem-se o botão super ofertas representado com texto e símbolo e o usuário poderá acessar as ofertas de todos os supermercados. A marca estará localizada na parte superior esquerda deste elemento de navegação e fará composição com este elemento. As cores utilizadas de destaque são o azul para entrar em sintonia com a marca e trazer tranqüilidade, além de dar contraste aos textos em branco e preto e laranja. Outra cor de destaque é a laranja que representa expansão e movimento ao elemento.

Figura 8.15 - Barra de navegação superior do Portal Web Fonte: Arquivos do autor,2010.

Na Figura 8.16 têm-se têm os padrões cromáticos e tipografia utilizados da Figura 8.15.

Figura 8.16 - Padrões cromáticos e tipografia da barra de navegação superior Fonte: Arquivos do autor,2010.

126

O próximo elemento da página de listagem de produtos, mostrado na Figura 8.17,, é a barra de navegação de produtos por categorias e subcategorias. Este elemento é utilizado na parte superior e espelhado na parte inferior da página. As categorias são representadas por símbolos símbolos. Estes símbolos foram desenvolvidos de acordo com o conceito do Portal Web de ser simples e funcional . Assim Assim, cada símbolo desenvolvido teve como referência para forma e representação representação, os produtos de maior destaque de cada categoria categoria, para o usuário ter maior associação do símbolo com os produtos contidos em cada categoria. Foram desenhados somente com a utilização de contorno e uma cor.. Abaixo do símbolo da categoria tem tem-se se os textos correspondentes a cada uma.

E quando escolhida a categoria aparecem as subcategorias

correspondentes, sempre ficando em destaque a categoria e subcategoria escolhidas. A categoria e subcategoria foram org organizadas anizadas em ordem alfabética e o número de categorias e subcategorias foi determinado de acordo com pesquisa realizada em sites de supermercados que apresentam estes elementos com os produtos correspondentes. Sendo definido que seria mais adequado para construção strução da interface e usabilidade do Portal Web pelo usuário, dispor menos categorias e mais subcategorias. As s cores utilizadas nos símbolos das categorias foram o branco e a laranja para dar contraste e expansão. expans O azul foi utilizado como contraste ao texto por trazer tranqüilidade e leveza leveza. A cor púrpura foi utilizad utilizada como contraste ao preto para agregar valor e estar em sintonia com a marca. E a cor branca é utilizada quando o elemento está selecionado selecionad trazendo diferenciação em relação aos outros elementos.

Figura 8.17 - Barra de navegação por categorias e subcategorias Fonte: Arquivos do autor,2010.

Na Figura 8.18 têm-se têm os padrões cromáticos e tipografia utilizados da Figura 8.17.

127

Figura 8.18 - Padrões cromáticos e tipografia da barra de navegação por categorias e subcategorias Fonte: Arquivos do autor,2010.

Outro elemento da página de listagem de produtos, mostrado na Figura 8.19, é a prateleira de produtos por supermercado. Neste elemento, é possível verificar o texto com o nome da categoria e símbolo na parte superior esquerda dentro da primeira linha da prateleira. Na primeira linha, simbolizada pela linha cor amarela, é a área de produtos em oferta por categoria no supermercado selecionado. A cor amarela foi usada justamente para dar mais ênfase e brilho a tal área. Também há, na primeira linha, um espaço reservado para propaganda, simbolizado na Figura 8.19 pela imagem de um biscoito. Neste elemento, todos os produtos são organizados em ordem alfabética e dispostos na forma de uma prateleira um ao lado do outro com os preços destacados abaixo da imagem. Há também informações sobre o nome do produto, a quantidade bem como os elementos necessários para adicioná-lo a lista de pesquisa. No elemento preço, destacado abaixo de cada produto, o primeiro algarismo é maior justamente para ficar bem visível ao usuário a informação que este procura.

128

Além do amarelo utilizado para dar destaque e brilho a primeira prateleira de ofertas,, tamb também foi utilizada a cor azul para dar contraste aos textos em preto nas prateleiras, prateleiras a cor laranja também mbém para dar destaque e contraste aos textos em branco dos preços, pre , além do símbolo da categoria estar com contorno branco como contraste e o fundo estar em branco para se obter maior visibilidade dos produtos listados.

Figura 8.19 - Prateleira de produtos por supermercado Fonte: Arquivos do autor,2010.

Na Figura 8.20 têm-se têm os padrões cromáticos e tipografia utilizados da Figura 8.19.

129

Figura 8.20 - Padrões cromáticos e tipografia da prateleira de produtos por supermercado Fonte: Arquivos do autor,2010.

8.2.3 Página das Ofertas Nesta página, cuja principal diferença com a página de listagem de produtos é o conteúdo, tem-se todas as ofertas, listadas lado a lado e separadas por categoria, de todos os supermercados parceiros. Nesta página, que é a primeira página a ser visualizada pelo usuário antes deste escolher o supermercado, tem-se uma prateleira com todas as ofertas, como descrito no elemento representado na Figura 8.21. Neste elemento, tem-se uma área destinada a propaganda no lado superior esquerdo de acordo com as demais páginas de pesquisa e os produtos são separados pela categoria correspondente na ordem disposta no elemento de navegação da categoria e representado pelo símbolo e texto. Os produtos também são organizados em ordem alfabética e a ordem dos supermercados de acordo com o elemento de navegação. As cores utilizadas estão em harmonia com as cores utilizadas na marca e demais elementos da interface, sendo que neste elemento o amarelo está sendo destaque e contraste do texto de Super Ofertas e são destaque também os textos dos supermercados que possuem produtos em ofertas com a utilização da cor laranja para dar destaque e atrair a atenção do usuário.

130

Figura 8.21 - Prateleira de ofertas dos supermercados parceiros Fonte: Arquivos do autor,2010.

Na Figura 8.22 têm-se os padrões cromáticos e tipografia utilizados da Figura 8.21.

Figura 8.22 - Padrões cromáticos e tipografia da prateleira de ofertas Fonte: Arquivos do autor,2010.

131

8.2.4 Página dos Detalhes do Produto Dentro da página de detalhes do produto, há uma área reservada para mostrar as informações do produto, conforme mostrado na Figura 8.23. Nesta área, há os elementos de qual subcategoria o produto pertence, bem como, a tabela nutricional do produto além da tabela de comparação de preços entre todos os supermercados parceiros de acordo com a ordem estabelecida no elemento de navegação dos supermercados. Nesta área também estão dispostas a imagem do produto, o preço e os elementos necessários para adicioná-lo a lista de pesquisa. As cores utilizadas neste elemento são o azul para dar contraste à informação da categoria e o contorno do símbolo em branco e a cor laranja do preço e tabela comparativa para atrair à atenção do usuário e dar expansão a informação.

Figura 8.23 - Detalhes do produto Fonte: Arquivos do autor,2010.

Na Figura 8.24 padrões cromáticos e tipografia utilizados da Figura 8.23.

132

Figura 8.24 - Padrões cromáticos e tipografia de detalhe dos produtos Fonte: Arquivos do autor,2010.

8.2.5 Página da Lista de Pesquisa Neste elemento da página da lista de pesquisa Figura 8.25 tem-se o texto e o símbolo referenciando ao usuário sua localização no Portal Web e uma barra de informações sobre os produtos selecionados e botões para adicionar e eliminar produtos da lista além de eliminar a lista completa. Os produtos são organizados em forma de lista, um abaixo do outro, para o usuário saber que está analisando sua lista de pesquisa e não está realizando pesquisa. Se o usuário desejar poderá voltar a pesquisar acessando as categorias e subcategorias e mudar de supermercado acessando o elemento de navegação dos supermercados. Os produtos continuam a ser organizados em ordem alfabética e seguindo a ordem evidenciadas nas categorias e subcategorias. Sempre que alterar sua lista na página de detalhe da lista, detalhe do produto e de pesquisa nas prateleiras obterá automaticamente o total da lista em cada supermercado e o número de produtos adicionados. Além de poder salvar a lista, imprimir quando desejar e começar uma nova lista de pesquisa.

133

As cores de destaque utilizadas neste element elemento foram o azul para dar contraste ao texto de Lista de compras e ao símbolo de lista desenvolvido na cor branca e a cor laranja para dar destaque e expansão às informações dos produtos adicionados à lista lista.

Figura 8.25 8. - Lista de Pesquisa Fonte: Arquivos do autor,2010.

Na Figura 8.26 padrões padr cromáticos e tipografia utilizados da Figura 8.25.

134

Figura 8.26 - PadrĂľes cromĂĄticos e tipografia da Lista de Pesquisa Fonte: Arquivos do autor,2010

135

9 DESIGN VISUAL DO PORTAL WEB Nesta seção é apresentado o layout das páginas do Portal Web bem como um detalhamento dos elementos gráficos da página e componentes da navegação. Serão demonstradas visualmente as páginas, ações e funções com requisitos de alta prioridade e baixa como as páginas de apoio do Portal Web. Na Figura 9.1 layout da página inicial do Portal Web.

Figura 9.1 - Layout da página inicial do Portal Web Fonte: Arquivos do autor,2010.

Na Figura 9.2 é mostrado o layout da página de ofertas dos supermercados. Neste caso, todas as ofertas de todos os supermercados são mostradas lado a lado com a indicação em qual supermercado ela esta disponível.

136

Figura 9.2 - Layout da página de ofertas Fonte: Arquivos do autor,2010.

Na Figura 9.3 é mostrado o layout da página de listagem de produtos por supermercado. Neste caso, a Figura 9.3 representa a listagem de produtos do supermercado Angeloni na categoria Biscoitos & Aperitivos dentro da subcategoria Cream Craker.

137

Figura 9.3 - Layout da página de listagem de produtos Fonte: Arquivos do autor,2010.

Na Figura 9.4 é mostrado o layout da página de detalhes do produto. Neste caso, a Figura 9.4 representa o detalhe do produto Cream Craker Mabel bem como uma tabela com os preços dos diferentes supermercados.

138

Figura 9.4 - Layout da página de detalhes do produto Fonte: Arquivos do autor,2010.

Na Figura 9.5 é mostrado o layout da página dos produtos selecionados pelo usuário.Neste caso, há uma lista vertical de todos os produtos previamente selecionados pelo usuário enquanto este utiliza o Portal Web.

139

Figura 9.5 - Layout da página dos produtos selecionados Fonte: Arquivos do autor,2010.

Na Figura 9.6 é mostrado o layout do popup da lista para impressão que abre quando o usuário utiliza a ação de imprimir a lista de pesquisa. A lista impressa será correspondente aos produtos escolhidos no supermercado selecionado como de acordo com a Figura 9.5 está selecionado o supermercado Angeloni.

140

Figura 9.6 - Layout da lista para impress達o Fonte: Arquivos do autor,2010.

141

Nas Figuras 9.7, 9.8, 9.9, 9.10, 9.11 e 9.12 abaixo se tem os layouts das páginas de apoio do Portal Web, sendo que é requisito de baixa prioridade e podem sofrer alterações quando este projeto for implementado.

Figura 9.7 - Layout da página Sobre o Portal Fonte: Arquivos do autor,2010.

Figura 9.8 - Layout da página dos Supermercados Parceiros Fonte: Arquivos do autor,2010.

142

Figura 9.9 - Layout da pรกgina do Supermercado Parceiro Angeloni Fonte: Arquivos do autor,2010.

Figura 9.10 - Layout da pรกgina de Termos de Uso Fonte: Arquivos do autor,2010.

143

Figura 9.11 - Layout da pรกgina de Parcerias Fonte: Arquivos do autor,2010.

Figura 9.12 - Layout da pรกgina de Contato Fonte: Arquivos do autor,2010.

144

CONSIDERAÇÕES FINAIS Diante do desenvolvimento de tal projeto, obteve-se um aprendizado nesta área de conhecimento de Design de tal modo que novos conhecimentos foram adquiridos. Além disso, percebe-se que a metodologia de Garrett é eficiente para tais projetos uma vez que define exatamente os passos a serem seguidos para a modelagem do projeto Digital. Também como resultado, espera-se que a proposta de solução seja condizente com um problema real enfrentado pelos usuários de tal modo que traga benefícios concretos aos seus futuros utilizadores. Com isso, espera-se introduzir uma ferramenta gratuita e útil a sociedade de modo geral. Como

ponto

negativo,

projeto

não

foi

fisicamente

implementado devido, em parte, ao fato de que este deve ser feito com uma equipe multidisciplinar em que várias áreas de conhecimento devem ser usadas. Isso inclui a necessidade de cadastrar milhares de produtos bem como deter os conhecimentos necessários para se conectar aos bancos de dados dos supermercados e receber os preços automaticamente além, é claro, das parcerias necessárias para que isso aconteça. Como perspectivas futuras, tem-se como objetivo implementar o Portal Web de tal modo que este funcione com supermercados reais bem como tenha um sistema automático de atualização de preços que mostrará exatamente o mesmo valor praticado nos estabelecimentos parceiros. Com isso, os usuários poderão executar a comparação de preços entre os diversos supermercados da região. Para que o objetivo citado se materialize, é necessário obter parceiros comerciais de tal modo que a idéia seja viável sob o ponto de vista econômico. Isso já esta em fase de implantação sendo que alguns contatos com os gestores de supermercados de Florianópolis já foram realizados. Atualmente tais contatos estão no aguardo do protótipo para negociações futuras. Sob o ponto de vista de Design, o complexo objetivo desejado é introduzir a marca oppe como sinônimo de economia em supermercados. Para isso, têm-se como meta inserir mais ferramentas dentro do Portal Web de tal modo que o usuário possa obter sugestões de produtos similares, porém, com

145

preços inferiores dentro do mesmo supermercado. Além disso, depois de ser desenvolvido o protótipo com o sistema automático de busca de preços funcionando, serão realizados testes de usabilidade com usuários. Estes testes servirão para conhecer eventuais problemas e soluções de usabilidade no Portal e posterior validação da navegação, interação, interfaces e do sistema de busca de preços automático desenvolvidas para cumprir seu objetivo. Ainda dentro do objetivo de lançar o produto, tal idéia foi postada como sugestão dentro do programa Sinapse, que é desenvolvido pela Fundação CERTI com recursos provenientes da FAPESC. Tal programa tem por objetivo selecionar as melhores idéias que, ao final, receberão um prêmio monetário reservado para desenvolvimento e implantação.

146

REFERÊNCIAS BIBLIOGRÁFICAS A REDE. Brasil cresce no ranking mundial da internet, mas com baixa penetração e velocidade de conexão. 2010. Disponível em: <http://www.arede.inf.br/inclusao/component/content/article/106acontece/2702-brasil-cresce-no-ranking-mundial-da-internet-mas-com-baixapenetracao-e-velocidade-de-conexao>. Acesso em: 06/06/2010. BORGES, Priscila. Questionário dos Consumidores. 2010. Disponível em: <http://spreadsheets.google.com/viewform?formkey=dFVYeVhENW0ta25ZLVY 3WU5KWTRCelE6MQ>. Acesso em 23jun.2010. BORGES, Priscila. Questionário dos Supermercados. 2010. Disponível em: <http: http://spreadsheets.google.com/viewform?formkey=dERVdG1OZUFreFJFSXg1 eV9PRFBiU3c6MQ>. Acesso em 23 jun. 2010. CIASHOP. E-Commerce. 2008. Disponível em: <http://www.ciashop.com.br/ecommerce/o_que_e_ecommerce.asp >. Acesso em 23 jun.2010. DIEESE. Metodologia Dieese. 2009. Disponível em: <http://www.dieese.org.br/rel/rac/metodologia.pdf>. Acesso em 06/06/2010. DIEESE. Cesta Básica Nacional: Março 2010. Disponível em: <http://www.dieese.org.br/rel/rac/racabr10.xml>. Acesso em 06. Jun 2010. DIEESE. Disponível em: <http://www.dieese.org.br/>. Acesso em 06/06/2010. EDWALD, Luís Carlos. Sobrou Dinheiro!:Lições de Economia Doméstica. 5.ed. Rio de Janeiro: Bertrand Brasil,2003. FELIPINI, Dailton. A internet e as Novas regras do Jogo. Disponível em:<http://www.e-commerce.org.br/artigos/e-commerce_novas_regras.php>. Acesso em 06 jun.2010. FISK, Peter. O gênio do marketing. Tradução Felix Nonnenmacher. Porto Alegre: Bookman, 2008.

147

FOLHA. Investimento publicitário na cresce 45 % no primeiro semestre. 2008.Disponível em: < http://www1.folha.uol.com.br/folha/informatica/ult124u437864.shtml>.Acesso em: 06/06/2010. GARRETT, James Jesse. The elements of user experience. Disponível em: <http://www.jjg.net/elements/pdf/elements_ch02.pdf.>. Acesso em: 06/06/2010. GOHN, Maria da Glória M. (Org.). Movimentos sociais no início do século XXI: antigos e novos atores sociais. Petrópolis, RJ: Vozes, 2003. GOOGLE. Google Docs. Disponível em: <http://docs.google.com>. Acesso em 06 jun. 2010. GUTIERREZ, Anita. d. S. D. A Dinâmica do Consumo no Supermercado. 2009. Disponível em: <http://www.todafruta.com.br/portal/icNoticiaAberta.asp?idNoticia=19138> Acesso em 16 mai. 2010. IBGE. Acesso à Internet. 2005. Disponível em: <http://www.ibge.gov.br/home/estatistica/populacao/acessoainternet/defaulttab _hist.shtm>. Acesso em 06 jun.2010. IBGE. IBGE CONTOU 32,1 MILHÕES DE USUÁRIOS DA INTERNET NO PAÍS.2005. Disponível em: <http://ibge.gov.br/home/presidencia/noticias/noticia_visualiza.php?id_noticia=8 46&id_pagina=1>. Acesso em: 06/06/2010. IBOPE. Aumenta participação de adultos entre internautas domiciliares. 2009. Disponível em: <http://www.ibope.com.br/calandraWeb/servlet/CalandraRedirect?temp=6&proj =PortalIBOPE&pub=T&db=caldb&comp=pesquisa_leitura&nivel=null&docid=94 57B242579C653A832575400043B82D>. Acesso em: 06/06/2010. IBOPE. Internet no Brasil cresceu 10% no mês de julho. 2009. Disponível em:< http://www.ibope.com.br/calandraWeb/servlet/CalandraRedirect?temp=6&proj=Por talIBOPE&pub=T&db=caldb&comp=pesquisa_leitura&nivel=null&docid=62A33B253 477B58783257619004BD15C >. Acesso em: 06/06/2010.

148

ISTOCKPHOTO. Disponível em: < http://www.istockphoto.com/stock-photo6248999-shopping-cart-100-off.php>. Acesso em 16 out. 10. LAKATOS, Eva Maria; MARCONI, Marina de Andrade. Fundamentos de metodologia científica. 6. ed. São Paulo: Atlas, 2008. MERCADO MINEIRO. Disponível em: <http://www.mercadomineiro.com.br>. Acesso em: 07 nov.10. MOSIMANN, Rogério S.. Implicações da Internet nos Jornais e a presença da RBS na Web. 2007. 257 f. Dissertação (Mestrado em Desenvolvimento Regional e Urbano)- Universidade Federal de Santa Catarina, Florianópolis, 2007. PAESANI, Liliana Minardi. Direito de informática: Comercialização e desenvolvimento internacional do software. 6. ed. São Paulo: Atlas, 2009. PERSONA, Mário. Para onde vai o e-commerce? Disponível em: <http://www.mariopersona.com.br/entrevista_varejo.html>. Acesso em: 06/06/2010. PROTESTE. Guia de Preços. 2009. Disponível em: <http://www.proteste.org.br/interactive/GPRS/>. Acesso em 06 jun. 2010. PROTESTE. Guia de Preços: Aumento de preços só poupou Pernambuco. 2009. Disponível em: <http://www.proteste.org.br/precos/guia-de-precos-aumento-de-precos-sopoupou-pernambuco-s486201.htm>. Acesso em 06 jun. 2010. PROTESTE. PROTESTE. Disponível em: <http://www.proteste.org.br/>. Acesso em 06 jun. 2010. ROJO, Francisco José Grandis. O comportamento do consumidor nos supermercados. Disponível em: <h13ttp://www.16.fgv.br/rae/artigos/26.pdf>. Acesso em: 06/06/2010. ROYO, Javier. Design Digital: Fundamentos do Design. São Paulo: Edições Rosari, 2008.

149

SANTO, Agnaldo. E. S. Economia Doméstica. 2009. Disponível em: <http://www.artigonal.com/credito-artigos/economia-domesticasolucao-para-melhoria-da-qualidade-de-vida-1097354.html>. Acesso em 23 jun. 2010. SUPER PESQUISA. NET. Disponível em: <http://www.superpesquisa.net>. Acesso em: 23 jun. 2010. TIPOS DE PESQUISA. Disponível em: <http://www.smartjobs.com.br/tipos-depesquisa.html>. Acesso em: 06/06/2010. WHEELER, A. Designing Brand Itentity. John Wiley & Sons. Inc. Hoboken New Jersey, 2009.

150

APÊNDICE A - Questionário dos Consumidores UNISUL - DESIGN - PROJETO DE CONCLUSÃO DE CURSO - Priscila Ap. Borges. O objetivo deste questionário é obter informações a respeito de uma possível utilização de um Portal Web gratuito na qual, o usuário poderá definir sua lista de compras e saber qual supermercado oferece produtos pelo menor preço. Trata-se, portanto, de uma ferramenta on-line de comparação de preços de um determinado conjunto de produtos junto aos supermercados de Florianópolis. Idade 1.( ) 18 a 20 2.( ) 21 a 30 3.( ) 31 a 40 4.( ) 41 a 50 5.( ) Mais de 51 Sexo 1.( ) Feminino 2.( ) Masculino Escolaridade 1.( ) 1 grau 2.( ) 2 grau 3.( ) Graduação 4.( ) Outro: Profissão Digite sua profissão: Você utiliza a internet com qual frequência? 1.( ) Uso uma ou duas vezes por semana

151

2.( ) Uso de três a seis vezes por semana 3.( ) Uso diariamente Você pratica economia doméstica? 1.( ) Sim 2.( ) Não Você realiza pesquisas de preços de produtos de supermercado? 1.( ) nunca realizei 2.( ) já realizei algumas 3.( ) realizo quando acho necessário 4.( ) realizo antes de realizar as compras 5.( ) sempre realizo sem mesmo comprar 6.( ) outro: Como você pesquisa os preços de produtos de supermercados? 1.( ) internet 2.( ) Associações das Donas de Casa 3.( ) Direto no supermercado 4.( ) Propaganda (rádio,folhetos,televisão) 5.( ) Indicação de amigos 6.( ) Não realizo 7.( ) Outro: Quais atributos você leva em consideração na escolha do supermercado para realizar as compras? 1.( ) Preço 2.( ) Atendimento 3.( ) Qualidade 4.( ) Variedade 5.( ) Crédito 6.( ) Rapidez no caixa 7.( ) Setor de açougue e padaria 8.( ) Localidade

152

9.( ) Outro: Em quais supermercados você realiza suas compras? 1.( ) Imperatriz 2.( ) Angeloni 3.( ) Big 4.( ) Comper 5.( ) Hippo 6.( ) Rosa 7.( ) Nacional 8.( ) Outro: Quais supermercados você sabe que vendem através da internet? 1.( ) Imperatriz 2.( ) Angeloni 3.( ) Big 4.( ) Comper 5.( ) Hippo 6.( ) Rosa 7.( ) Nacional 8.( ) Outro: Você acessa algum destes sites de supermercados para pesquisar preço? 1.( ) Sim 2.( ) Não Você utilizaria um portal de pesquisas de preço de produtos de supermercados na internet? 1.( ) Sim 2.( ) Não 3.( ) Talvez O que você esperaria encontrar neste portal? 1.( ) Preços dos produtos para cada supermercado

153

2.( ) Opção de salvar pesquisas já feitas 3.( ) Promoções da semana em cada supermercado 4.( ) Propaganda de novos produtos 5.( ) Venda on-line de novos produtos 6.( ) Descrição de receitas com os produtos necessários e respectivos preços 7.( ) Enviar lista de produtos realizados no portal por SMS 8.( ) Acumular pontos para ganhar descontos nos supermercados 9.( ) Outro: Que tipo de propaganda você gostaria de ver no portal? 1.( ) Novos produtos de supermercado 2.( ) Novas receitas 3.( ) Promoções 4.( ) Produtos em geral (eletrônicos, alimentícios, eletrodomésticos) 5.( ) Notícias 6.( ) Enquetes e sugestões de economia 7.( ) Outro: Você compraria no portal além de pesquisas os preços dos produtos? 1.( ) Sim 2.( ) Não Quais benefícios você esperaria através deste novo serviço? 1.( ) Obter economia no orçamento familiar 2.( ) Comodidade de escolher os produtos com os melhores preços diretamente de casa 3.( ) Encontrar os supermercados atuais 4.( ) Encontrar os supermercados que oferecem os produtos desejados 5.( ) Outro: Depois de realizar a pesquisa no portal, você compraria no supermercado que oferece o menor preço? 1.( ) Sim 2.( ) Não, pois o atendimento é inferior

154

3.( ) Não, pois possui uma infra-estrutura inferior 4.( ) Não, pois é muito tumultuado 5.( ) Não, pois não possui serviços como açougue e padaria 6.( ) Outro: Para acessar o portal você criaria um cadastro com e-mail e senha? 1.( ) Sim 2.( ) Não Quanto tempo você disponibilizaria para realizar a pesquisa de preços dos produtos de supermercado no portal? 1.( ) Menos de 1 minuto 2.( ) De 1 a 5 minutos 3.( ) De 5 a 10 minutos 4.( ) Mais de 10 minutos

155

APÊNDICE B - Questionário dos supermercados UNISUL - DESIGN - PROJETO DE CONCLUSÃO DE CURSO - Priscila Ap. Borges. O objetivo deste questionário é obter informações a respeito de uma possível utilização de um Portal Web gratuito na qual, o usuário poderá definir sua lista de compras e saber qual supermercado oferece produtos pelo menor preço. Trata-se, portanto, de uma ferramenta on-line de comparação de preços de um determinado conjunto de produtos junto aos supermercados de Florianópolis. Supermercado Digite o nome do supermercado: Endereço Digite o endereço: Nome/Cargo no supermercado Digite o cargo no supermercado: Qual a totalidade (número aproximado) de produtos expostos no supermercado? Digite o número aproximado: O supermercado realiza venda através da internet? 1.Sim, pois é muito lucrativo 2.Sim, pois é uma tendência de mercado 3.Não, pois não vê benefício 4.Não, pois os custos são muito altos 5.Não, pois não sabe como fazer tecnicamente 6.Outro: Qual a percentagem de venda através da internet no supermercado?

156

Digite a percentagem de venda: Qual a estratégia de marketing digital realizada no supermercado para atrair os consumidores no serviço delivery? Explique a estratégia: Um portal de pesquisas de preços na internet com a presença de concorrentes seria interessante ao supermercado? 1.Sim 2.Não O supermercado disponibilizaria os preços dos produtos para serem atualizados no portal de pesquisas de preços? 1.Sim, pois vai atrair mais consumidores 2.Sim, pois o supermercado possui os menores preços 3.Sim, pois é uma propaganda para o supermercado 4.Sim, caso puder vincular propaganda do meu supermercado com os diferencias além do preço 5.Não, pois os meus preços são muito altos 6.Não, pois posso perder mercado perante os concorrentes 7.Não, pois não tenho solução tecnológica para fazer isso O supermercado esperaria que tipo de serviço para disponibilizar os preços no Portal ? Digite os benefícios esperados: