Upload
api-19894846
View
228
Download
5
Embed Size (px)
Citation preview
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
Página 014 - 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
Página 068 - Proporção de Cores Purina | Fig. 32
Página 069 - Exemplo Tipografia Purina | Fig. 33
Página 070 - Imagens Sítio Purina | Fig. 34
Página 071 - Iconografia Sítio Purina | Fig. 35
Página 073 - Análise Ergonômica | Fig. 36
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 Estrutural 02
Análise Funcional 02
Análise Logográfica 02
Análise Cromográfica 02
Análise Tipográfica 02
Análise Pictográfica 02
Análise Iconográfica 02
Análise Ergonômica 02
Análise Estrutural 03
Análise Funcional 03
Análise Logográfica 03
Análise Cromográfica 03
Análise Tipográfica 03
Análise Pictográfica 03
Análise Iconográfica 03
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
Amigo Bicho Pet Shop
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
Amigo Bicho Pet Shop
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álises Linguísticas
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
Análises Linguísticas
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
Análises Linguísticas
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.
Análises Linguísticas
26/100
Análises Linguísticas
Análise Sincrônica
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
Análise Sincrônica
Estratégia
Inicial
Análises Linguísticas
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
Análise Sincrônica
Estratégia
Inicial
Análises Linguísticas
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
Análise Sincrônica
Estratégia
Inicial
Análises Linguísticas
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
Análises Desenhísticas
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
Análises Desenhísticas
www.whiskas.com.br
Wireframe
Fig. 08 - Análise Estrutural Whiskas
33/100
Estratégia
Inicial
Análises Desenhísticas
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
Análises Desenhísticas
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
Análises Desenhísticas
35/100
Fig. 11 - Fluxograma Tarefa Sítio Whiskas
Estratégia
Inicial
Análise Funcional
Análises Desenhísticas
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
Análises Desenhísticas
37/100
Caso de Uso - Tarefa | Web Cards
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
Análises Desenhísticas
38/100
Caso de Uso - Tarefa | Web Cards
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
Análises Desenhísticas
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
Análises Desenhísticas
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
Análises Desenhísticas
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
Análises Desenhísticas
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
Análises Desenhísticas
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
Análises Desenhísticas
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
Inexistente Ruim Razoável Bom Ótimo
Inexistente Ruim Razoável Bom Ótimo
Inexistente Ruim Razoável Bom Ótimo
Estratégia
Inicial
Análise Ergonômica
Análises Desenhísticas
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.
Inexistente Ruim Razoável Bom Ótimo
Inexistente Ruim Razoável Bom Ótimo
Fig. 16 - Análise Ergonômica Whiskas
Estratégia
Inicial
46/100
Análise Estrutural
Análises Desenhísticas
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álises Desenhísticas
Análise Estrutural
47/100
Fig. 17 - Análise Estrutural Pedigree
Análises DesenhísticasEstratégia
Inicial
Análise Estrutural
Análises Desenhísticas
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
Análises Desenhísticas
49/100
Fig. 19 - Organograma Sítio Pedigree
Estratégia
Inicial
Fluxograma - Artigos
Análise Funcional
Análises Desenhísticas
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
Análises Desenhísticas
51/100
Caso de Uso - Tarefa | Artigos
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) 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
Análises Desenhísticas
52/100
Caso de Uso - Tarefa | Artigos
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
Análise Logográfica
Análises Desenhísticas
53/100
Análise Logográfica
Forma
A identidade visual da marca ocupa na interface do sítio
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
Análise Cromográfica
Análises Desenhísticas
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
Análise Tipográfica
Análises Desenhísticas
55/100
O sítio virtual Whiskas utiliza basicamente em sua inter-
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
Análise Pictográfica
Análises Desenhísticas
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
Análise Iconográfica
Análises Desenhísticas
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
Análise Ergonômica
Análises Desenhísticas
Análise Ergonômica
58/100
Diálogos Simples e Naturais
As informações são transmitidas de forma objetiva e as
sequências de diálogos favorece a navegação.
Linguagem do Usuário
A linguagem utilizada no sítio está de acordo com lin-
guagem do usuário.
Sobrecarga de Memória
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.
Inexistente Ruim Razoável Bom Ótimo
Inexistente Ruim Razoável Bom Ótimo
Inexistente Ruim Razoável Bom Ótimo
Inexistente Ruim Razoável Bom Ótimo
Estratégia
Inicial
Análise Ergonômica
Análises Desenhísticas
59/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
No sítio existem atalhos para uma navegação mais
rápida, atalhos claros.
Inexistente Ruim Razoável Bom Ótimo
Inexistente Ruim Razoável Bom Ótimo
Fig. 26 - Análise Ergonômica Pedigree
Estratégia
Inicial
60/100
Análise Estrutural
Análises Desenhísticas
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álises Desenhísticas
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álises Desenhísticas
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
Análises Desenhísticas
63/100
Fig. 29 - Organograma Sítio Purina
DiversãoDown-loads
Estratégia
Inicial
Fluxograma - Artigos
Análise Funcional
Análises Desenhísticas
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
Análises Desenhísticas
65/100
Caso de Uso - Tarefa | Artigos
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) 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
Análises Desenhísticas
66/100
Caso de Uso - Tarefa | Artigos
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
Análise Logográfica
Análises Desenhísticas
67/100
Análise Logográfica
Forma
A identidade visual da marca ocupa na interface do sítio
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
Análise Cromográfica
Análises Desenhísticas
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
Análise Tipográfica
Análises Desenhísticas
69/100
O sítio virtual Whiskas utiliza basicamente em sua inter-
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
Análise Pictográfica
Análises Desenhísticas
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
Análise Iconográfica
Análises Desenhísticas
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
Análise Ergonômica
Análises Desenhísticas
Análise Ergonômica
72/100
Diálogos Simples e Naturais
As informações são transmitidas de forma objetiva e as
sequências de diálogos favorece a navegação.
Linguagem do Usuário
A linguagem utilizada no sítio está de acordo com lin-
guagem do usuário.
Sobrecarga de Memória
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.
Inexistente Ruim Razoável Bom Ótimo
Inexistente Ruim Razoável Bom Ótimo
Inexistente Ruim Razoável Bom Ótimo
Inexistente Ruim Razoável Bom Ótimo
Estratégia
Inicial
Análise Ergonômica
Análises Desenhísticas
73/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
No sítio existem atalhos para uma navegação mais
rápida e todos claros ao usuário
Inexistente Ruim Razoável Bom Ótimo
Inexistente Ruim Razoável Bom Ótimo
Fig. 36 - Análise Ergonômica Purina