Relatório - Jacqueline

Design

Projeto Gráfico IV

Professor Orientador: Heli Meurer

Jacqueline Gabron Buscher

Porto Alegre RS, Março de 2009

Sítio VirtualAmigo Bicho Pet Shop

Quadro Cronograma | Fig. 01

Página 017 - Quadro Taxonomia | Fig. 02

Página 018 - Quadro Sistematização | Fig. 03

Página 024 - Imagens Análise Conotativa | Fig. 04

Página 028 - Print Screen Scooby Dudu | Fig. 05

Página 029 - Print Screen Casa do Cachorro | Fig. 06

Página 030 - Print Screen Sun Pet Shop | Fig. 07

Página 032 - Análise Estrutural Whiskas | Fig. 08

Página 033 - Análise Estrutural Whiskas | Fig. 09

Página 034 - Organograma Sítio Whiskas | Fig. 10

Página 035 - Fluxograma Tarefa Sítio Whiskas | Fig. 11

Página 039 - Identidade Visual Whiskas | Fig. 12

Página 040 - Proporção de Cores Whiskas | Fig 13

Página 041 - Exemplo Tipografia Whiskas | Fig. 14

Página 042 - Imagens Sítio Whiskas | Fig. 15

Página 045 - Análise Ergonômica Whiskas | Fig. 16

Página 047 - Análise Estrutural Pedigree | Fig. 17

Página 048 - Análise Estrutural Pedigree | Fig. 18

Página 049 - Organograma Sítio Pedigree | Fig. 19

Página 050 - Fluxograma Tarefa Sítio Pedigree | Fig. 20

Página 053 - Identidade Visual Pedigree | Fig. 21

Página 054 - Proporção de Cores Pedigree | Fig. 22

Página 055 - Exemplo Tipografia Pedigree | Fig. 23

Página 056 - Imagens Sítio Pedigree | Fig. 24

Página 057 - Iconografia Sítio Pedigree | Fig. 25

Página 059 - Análise Ergonômica Pedigree | Fig. 26

Página 061 - Análise Estrutural Purina | Fig. 27

Página 062 - Análise Estrutural Purina | Fig. 28

Página 063 - Organograma Sítio Purina | Fig. 29

Página 064 - Fluxograma Tarefa Sítio Purina | Fig. 30

Página 067 - Identidade Visual Purina | Fig. 31

Lista de

Figuras

Sumário 004.

005.

006.

007.

009.

PROBLEMATIZAÇÃO

010.

011.

013.

014.

015.

016.

017.

018.

019.

020.

022.

ESTRATÉGIA INICIAL

Análises Linguísticas

023.

024.

025

027.

Análises Desenhísticas

031.

035.

Apresentação

Definição e Delimitação do Tema

Nome e URL

Definição dos Termos

Introdução

Objetivo Geral e Objetivos Específicos

Justificativa

Identificação do Usuário e Público Alvo

Cronograma

Cenário Atual e Pretendido

As Questões dos Projeto

Taxonomia

Sistematização

SIBD - SFBD

Processo Criativo

Definições dos Papéis

Análise Denotativa

Análise Conotativa

. Análise Diacrônica

Análise Sincrônica

Análise Estrutural 01

Análise Funcional 01

Sumário 039.

040.

041.

042.

043.

044

046.

050.

053.

054.

055.

056.

057.

058.

060.

064.

067.

068.

069.

070.

071.

072.

Análise Logográfica 01

Análise Cromográfica 01

Análise Tipográfica 01

Análise Pictográfica 01

Análise Iconográfica 01

. Análise Ergonômica 01








Análise Ergonômica 02








Análise Ergonômica 03

4/100

Apresentação

Nesse projeto será desenvolvido o sítio virtual da

Empresa Amigo Bicho Pet Shop. A empresa busca seu

posicionamento virtual para que possa interagir com

seu cliente e se adequar as suas necessidades, e

também para que possa possibilitar uma nova forma de

disponibilização de seus serviços.

A metodologia projetual utilizada para o desenvol-

vimento do projeto será a Meurer, adaptada de Garret.

Para que o projeto atenda os objetivos desejados, seu

desenvolvimento será focado em: Interação, Aces-

sibilidade e Usabilidade.

O fenômeno de humanização dos animais de estima-

ção mostra que a cada dia mais os “bichinhos” ganham

mais espaço dentro dos lares brasileiros, com isso quem

mais ganha são as populares “pet shops”, lojas

especializadas em oferecer produtos e serviços para

animais domésticos. Com essa realidade, o desen-

volvimento de um sítio virtual para uma pet shop torna-

se indispensável para que a mesma mantenha-se

competitiva e atualizada em seu ramo de atuação.

Definição do Tema

Desenvolvimento do sítio virtual da empresa Amigo

Bicho Pet Shop.

Delimitação do Tema

Um sítio para posicionamento virtual da empresa,

disponibilizando um espaço de contato, de praticidade

na oferta dos serviços prestados e também de relacio-

namento e de trocas de informações entre pessoas que

compartilham do mesmo gosto por animais de

estimação.

5/100

Nome do Sítio Virtual

URL

Amigo Bicho Pet Shop

www.amigobichopetshop.com.br

6/100

Usabilidade

Usabilidade é um termo usado para definir a facilidade

com que as pessoas podem empregar uma ferramenta

ou objeto a fim de realizar uma tarefa específica e

importante. A usabilidade pode também se referir aos

métodos de mensuração da usabilidade e ao estudo

dos princípios por trás da eficiência percebida de um

objeto.

Facilidade

1.Qualidade de fácil. 2. Queda; propensão. 3.Prontidão;

destreza. 4.Meios prontos para conseguir algo.

5.Condescendência.

Informação

Informação 1.Ação ou efeito de informar(-se). 2.Notícia

ou dados sobre alguém ou algo; comunicação; informe.

3.Conheci-mento; instrução.

Web 2.0

Um simples conceito. Não é somente uma tecnologia,

mas sim uma metodologia projetual que usa, de

maneira racional e coerente, as tecnologias disponíveis

para criar sítios virtuais, sistemas e aplicativos que

tenham grande possibilidade de interatividade, maior

usabilidade e acessibilidade.

Definição

dos Termos

7/100

IGA: Interface Gráfica Amigável

Até 1991, quando Tim Berners-Lee introduziu o proto-

colo de transferência de hipertexto (http) e criou a www

com interface gráfica amigável, os sistemas de rede

(Internet) usavam interface caracter. A grande limitação

da interface caracter é o uso de códigos alfanuméricos

abstratos para executar tarefas. Isso tornava o uso da

internet dificultoso para pessoas comuns, pois os

códigos tinham que ser pré-aprendidos e decorados. A

IGA da www fornece aos usuários a possibilidade de

interação metafórica, intuitiva e associativa. Em outras

palavras, a maioria das pessoas consegue usar o

ambiente sem maiores constrangimentos.

Sítio Virtual

Localidade do Ambiente. É um segmento e pode ser

interpretado em si mesmo, como um ambiente. Cada

sítio virtual tem sua própria identidade gráfico-visual. É

isso que o difere de outros sítios virtuais. Por outro lado,

pode-se dizer que uma inter-face gráfica amigável,

padronizada e personalizada através do uso dos

elementos de uma identidade visual, é um sítio virtual.

Existem algumas modalidades de sítios-virtuais, tais

como o portal, hotsite, a loja virtual, o banco virtual, o

blog, etc..

Definição

dos Termos

8/100

Introdução

Cada vez mais as pessoas buscam a internet

como ferramenta de relacionamento, de busca de

informação e de contato com as empresas que estão

disponibilizando os produtos e/ou serviços que

procuram. As empresas na busca de um melhor

atendimento das necessidades de seus clientes,

precisam de projetos para se posicionarem dentro

deste crescente e tão procurado espaço virtual.

A empresa Amigo Bicho Pet Shop, através do sítio

virtual, pretende inserir-se nesse espaço afim de buscar

a interação com seu cliente e atender as suas

necessidades, e também promover um ambiente para

que possa disponibilizar de forma prática seus serviços

e produtos.

O projeto será desenvolvido para que se busque a

interação do cliente com a empresa, para alcançar esse

objetivo o foco será na usabilidade e acessibilidade do

sítio.

9/100

Objetivo Principal

Desenvolver o projeto do sítio virtual da empresa

Amigo Bicho Pet Shop.

Objetivos Secundários

Disponibilizar ao usuário um ambiente de fácil

navegação.

Proporcionar interatividade e acessibilidade ao usuá-

rio através de recursos e regras da web 2.0.

Criar uma loja virtual.

Disponibilizar um espaço de troca de informações

entre usuários.

Desenvolver um espaço objetivo de contato entre o

cliente e a empresa.

Problema-

tização

10/100

11/100

A empresa Amigo Bicho Pet Shop visa posicionar-se no

ambiente digital, para que além de suprir necessidades

de seus clientes e disponibilizar e vincular seu produtos

e serviços, também possa criar um ambiente de troca

de informações.

O desenvolvimento de um sítio virtual que promova a

interação do cliente com a empresa, que de forma

prática disponibilize os serviços prestados e ofereça um

espaço virtual de fácil navegação e usabilidade, será o

caminho para que a empresa posicione-se correta-

mente, tendo sucesso e diferenciando-se das concor-

rentes no ambiente virtual.

Diante, do fenômeno de humanização dos animais de

estimação, momento em que cada vez mais eles

ganham um espaço maior dentro dos lares e do

crescente mercado das lojas especializadas para

atender o seu público alvo com produtos e serviços

para animais de estimação, uma pet shop hoje para

manter-se atualizada e competitiva precisa inserir-se e

adequar-se ao momento em que vivemos, situação em

que a internet é uma das ferramentas mais utilizadas

para a procura de informações, serviços e produtos.

Atualmente os sítios virtuais de empresas do mesmo

ramo, apresentam-se pouco atrativos, sem preocu-

pação alguma com o usuário na questão de usabilidade

JustificativaProblema-

tização

e acessibilidade, não há cuidado com a apresentação da

empresa.

O que motiva o desenvolvimento deste projeto, é a

busca de um sítio virtual que atenda os objetivos de

uma empresa que precisa posicionar-se virtualmente

visando interação com seus cliente, usando correta-

mente os conceitos de usabilidade e acessibilidade.

Problema-

tização

12/100

Identificação do Usuário e Público Alvo

Usuários

Público Alvo

• Pessoas de todas a idades, que estão em busca dos

serviços, produtos ou informações que são dispo-

nibilizados pela empresa.

• Clientes que procuram o sítio virtual como uma

ferramenta prática de ligação com a empresa e de

acesso com os produtos e serviços disponibilizados.

• Futuros clientes que estão a procura, no ambiente

virtual, de serviços e produtos dos quais a empresa

disponibiliza.

• Pessoas interessadas em informações sobre o assunto

em questão, animais de estimação.

Problema-

tização

13/100

Cronograma

Estratégia

Escopo

Estrutura

Esqueleto

ETAPAS Março Abril JunhoMaio

Superfície

MFN*

Apr. Final

Entrega

* MFN = Modelo Funcional Navegável

Problema-

tização

14/100

Fig. 01 - Quadro Cronograma

Cenário Pretendido

Funcional

Uso adequado das tecnologias disponíveis.

Organizado

Organização de fácil entendimento, agrupando de

maneira adequada os elementos da interface.

Acessível

Fácil utilização de todos os elementos da interface.

Coerente

Esteticamente, coerência com o tema, utilizando um

ambiente mais lúdico para que o usuário sinta-se mais a

vontade.

Cenário Atual

Não há cenário atual, pois a empresa não possui um

sítio virtual.

Problema-

tização

15/100

As questões do Projeto

O que desenvolver?

Por que projetar?

Como desenhar?

Para quem?

De onde?

Com que tecnologia?

Para que mercado?

Projeto para o sítio virtual da empresa Amigo Bicho Pet

Shop

Porque a empresa visa posicionar-se vir-tualmente e

ainda não possuí um sítio virtual.

O desenho do sítio virtual será feito com base na

metodologia projetual de Meurer baseada na de Garret.

Para a empresa Amigo Bicho Pet Shop

Porto Alegre - Rio Grande do Sul - Brasil

Com tecnologia 2.0

Para os clientes da empresa e para pessoas em geral

que compartilham do mesmo gosto por animais de

estimação e que buscam produtos e informações sobre

o assunto.

Problema-

tização

16/100

Taxonomia

REINO Desenho de Interação

Computador

Sistema físico de redes

Hipertexto

Internet - www

Ambiente virtual

Sítio Virtual da


Sítios Virtuais

FILO

CLASSE

ORDEM

FAMÍLIA

GÊNERO

ESPÉCIE

Problema-

tização

17/100

Fig. 02 - Quadro Taxonomia

Supra Sistema

Ambiente Dígito Virtual - www

Ecosistema

Internet - Suporte físico, computadores.

Sistema Alvo

Sítio Virtual da


Subsubsistema

Hipertexto

Subsistema

Interface Gráfica

Amigável

SistematizaçãoProblema-

tização

18/100

Fig. 03 - Quadro Sistematização

Problema-

tização

Situação final bem definida

Sítio virtual da Amigo Bicho Pet Shop, com a dispo-

nibilização dos produtos e serviços da empresa feita

de forma acessível, fácil e coerente.

SIBDSituação inicial bem definida

Desenvolver um sítio virtual para inserir a empresa

no ambiente virtual, afim de disponibilizar seus

produtos e serviços e promover um espaço de con-

tato e troca de informações

Meto

do

log

ia G

arr

et

Abstrato

Concreto

SFBD

Estratégia Inicial

Escopo

Estrutura

Esqueleto

Superfície

19/100

Estratégia Inicial

Identificação das necessidades dos usuá-

rios e definição dos objetivos do sítio.

Reuniões e entrevistas com o cliente e

usuário.

Análise do negócio e elaboração de projeto

preliminar.

Análises preliminares de sítios virtuais

similares .

Elaboração de uma lista de verificações e

identificação dos requisitos e restrições do

projeto.

Escopo

Definição das especificações funcionais e re-

quisitos do conteúdo. Organização do con-

teúdo, definição dos módulos e subáreas.

A metodologia projetual a ser usada é de Meurer

(2006) adptada de Garrett (2003).

Estrutura

Desenho de interação e arquitetura da in-

formação.

Definição do organograma (mapa) do portal

e definição das tarefas, das transações de

descrição das inter-relações existentes entre

um módulo e outro.

Processo

Criativo

20/100

Esqueleto

Desenho da estrutura das telas da interface

(wireframes) com auxílio de grade ou malha

construtiva.

Superfície

Definição do leiaute estético-formal com

base na identidade visual.

Elaboração do modelo funcional navegável.

Conexão com o banco de dados.

Testes de estresses do servidor.

Testes com os usuários e identificação e

correção de possíveis erros programacionais

ou de usabilidade. Implantação.

Processo

Criativo

21/100

Programação Visual

O desenhador gráfico atua na primeira camada, ficando

responsável pela identidade gráfico-visual do sítio

virtual, diagramação e composição das telas, sinali-

zação para a navegação e a ergonomia do sítio virtual.

Programação Computacional

O programador atua na segunda e terceira camadas,

sendo responsável pela programação do sítio virtual,

pelo planejamento e banco de dados.

Definições

do Papéis

22/100


Análise Denotativa

Usabilidade

Usabilidade é um termo usado para definir a facilidade

com que as pessoas podem empregar uma ferramenta

ou objeto a fim de realizar uma tarefa específica e

importante. A usabilidade pode também se referir aos

métodos de mensuração da usabilidade e ao estudo

dos princípios por trás da eficiência percebida de um

objeto.

Facilidade

1.Qualidade de fácil. 2. Queda; propensão. 3.Prontidão;

destreza. 4.Meios prontos para conseguir algo.

5.Condescendência.

Informação

Informação 1.Ação ou efeito de informar(-se). 2.Notícia

ou dados sobre alguém ou algo; comu-nicação;

informe. 3.Conhecimento; instrução.

Animal de Estimação

Um animal de estimação é um animal que foi

domesticado para convívio com os seres humanos por

questões de companheirismo ou divertimento.

Estratégia

Inicial

23/100

Análise Conotativa

Usabilidade

Facilidade

Informação

Contato

Afinidade

Estimação

Estratégia

Inicial


24/100

Fig. 04 - Imagens Análise Conotativa

Estratégia

Inicial

Análise Diacrônica

Tudo teve início com o ENIAC (Eletronic Numeric

Intregator and Calculator), um projeto apoiado pelo

exército americano durante a Segunda Guerra Mundial.

O ENIAC tinha aproximadamente 1,5m de altura e 24m

de comprimento e funcionava através de um sisema

constituído por válvulas. O ENIAC ficou pronto em

1946, realizava cálculos apenas em segundos, tinha

baixa capacidade de memória, alto consumo de

energia, seus componentes eram frágeis e alcançava

altas temperaturas para realizar cálculos, era capaz de

calcular rapidamente e trajetória de projéteis.

Até 1949 os computadores deram utilizados apenas

como projetos governamentais, em 1950 algumas

empresas passaram a estudar projetos de produção em

série visando o mercado particular, que foi inviável pois

o custo de produção era alto. No período da Guera-Fria

(Estados Unidos X União Soviética),o governo norte-

americano tinha interesse que os computadores

militares pudessem trocar informações entre si, de uma

base militar para outra.

Surgiu aí a ARPANet(Advanced Resarch and Projects

Agency) que possibilitava a conecção entre as bases

militares e os departamentos de pesquisas do governo

americano e após foi utilizado para pesquisas científicas


25/100

Estratégia

Inicial

das universidades. A ARPANet foi o princípio da

internet, foi criado o protocólo de internet que pos-

sibilitava que informações pudessem ser transmitidas

de uma rede a outra.

Na sequência desta evolução temos a www, que vem a

ser um serviço oferecido pela internet. A world wide

web foi criado por Tim Berners-Lee com a intensão de

facilitar o compartilhamento de documentos. Este

projeto de Tim teve início no final da década de 80, e aos

poucos foi evoluindo até os dias de hoje. Segundo a

Wikipedia, World Wide Web significa em português

“rede de alcance mundial”. Esta tecnologia nos pos-

sibilita ter acesso aos mais diversos tipos de docu-

mentos com os mais diferentes assuntos, e tem

importância para muitas coisas como a possibilidade

de comunicação à distância e entre pessoas de

diferentes lugares, para pesquisa, algumas profissões,

etc. Estes documentos da world wide web são

apresentados em forma de vídeo, som, hipertexto e

figuras, enriquecendo o conteúdo e tornando-o mais

interessante. A www é um recurso que pode ser

utilizados para muitos fins, neste trabalho ela será

utilizada como ferramenta de informação e contato

disponibilizando recursos para levar um conteúdo ao

usuário de maneira dinâmica e interativa.


26/100



Apesar do grande crescimento de lojas especializadas

em produtos e serviços para animais de estimação,

através da pesquisa feita em sítios virtuais destas

empresas, é possível perceber que cada vez mais elas se

mostram interessadas em disponibilizar seus produtos

e serviços no ambiente virtual, porém a grande maioria

mostra pouco interesse com questões como

usabilidade e organização dos conteúdos disponíveis

no sítio. A falta de organização acaba deixando o sítios

pouco atraentes e confusos. Ainda foi possível perceber

que na grande maioria há um descuido com as imagens

que são utilizadas nos sítios e as vezes o exagero de

efeitos atrapalha e confunde o usuário.

Estratégia

Inicial

27/100

www.scoobydudu.com.br


Estratégia

Inicial


28/100

O sítio virtual da Scooby Dudu não é de difícil nave-

gação porém é composto por imagens de baixa

qualidade, em algumas situações são utilizados efeitos

desnecessários que acabam atrapalhando o entedi-

mento do usuário. A má organização das imagens e dos

textos e informações prejudica a interface e a compo-

sição das cores, que apesar de estar de acordo com as

cores da empresa, é pobre pois limita-se a utilizar so-

mente as cores da identidade visual.

Fig. 05 - Print Screen Scooby Dudu


Estratégia

Inicial


www.casadocachorro.com.br

No sítio virtual da Casa do Cachorro é possível perceber

que há o cuidado com o uso das imagens e dos efeitos,

que são usados de forma clara e objetiva facilitando a

navegação do usuário. A organização do conteúdo,

imagens é confusa o que prejudica a interface. As cores

utilizadas estão de acordo com a identidade visual.

29/100

Fig. 06 - Print Screen Casa do Cachorro

www.petshopsunpet.com.br


Estratégia

Inicial


30/100

No sítio virtual da Sun Pet Shop a organização do con-

teúdo e das imagens é clara e objetiva facilitando a

navegação do usuário e tornando a interface de fácil

entedimento. Há pouco uso de imagens, e as cores que

compõem a interface são utilizadas de forma equili-

brada ajudando na organização, e não limitam-se

apenas as cores da identidade visual.

Fig. 07 - Print Screen Sun Pet Shop

Estratégia

Inicial

31/100

Análise Estrutural


O sítio virtual da Whiskas possui uma organização sim-

ples, sendo dividido basicamente pelo menu na parte

superior, por blocos com exposições de assuntos de

itens que constam no menu na parte inferior, e na parte

central ocupando 40% da interface um bloco contendo

uma campanha com recursos de animação, este bloco

muda toda vez que o usuário passa de uma página pra

outra, sempre com animações relativas ao assunto

escolhido no menu. A renderização dessas animações

são rápidas fazendo com que o sítio funcione de forma

dinâmica, não prejudicando a navegação do usuário.

O sítio usufrui muito do recurso de utilização de ima-

gens e fotos, praticamente em todas as páginas existem

imagens para ilustrar o assunto, e todas imagens são de

qualidade.

As cores utilizadas em todo sítio são rigorosamente vol-

tadas para as cores da identidade visual, e o conteúdo é

organizado de forma contrastante, em todas páginas os

textos estão na cor branca para que contraste com a cor

escura utilizada de fundo em todas as páginas.

www.whiskas.com.br

Estratégia

Inicial

Análise Estrutural

32/100


www.whiskas.com.br

Wireframe

Fig. 08 - Análise Estrutural Whiskas

33/100

Estratégia

Inicial


Wireframe

Assinatura Visual

Navegação / Menu

Campanha

Login / Cadastro

Conteúdo Relacionado

Galeria

de

Fotos

Conteúdo

Relac.

Fale Conosco / Contato

Rodapé

Conteúdo

Relac.

Wireframe

Análise Estrutural

Fig. 09 - Análise Estrutural Whiskas

Organograma

Home

Produtos

Sachê Compor-tamento

Saúde

Nutrição

Treinamento

Lata

Seco

Cadastro

Campa-nha

FaleConosco

AdicioneFavoritos

Campa-nha

AdoteVirtual

Dicas Fotos

Envie a foto

Galeriade Fotos

Galeriade Fotos

GatinhoVirtual

Tradutorde Gatos

Papéis deParede

Campanhas

WebCards

Diversão Pet Shop Veteri-nários

Filhotes Imprensa CadastroPromo-

ção

Estratégia

Inicial

Análise Estrutural


34/100

Fig. 10 - Organograma Sítio Whiskas

Home

Tradutorde Gatos

Campa-nha

Papéis de Parede

GatinhoVirtual

Diversão

Olha oPassarinho

Jantar na Mesa

É umpássaro?

Irmãos

WebCards

Visualizar

PreencherCampo

Voltar

Voltar

Voltar

Visua-lização

Voltar Enviar

Enviar

Estratégia

Inicial

Fluxograma - Web Cards

Análise Funcional


35/100

Fig. 11 - Fluxograma Tarefa Sítio Whiskas

Estratégia

Inicial

Análise Funcional


36/100

Caso de Uso - Tarefa | Web Cards

1. O usuário acessa o sítio da empresa digitando o seu

endereço no navegador.

2. A conexão ao sítio é estabelecida e carrega todas as

informações necessárias para que o usuário possa

navegar.

3. O sítio oferece ao usuário as seguintes opções:

a) Home

b) Produtos

c) Dicas

d) Fotos

e) Diversão

f) Pet Shop

g) Veterinários

h) Filhotes

i) Imprensa

j) Cadastro

k) Promoção

4. O usuário escolhe a opção desejada - e) Diversão

5. O sítio expõe campanhas, cadastro, conteúdo e dis-

ponibiliza 4 opções para usuário:

Estratégia

Inicial

Análise Funcional


37/100


a) Tradutor de Gatos

b) Papéis de Parede

c) Campanhas

d) Web Cards

6. O usuário escolhe a opção - d) Web Cards

7. O sítio expõe outra campanha e disponibiliza para o

usuário 4 opções de Web Cards:

a) Olha o passarinho

b) Irmãozinhos

c) O jantar está na mesa

d) É um pássaro? É um avião?

8. O usuário escolhe o Web Card desejado - c) O jantar

está na mesa.

9. O sítio solicita o preenchimento de um cadastro com

campos para mensagem e nomes e e-mails de quem

está enviando e quem irá receber o Web Card e dispo-

nibiliza 3 opções:

a) Voltar

b) Visualizar

c) Enviar

Estratégia

Inicial

Análise Funcional


38/100


10. Escolhendo a opção - a) Voltar - o usuário retorna

para a página onde são disponíveis as 4 opções de Web

Cards diferentes.

11. Escolhendo a opção - b) Visualizar - o usuário visua-

liza a forma como o destinatário irá receber o Web Card.

E o sítio disponibiliza a opção de - Voltar, e voltando o

sítio retorna para o preenchimento de cadastro de

nomes, e-mails e mensagem.

12. Escolhendo a opção - c) Enviar - o sítio mostra uma

visualização do que será enviado e disponibiliza a

opções - Voltar e Enviar, voltando o sítio retorna para o

preenchimento de cadastro. Selecionando a opção -

Enviar, a sítio mostra uma mensagem - Seu Web Card

foi enviado com sucesso, e disponibiliza a opção -

Voltar, que volta para a página que oferece as 4 opções

de Web Cards diferentes.

Estratégia

Inicial

Análise Logográfica


39/100

Forma

Cor

Conteúdo

A identidade visual da marca ocupa na interface do sítio

virtual 10% da parte superior, e é utilizada de forma

centralizada, está sempre presente em todas as páginas

do sítio.

Fig. 12- Identidade Visual Whiskas

Estratégia

Inicial

Análise Cromográfica


40/100

As cores utilizadas na interface do sítio virtual são defi-

nidas respeitando as cores da identidade visual. As co-

res são escuras fazendo com que os textos todos sejam

na cor branca.

R: 210

G: 83

B: 133

R: 100

G: 86

B: 149

R: 73

G: 64

B: 116

R: 118

G: 104

B: 169

R: 110

G: 67

B: 78

R: 154

G: 52

B: 104

R: 181

G: 102

B: 168

55% 3%3%

10% 5% 3%

3%3%

5%

5%

5%R: 83

G: 24

B: 78

R: 141

G: 43

B: 125

R: 255

G: 255

B: 255

R: 92

G: 56

B: 101

Fig. 13 - Proporção de Cores Whiskas

Estratégia

Inicial

Análise Tipográfica


41/100

O sítio virtual Whiskas utiliza basicamente em sua inter-

face duas fontes - Vag Rounded para título e Menu e

uma fonte não serifada para os textos. Ambas são

utilizadas em caixa-alta na primeira letra da frase e o

restante em caixa-baixa, exceto no texto do menu que é

todo em caixa-alta. O espaço de entrelinhas utilizada

em todos os textos é ½ da altura-x da fonte.

Fig. 14 - Exemplo Tipografia Whiskas

Estratégia

Inicial

Análise Pictográfica


42/100

O sítio virtual da Whiskas utiliza imagens para ilustrar

todos os assuntos que aborda, todas as imagens

possuem uma espécie de moldura para delimita-la, são

fotos de qualidade e todas no mesmo estilo, um

aspecto que valoriza a composição do sítio.

Fig. 15 - Imagens Sítio Whiskas

Estratégia

Inicial

Análise Iconográfica


43/100

O sítio virtual da Whiskas não utiliza ícones e metáforas

na interface. Utiliza somente palavras em seus botões e

fotos para ilustrar assuntos.

Estratégia

Inicial

Análise Ergonômica


44/100

Diálogos Simples e Naturais

No sítio da Whiskas os diálogos são de fácil entendi-

mento, atendem o objetivo de nortear o usuário.

Linguagem do Usuário

A linguagem está de acordo com o usuário deste sítio, é

facilitadora da navegação pela interface.

Sobrecarga de Memória

A organização dos conteúdos do sítio, as imagens, e a

disposição de menus nas páginas ajudam a minimizar a

sobrecarga da memória.

Consistência

O conteúdo do sítio é organizado por títulos, por frases

e textos introdutórios funcionando como forma de

apresentação do conteúdo de cada assunto do menu.

Inexistente Ruim Razoável Bom Ótimo




Estratégia

Inicial



45/100

Feedback

Ao utilizar um comando o usuário sempre tem infor-

mações que o norteiam durante a navegação e o

ajudam a ter noção de sua localização no sítio.

Atalhos

Em algumas situações o sítio não deixa opções bem

claras para o direcionamento do usuário.



Fig. 16 - Análise Ergonômica Whiskas

Estratégia

Inicial

46/100

Análise Estrutural


O sítio virtual utiliza uma organização simples, na inter-

face da sua página inicial e de todas as outras a organi-

zação do conteúdo dividi-se em três espaços que são

delimitados por cores distintas. Na parte superior

encontra-se o espaço de busca de conteúdo no sítio e o

menu ocupando 20% da interface, na parte central é o

espaço do conteúdo ocupando 50%, e na parte inferior

encontram-se conteúdos relacionados ao temas que

estão sendo apresentados na parte central.

O sítio é dinâmico, as imagens estão sempre mudando

na página inicial e há efeitos nos botões do menu, esses

aspectos não comprometem a navegação e nem o

entedimento do usuário.

Há imagens em todas as páginas, e todas são de ótima

qualidade e utilizadas de forma organizada.

As cores utilizadas não estão de acordo com a identi-

dade visual da marca, porém são utilizadas duas cores

fortes e contrastes que acabam funcionando como

limites para organização do interface em todas as

páginas. A forma como as cores foram dispostas ajuda

na navegação do usuário.

www.pedigree.com.br

Análise Estrutural

www.pedigree.com.br

Wireframe

Estratégia

Inicial


Análise Estrutural

47/100

Fig. 17 - Análise Estrutural Pedigree

Análises DesenhísticasEstratégia

Inicial

Análise Estrutural


Análise Estrutural

48/100

www.pedigree.com.br

Wireframe

Assinatura Visual e Navegação / Menu

Campanha Menu

Fale Conosco / Pesquisa

Conteúdo Relacionado

Fig. 18 - Análise Estrutural Pedigree

Organograma

Home

Home

SaberMais

FaleConosco

Pesquisa

Produtos Cachorros

Guia deViagem

Artigos

GuiaShape

Filhotes

Campa-nha

Filmes

Wall-papers

Filmes

Galeria de Fotos

Divirta-seVeteri-nários

CriadoresAdotar étudo de

bom

Estratégia

Inicial

Análise Estrutural


49/100

Fig. 19 - Organograma Sítio Pedigree

Estratégia

Inicial

Fluxograma - Artigos

Análise Funcional


50/100

Home

Guia deViagen

GuiaShape

Cachorro

NutriçãoFilhotesEstilo

de VidaRelacio-namento

Compor-tamento

Saúde

Artigos

RefeiçõesBalanceadas

Fig. 20 - Fluxograma Tarefa Sítio Pedigree

Estratégia

Inicial

Análise Funcional


51/100

Caso de Uso - Tarefa | Artigos





navegar.


a) Home

b) Produtos

c) Cachorros

d) Divirta-se

e) Veterinários

f) Criadores

g) Adotar é tudo de bom

4. O usuário escolhe a opção desejada - c) Cachorros

5. O sítio disponibiliza 3 opções no menu:

a) Artigos

b) Guia Shape

c) Guia de Viagem

6. O usuário escolhe a opção desejada - a) artigos

Estratégia

Inicial

Análise Funcional


52/100


7. O sítio expõe um texto explicativo dos conteúdos que

haverão nesse item do menu na parte central da inter-

face, na parte inferior disponibiliza 6 tópicos que

poderão ser escolhido pelo usuário:

a) Filhotes

b) Nutrição

c) Saúde

d) Estilo de Vida

e) Relacionamento

f) Comportamento

9. O usuário escolhe a opção desejada - d) Estilo de Vida

10. O sítio apresenta um texto explicativo na parte cen-

tral, e na parte inferior alguns itens com textos sobre o

assunto, cada um desses itens abre uma janela com o

texto e com a opção de fechar, retornando aos outros

itens. Caso o usuário queira retornar para as outras

opções de tópicos, o sítio disponibiliza no lado direito

um menu com todos os tópicos existentes.

Estratégia

Inicial



53/100


Forma


virtual 10% da parte superior, e é utilizada no canto

esquerdo da interface, está sempre presente em todas

as páginas do sítio.

Cor

Conteúdo

Fig. 21- Identidade Visual Pedigree

Estratégia

Inicial



54/100

O sítio utiliza poucas cores em sua interface, predomi-

nantemente as cores preta e laranja, o contraste entre

as duas cores define a organização dos conteúdos e

como eles se apresentam e movimentam durante a

navegação do usuário

R: 0

G: 0

B: 0

R: 24

G: 127

B: 19450% 16%4%30%

R: 255

G: 179

B: 0

R: 255

G: 255

B: 255

Fig. 22 - Proporção de Cores Pedigree

Estratégia

Inicial



55/100


face duas fontes - curiosamente a mesma fonte do sítio

da Whiskas Vag Rounded utilizada tanto para títulos,

menu, botões como para alguns textos, e também uma

fonte não serifada para alguns textos. Ambas são

utilizadas em caixa-alta na primeira letra da frase e o

restante em caixa-baixa. O espaço de entrelinhas utili-

zada em todos os textos é ½ da altura-x da fonte.

Fig. 23 - Exemplo Tipografia Pedigree

Estratégia

Inicial



56/100

O sítio virtual da Pedigree utiliza imagens em todas as

páginas, sempre são relacionadas com o tema que está

sendo abordado, todas possuem uma moldura branca

para delimitar a imagem.

Fig. 24 - Imagens Sítio Pedigree

Estratégia

Inicial



57/100

O sítio virtual da Pedigree utiliza ícones juntamente

com os títulos de cada ítem do menu, são ícones sim-

ples que estão relacionados com as atividades que o

usuário está desempenhando no momento. Alguns

ícones são repetidos no menu lateral.

Fig. 25 - Iconografia Sítio Pedigree

Estratégia

Inicial




58/100


As informações são transmitidas de forma objetiva e as

sequências de diálogos favorece a navegação.


A linguagem utilizada no sítio está de acordo com lin-

guagem do usuário.


Em todas situações se tem presente e de forma clara

elementos de diálogo, opções de retorno. O usuário

sempre tem informações para situar-se no sítio.

Consistência

Os botões e comandos possuem o mesmo efeito favo-

recendo a navegação, em todas as páginas as ativida-

des semelhantes ficam no mesmo lugar para facilitar o

reconhecimento.





Estratégia

Inicial



59/100

Feedback




Atalhos

No sítio existem atalhos para uma navegação mais

rápida, atalhos claros.



Fig. 26 - Análise Ergonômica Pedigree

Estratégia

Inicial

60/100

Análise Estrutural


A interface do sítio virtual da Purina tem uma organiza-

ção simples, limpa e objetiva, a sua navegação é fácil

pois utiliza o recurso de abas o que facilita a localização

do usuário no sítio. A sua interface tem a organização

de seu conteúdo parecido com os sítio analisados ante-

riormente, na página inicial a identidade visual está na

parte superior, na parte inferior há blocos com con-

teúdos e na parte central um bloco grande que cons-

tantemente vai mudando as imagens, este efeito é

dinâmico, atraente e não prejudica a navegação.

As cor predominante é a preta e a cor vermelha está

presente em alguns detalhes, o que resulta num ótimo

contraste. Todas as imagens utilizadas na interface são

monocromáticas.

O sítio tem um Mapa do Site e também é bem planeja-

do nas questões de feedback, o usuário sempre tem a

noção de sua localização.

www.purina.com.br

Estratégia

Inicial


Análise Estrutural

61/100

Análise Estrutural

www.purina.com.br

Wireframe

Estratégia

Inicial

Análise Estrutural

Fig. 27 - Análise Estrutural Purina

Estratégia

Inicial


Análise Estrutural

62/100

Análise Estrutural

Wireframe

Wireframe

Estratégia

Inicial

Análise Estrutural

Fig. 28 - Análise Estrutural Purina

Conteúdo

Relacionado

Conteúdo

Relacionado

Novidades

Imagens

Menu

Menu

Identidade Visual

Organograma

Home

Novida-des

FAQ Fale coma Gente

Cadas-tre-se

Mapado Site

Criado-res

Veteri-nários

Cães Gatos

Anterior

Próxima

Produtos Diversão

Estratégia

Inicial

Análise Estrutural


63/100

Fig. 29 - Organograma Sítio Purina

DiversãoDown-loads

Estratégia

Inicial

Fluxograma - Artigos

Análise Funcional


64/100

Home

Cães

ComandoRotinaCava

o Chão Casinha Veja MaisPetiscos

SaúdeNutriçãoFilhotesCompor-tamento

VoltarEnviar p/

AmigoImprimir

Fig. 30 - Fluxograma Tarefa Sítio Purina

Estratégia

Inicial

Análise Funcional


65/100






navegar.


a) Cães

b) Gatos

c) Produtos

d) Diversão

4. O usuário escolhe a opção desejada - a) Cães

5. O sítio disponibiliza 3 opções:

a) Comportamento

b) Filhotes

c) Nutrição

d) Saúde

6. O usuário escolhe a opção desejada - a) Comporta-

mento.

Estratégia

Inicial

Análise Funcional


66/100


7. O sítio disponibiliza seis ítens:

a) Rotina

b) Comando

c) Petiscos

d) Cava o Chão

e) Casinha

d) Veja mais

8. O usuário escolhe a opção desejada - b) Comando

9. O sítio disponibiliza o artigo e ao fim da leitura ofe-

rece três opções: Imprimir, Enviar para um amigo e

Voltar.

Estratégia

Inicial



67/100


Forma


virtual 10% da parte superior, e é utilizada no canto

esquerdo da interface, está sempre presente em todas

as páginas do sítio.

Cor

Conteúdo

Fig. 31- Identidade Visual Purina

Estratégia

Inicial



68/100

O sítio utiliza praticamente possui uma interface mono-

cromática, predominante é a cor preta, inclusive todas

as imagens são P/B, e utiliza a cor vermelha para o

menu, títulos e botões resultando em um ótimo

contraste.

R: 0

G: 0

B: 0

R: 255

G: 0

B: 010%20%70%

R: 255

G: 255

B: 255

Fig. 32 - Proporção de Cores Purina

Estratégia

Inicial



69/100


face duas fontes uma fonte sem serifa para títulos,

menu, botões como para alguns textos, e também outra

fonte não serifada para os textos, parece a fonte Arial.

Ambas são utilizadas em caixa-alta na primeira letra da

frase e o restante em caixa-baixa. O espaço de entre-

linhas utilizada em todos os textos é ½ da altura-x da

fonte.

Fig. 33 - Exemplo Tipografia Purina

Estratégia

Inicial



70/100

Todas as imagens da interface da Purina são monocro-

máticas e todas de qualidade, algumas respeitam uma

espécie de moldura e outras ganham efeito.

Fig. 34 - Imagens Sítio Purina

Estratégia

Inicial



71/100

O sítio virtual da Purina utiliza alguns ícones no menu

com o mesmo padrão e no final dos artigos junta-

mente com a palavra Imprimir e Enviar p/ um Amigos

um outro padrão, distinto aos do menu.

Fig. 35 - Iconografia Sítio Purina

Estratégia

Inicial




72/100


As informações são transmitidas de forma objetiva e as

sequências de diálogos favorece a navegação.


A linguagem utilizada no sítio está de acordo com lin-

guagem do usuário.


Em todas situações se tem presente e de forma clara

elementos de diálogo, opções de retorno. O usuário

sempre tem informações para situar-se no sítio.

Consistência

Os botões e comandos possuem o mesmo efeito favo-

recendo a navegação, em todas as páginas as ativida-

des semelhantes ficam no mesmo lugar para facilitar o

reconhecimento.





Estratégia

Inicial



73/100

Feedback




Atalhos

No sítio existem atalhos para uma navegação mais

rápida e todos claros ao usuário



Fig. 36 - Análise Ergonômica Purina

Relatório - Jacqueline

Documents

Transcript of Relatório - Jacqueline