Trabalho de Design de Interface

Taís Malheiros

Bianca Phaeton

Lívia Neves

Walison Santana

.com.br

• ATIVIDADE 01

DISCIPLINA DESIGN DE INTERFACE

ANÁLISE DO SITE DA EMPRESA NORTE-AMERICANA

XÉROX

WEBARCHIVE

LOGO ATUAL

Imprimir imagens com alta definição. Escanear com qualidade. Digitalizar com perfeição.

“Xerocar”. Copiar com cores vivas e muita nitidez. Quando o assunto é imagens não existe

especialista maior no mundo que a XEROX, uma empresa líder em processos de negócios e

gestão de documentos, oferece tecnologias, especialidades e serviços que permitem que

negócios operem com maior precisão e eficiência, em qualquer situação.

Chester Carlson, o criador do processo de cópia por fotocondutividade (futuramente

conhecido como “xérox”) faz a primeira cópia da história em 1938. Já em 1942 consegue a

patente para o seu invento. Em 1947, uma pequena empresa chamada Haloid compra o

direito de produzir as primeiras máquinas xerográficas. Em 1948 a empresa inventa o nome

Xerox e registra a marca. A empresa tornou-se XEROX CORPORATION oficialmente em

18 de abril de 1961 após ampla aceitação da XEROX 914, a primeira copiadora automática

para escritório que utilizava papel comum.

Em todo o mundo a XEROX amargou, desde 2001, uma forte queda em suas vendas,

associada a uma enorme crise de liquidez, causada pela necessidade de pagar nos Estados

Unidos uma multa de US$ 10 milhões por erros contábeis, a maior da história por violação

aos informes financeiros. A XEROX que saiu da crise está mais sólida, mas ainda luta para

não ser uma cópia pálida de si mesma. Em 2009, a empresa adquiriu a Affiliated Computer

Services (ACS) por US$ 6.4 bilhões, operação que colocou a XEROX como líder mundial,

além de permitir uma ampliação dos mercados.

Evolução da Marca

Análise da Evolução do layout e conteúdo do Site 1997

- Site sem margens e

diagramação organizada,

hierarquia de conteúdo ou

cor.

- Utilização de ícones para

alguns links importantes.

Banners publicitários em

gif animado.

Presença do logo em

tamanho pequeno e do “X”

como um logotipo.

Apresentação da empresa

na Home.

Formulário grande de

“Fale conosco” com o

nome de “Linha Direta”.

1997

• Site sem margens e diagramação organizada, hierarquia de conteúdo ou

cor.

• Utilização de ícones para alguns links importantes.

• Banners publicitários em gif animado.

• Presença do logo em tamanho pequeno e do “X” como um logotipo.

• Apresentação da empresa na Home.

• Formulário grande de “Fale conosco” com o nome de “Linha Direta”.

1998

- Utiliza o logo criado em

1994 com o novo slogan

“The Document

Company”, porém

pequeno, com pouca

visibilidade.

-Uso frequente de gif

animado para dar

movimento ao site

- No meio da página estão

os dois principais setores

do site: produtos &

serviços (catálogo) e

softwares & drivers e na

coluna direita estão os

“trending topics”

- No topo está o menu de

apoio, com itens como

“mapa do site” e abaixo um

banner do principal

lançamento da época, no

caso a máquina Document

WorkCentre Pro 745

- Layout simples e básico,

utilizando fontes do padrão

da época (não segue uma

identidade visual própria da

marca.) Faz uso do

vermelho do logo no design

do site.

1998

• Layout simples e básico, utilizando fontes do padrão da época (não segue uma identidade visual própria da marca.) Faz uso do vermelho do logo no design do site.

• Utiliza o logo criado em 1994 com o novo slogan “The DocumentCompany”, porém pequeno, com pouca visibilidade.

• Uso frequente de gif animado para dar movimento ao site

• Apresenta como menu principal o lateral contendo os ícones: planeta XEROX (história da marca), drivers & softwares, atendimento ao cliente, aqui tem Xerox (localização de pontos de venda) e novidade (feed de notícias da marca).

• No meio da página estão os dois principais setores do site: produtos & serviços (catálogo) e softwares & drivers e na coluna direita estão os “trending topics”

• No topo está o menu de apoio, com itens como “mapa do site” e abaixo um banner do principal lançamento da época, no caso a máquina Document WorkCentre Pro 745

1999

- Ainda é usado o mesmo layout

de 1998: simples e básico (não

segue uma identidade visual

própria da marca. Porém, agora já

faz uso de fontes coloridas como

forma de diagramação para

diferentes conteúdos

- Ainda se utiliza o logo criado em

1994 com o novo slogan “The

Document Company”.

- A parte do meio do site agora

contém um texto como uma

chamada de um grande

acontecimento para a marca, junto

de uma imagem ilustrativa (espaço

destinado para propaganda

própria)

- No topo está o menu de apoio,

com itens como “mapa do site” e

abaixo um banner com propaganda

própria

- O menu principal continua na

lateral esquerda, mas agora foram

adicionados os itens “compre aqui

– loja Xerox”, “novidades” e

“Xerox no ano 2000” (ano

seguinte).

1999

• Ainda é usado o mesmo layout de 1998: simples e básico (não segue uma identidade visual própria da marca. Porém, agora já faz uso de fontes coloridas como forma de diagramação para diferentes conteúdos

• Ainda se utiliza o logo criado em 1994 com o novo slogan “The Document Company”.

• A parte do meio do site agora contém um texto como uma chamada de um grande acontecimento para a marca, junto de uma imagem ilustrativa (espaço destinado para propaganda própria)

• O menu principal continua na lateral esquerda, mas agora foram adicionados os itens “compre aqui – loja Xerox”, “novidades” e “Xerox no ano 2000” (ano seguinte).

• A parte da lateral direita ainda é destinada aos “trending topics”

• No topo está o menu de apoio, com itens como “mapa do site” e abaixo um banner com propaganda própria

2000

- Não foi possível analisar bem

o layout, pois pelo fato do site

ser construído principalmente

por links sobre imagens sem

tags de acessibilidade, uma vez

que estas imagens não estão

mais disponíveis nas redes, não

é possível ver o que estava

naquele espaço do site. Logo,

apesar de perceber mudanças

no posicionamento do

conteúdo, não é possível

analisar os grafismos em si.

- A página principal perde seus

cantos arredondados, passando

a ter um visual mais sério e

menos colorido.

- O menu de apoio continua no

topo, mas agora encontra-se

abaixo do banner de propaganda

própria.

- A parte do meio da página

agora é dividida entre duas

chamadas para grandes

acontecimentos da marca,

cada um associado a uma

imagem ilustrativa.

- A parte da lateral direita agora

contém além dos trending

topics, o botão para se inscrever

na mailling list da marca.

2000

• Não foi possível analisar bem o layout, pois pelo fato do site ser construído principalmente por links sobre imagens sem tags de acessibilidade, uma vez que estas imagens não estão mais disponíveis nas redes, não é possível ver o que estava naquele espaço do site. Logo, apesar de perceber mudanças no posicionamento do conteúdo, não é possível analisar os grafismos em si.

• A página principal perde seus cantos arredondados, passando a ter um visual mais sério e menos colorido.

• O menu de apoio continua no topo, mas agora encontra-se abaixo do banner de propaganda própria.

• A parte do meio da página agora é dividida entre duas chamadas para grandes acontecimentos da marca, cada um associado a uma imagem ilustrativa.

• A parte da lateral direita agora contém além dos trending topics, o botão para se inscrever na mailling list da marca.

2002

- Grande mudança no

layout. Agora este já utiliza

cores e grafismos

institucionais e o wireframe

mudou completamente.

- O header ficou maior e

assim foi possível colocar

uma imagem grande em

destaque junto com o logo

da empresa (mesmo

posicionamento que as

versões anteriores), com um

campo de busca ao lado e o

botão para encontrar os

pontos de venda. Abaixo

está um banner institucional.

- O menu agora é um só e

encontra-se abaixo do

banner (ainda no topo).

- A parte de conteúdo do

site foi dividida em três

colunas de larguras iguais.

- O menu de apoio virou o

rodapé do site e fica junto

do símbolo da marca (antes

não utilizado).

-Agora o site possui

ferramenta de filtro interna.

2002

• A partir deste ano percebe-se uma grande mudança no layout do site. Agora este já utiliza cores e grafismos institucionais e o wireframe do site mudou completamente.

• O header ficou maior e assim foi possível colocar uma imagem grande em destaque junto com o logo da empresa (mesmo posicionamento que as versões anteriores), porém em maior tamanho e em destaque no topo da página, com um campo de busca ao lado e o botão para encontrar os pontos de venda. Abaixo está um banner institucional.

• O menu agora é um só e encontra-se abaixo do banner (ainda no topo) contendo os itens: produtos (antigo produtos & serviços), Suprimentos, Soluções por indústria, Serviços para Empresas, Suportes & Drivers e Minha Xerox.

• A parte de conteúdo do site foi dividida em três colunas de larguras iguais: a da esquerda destinada para atalhos dos setores principais do site e considerada uma das melhores evoluções deste novo formato de site - hiperlink para navegação dentro do conteúdo do site - (drivers para download, como comprar, portal dos fornecedores, recursos humanos, instituto Xerox e portal Sophya), a coluna do meio destinada a imagens de propaganda própria e a da direita, ainda destinada aos “trending topics”, mas que agora não tem mais o botão para se inscrever na mailling list e sim o Planeta Xerox (que saiu do menu principal e dos principais atalhos).

• O menu de apoio virou o rodapé do site e fica junto do símbolo da marca (antes não utilizado).

• Agora o site possui ferramenta de filtro interna.

2003

- Continua-se utilizando as

novas cores e novos

grafismos institucionais e o

wireframe do site mantém

as mesmas mudanças.

No topo que foi adicionada

uma notificação de que

alguma páginas só poderiam

ser exibidas em inglês;

mudaram os botões do menu

principal e dos atalhos da

coluna esquerda da parte de

conteúdo. Mudanças

realizadas após o feedback

dos clientes e

provavelmente devido a

testes.

- Nas imagens de apoio da

área central, foi retirada a

opção de link de texto da

imagem, mantendo somente

a imagem como um link.

- Ausência de gif, troca pelo

flash , porém a quantidade

de textos continua grande.

2003

• Este ano mantém as grandes mudança no layout do site iniciadas em 2002.

Continua-se utilizando as novas cores e novos grafismos institucionais e o

wireframe do site mantém as mesmas mudanças.

• As únicas mudanças que podem ser percebidas em relação a versão de

2002 é no topo que foi adicionada uma notificação de que alguma páginas

só poderiam ser exibidas em inglês; mudaram os botões do menu principal

e dos atalhos da coluna esquerda da parte de conteúdo. Mudanças

realizadas após o feedback dos clientes e provavelmente devido a testes.

• Nas imagens de apoio da área central, foi retirada a opção de link de texto

da imagem, mantendo somente a imagem como um link.

• Ausência de gif, troca pelo flash , porém a quantidade de textos continua

grande.

2004

- Os grafismos utilizados

anteriormente são

substituídos por um

layout mais simples e

clean, priorizando as

cores institucionais

(vermelho, azul e branco,

nesta ordem de

importância).

- O topo agora contém o

logo no canto esquerdo,

acima o campo de

seleção do país (sinaliza

que o site já é adaptável

para diferentes idiomas

na mesma página),

campo de busca ao lado

e no canto direito dois

botões com as tags

“como comprar” e “loja

Xerox”. Agora o banner

institucional é animado.

Menu principal teve os

seus ícones mudados e

agora está menor,

apresentando somente

quatro botões. ou seja,

uma estrutura mais direta

e simples para o acesso

ao conteúdo do site.

- O conteúdo agora

apresenta uma estrutura

mais harmônica e tem

somente duas colunas,

uma da esquerda menor,

um menu com

informações úteis para o

cliente e outro com

informações sobre a

empresa e do lado,

direito, links para os

principais produtos e

para promoções, além de

dois banners com

propaganda de produtos

de lançamento.

- O rodapé do site com o

menu de apoio e o logo

associado a marca das

Olímpiadas e com a

sinalização de marca

registrada e direitos

reservados.

- Chamadas mais

concentrada, menos

conteúdo espalhado pelo

site

2004

• Neste ano o site sofre novamente grandes mudanças. Os grafismos utilizados anteriormente são substituídos por um layout mais simples e clean, priorizando as cores institucionais (vermelho, azul e branco, nesta ordem de importância).

• O topo agora contém o logo no canto esquerdo (mesma posição das versões anteriores), acima o campo de seleção do país (grande melhoria em relação a versão anterior, pois sinaliza que o site já é adaptável para diferentes idiomas na mesma página), com o campo de busca ao lado e no canto direito dois botões com as tags “como comprar” e “loja Xerox”. Agora o banner institucional é animado e fica abaixo do menu principal e este teve os seus ícones mudados novamente e agora está menor, agora apresenta somente quatro botões, ou seja, uma estrutura mais direta e simples para o acesso ao conteúdo do site.

• A parte do conteúdo agora apresenta uma estrutura mais harmônica e tem somente duas colunas, uma da esquerda menor com um menu com informações úteis para o cliente e outro com informações sobre a empresa e uma maior do lado direito com links para os principais produtos do momento, links para promoções e dois banners de propaganda de produtos de lançamento.

• O rodapé do site continua com o menu de apoio, mas agora apresenta o logo associado a marca das Olímpiadas e também com a sinalização de marca registrada e direitos reservados.

• Chamadas mais concentrada, menos conteúdo espalhado pelo site

2005

- O botão "home" volta

para o menu principal

em primeira posição.

- Destaques para

produtos recomendados

na Home.

2005

• O botão "home" volta para o menu principal em primeira posição.

• Destaques para produtos recomendados na Home.

2006

- Cor da logo menos

explorada no site. Menu

passa a ser azul e a cor

laranja é usada para

destacar categorias nos

links laterais.

- Aparece mais um menu

horizontal com três

informações

possivelmente

consideradas mais

importantes: HOME,

Como Comprar, Fale

Conosco.

- Menu horizontal de

produtos ganha

dropdown.

- Rodapé ganha cor mais

neutra. Cores são usadas

para hierarquizar

destaque de informações.

2006

• Cor da logo menos explorada no site. Menu passa a ser azul e a cor

laranja é usada para destacar categorias nos links laterais.

• Rodapé ganha cor mais neutra. Cores são usadas para hierarquizar

destaque de informações.

• Aparece mais um menu horizontal com três informações possivelmente

consideradas mais importantes: HOME, Como Comprar, Fale Conosco.

• Menu horizontal de produtos, ganha dropdown.

2008

- Neste ano houve a

maior reformulação do

site, inclusive no logo da

empresa. Site maior,

mas amplo.

- Dispensa do botão

"Home" no menu

principal, utilização de

link na logo

- Destaque de notícias,

momento em que o

conteúdo começa a

ganhar importância

- Site clean, sem muitas

bordas e linhas e com

maior organização de

conteúdo. Utilização de

cores e imagens no

dropdown do menu.

- Utilização de fontes

pequenas em quase

toda a Home, para

melhor organização e

entendimento.

- Mouseover padrão

para o links.

- Maior destaque para

banner em flash com

informações de

responsabilidades e

sustentabilidade da

empresa. Empresa se

preocupa mais com

responsabilidade sócio

ambiental.

2008

• Neste ano houve a maior reformulação do site, inclusive no logo da empresa.

Site maior, mas amplo.

• Dispensa do botão "Home" no menu principal, utilização de link na logo.

• Maior destaque para banner em flash com informações de responsabilidades e

sustentabilidade da empresa. Empresa se preocupa mais com responsabilidade

sócio ambiental.

• Destaque de notícias, momento em que o conteúdo começa a ganhar importância

• Site clean, sem muitas bordas e linhas e com maior organização de conteúdo.

Utilização de cores e imagens no dropdown do menu.

• Utilização de fontes pequenas em quase toda a Home, para melhor organização e

entendimento.

• Mouseover padrão para o links.

2010

- Aparecimento do Blog,

como canal de novidades

da Xerox

2010

• Aparecimento do Blog, como canal de novidades da Xerox.

2011

- Mudança de Menu para

um formato que destaca

dois itens importantes:

Produtos e Serviços.

- Home mais estática,

apenas com a

movimentação do

banner, mas sem

utilização de Flash.

- Banner ocupa a maior

parte da Home.

- Diminuição de

informações em

destaques. Muitas

passaram para o rodapé

como link.

- Utilização de

bordas, como box e

links em imagens e

"call to action".

- Divulgação da

loja Virtual, o que

leva a crer que é

por esse motivo

que possui menos

informação em

destaque.

- Utilização do

termo "contato" no

menu.

2011

• Mudança de Menu para um formato que destaca dois itens importantes:

Produtos e Serviços.

• Home mais estática, apenas com a movimentação do banner, mas sem

utilização de Flash.

• Banner ocupa a maior parte da Home.

• Diminuição de informações em destaques. Muitas informações passaram

para o rodapé como link.

• Utilização de bordas, como box e links em imagens e "call to action".

• Divulgação da loja Virtual, o que leva a crer que é por esse motivo que

possui menos informação em destaque.

• Utilização do termo "contato" no menu.

• Divisão do site em parte branca e barra cinza, causa a impressão de

termino da Home.

2012

- Integração com redes

sociais e blog .

- Nota-se uma inversão

de “produtos” por

“serviços” na posição do

menu do site,

provavelmente por

algum resultado de teste.

2012

• Site passa a ser Integrado com redes sociais.

2013

- O site não foi

mais reformulado

este ano, mas

nota-se a inclusão

de imagem dos

produtos e

serviços no

menu, além de

links e botões

que levam direto

para a loja online

ou para busca de

loja física.

2013

• O site não foi mais reformulado este ano, mas nota-se a inclusão de

imagem dos produtos e serviços no menu, além de links e botões que

levam direto para a loja online ou para busca de loja física.

OBRIGADO!